Add pagination to the tags view

static/css/core-ui.css

@@ -1151,8 +1151,15 @@ a:focus {
   float: right;
 }
 
+.co-check-bar .co-filter-box .page-controls {
+  margin-right: 6px;
+  margin-bottom: 6px;
+}
+
 .co-check-bar .co-filter-box input {
   width: 300px;
+  display: inline-block;
+  vertical-align: middle;
 }
 
 .empty {

static/css/directives/ui/page-controls.css

@@ -0,0 +1,33 @@
+.page-controls-element {
+  display: inline-block
+}
+
+.page-controls {
+  display: inline-block;
+}
+
+.page-controls-element .current-items {
+  font-weight: bold;
+  margin-right: 10px;
+  padding: 4px;
+  border: 1px solid transparent;
+  vertical-align: middle;
+}
+
+.page-controls-element .current-items:hover {
+  border: 1px solid #ddd;
+}
+
+.page-controls-element .btn {
+  font-size: 18px;
+  line-height: 14px;
+  height: 34px;
+}
+
+.page-controls-element .btn:disabled {
+  color: #ccc;
+}
+
+.page-controls-element .page-view {
+  cursor: pointer;
+}

static/directives/page-controls.html

@@ -0,0 +1,20 @@
+<div class="page-controls-element">
+  <span class="current-items dropdown">
+    <span class="page-view" data-toggle="dropdown">
+      {{ getPageStart(currentPage, pageSize, totalCount) }} - {{ getPageEnd(currentPage, pageSize, totalCount) }}
+      of {{ totalCount }}
+    </span>
+    <ul class="dropdown-menu">
+      <li><a href="javascript:void(0)" ng-click="setPage(0)"><i class="fa fa-caret-square-o-left"></i>First Page</a></li>
+      <li><a href="javascript:void(0)" ng-click="setPage(getPageCount(pageSize, totalCount) - 1)"><i class="fa fa-caret-square-o-right"></i>Last Page</a></li>
+    </ul>
+  </span>
+  <span class="page-buttons btn-group">
+    <button class="btn btn-default"
+            ng-disabled="currentPage == 0"
+            ng-click="changePage(-1)">&#10094;</button>
+    <button class="btn btn-default"
+            ng-disabled="currentPage >= getPageCount(pageSize, totalCount) - 1"
+            ng-click="changePage(1)">&#10095;</button>
+  </span>
+</div>

static/directives/repo-view/repo-panel-tags.html

@@ -53,6 +53,7 @@
      </span>
 
      <span class="co-filter-box">
+      <span class="page-controls" total-count="tags.length" current-page="options.page" page-size="50"></span>
       <input class="form-control" type="text" ng-model="options.tagFilter" placeholder="Filter Tags...">
      </span>
    </div>
@@ -87,7 +88,7 @@
      </thead>
 
      <tr class="co-checkable-row"
-         ng-repeat="tag in tags"
+         ng-repeat="tag in tags | slice:(50 * options.page):(50 * (options.page + 1))"
          ng-class="checkedTags.isChecked(tag, checkedTags.checked) ? 'checked' : ''">
       <td><span class="cor-checkable-item" controller="checkedTags" item="tag"></span></td>
       <td><span class="tag-span"><i class="fa fa-tag"></i> {{ tag.name }}</span></td>

static/js/directives/filters/slice.js

@@ -0,0 +1,8 @@
+/**
+ * Slice filter.
+ */
+angular.module('quay').filter('slice', function() {
+  return function(arr, start, end) {
+    return (arr || []).slice(start, end);
+  };
+});

static/js/directives/repo-view/repo-panel-tags.js

@@ -24,7 +24,8 @@ angular.module('quay').directive('repoPanelTags', function () {
       $scope.checkedTags = UIService.createCheckStateController([], 'name');
       $scope.options = {
         'predicate': 'last_modified_datetime',
-        'reverse': false
+        'reverse': false,
+        'page': 0
       };
 
       $scope.iterationState = {};

static/js/directives/ui/page-controls.js

@@ -0,0 +1,41 @@
+/**
+ * An element which displays controls for moving between pages of paginated results.
+ */
+angular.module('quay').directive('pageControls', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/page-controls.html',
+    replace: false,
+    transclude: true,
+    restrict: 'C',
+    scope: {
+      'currentPage': '=currentPage',
+      'pageSize': '=pageSize',
+      'totalCount': '=totalCount'
+    },
+    controller: function($scope, $element) {
+      $scope.getPageStart = function(currentPage, pageSize, totalCount) {
+        return Math.min((currentPage * pageSize) + 1, totalCount);
+      };
+
+      $scope.getPageEnd = function(currentPage, pageSize, totalCount) {
+        return Math.min(((currentPage + 1) * pageSize), totalCount);
+      };
+
+      $scope.getPageCount = function(pageSize, totalCount) {
+        return Math.ceil(totalCount / pageSize);
+      };
+
+      $scope.changePage = function(offset) {
+        $scope.currentPage += offset;
+        $scope.currentPage = Math.max($scope.currentPage, 0);
+        $scope.currentPage = Math.min($scope.currentPage, $scope.getPageCount($scope.pageSize, $scope.totalCount));
+      };
+
+      $scope.setPage = function(page) {
+        $scope.currentPage = page;
+      };
+    }
+  };
+  return directiveDefinitionObject;
+});