dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #36277
[Branch ~dhis2-devs-core/dhis2/trunk] Rev 18582: tracker-capture: possibility to filter events in data entry widget
------------------------------------------------------------
revno: 18582
committer: Abyot Asalefew Gizaw <abyota@xxxxxxxxx>
branch nick: dhis2
timestamp: Wed 2015-03-11 12:21:40 +0100
message:
tracker-capture: possibility to filter events in data entry widget
modified:
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/dataentry-controller.js
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/dataentry.html
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/enrollment/enrollment-controller.js
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/i18n/i18n_app.properties
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/services.js
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/styles/style.css
--
lp:dhis2
https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk
Your team DHIS 2 developers is subscribed to branch lp:dhis2.
To unsubscribe from this branch go to https://code.launchpad.net/~dhis2-devs-core/dhis2/trunk/+edit-subscription
=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/dataentry-controller.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/dataentry-controller.js 2015-03-10 10:07:03 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/dataentry-controller.js 2015-03-11 11:21:40 +0000
@@ -1,6 +1,7 @@
trackerCapture.controller('DataEntryController',
function($scope,
$modal,
+ $filter,
DateUtils,
EventUtils,
orderByFilter,
@@ -10,13 +11,16 @@
OptionSetService,
ModalService,
CurrentSelection,
- CustomFormService) {
-
+ CustomFormService,
+ PeriodService) {
//Data entry form
$scope.dataEntryOuterForm = {};
$scope.displayCustomForm = false;
$scope.currentElement = {};
$scope.schedulingEnabled = false;
+ $scope.eventPeriods = [];
+ $scope.currentPeriod = [];
+ $scope.filterEvents = true;
var loginDetails = storage.get('LOGIN_DETAILS');
var storedBy = '';
@@ -60,7 +64,7 @@
$scope.selectedEnrollment = selections.selectedEnrollment;
$scope.optionSets = selections.optionSets;
- $scope.selectedProgramWithStage = [];
+ $scope.stagesById = [];
if($scope.selectedOrgUnit && $scope.selectedProgram && $scope.selectedProgram.id && $scope.selectedEntity && $scope.selectedEnrollment && $scope.selectedEnrollment.enrollment){
ProgramStageFactory.getByProgram($scope.selectedProgram).then(function(stages){
$scope.programStages = stages;
@@ -73,7 +77,7 @@
$scope.prStDes[prStDe.dataElement.id] = prStDe;
});
- $scope.selectedProgramWithStage[stage.id] = stage;
+ $scope.stagesById[stage.id] = stage;
$scope.eventsByStage[stage.id] = [];
});
$scope.getEvents();
@@ -93,7 +97,7 @@
});
}
- var eventStage = $scope.selectedProgramWithStage[dhis2Event.programStage];
+ var eventStage = $scope.stagesById[dhis2Event.programStage];
if(angular.isObject(eventStage)){
dhis2Event.name = eventStage.name;
@@ -152,6 +156,9 @@
templateUrl: 'components/dataentry/new-event.html',
controller: 'EventCreationController',
resolve: {
+ stagesById: function(){
+ return $scope.stagesById;
+ },
dummyEvent: function(){
return dummyEvent;
},
@@ -224,7 +231,7 @@
$scope.getDataEntryForm = function(){
- $scope.currentStage = $scope.selectedProgramWithStage[$scope.currentEvent.programStage];
+ $scope.currentStage = $scope.stagesById[$scope.currentEvent.programStage];
angular.forEach($scope.currentStage.programStageSections, function(section){
section.open = true;
@@ -667,18 +674,40 @@
return "width: " + width + '%';
};
+ $scope.sortEventsByDate = function(dhis2Event){
+ var d = dhis2Event.sortingDate;
+ return DateUtils.getDate(d);
+ };
+
var sortEventsByStage = function(){
- for(var key in $scope.eventsByStage){
- if($scope.eventsByStage.hasOwnProperty(key)){
- $scope.eventsByStage[key] = orderByFilter($scope.eventsByStage[key], '-sortingDate').reverse();
- $scope.totalEvents += $scope.eventsByStage[key].length <=1 ? 1:$scope.eventsByStage[key].length;
-
- console.log('the stage: ', key);
- angular.forEach($scope.eventsByStage[key], function(stage){
- console.log('event: ', stage.sortingDate);
- });
- }
- }
+ $scope.eventFilteringRequired = false;
+ for(var key in $scope.eventsByStage){
+ var stage = $scope.stagesById[key];
+ if($scope.eventsByStage.hasOwnProperty(key) && stage){
+ var sortedEvents = $filter('orderBy')($scope.eventsByStage[key], function(event) {
+ return DateUtils.getDate(event.sortingDate);
+ });
+ var periods = PeriodService.getPeriods(sortedEvents, stage);
+ $scope.eventPeriods[key] = periods;
+ $scope.currentPeriod[key] = periods.length > 0 ? periods[0] : null;
+ $scope.eventFilteringRequired = $scope.eventFilteringRequired ? $scope.eventFilteringRequired : periods.length > 1;
+ }
+ }
+ };
+
+ $scope.showDataEntryForEvent = function(period){
+ var event = null;
+ for(var i=0; i<$scope.eventsByStage[period.stage].length; i++){
+ if($scope.eventsByStage[period.stage][i].event === period.event){
+ event = $scope.eventsByStage[period.stage][i];
+ break;
+ }
+ }
+
+ if(event){
+ $scope.showDataEntry(event, false);
+ }
+
};
$scope.showMap = function(event){
@@ -711,9 +740,11 @@
DateUtils,
DHIS2EventFactory,
DialogService,
+ stagesById,
dummyEvent,
programId,
trackedEntityInstanceId){
+ $scope.stagesById = stagesById;
$scope.programStageId = dummyEvent.programStage;
$scope.programId = programId;
$scope.orgUnitId = dummyEvent.orgUnit;
@@ -724,7 +755,7 @@
$scope.dueDateInvalid = false;
$scope.eventDateInvalid = false;
- //watch for changes in eventDate
+ //watch for changes in due/event-date
$scope.$watchCollection('[dhis2Event.dueDate, dhis2Event.eventDate]', function() {
if(angular.isObject($scope.dhis2Event)){
if(!$scope.dhis2Event.dueDate){
@@ -765,8 +796,9 @@
notes: [],
dataValues: [],
status: 'ACTIVE'
- };
- newEvents.events.push(newEvent);
+ };
+ newEvents.events.push(newEvent);
+
DHIS2EventFactory.create(newEvents).then(function(data){
if (data.importSummaries[0].status === 'ERROR') {
var dialogOptions = {
@@ -781,6 +813,7 @@
$modalInstance.close(newEvent);
}
});
+
};
$scope.cancel = function(){
=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/dataentry.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/dataentry.html 2015-03-09 15:56:34 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/dataentry/dataentry.html 2015-03-11 11:21:40 +0000
@@ -3,7 +3,8 @@
{{dataentryWidget.title| translate}}
<span class="pull-right widget-link">
- <a href ng-click="toggleLegend()" title="{{'event_color_legend'| translate}}"><i class="fa fa-info-circle vertical-center"></i></a>
+ <a href ng-click="filterEvents = !filterEvents" title="{{filterEvents ? 'list_events' : 'filter_events' | translate}}" ng-show="eventFilteringRequired"><span ng-if="!filterEvents"><i class="fa fa-filter vertical-center"></i></span><span ng-if="filterEvents"><i class="fa fa-list vertical-center"></i></span></a>
+ <a href ng-click="toggleLegend()" title="{{'event_color_legend'| translate}}" class="small-horizonal-spacing"><i class="fa fa-info-circle vertical-center"></i></a>
<a class="small-horizonal-spacing" href ng-click="expandCollapse(dataentryWidget)">
<span ng-show="dataentryWidget.expand"><i class="fa fa-chevron-up vertical-center" title="{{'collapse'| translate}}"></i></span>
<span ng-show="!dataentryWidget.expand"><i class="fa fa-chevron-down vertical-center" title="{{'expand'| translate}}"></i></span>
@@ -20,7 +21,7 @@
<td ng-class="eventColor.color" ng-repeat="eventColor in eventColors">
<span class="bold">{{eventColor.description| translate}}</span>
</td>
- </tr>
+ </tr>
</table>
</div>
@@ -28,17 +29,21 @@
<table class="table table-bordered">
<thead>
<tr>
- <th class="active" ng-class="getColumnWidth(eventsByStage[stage.id].length)" ng-repeat="stage in programStages| orderBy:'sortOrder':reverse">
+ <th class="active" style="vertical-align:middle" ng-repeat="stage in programStages| orderBy:'sortOrder':reverse">
{{stage.name}}
+ <div ng-if="eventsByStage[stage.id].length > 1 && filterEvents" class="inline-block small-horizonal-spacing">
+ <select class="form-control-inline"
+ ng-model="currentPeriod[stage.id]"
+ ng-change="showDataEntryForEvent(currentPeriod[stage.id])"
+ ng-options="period.name for period in eventPeriods[stage.id]">
+ </select>
+ </div>
<!-- event add/filter icon begins -->
<span class='pull-right'>
<span ng-if="stageNeedsEvent(stage)">
- <a href title="{{'create_new_event'| translate}}" ng-click="showCreateEvent(stage)"><i class="fa fa-plus"></i></a>
+ <a href title="{{'create_new_event'| translate}}" ng-click="showCreateEvent(stage)" style="vertical-align:middle"><i class="fa fa-plus"></i></a>
</span>
- <span class="small-horizonal-spacing" ng-if="eventsByStage[stage.id].length > 1">
- <a href title="{{'filter'| translate}}"><i class="fa fa-search"></i></a>
- </span>
</span>
<!-- event add/filter icon ends -->
</th>
@@ -47,15 +52,15 @@
<tbody>
<tr>
<td ng-repeat="stage in programStages| orderBy:'sortOrder':reverse">
- <div class="inline-block" ng-repeat="dhis2Event in eventsByStage[stage.id]">
+ <div class="inline-block" ng-repeat="dhis2Event in eventsByStage[stage.id] | orderBy:sortEventsByDate:reverse">
<div class="event-container"
ng-class="getEventStyle(dhis2Event)"
+ ng-show="!currentPeriod[stage.id] || !filterEvents || currentPeriod[stage.id] && currentPeriod[stage.id].event === dhis2Event.event"
ng-click="showDataEntry(dhis2Event, false)">
{{dhis2Event.orgUnitName}}<br/>
{{dhis2Event.sortingDate}}<br>
- <span ng-if="eventsByStage[stage.id].length > 1">[{{$index + 1}}]</span>
+ <span ng-if="eventsByStage[stage.id].length > 1 && !filterEvents">[{{$index + 1}}]</span>
</div>
- <!--<i class="fa fa-arrow-right" ng-if="$index < eventsByStage[stage.id].length - 1"></i>-->
</div>
</td>
</tr>
=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/enrollment/enrollment-controller.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/enrollment/enrollment-controller.js 2015-03-09 16:23:47 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/enrollment/enrollment-controller.js 2015-03-11 11:21:40 +0000
@@ -47,9 +47,9 @@
if($scope.selectedProgram){
- $scope.selectedProgramWithStage = [];
+ $scope.stagesById = [];
angular.forEach($scope.selectedProgram.programStages, function(stage){
- $scope.selectedProgramWithStage[stage.id] = stage;
+ $scope.stagesById[stage.id] = stage;
});
angular.forEach($scope.enrollments, function(enrollment){
=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/i18n/i18n_app.properties'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/i18n/i18n_app.properties 2015-03-06 10:08:41 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/i18n/i18n_app.properties 2015-03-11 11:21:40 +0000
@@ -281,4 +281,18 @@
zoom_in=Zoom in
zoom_out=Zoom out
center_map=Center map
-capture_coordinate=Capture coordinate
\ No newline at end of file
+capture_coordinate=Capture coordinate
+filter_events=Filter events
+list_events=List all events
+jan=January
+feb=February
+mar=March
+apr=April
+may=May
+jun=June
+jul=July
+aug=August
+sep=September
+oct=October
+nov=November
+dec=December
\ No newline at end of file
=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/services.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/services.js 2015-03-10 08:12:33 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/services.js 2015-03-11 11:21:40 +0000
@@ -48,6 +48,62 @@
};
})
+/* current selections */
+.service('PeriodService', function($translate, CalendarService){
+
+ var calendarSetting = CalendarService.getSetting();
+ var months = [
+ $translate('jan'),
+ $translate('feb'),
+ $translate('mar'),
+ $translate('apr'),
+ $translate('may'),
+ $translate('jun'),
+ $translate('jul'),
+ $translate('aug'),
+ $translate('sep'),
+ $translate('oct'),
+ $translate('nov'),
+ $translate('dec')
+ ];
+
+ this.getMonths = function(){
+ return months;
+ };
+
+ this.getPeriods = function(events, stage){
+ var periods = [];
+ if(stage){
+ angular.forEach(events, function(event){
+ periods.push({event: event.event, name: event.sortingDate, stage: stage.id});
+ });
+ /*if(stage.standardInterval === 30){
+ angular.forEach(events, function(event){
+ var obj = {year: moment(event.sortingDate, calendarSetting.momentFormat).year(), month: moment(event.sortingDate, calendarSetting.momentFormat).month(), week: moment(event.sortingDate, calendarSetting.momentFormat).week(), day: moment(event.sortingDate, calendarSetting.momentFormat).day()};
+ periods.push({event: event.event, name: months[obj.month] + ' ' + obj.year, stage: stage.id});
+ });
+ }
+ else{
+ angular.forEach(events, function(event){
+ periods.push({event: event.event, name: event.sortingDate, stage: stage.id});
+ });
+ }*/
+ }
+
+ return periods;
+ };
+
+
+ this.splitDate = function(dateValue){
+ if(!dateValue){
+ return;
+ }
+ var calendarSetting = CalendarService.getSetting();
+
+ return {year: moment(dateValue, calendarSetting.momentFormat).year(), month: moment(dateValue, calendarSetting.momentFormat).month(), week: moment(dateValue, calendarSetting.momentFormat).week(), day: moment(dateValue, calendarSetting.momentFormat).day()};
+ };
+})
+
/* Factory to fetch optionSets */
.factory('OptionSetService', function($q, $rootScope, TCStorageService) {
return {
=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/styles/style.css'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/styles/style.css 2015-03-05 15:48:50 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/styles/style.css 2015-03-11 11:21:40 +0000
@@ -89,6 +89,8 @@
.vertical-center {
line-height: inherit;
+ vertical-align: middle;
+
}
.empty-event-container {
@@ -463,6 +465,7 @@
padding-left: 5px;
padding-right: 5px;
}
+
.advanced-search-container-main {
width: 100%;
float: left;
@@ -668,6 +671,21 @@
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
+.form-control-inline {
+ color: #555;
+ padding: 6px 6px;
+ vertical-align: middle;
+ background-color: #fff;
+ background-image: none;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
+ box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
+ -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+ transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
+}
+
+
.form-control-program {
width: 40%;
height: 34px;
@@ -711,6 +729,29 @@
background-color: #eee
}
+.form-control-inline:focus {
+ border-color: #66afe9;
+ outline: 0;
+ -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(102,175,233,0.6);
+ box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(102,175,233,0.6)
+}
+.form-control-inline:-moz-placeholder {
+ color: #999
+}
+.form-control-inline::-moz-placeholder {
+ color: #999
+}
+.form-control-inline:-ms-input-placeholder {
+ color: #999
+}
+.form-control-inline::-webkit-input-placeholder {
+ color: #999
+}
+.form-control-inline[disabled], .form-control-inline[readonly], fieldset[disabled] .form-control-inline {
+ cursor: not-allowed;
+ background-color: #eee
+}
+
.form-control-select2 {
display: block;
width: 100%;
