dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #32690
[Branch ~dhis2-devs-core/dhis2/trunk] Rev 16666: tracker capture - grid based sorting and filtering for upcoming events
------------------------------------------------------------
revno: 16666
committer: Abyot Asalefew Gizaw <abyota@xxxxxxxxx>
branch nick: dhis2
timestamp: Tue 2014-09-09 12:44:12 +0200
message:
tracker capture - grid based sorting and filtering for upcoming events
modified:
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/report/upcoming-events-controller.js
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/report/upcoming-events.html
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/filters.js
dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/services.js
--
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/report/upcoming-events-controller.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/report/upcoming-events-controller.js 2014-09-08 16:06:40 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/report/upcoming-events-controller.js 2014-09-09 10:44:12 +0000
@@ -1,6 +1,7 @@
trackerCapture.controller('UpcomingEventsController',
function($scope,
$modal,
+ orderByFilter,
DateUtils,
EventUtils,
TEIService,
@@ -44,7 +45,7 @@
$scope.$watch('selectedProgram', function() {
if( angular.isObject($scope.selectedProgram)){
$scope.reportFinished = false;
- $scope.dataReady = false;
+ $scope.reportStarted = false;
}
});
@@ -61,15 +62,24 @@
}
$scope.reportFinished = false;
- $scope.dataReady = false;
+ $scope.reportStarted = true;
$scope.programStages = [];
+ $scope.filterTypes = {};
+ $scope.filterText = {};
angular.forEach($scope.selectedProgram.programStages, function(stage){
$scope.programStages[stage.id] = stage;
});
AttributesFactory.getByProgram($scope.selectedProgram).then(function(atts){
- $scope.gridColumns = TEIGridService.generateGridColumns(atts, $scope.selectedOuMode.name);
+ $scope.gridColumns = TEIGridService.generateGridColumns(atts, $scope.selectedOuMode.name);
+
+ $scope.gridColumns.push({name: 'upcoming_event', id: 'upcoming_event', type: 'string', displayInListNoProgram: false, showFilter: false, show: true});
+ $scope.filterTypes['upcoming_event'] = 'string';
+
+ $scope.gridColumns.push({name: 'due_date', id: 'due_date', type: 'date', displayInListNoProgram: false, showFilter: false, show: true});
+ $scope.filterTypes['due_date'] = 'date';
+ $scope.filterText['due_date']= {};
});
//fetch TEIs for the selected program and orgunit/mode
@@ -118,8 +128,21 @@
}
}
});
+
+ //incase a TEI happens to have more than one overdue, sort using duedate
+ for(var tei in $scope.dhis2Events){
+ $scope.dhis2Events[tei] = orderByFilter($scope.dhis2Events[tei], '-dueDate');
+ $scope.dhis2Events[tei].reverse();
+ }
+
+ //make upcoming event name and its due date part of the grid column
+ for(var i=0; i<$scope.teiList.length; i++){
+ $scope.teiList[i].upcoming_event = $scope.dhis2Events[$scope.teiList[i].id][0].name;
+ $scope.teiList[i].due_date = $scope.dhis2Events[$scope.teiList[i].id][0].dueDate;
+ }
+
$scope.reportFinished = true;
- $scope.dataReady = true;
+ $scope.reportStarted = false;
});
});
};
@@ -161,4 +184,28 @@
$scope.sortHeader = gridHeader.id;
$scope.reverse = false;
};
+
+ $scope.searchInGrid = function(gridColumn){
+
+ $scope.currentFilter = gridColumn;
+
+ for(var i=0; i<$scope.gridColumns.length; i++){
+
+ //toggle the selected grid column's filter
+ if($scope.gridColumns[i].id === gridColumn.id){
+ $scope.gridColumns[i].showFilter = !$scope.gridColumns[i].showFilter;
+ }
+ else{
+ $scope.gridColumns[i].showFilter = false;
+ }
+ }
+ };
+
+ $scope.removeStartFilterText = function(gridColumnId){
+ $scope.filterText[gridColumnId].start = undefined;
+ };
+
+ $scope.removeEndFilterText = function(gridColumnId){
+ $scope.filterText[gridColumnId].end = undefined;
+ };
});
\ No newline at end of file
=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/report/upcoming-events.html'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/report/upcoming-events.html 2014-09-08 16:06:40 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/components/report/upcoming-events.html 2014-09-09 10:44:12 +0000
@@ -19,7 +19,7 @@
</div>
<div id="mainPage" class="page">
- <!--<h2>{{'upcoming_events'| translate}}</h2>-->
+
<!-- top bar begins -->
<div class="row top-bar">
<div class="col-sm-12">
@@ -38,11 +38,16 @@
</div>
<!-- top bar ends -->
+ <!--input form begins -->
<form name="outerForm" novalidate>
<div ng-include="'components/report/reportForm.html'"></div>
</form>
- <img src="../images/ajax-loader-bar.gif" ng-if="!dataReady && reportFinished"/>
- <div ng-if="dataReady">
+ <!--input form ends -->
+
+ <img src="../images/ajax-loader-bar.gif" ng-if="reportStarted && !reportFinished"/>
+
+ <!-- upcoming events list begins -->
+ <div ng-if="reportFinished">
<div ng-switch="teiList.length">
<div ng-switch-when="undefined">
<div class="alert alert-warning vertical-spacing">
@@ -61,28 +66,61 @@
<table class="listTable dhis2-table-striped-border dhis2-table-hover">
<thead>
<tr>
- <th ng-show="gridColumn.show" ng-repeat="gridColumn in gridColumns" ng-click="sortTEIGrid(gridColumn)">
- {{gridColumn.name}}
- <i ng-if="sortHeader == gridColumn.id && reverse" class="fa fa-sort-desc"></i>
- <i ng-if="sortHeader == gridColumn.id && !reverse" class="fa fa-sort-asc"></i>
+ <th ng-show="gridColumn.show" ng-repeat="gridColumn in gridColumns">
+
+ <!-- sort icon begins -->
+ <span ng-click="sortTEIGrid(gridColumn)">
+ {{gridColumn.name | translate}}
+ <i ng-if="sortHeader == gridColumn.id && reverse" class="fa fa-sort-desc"></i>
+ <i ng-if="sortHeader == gridColumn.id && !reverse" class="fa fa-sort-asc"></i>
+ </span>
+ <!-- sort icon ends -->
+
+ <!-- filter icon begins -->
+ <span class='pull-right'>
+ <span ng-show="gridColumn.type !='date' && gridColumn.type !='int'">
+ <a href ng-click="searchInGrid(gridColumn)" title="{{'search'| translate}}"><span ng-class="{true: 'filter-without-content', false: 'filter-with-content'} [filterText[gridColumn.id] == undefined || filterText[gridColumn.id] == '']"><i class="fa fa-search"></i></span></a>
+ </span>
+ <span ng-show="gridColumn.type ==='date' || gridColumn.type ==='int'">
+ <a href ng-click="searchInGrid(gridColumn)" title="{{'search'| translate}}"><span ng-class="{true: 'filter-without-content', false: 'filter-with-content'} [(filterText[gridColumn.id].start == undefined || filterText[gridColumn.id].start == '') && (filterText[gridColumn.id].end == undefined || filterText[gridColumn.id].end == '')]"><i class="fa fa-search"></i></span></a>
+ </span>
+ </span>
+ <!-- filter icon ends -->
+
+ <!-- filter input field begins -->
+ <span ng-show="gridColumn.showFilter">
+ <span ng-switch="gridColumn.type">
+ <span ng-switch-when="int">
+ <input style="width: 45%;" placeholder="{{'lower_limit' | translate}}" type="number" ng-model="filterText[gridColumn.id].start" ng-blur="searchInGrid(gridColumn)">
+ <input style="width: 45%;" placeholder="{{'upper_limit' | translate}}" type="number" ng-model="filterText[gridColumn.id].end" ng-blur="searchInGrid(gridColumn)">
+ </span>
+ <span ng-switch-when="date">
+ <input style="width: 70%;" placeholder="{{'start_date' | translate}}" type="text" ng-model="filterText[gridColumn.id].start" data-ng-date readonly="readonly">
+ <span ng-hide="filterText[gridColumn.id].start == undefined || filterText[gridColumn.id].start == ''">
+ <a href ng-click='removeStartFilterText(gridColumn.id)'><span class='black'><i class="fa fa-trash-o"></i></span></a>
+ </span>
+ <input style="width: 70%;" placeholder="{{'end_date' | translate}}" type="text" ng-model="filterText[gridColumn.id].end" data-ng-date readonly="readonly">
+ <span ng-hide="filterText[gridColumn.id].end == undefined || filterText[gridColumn.id].end == ''">
+ <a href ng-click='removeEndFilterText(gridColumn.id)'><span class='black'><i class="fa fa-trash-o"></i></span></a>
+ </span>
+ </span>
+ <span ng-switch-default>
+ <input type="text" style="width: 90%;" ng-model="filterText[gridColumn.id]" ng-blur="searchInGrid(gridColumn)">
+ </span>
+ </span>
+ </span>
+ <!-- filter input field ends -->
+
</th>
- <th>
- {{'upcoming_event' | translate}}
- </th>
</tr>
</thead>
<tbody id="list">
- <tr ng-repeat="tei in teiList | orderBy:sortHeader:reverse"
+ <tr ng-repeat="tei in teiList | orderBy:sortHeader:reverse | gridFilter:filterText:filterTypes"
ng-click="showDashboard(trackedEntity)"
title="{{'go_to_dashboard'| translate}}">
<td ng-show="gridColumn.show"
ng-repeat="gridColumn in gridColumns">
{{tei[gridColumn.id]}}
- </td>
- <td>
- <span ng-repeat="ev in dhis2Events[tei.id] | orderBy: 'dueDate' | limitTo:1">
- {{ev.name}} / {{ev.dueDate}}
- </span>
</td>
</tr>
</tbody>
@@ -92,4 +130,5 @@
</div>
</div>
</div>
+ <!-- upcoming events list ends -->
</div>
\ No newline at end of file
=== modified file 'dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/filters.js'
--- dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/filters.js 2014-06-30 13:16:30 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/filters.js 2014-09-09 10:44:12 +0000
@@ -4,63 +4,71 @@
var trackerCaptureFilters = angular.module('trackerCaptureFilters', [])
-.filter('gridFilter', function(){
+.filter('gridFilter', function($filter){
- return function(data, filterText, currentFilter){
-
+ return function(data, filters, filterTypes){
+
if(!data ){
return;
}
- if(!filterText){
+ if(!filters){
return data;
}
else{
- var keys = [];
- var filteredData = data;
+ var dateFilter = {},
+ textFilter = {},
+ numberFilter = {},
+ filteredData = data;
- for(var key in filterText){
- keys.push(key);
+ for(var key in filters){
- for(var i=0; i<filteredData.length; i++){
-
- var val = filteredData[i][key];
-
- if( currentFilter.type === 'date'){
-
- if( filterText[key].start || filterText[key].end){
- var start = moment(filterText[key].start, 'YYYY-MM-DD');
- var end = moment(filterText[key].end, 'YYYY-MM-DD');
- var date = moment(val, 'YYYY-MM-DD');
-
- if( ( Date.parse(date) > Date.parse(end) ) || (Date.parse(date) < Date.parse(start)) ){
- filteredData.splice(i,1);
- i--;
- }
- }
-
- }
- else{
- if( currentFilter.type === 'int'){
- val = val.toString();
- }
-
- val = val.toLowerCase();
- if( val.indexOf(filterText[key].toLowerCase()) === -1 ){
- filteredData.splice(i,1);
- i--;
- }
- }
-
- }
- }
+ if(filterTypes[key] === 'date'){
+ if(filters[key].start || filters[key].end){
+ dateFilter[key] = filters[key];
+ }
+ }
+ else if(filterTypes[key] === 'int'){
+ if(filters[key].start || filters[key].end){
+ numberFilter[key] = filters[key];
+ }
+ }
+ else{
+ textFilter[key] = filters[key];
+ }
+ }
+
+ filteredData = $filter('filter')(filteredData, textFilter);
+ filteredData = $filter('filter')(filteredData, dateFilter, dateComparator);
+ filteredData = $filter('filter')(filteredData, numberFilter, numberComparator);
+
return filteredData;
}
- };
+ };
+
+ function dateComparator(data,filter){
+ var start = moment(filter.start, 'YYYY-MM-DD');
+ var end = moment(filter.end, 'YYYY-MM-DD');
+ var date = moment(data, 'YYYY-MM-DD');
+
+ if(filter.start && filter.end){
+ return ( Date.parse(date) <= Date.parse(end) ) && (Date.parse(date) >= Date.parse(start));
+ }
+ return ( Date.parse(date) <= Date.parse(end) ) || (Date.parse(date) >= Date.parse(start));
+ }
+
+ function numberComparator(data,filter){
+ var start = filter.start;
+ var end = filter.end;
+
+ if(filter.start && filter.end){
+ return ( data <= end ) && ( data >= start );
+ }
+ return ( data <= end ) || ( data >= start );
+ }
})
-
.filter('paginate', function(Paginator) {
return function(input, rowsPerPage) {
if (!input) {
=== 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 2014-09-08 13:35:02 +0000
+++ dhis-2/dhis-web/dhis-web-apps/src/main/webapp/dhis-web-tracker-capture/scripts/services.js 2014-09-09 10:44:12 +0000
@@ -1117,8 +1117,8 @@
var columns = attributes ? angular.copy(attributes) : [];
//also add extra columns which are not part of attributes (orgunit for example)
- columns.push({id: 'orgUnitName', name: 'Registering unit', type: 'string', displayInListNoProgram: false});
- columns.push({id: 'created', name: 'Registration date', type: 'string', displayInListNoProgram: false});
+ columns.push({id: 'orgUnitName', name: 'registering_unit', type: 'string', displayInListNoProgram: false});
+ columns.push({id: 'created', name: 'registration_date', type: 'date', displayInListNoProgram: false});
//generate grid column for the selected program/attributes
angular.forEach(columns, function(column){
@@ -1128,7 +1128,8 @@
if(column.displayInListNoProgram || column.displayInList){
column.show = true;
- }
+ }
+ column.showFilter = false;
});
return columns;
