dhis2-devs team mailing list archive
-
dhis2-devs team
-
Mailing list archive
-
Message #28593
[Branch ~dhis2-devs-core/dhis2/trunk] Rev 14288: server side pagination for event-capture app
------------------------------------------------------------
revno: 14288
committer: Abyot Asalefew Gizaw abyota@xxxxxxxxx
branch nick: dhis2
timestamp: Wed 2014-03-19 09:22:59 +0100
message:
server side pagination for event-capture app
removed:
dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/views/pagination.html
added:
dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/views/serverside-pagination.html
modified:
dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/index.html
dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/controllers.js
dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/directives.js
dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/event-capture.js
dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/filters.js
dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-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-event-capture/src/main/webapp/dhis-web-event-capture/index.html'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/index.html 2014-03-18 10:09:53 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/index.html 2014-03-19 08:22:59 +0000
@@ -1,5 +1,6 @@
<!DOCTYPE html>
-<html manifest="event-capture.appcache" ng-app="eventCapture">
+<!--<html manifest="event-capture.appcache" ng-app="eventCapture">-->
+<html ng-app="eventCapture">
<head>
<title>Event Capture</title>
@@ -44,7 +45,7 @@
<script type="text/javascript" src="../dhis-web-commons/javascripts/dhis2/dhis2.storage.memory.js"></script>
<script type="text/javascript" src="../dhis-web-commons/javascripts/dhis2/dhis2.storage.js"></script>
<script type="text/javascript" src="../dhis-web-commons/javascripts/dhis2/dhis2.contextmenu.js"></script>
- <script type="text/javascript" src="../dhis-web-commons/javascripts/dhis2/dhis2.appcache.js"></script>
+ <!--<script type="text/javascript" src="../dhis-web-commons/javascripts/dhis2/dhis2.appcache.js"></script>-->
<script type="text/javascript" src="../dhis-web-commons/ouwt/ouwt.js"></script>
<script type="text/javascript" src="../dhis-web-commons/javascripts/angular/plugins/angularLocalStorage.js"></script>
@@ -231,7 +232,7 @@
</tr>
</thead>
<tbody id="list">
- <tr ng-repeat="dhis2Event in dhis2Events | paginate:rowsPerPage | orderBy:sortHeader:reverse | gridFilter:filterText:programStageDataElements"
+ <tr ng-repeat="dhis2Event in dhis2Events | orderBy:sortHeader:reverse | gridFilter:filterText:programStageDataElements"
ng-click="showContextMenu(dhis2Event)">
<!-- Visible when event is not under editing -->
@@ -260,7 +261,7 @@
name="foo"
style="width:98%;"
ng-class="{true: 'input-error', false: 'input-success'} [outerForm.submitted]"/>
- <!--ng-class="{'input-error': (outerForm.submitted && innerFormGrid.foo.$invalid), 'input-success': (outerForm.submitted && innerFormGrid.foo.$valid)}/>"-->
+
<span ng-show="outerForm.submitted && innerFormGrid.foo.$invalid" class="red">{{'required'| translate}}</span>
</div>
<div ng-switch-when="string">
@@ -301,10 +302,7 @@
<span ng-show="outerForm.submitted && innerFormGrid.foo.$invalid" class="red">{{'required'| translate}}</span>
</div>
</div>
- </ng-form>
- <!--<span ng-show="(currentEvent.event == dhis2Event.event) && (($index +1 ) === eventGridColumns.length)">
- <a href ng-click="showEventList()" title="{{'close_editing'| translate}}"><span class='black'><i class="fa fa-times-circle-o fa-2x"></i></span></a>
- </span>-->
+ </ng-form>
</td>
<td>
<span ng-show="currentEvent.event == dhis2Event.event">
@@ -314,7 +312,7 @@
</tr>
</tbody>
</table>
- <paginator></paginator>
+ <serverside-paginator></serverside-paginator>
</form>
<!-- grid ends -->
</div>
@@ -507,8 +505,8 @@
<button ng-click="showEventList(null)" class="button">{{'close'| translate}}</button>
</form>
</div>
- </div>
- <!-- event registration ends -->
+ </div>
+ <!-- event registration ends -->
</div>
</div>
=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/controllers.js'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/controllers.js 2014-03-09 14:44:43 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/controllers.js 2014-03-19 08:22:59 +0000
@@ -20,8 +20,8 @@
$scope.selectedOrgUnit = '';
//Paging
- $scope.rowsPerPage = 50;
- $scope.currentPage = Paginator.getPage() + 1;
+ $scope.pager = {pageSize: 50, page: 1, toolBarDisplay: 5};
+
//Filtering
$scope.reverse = false;
@@ -82,7 +82,7 @@
if($scope.programs.length === 1){
$scope.selectedProgram = $scope.programs[0];
$scope.pr = $scope.selectedProgram;
- $scope.loadEvents($scope.pr);
+ $scope.loadEvents($scope.pr, $scope.pager);
}
}
}
@@ -90,7 +90,7 @@
};
//get events for the selected program (and org unit)
- $scope.loadEvents = function(program){
+ $scope.loadEvents = function(program, pager){
//$scope.dhis2Events = [];
@@ -122,8 +122,20 @@
});
//Load events for the selected program stage and orgunit
- DHIS2EventFactory.getByStage($scope.selectedOrgUnit.id, $scope.selectedProgramStage.id).then(function(data){
- $scope.dhis2Events = data;
+ DHIS2EventFactory.getByStage($scope.selectedOrgUnit.id, $scope.selectedProgramStage.id, pager ).then(function(data){
+
+ $scope.dhis2Events = data.events;
+
+ if( data.pager ){
+ $scope.pager = data.pager;
+ $scope.pager.toolBarDisplay = 5;
+
+ Paginator.setPage($scope.pager.page);
+ Paginator.setPageCount($scope.pager.pageCount);
+ Paginator.setPageSize($scope.pager.pageSize);
+ Paginator.setItemCount($scope.pager.total);
+
+ }
//process event list for easier tabular sorting
//angular.forEach($scope.dhis2Events, function(dhis2Event){
@@ -164,9 +176,18 @@
}
};
- $scope.jumpToPage = function(page){
- $scope.currentPage = page;
- Paginator.setPage($scope.currentPage - 1);
+ $scope.jumpToPage = function(){
+ $scope.loadEvents($scope.selectedProgram, $scope.pager);
+ };
+
+ $scope.resetPageSize = function(){
+ $scope.pager.page = 1;
+ $scope.loadEvents($scope.selectedProgram, $scope.pager);
+ };
+
+ $scope.getPage = function(page){
+ $scope.pager.page = page;
+ $scope.loadEvents($scope.selectedProgram, $scope.pager);
};
$scope.sortEventGrid = function(gridHeader){
=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/directives.js'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/directives.js 2014-03-09 14:44:43 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/directives.js 2014-03-19 08:22:59 +0000
@@ -195,13 +195,23 @@
};
})
-.directive('paginator', function factory() {
- return {
- restrict: 'E',
- controller: function ($scope, Paginator) {
- $scope.paginator = Paginator;
- },
- templateUrl: 'views/pagination.html'
+.directive('serversidePaginator', function factory() {
+ return {
+ restrict: 'E',
+ controller: function ($scope, Paginator) {
+ $scope.paginator = Paginator;
+ },
+ templateUrl: 'views/serverside-pagination.html'
+ };
+})
+
+.directive('clientsidePaginator', function factory() {
+ return {
+ restrict: 'E',
+ controller: function ($scope, Paginator) {
+ $scope.paginator = Paginator;
+ },
+ templateUrl: 'views/clientside-pagination.html'
};
});
=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/event-capture.js'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/event-capture.js 2014-03-07 17:20:21 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/event-capture.js 2014-03-19 08:22:59 +0000
@@ -123,7 +123,7 @@
}
});
- dhis2.availability.startAvailabilityCheck();
+ //dhis2.availability.startAvailabilityCheck();
});
=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/filters.js'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/filters.js 2014-03-05 11:07:39 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/filters.js 2014-03-19 08:22:59 +0000
@@ -68,7 +68,7 @@
if (rowsPerPage) {
Paginator.rowsPerPage = rowsPerPage;
- }
+ }
Paginator.itemCount = input.length;
=== modified file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/services.js'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/services.js 2014-03-18 10:09:53 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/scripts/services.js 2014-03-19 08:22:59 +0000
@@ -88,25 +88,13 @@
.factory('DHIS2EventFactory', function($http) {
return {
-
- getByPerson: function(person, orgUnit, program){
- var promise = $http.get('../api/events.json?' + 'person=' + person + '&orgUnit=' + orgUnit + '&program=' + program + '&paging=false').then(function(response){
- return response.data.eventList;
- });
- return promise;
- },
-
- getByStage: function(orgUnit, programStage){
- var promise = $http.get('../api/events.json?' + 'orgUnit=' + orgUnit + '&programStage=' + programStage + '&paging=false')
- //var promise = $http.get('../api/events.json?' + 'orgUnit=' + orgUnit + '&programStage=' + programStage )
- .then(function(response){
-
- return response.data.eventList;
-
- }, function(){
-
- return dhis2.ec.storageManager.getEvents(orgUnit, programStage);
-
+ getByStage: function(orgUnit, programStage, pager){
+ var url = '../api/events.json?' + 'orgUnit=' + orgUnit + '&programStage=' + programStage + '&pageSize=' + pager.pageSize + '&page=' + pager.page;
+
+ var promise = $http.get( url ).then(function(response){
+ return response.data;
+ }, function(){
+ return dhis2.ec.storageManager.getEvents(orgUnit, programStage);
});
return promise;
@@ -114,8 +102,7 @@
get: function(eventUid){
var promise = $http.get('../api/events/' + eventUid + '.json').then(function(response){
- return response.data;
-
+ return response.data;
}, function(){
return dhis2.ec.storageManager.getEvent(eventUid);
});
@@ -295,13 +282,14 @@
/* Pagination service */
.service('Paginator', function () {
- this.page = 0;
- this.rowsPerPage = 50;
+ this.page = 1;
+ this.pageSize = 50;
this.itemCount = 0;
- this.limitPerPage = 5;
+ this.pageCount = 0;
+ this.toolBarDisplay = 5;
this.setPage = function (page) {
- if (page > this.pageCount()) {
+ if (page > this.getPageCount()) {
return;
}
@@ -312,59 +300,42 @@
return this.page;
};
- this.getRowsPerPage = function(){
- return this.rowsPerPage;
- };
-
- this.nextPage = function () {
- if (this.isLastPage()) {
- return;
- }
-
- this.page++;
- };
-
- this.perviousPage = function () {
- if (this.isFirstPage()) {
- return;
- }
-
- this.page--;
- };
-
- this.firstPage = function () {
- this.page = 0;
- };
-
- this.lastPage = function () {
- this.page = this.pageCount() - 1;
- };
-
- this.isFirstPage = function () {
- return this.page == 0;
- };
-
- this.isLastPage = function () {
- return this.page == this.pageCount() - 1;
- };
-
- this.pageCount = function () {
- var count = Math.ceil(parseInt(this.itemCount, 10) / parseInt(this.rowsPerPage, 10));
- if (count === 1) { this.page = 0; } return count;
+ this.setPageSize = function(pageSize){
+ this.pageSize = pageSize;
+ };
+
+ this.getPageSize = function(){
+ return this.pageSize;
+ };
+
+ this.setItemCount = function(itemCount){
+ this.itemCount = itemCount;
+ };
+
+ this.getItemCount = function(){
+ return this.itemCount;
+ };
+
+ this.setPageCount = function(pageCount){
+ this.pageCount = pageCount;
+ };
+
+ this.getPageCount = function () {
+ return this.pageCount;
};
this.lowerLimit = function() {
- var pageCountLimitPerPageDiff = this.pageCount() - this.limitPerPage;
+ var pageCountLimitPerPageDiff = this.getPageCount() - this.toolBarDisplay;
if (pageCountLimitPerPageDiff < 0) {
return 0;
}
- if (this.page > pageCountLimitPerPageDiff + 1) {
+ if (this.getPage() > pageCountLimitPerPageDiff + 1) {
return pageCountLimitPerPageDiff;
}
- var low = this.page - (Math.ceil(this.limitPerPage/2) - 1);
+ var low = this.getPage() - (Math.ceil(this.toolBarDisplay/2) - 1);
return Math.max(low, 0);
};
=== removed file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/views/pagination.html'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/views/pagination.html 2014-03-05 11:07:39 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/views/pagination.html 1970-01-01 00:00:00 +0000
@@ -1,53 +0,0 @@
-<div class="paging-container">
- <table style="background-color: #ebf0f6;" width='100%'>
- <tr>
- <td>
- {{'total_number_of_pages'| translate}}: {{paginator.pageCount()}}
- </td>
- <td>
- <span>{{'rows_per_page'| translate}}:</span> <input type="text" style="width:50px;" ng-model="rowsPerPage">
- </td>
- <td>
- <span>{{'jump_to_page'| translate}}:</span> <input type="text" style="width:50px;" ng-model="currentPage" value="{{paginator.page + 1}}" ng-blur="jumpToPage(currentPage)">
- </td>
- </tr>
- <tr>
- <td colspan="3"><hr/></td>
- </tr>
- <tr>
- <td colspan="3">
- <div class="paging">
- <span ng-show="(paginator.getPage() + 1) > 1">
- <a href ng-click="paginator.firstPage()" title="{{'first'| translate}}">
- ««
- </a>
- <a href ng-click="paginator.perviousPage()" title="{{'previous'| translate}}">
- «
- </a>
- </span>
- <span ng-hide="(paginator.getPage() + 1) > 1">
- <span title="{{'first'| translate}}">««</span>
- <span title="{{'previous'| translate}}">«</span>
- </span>
- <a href ng-click="paginator.setPage(i)" title="{{'page'| translate}} {{i + 1}}" ng-repeat="i in []| forLoop:paginator.lowerLimit():paginator.pageCount() | limitTo : paginator.limitPerPage" ng-class="paginator.getPage() == i && 'active'">
- {{i + 1}}
- </a>
-
- <span ng-show="(paginator.getPage() + 1) < paginator.pageCount()">
- <a href ng-click="paginator.nextPage()" title="{{'next'| translate}}" >
- »
- </a>
- <a href ng-click="paginator.lastPage()" title="{{'last'| translate}}">
- »»
- </a>
- </span>
- <span ng-hide="(paginator.getPage() + 1) < paginator.pageCount()">
- <span class="next" title="{{'next'| translate}}">» </span>
- <span class="last" title="{{'last'| translate}}">»»</span>
- </span>
-
- </div>
- </td>
- </tr>
- </table>
-</div>
\ No newline at end of file
=== added file 'dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/views/serverside-pagination.html'
--- dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/views/serverside-pagination.html 1970-01-01 00:00:00 +0000
+++ dhis-2/dhis-web/dhis-web-event-capture/src/main/webapp/dhis-web-event-capture/views/serverside-pagination.html 2014-03-19 08:22:59 +0000
@@ -0,0 +1,52 @@
+<div class="paging-container">
+ <table style="background-color: #ebf0f6;" width='100%'>
+ <tr>
+ <td>
+ {{'total_number_of_pages'| translate}}: {{pager.pageCount}}
+ </td>
+ <td>
+ <span>{{'rows_per_page'| translate}}:</span> <input type="text" style="width:50px;" ng-model="pager.pageSize" ng-blur="resetPageSize()">
+ </td>
+ <td>
+ <span>{{'jump_to_page'| translate}}:</span> <input type="text" style="width:50px;" ng-model="pager.page" ng-blur="jumpToPage()">
+ </td>
+ </tr>
+ <tr>
+ <td colspan="3"><hr/></td>
+ </tr>
+ <tr>
+ <td colspan="3">
+ <div class="paging">
+ <span ng-show="pager.page > 1">
+ <a href ng-click="getPage(1)" title="{{'first'| translate}}">
+ ««
+ </a>
+ <a href ng-click="getPage(pager.page - 1)" title="{{'previous'| translate}}">
+ «
+ </a>
+ </span>
+ <span ng-hide="pager.page > 1">
+ <span title="{{'first'| translate}}">««</span>
+ <span title="{{'previous'| translate}}">«</span>
+ </span>
+ <a href ng-click="getPage(i+1)" title="{{'page'| translate}} {{i + 1}}" ng-repeat="i in []| forLoop:paginator.lowerLimit():pager.pageCount | limitTo : pager.toolBarDisplay" ng-class="pager.page == i + 1 && 'active'">
+ {{i + 1}}
+ </a>
+
+ <span ng-show="pager.page < pager.pageCount">
+ <a href ng-click="getpage(pager.page + 1)" title="{{'next'| translate}}" >
+ »
+ </a>
+ <a href ng-click="getPage(pager.pageCount)" title="{{'last'| translate}}">
+ »»
+ </a>
+ </span>
+ <span ng-hide="pager.page < pager.pageCount">
+ <span class="next" title="{{'next'| translate}}">» </span>
+ <span class="last" title="{{'last'| translate}}">»»</span>
+ </span>
+ </div>
+ </td>
+ </tr>
+ </table>
+</div>
\ No newline at end of file
