[paginate] added pageSize control, and pushing new pageSize up to par…

…ent scope
spalger · Nov 4, 2014 · 616da84 · 616da84
1 parent 943ee36
commit 616da84
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 60 deletions.
diff --git a/src/kibana/components/agg_table/agg_table.html b/src/kibana/components/agg_table/agg_table.html
@@ -2,7 +2,7 @@
   ng-if="formattedRows.length"
 
   list="formattedRows"
-  per-page="aggTable.getPerPage()"
+  per-page-prop="perPage"
 
   class="agg-table">
   <div class="agg-table-paginated">

diff --git a/src/kibana/components/agg_table/agg_table.js b/src/kibana/components/agg_table/agg_table.js
@@ -33,10 +33,6 @@ define(function (require) {
           quoteValues: config.get('csv:quoteValues')
         };
 
-        self.getPerPage = function () {
-          return $scope.perPage || Infinity;
-        };
-
         self.getColumnClass = function (col, $first, $last) {
           var cls = [];
           var agg = $scope.table.aggConfig(col);

diff --git a/src/kibana/components/visualize/spy/_table.js b/src/kibana/components/visualize/spy/_table.js
@@ -5,7 +5,6 @@ define(function (require) {
     var tabifyAggResponse = Private(require('components/agg_response/tabify/tabify_agg_response'));
 
     var PER_PAGE_DEFAULT = 10;
-    var PER_PAGE_EXTENDED = 20;
 
     require('components/agg_table/agg_table');
 
@@ -15,10 +14,7 @@ define(function (require) {
       order: 1,
       template: require('text!components/visualize/spy/_table.html'),
       link: function tableLinkFn($scope, $el) {
-        $scope.$parent.$watch('spyMode.fill', function (fill) {
-          $scope.perPage = fill ? PER_PAGE_EXTENDED : PER_PAGE_DEFAULT;
-        });
-
+        $scope.perPage = PER_PAGE_DEFAULT;
         $rootScope.$watchMulti.call($scope, [
           'vis',
           'esResp'

diff --git a/src/kibana/controllers/kibana.js b/src/kibana/controllers/kibana.js
@@ -53,9 +53,10 @@ define(function (require) {
         expressions.forEach(function (expr, i) {
           $scope.$watch(expr, function (newVal, oldVal) {
             vals.new[i] = newVal;
-            vals.old[i] = oldVal;
 
             if (initQueue) {
+              vals.old[i] = oldVal;
+
               var qIdx = initQueue.indexOf(expr);
               if (qIdx !== -1) initQueue.splice(qIdx, 1);
               if (initQueue.length === 0) {
@@ -69,7 +70,16 @@ define(function (require) {
             fired = true;
             $scope.$evalAsync(function () {
               fired = false;
-              fn(vals.new.slice(0), vals.old.slice(0));
+
+              if (fn.length) {
+                fn(vals.new.slice(0), vals.old.slice(0));
+              } else {
+                fn();
+              }
+
+              for (var i = 0; i < vals.new.length; i++) {
+                vals.old[i] = vals.new[i];
+              }
             });
           });
         });

diff --git a/src/kibana/directives/paginate.js b/src/kibana/directives/paginate.js
@@ -8,7 +8,6 @@ define(function (require) {
     return {
       restrict: 'E',
       scope: true,
-      controllerAs: 'paginate',
       link: {
         pre: function ($scope, $el) {
           if ($el.find('paginate-controls').size() === 0) {
@@ -19,26 +18,62 @@ define(function (require) {
           var paginate = $scope.paginate;
 
           // add some getters to the controller powered by attributes
+          paginate.getList = $parse(attrs.list);
+          paginate.perPageProp = attrs.perPageProp;
           paginate.otherWidthGetter = $parse(attrs.otherWidth);
-          paginate.perPageGetter = $parse(attrs.perPage);
-          paginate.perPageSetter = paginate.perPageGetter.assign;
 
-          $scope.$watch(attrs.perPage, function (perPage) {
-            paginate.perPage = perPage;
+          paginate.init();
+        }
+      },
+      controllerAs: 'paginate',
+      controller: function ($scope) {
+        var self = this;
+        var ALL = Infinity;
+
+        self.sizeOptions = [
+          { title: '10', value: 10 },
+          { title: '25', value: 25 },
+          { title: '100', value: 100 },
+          { title: 'All', value: ALL }
+        ];
+
+        // setup the watchers, called in the post-link function
+        self.init = function () {
+          self.perPage = $scope[self.perPageProp];
+
+          $scope.$watchMulti([
+            'paginate.perPage',
+            self.perPageProp,
+            self.otherWidthGetter
+          ], function (vals, oldVals) {
+            var intChanges = vals[0] !== oldVals[0];
+            var extChanges = vals[1] !== oldVals[1];
+
+            if (intChanges) {
+              if (!setPerPage(self.perPage)) {
+                // if we are not able to set the external value,
+                // render now, otherwise wait for the external value
+                // to trigger the watcher again
+                self.renderList();
+              }
+              return;
+            }
+
+            self.perPage = $scope[self.perPageProp];
+            if (!self.perPage) {
+              self.perPage = ALL;
+              return;
+            }
+
+            self.renderList();
           });
-          $scope.$watch('paginate.perPage', paginate.renderList);
-          $scope.$watch('page', paginate.changePage);
 
-          $scope.$watchCollection(attrs.list, function (list) {
+          $scope.$watch('page', self.changePage);
+          $scope.$watchCollection(self.getList, function (list) {
             $scope.list = list;
-            paginate.renderList();
+            self.renderList();
           });
-
-        },
-      },
-      controller: function ($scope) {
-
-        var self = this;
+        };
 
         self.goToPage = function (number) {
           if (number) {
@@ -51,8 +86,9 @@ define(function (require) {
           $scope.pages = [];
           if (!$scope.list) return;
 
-          var perPage = self.perPage || Infinity;
-          var count = isFinite(perPage) ? Math.ceil($scope.list.length / perPage) : 1;
+          var perPage = self.perPage;
+          var shouldSplit = perPage && isFinite(perPage);
+          var count = shouldSplit ? Math.ceil($scope.list.length / perPage) : 1;
 
           _.times(count, function (i) {
             var page;
@@ -120,19 +156,27 @@ define(function (require) {
             if (other.first) $scope.otherPages.containsFirst = true;
           }
         };
+
+        function setPerPage(val) {
+          var $ppParent = $scope;
+
+          while ($ppParent && !_.has($ppParent, self.perPageProp)) {
+            $ppParent = $ppParent.$parent;
+          }
+
+          if ($ppParent) {
+            $ppParent[self.perPageProp] = val;
+            return true;
+          }
+        }
       }
     };
   })
   .directive('paginateControls', function () {
     // this directive is automatically added by paginate if not found within it's $el
     return {
       restrict: 'E',
-      template: require('text!partials/paginate_controls.html'),
-      link: function ($scope, $el) {
-        $scope.$watch('page.count > 1', function (show) {
-          $el.toggle(show);
-        });
-      }
+      template: require('text!partials/paginate_controls.html')
     };
   });
 

diff --git a/src/kibana/partials/paginate_controls.html b/src/kibana/partials/paginate_controls.html
@@ -1,30 +1,33 @@
-<ul class="pagination pagination-sm">
-  <li ng-class="{disabled: page.first}">
-    <a ng-click="paginate.goToPage(page.prev)">«</a>
-  </li>
+<div class="pagination-other-pages">
+  <ul class="pagination-other-pages-list pagination-sm" ng-if="page.count > 1">
+    <li ng-class="{disabled: page.first}">
+      <a ng-click="paginate.goToPage(page.prev)">«</a>
+    </li>
 
-  <li ng-if="!otherPages.containsFirst">
-    <a ng-click="paginate.goToPage(1)">1...</a>
-  </li>
+    <li ng-if="!otherPages.containsFirst">
+      <a ng-click="paginate.goToPage(1)">1...</a>
+    </li>
 
-  <li
-    ng-repeat="other in otherPages"
-    ng-class="{ active: other.number === page.number }">
-    <a ng-click="paginate.goToPage(other)">{{other.number}}</a>
-  </li>
+    <li
+      ng-repeat="other in otherPages"
+      ng-class="{ active: other.number === page.number }">
+      <a ng-click="paginate.goToPage(other)">{{other.number}}</a>
+    </li>
 
-  <li ng-if="!otherPages.containsLast">
-    <a ng-click="paginate.goToPage(page.count)">...{{page.count}}</a>
-  </li>
+    <li ng-if="!otherPages.containsLast">
+      <a ng-click="paginate.goToPage(page.count)">...{{page.count}}</a>
+    </li>
 
-  <li ng-class="{disabled: page.last}">
-    <a ng-click="paginate.goToPage(page.next)">»</a>
-  </li>
-</ul>
+    <li ng-class="{disabled: page.last}">
+      <a ng-click="paginate.goToPage(page.next)">»</a>
+    </li>
+  </ul>
+</div>
 
 <form class="form-inline pagination-size">
   <div class="form-group">
     <label>Page Size</label>
-    <input type="number" ng-model="paginate.perPage">
+    <select ng-model="paginate.perPage" ng-options="opt.value as opt.title for opt in paginate.sizeOptions">
+    </select>
   </div>
 </form>
diff --git a/src/kibana/styles/_pagination.less b/src/kibana/styles/_pagination.less
@@ -8,16 +8,22 @@ paginate {
     padding: 5px 5px 10px;
     text-align: center;
 
-    .pagination {
+    .pagination-other-pages {
       .flex(1, 0, auto);
       .display(flex);
       .justify-content(center);
 
-      // override some bootstrap styles
-      margin: 0 auto;
-
-      > li {
+      &-list {
         .flex(0, 0, auto);
+        .display(flex);
+        .justify-content(center);
+        padding: 0;
+        margin: 0;
+        list-style: none;
+
+        > li {
+          .flex(0, 0, auto);
+        }
       }
     }