adding pagination UI

client/controllers/apps.js

@@ -11,24 +11,31 @@ myApp.controller('AppsController', ['$scope', '$http', '$location', '$routeParam
 	$scope.reputationHTI = false;
 	$scope.spHTI = false;
 	$scope.finalHTI = false;
+	$scope.total = 0;
 
 	$scope.getApps = function(){
 
 		angular.element('*[id^="tviz"]').remove();
 
+		$scope.numPerPage = 10;
 		var genre = $routeParams.genre;
 		var page = $routeParams.page;
 		var query = "";
 		if(genre) {
 			query += "/?genre=" + genre;
 		}
+		if(page) {
+			$scope.currentPage = page;
+		}
 		if(query != "" && page) {
 			query += "&page=" + page;
 		} else if(query == "" && page) {
 			query += "/?page=" + page;
 		}
 		$http.get('/crawler/downloadedapps' + query).then(function(response){
-			$scope.apps = response.data;
+			$scope.apps = response.data.apps;
+			$scope.total = response.data.total;
+			$scope.noOfPages = Math.ceil(total / $scope.numPerPage);
 		});
 	}
 

client/directives/pagination.html

@@ -0,0 +1,13 @@
+<div class="pagination">
+    <ul>
+        <!-- <li ng-class="{disabled: noPrevious()}">
+            <a ng-click="selectPrevious()">Previous</a>
+        </li> -->
+        <li ng-repeat="page in pages" ng-class="{active: isActive(page)}">
+            <a ng-click="selectPage(page)">{{page}}</a>
+        </li>
+        <!-- <li ng-class="{disabled: noNext()}">
+            <a ng-click="selectNext()">Next</a>
+        </li> -->
+    </ul>
+</div>

client/directives/pagination.js

@@ -0,0 +1,55 @@
+var myApp = angular.module('myApp');
+
+myApp.directive('pagination', function () {
+	return {
+		restrict: 'E',
+		scope: {
+			numPages: '=',
+			currentPage: '=',
+			onSelectPage: '&'
+		},
+		templateUrl: 'pagination.html',
+		replace: true,
+		link: function (scope, location) {
+			scope.$watch('numPages', function (value) {
+				scope.pages = [];
+				for (var i = 1; i <= value; i++) {
+					scope.pages.push(i);
+				}
+				if (scope.currentPage > value) {
+					scope.selectPage(value);
+				}
+			});
+			scope.noPrevious = function () {
+				return scope.currentPage === 1;
+			};
+			scope.noNext = function () {
+				return scope.currentPage === scope.numPages;
+			};
+			scope.isActive = function (page) {
+				return scope.currentPage === page;
+			};
+
+			scope.selectPage = function (page) {
+				if (!scope.isActive(page)) {
+					scope.currentPage = page;
+					// scope.onSelectPage({
+					// 	page: page
+					// });
+					location.hash = "#/apps?page=" + page;
+				}
+			};
+
+			scope.selectPrevious = function () {
+				if (!scope.noPrevious()) {
+					scope.selectPage(scope.currentPage - 1);
+				}
+			};
+			scope.selectNext = function () {
+				if (!scope.noNext()) {
+					scope.selectPage(scope.currentPage + 1);
+				}
+			};
+		}
+	};
+});

client/index.html

@@ -51,5 +51,6 @@
 	<script src="/controllers/search.js"></script>
   <script src="/controllers/download.js"></script>
   <script src="/controllers/fetchreview.js"></script>
+  <script src="/directives/pagination.js"></script>
 </body>
 </html>

client/views/apps.html

@@ -42,4 +42,5 @@
             <td><a href="#!/download/{{app.appId}}">Download Info</a></td>
         </tr>
     </tbody> 
-</table>
+</table>
+<pagination num-pages="noOfPages" current-page="currentPage" class="pagination-small"></pagination>

lib/index.js

@@ -585,6 +585,7 @@ router.get('/downloadedapps/', function (req, res, next) {
   var filter = {};
   var perPage = 10;
   var page = 0;
+  var total = 0;
 
   if(req.query.genre) {
     filter.genreId = { $regex: '.*' + req.query.genre + '.*' };
@@ -592,11 +593,19 @@ router.get('/downloadedapps/', function (req, res, next) {
   if(req.query.page) {
     page = req.query.page;
   }
-  models.app.find(filter).sort('title').skip(perPage * page).limit(20)
+  models.app.find(filter).sort('title')
+    .then(function (resultList) {
+      total = resultList.length;
+      return resultList;
+    })
+    .skip(perPage * page).limit(perPage)
     .then((apps) => apps.map(function (app) {
       app.url = "http://localhost:3000/crawler/downloadedapps/" + app.appId;
       return app;
     }))
+    .then(function (apps){
+      return { result: apps, total: total };
+    })
     .then(res.json.bind(res))
     .catch(function (e) {
       console.log("error fetching downloaded apps:" + JSON.stringify(e));