Merge pull request #528 from koddsson/github-pagination

Add pagination of github repos when importing

public/js/plugins/github/github-modal.controller.js

@@ -20,6 +20,11 @@ module.exports =
   vm.fetchFile      = fetchFile;
   vm.close          = closeModal;
 
+  vm.itemsPerPage   = 10;
+  vm.currentPage    = 1;
+  vm.paginatedRepos = [];
+  vm.repos          = [];
+
   //////////////////////////////
 
   function setFile() {
@@ -33,7 +38,18 @@ module.exports =
   function setRepos() {
     vm.title = 'Repositories';
     vm.step  = 2;
-    vm.repos = githubService.config.repos;
+    vm.repos = githubService.config.repos.sort(function(a, b) {
+      if (a.name < b.name) {
+        return -1;
+      } else if (a.name > b.name) {
+        return 1;
+      } else {
+        return 0;
+      }
+    });
+
+    // Fill the paginatedRepos array with the first page of repos.
+    vm.onPageChange();
 
     return vm.repos;
   }
@@ -83,4 +99,15 @@ module.exports =
     return false;
   }
 
+  vm.onPageChange = function(page) {
+    // Arrays are zero based so we need to subtract 1 from the `currenPage`
+    // variable before using it in the context of a array.
+    var currentPage = vm.currentPage - 1;
+
+    vm.paginatedRepos = vm.repos.slice(
+      currentPage * vm.itemsPerPage,
+      (currentPage * vm.itemsPerPage) + vm.itemsPerPage
+    );
+  }
+
 });

public/js/plugins/github/github-modal.directive.html

@@ -12,8 +12,8 @@ <h3 ng-bind="modal.title"></h3>
     <a ng-bind="org.name" ng-click="modal.fetchRepos(org.name)"></a>
   </li>
 
-  <!-- Reporsitories -->
-  <li ng-if="modal.step === 2" ng-repeat="repo in modal.repos">
+  <!-- Repositories -->
+  <li ng-if="modal.step === 2" ng-repeat="repo in modal.paginatedRepos">
     <a ng-bind="repo.name" ng-click="modal.fetchBranches(repo.name)"></a>
   </li>
 
@@ -28,6 +28,23 @@ <h3 ng-bind="modal.title"></h3>
   </li>
 
 </ul>
+
+<div ng-if="modal.repos.length > modal.itemsPerPage">
+  <pagination
+     ng-change      = "modal.onPageChange()"
+     ng-model       = "modal.currentPage"
+     total-items    = "modal.repos.length"
+     items-per-page = "modal.itemsPerPage"
+     class          = "pagination-m pagination--dillinger"
+     rotate         = "false"
+     previous-text  = "&lsaquo;"
+     next-text      = "&rsaquo;"
+     first-text     = "&laquo;"
+     last-text      = "&raquo;"
+     boundary-links = "true">
+  </pagination>
+</div>
+
 </div>
 <div class="modal-footer">
   <button type="button" class="btn btn--ok" ng-click="modal.close()">Close</button>