From 672e8a5ba90c97bd6a56b57170559f08c610a531 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <joseph.schorr@coreos.com>
Date: Thu, 25 Jun 2015 15:47:37 -0400
Subject: [PATCH] Add pagination to the tags view

---
 static/css/core-ui.css                        |  7 ++++
 static/css/directives/ui/page-controls.css    | 33 +++++++++++++++
 static/directives/page-controls.html          | 20 +++++++++
 .../directives/repo-view/repo-panel-tags.html |  3 +-
 static/js/directives/filters/slice.js         |  8 ++++
 .../directives/repo-view/repo-panel-tags.js   |  3 +-
 static/js/directives/ui/page-controls.js      | 41 +++++++++++++++++++
 7 files changed, 113 insertions(+), 2 deletions(-)
 create mode 100644 static/css/directives/ui/page-controls.css
 create mode 100644 static/directives/page-controls.html
 create mode 100644 static/js/directives/filters/slice.js
 create mode 100644 static/js/directives/ui/page-controls.js

diff --git a/static/css/core-ui.css b/static/css/core-ui.css
index 441df760e..b2213d91f 100644
--- a/static/css/core-ui.css
+++ b/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 {
diff --git a/static/css/directives/ui/page-controls.css b/static/css/directives/ui/page-controls.css
new file mode 100644
index 000000000..25306a212
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/static/directives/page-controls.html b/static/directives/page-controls.html
new file mode 100644
index 000000000..6243924ef
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/static/directives/repo-view/repo-panel-tags.html b/static/directives/repo-view/repo-panel-tags.html
index 0aa650731..644ecadf8 100644
--- a/static/directives/repo-view/repo-panel-tags.html
+++ b/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>
diff --git a/static/js/directives/filters/slice.js b/static/js/directives/filters/slice.js
new file mode 100644
index 000000000..81fd8b4ac
--- /dev/null
+++ b/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);
+  };
+});
\ No newline at end of file
diff --git a/static/js/directives/repo-view/repo-panel-tags.js b/static/js/directives/repo-view/repo-panel-tags.js
index f1a76e383..98ef1ac71 100644
--- a/static/js/directives/repo-view/repo-panel-tags.js
+++ b/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 = {};
diff --git a/static/js/directives/ui/page-controls.js b/static/js/directives/ui/page-controls.js
new file mode 100644
index 000000000..aeeed0a79
--- /dev/null
+++ b/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;
+});
\ No newline at end of file