(FatalBadgers#1) Pagination directive.

scottrice10 · Feb 4, 2015 · 0314f45 · 0314f45
1 parent 90aeee7
commit 0314f45
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 8 deletions.
diff --git a/bower.json b/bower.json
@@ -15,7 +15,8 @@
     "lodash": "~2.4.1",
     "angular-ui-router": "~0.2.10",
     "c3": "~0.4.9",
-    "angular-ui-select": "*"
+    "angular-ui-select": "*",
+    "angular-utils-pagination": "*"
   },
   "devDependencies": {
     "angular-mocks": ">=1.2.*",

diff --git a/client/app/app.js b/client/app/app.js
@@ -6,7 +6,8 @@ angular.module('tikrApp', [
   'ngSanitize',
   'ui.router',
   'ui.bootstrap',
-  'ui.select'
+  'ui.select',
+  'angularUtils.directives.dirPagination'
 ])
   .config(function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
     $urlRouterProvider

diff --git a/client/app/search/search.controller.js b/client/app/search/search.controller.js
@@ -4,12 +4,15 @@ angular.module('tikrApp')
   .controller('SearchCtrl', function($scope, $http, $q, User, Auth) {
     $scope.users = [];
     $scope.searchStarted = false;
+    $scope.selected = 'javascript';
 
     // returns a promise
-    $scope.fetchUsers = function(language) {
+    $scope.fetchUsers = function(language, pageNumber) {
+      $scope.selected = language;
       User.search({
         skill: language,
-        username: $scope.TEST_USER || Auth.getCurrentUser().github.login
+        username: $scope.TEST_USER || Auth.getCurrentUser().github.login,
+        pageNumber: pageNumber
       }, function(data) {
         $scope.searchStarted = true;
         $scope.data = data[0];
@@ -48,5 +51,5 @@ angular.module('tikrApp')
     };
 
     //init
-    $scope.fetchUsers('javascript');
+    $scope.fetchUsers($scope.selected);
   });
diff --git a/client/app/search/search.html b/client/app/search/search.html
@@ -36,7 +36,8 @@
       <div class="row-fluid main-section" style="min-height:500px" ng-if="users.length > 0 && searchStarted">
         <div ng-bind="(data.total_count ? (data.total_count | number) : 0) + ' results found'"></div>
 
-        <div class="col-fluid" ng-repeat="user in users track by $index" ng-class-odd="'odd'" ng-class-even="'even'">
+        <div class="col-fluid" ng-repeat="user in users track by $index" ng-class-odd="'odd'" ng-class-even="'even'"
+             dir-paginate="user in users | itemsPerPage: 10 track by $index" total-items="(data.total_count || 0)">
 
           <div class="container">
             <a href="{{user.html_url}}" target="_blank">
@@ -67,6 +68,11 @@
           </div>
 
         </div>
+
+        <dir-pagination-controls on-page-change="fetchUsers(selected, newPageNumber)"
+                                 template-url="components/pagination/dirPagination.tpl.html">
+        </dir-pagination-controls>
+
       </div>
 
     </div>

diff --git a/client/components/auth/user.service.js b/client/components/auth/user.service.js
@@ -25,7 +25,8 @@ angular.module('tikrApp')
           id: 'me',
           controller: 'search',
           skill: null,
-          username: null
+          username: null,
+          pageNumber: 1
         }
       }
 	  });

diff --git a/client/components/pagination/dirPagination.tpl.html b/client/components/pagination/dirPagination.tpl.html
@@ -0,0 +1,18 @@
+<ul class="pagination" ng-if="1 < pages.length">
+  <li ng-if="boundaryLinks" ng-class="{ disabled : pagination.current == 1 }">
+    <a href="" ng-click="setCurrent(1)">&laquo;</a>
+  </li>
+  <li ng-if="directionLinks" ng-class="{ disabled : pagination.current == 1 }">
+    <a href="" ng-click="setCurrent(pagination.current - 1)">&lsaquo;</a>
+  </li>
+  <li ng-repeat="pageNumber in pages track by $index" ng-class="{ active : pagination.current == pageNumber, disabled : pageNumber == '...' }">
+    <a href="" ng-click="setCurrent(pageNumber)">{{ pageNumber }}</a>
+  </li>
+
+  <li ng-if="directionLinks" ng-class="{ disabled : pagination.current == pagination.last }">
+    <a href="" ng-click="setCurrent(pagination.current + 1)">&rsaquo;</a>
+  </li>
+  <li ng-if="boundaryLinks"  ng-class="{ disabled : pagination.current == pagination.last }">
+    <a href="" ng-click="setCurrent(pagination.last)">&raquo;</a>
+  </li>
+</ul>
diff --git a/client/index.html b/client/index.html
@@ -71,6 +71,7 @@
       <script src="bower_components/d3/d3.js"></script>
       <script src="bower_components/c3/c3.js"></script>
       <script src="bower_components/angular-ui-select/dist/select.js"></script>
+      <script src="bower_components/angular-utils-pagination/dirPagination.js"></script>
       <!-- endbower -->
     <!-- endbuild -->
 

diff --git a/karma.conf.js b/karma.conf.js
@@ -22,6 +22,8 @@ module.exports = function(config) {
       'client/bower_components/angular-ui-router/release/angular-ui-router.js',
       'client/bower_components/angular-ui-select/dist/select.js',
       'client/bower_components/angular-ui-select/dist/select.css',
+      'client/bower_components/angular-utils-pagination/dirPagination.js',
+      'client/bower_components/angular-utils-pagination/dirPagination.tpl.html',
       'client/app/app.js',
       'client/app/**/*.js',
       'client/app/**/*.coffee',

diff --git a/server/api/user/user.controller.js b/server/api/user/user.controller.js
@@ -138,7 +138,7 @@ var getUsersPromise = function(users, username) {
  */
 exports.search = function(req, res, next) {
   var options = {
-    url: 'https://api.github.com/search/users?q=+language:' + encodeURIComponent(req.body.skill) + "&page=1&per_page=10",
+    url: 'https://api.github.com/search/users?q=+language:' + encodeURIComponent(req.body.skill) + "&page=" + req.body.pageNumber + "&per_page=10",
     headers: {
       'User-Agent': req.body.username
     }