pfTableView with pfPagination (#527)

* pfTableView with pfPagination
* Addressed Review Issues

Author: dtaylor113

Gruntfile.js

@@ -179,8 +179,8 @@ module.exports = function (grunt) {
             'node_modules/patternfly/dist/js/patternfly-settings-charts.js',
             'node_modules/angular/angular.js',
             'node_modules/angular-dragdrop/src/angular-dragdrop.js',
-            'node_modules/angular-datatables/dist/angular-datatables.min.js',
-            'node_modules/angular-datatables/dist/plugins/select/angular-datatables.select.min.js',
+            'node_modules/angularjs-datatables/dist/angular-datatables.js',
+            'node_modules/angularjs-datatables/dist/plugins/select/angular-datatables.select.min.js',
             'node_modules/angular-sanitize/angular-sanitize.js',
             'node_modules/angular-animate/angular-animate.js',
             'node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js',

README.md

@@ -120,8 +120,8 @@ Note:
    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="node_modules/datatables.net/js/jquery.dataTables.js"></script>
    <script src="node_modules/datatables.net-select/js/dataTables.select.js"></script>
-   <script src="node_modules/angular-datatables/dist/angular-datatables.min.js"></script>
-   <script src="node_modules/angular-datatables/dist/plugins/select/angular-datatables.select.min.js"></script>
+   <script src="node_modules/angularjs-datatables/dist/angular-datatables.min.js"></script>
+   <script src="node_modules/angularjs-datatables/dist/plugins/select/angular-datatables.select.min.js"></script>
    ```
 7. (optional) The 'patternfly.canvas' module is not a dependency in the default angular 'patternfly' module.
    In order to use pfCanvasEditor or pfCanvas, you must add 'patternfly.canvas' as a dependency in your application:

bower.json

@@ -41,7 +41,7 @@
     "angular-animate": "1.5.*",
     "angular-bootstrap": "2.2.x",
     "angular-dragdrop": "1.0.13",
-    "angular-datatables": "^0.5.6",
+    "angularjs-datatables": "^0.5.7",
     "angular-drag-and-drop-lists": "2.0.0",
     "angular-sanitize": "1.5.*",
     "datatables.net": "^1.10.12",

package.json

@@ -56,7 +56,7 @@
     "patternfly-eng-release": "3.24.3"
   },
   "optionalDependencies": {
-    "angular-datatables": "^0.5.6",
+    "angularjs-datatables": "^0.5.7",
     "angular-drag-and-drop-lists": "2.0.0",
     "bootstrap-select": "~1.10.0",
     "c3": "~0.4.11",

src/pagination/pagination.component.js

@@ -34,7 +34,7 @@
        </div>
      </div>
      <pf-pagination
-         page-size="pageSize",
+         page-size="pageSize"
          page-number="pageNumber"
          num-total-items="numTotalItems">
      </pf-pagination>
@@ -59,10 +59,12 @@ angular.module('patternfly.pagination').component('pfPagination', {
   transclude: true,
   templateUrl: 'pagination/pagination.html',
   bindings: {
-    pageNumber: '=',
+    pageNumber: '=?',
     numTotalItems: "<",
     pageSizeIncrements: '<?',
-    pageSize: "=?"
+    pageSize: "=?",
+    updatePageSize: "&",
+    updatePageNumber: "&"
   },
   controller: function ($scope, $log) {
     'use strict';
@@ -71,6 +73,9 @@ angular.module('patternfly.pagination').component('pfPagination', {
     var defaultPageSizeIncrements = [5, 10, 20, 40, 80, 100];
 
     ctrl.$onInit = function () {
+      if (angular.isUndefined(ctrl.pageNumber)) {
+        ctrl.pageNumber = 1;
+      }
       if (angular.isUndefined(ctrl.pageSizeIncrements)) {
         ctrl.pageSizeIncrements = defaultPageSizeIncrements;
       }
@@ -83,59 +88,80 @@ angular.module('patternfly.pagination').component('pfPagination', {
     ctrl.$onChanges = function (changesObj) {
       if (changesObj.numTotalItems && !changesObj.numTotalItems.isFirstChange()) {
         ctrl.lastPageNumber = getLastPageNumber();
+        ctrl.gotoFirstPage();
       }
     };
 
     ctrl.onPageSizeChange = function (newPageSize) {
       ctrl.pageSize = newPageSize;
       ctrl.lastPageNumber = getLastPageNumber();
       ctrl.gotoFirstPage();
+      if (ctrl.updatePageSize) {
+        ctrl.updatePageSize({
+          $event: {
+            pageSize: newPageSize
+          }
+        });
+      }
     };
 
     ctrl.onPageNumberChange = function () {
-      ctrl.pageNumber = parseInt(ctrl.pageNumber, 10);
-      if (ctrl.pageNumber > ctrl.lastPageNumber) {
-        ctrl.pageNumber = ctrl.lastPageNumber;
-      } else if (ctrl.pageNumber < 1 || isNaN(ctrl.pageNumber)) {
-        ctrl.pageNumber = 1;
+      var newPageNumber = parseInt(ctrl.pageNumber, 10);
+      if (newPageNumber > ctrl.lastPageNumber) {
+        updatePageNumber(ctrl.lastPageNumber);
+      } else if (newPageNumber < 1 || isNaN(ctrl.pageNumber)) {
+        updatePageNumber(1);
+      } else {
+        updatePageNumber(newPageNumber);
       }
     };
 
     ctrl.gotoFirstPage = function () {
       if (ctrl.pageNumber !== 1) {
-        ctrl.pageNumber = 1;
+        updatePageNumber(1);
       }
     };
 
     ctrl.gotoPreviousPage = function () {
       if (ctrl.pageNumber !== 1) {
-        ctrl.pageNumber--;
+        updatePageNumber(ctrl.pageNumber - 1);
       }
     };
 
     ctrl.gotoNextPage = function () {
       if (ctrl.pageNumber < ctrl.lastPageNumber) {
-        ctrl.pageNumber++;
+        updatePageNumber(ctrl.pageNumber + 1);
       }
     };
 
     ctrl.gotoLastPage = function () {
       if (ctrl.pageNumber < ctrl.lastPageNumber) {
-        ctrl.pageNumber = ctrl.lastPageNumber;
+        updatePageNumber(ctrl.lastPageNumber);
       }
     };
 
     ctrl.getStartIndex = function () {
-      return ctrl.pageSize * (ctrl.pageNumber - 1) + 1;
+      return ctrl.numTotalItems ? ctrl.pageSize * (ctrl.pageNumber - 1) + 1 : 0;
     };
 
     ctrl.getEndIndex = function () {
       var numFullPages = Math.floor(ctrl.numTotalItems / ctrl.pageSize);
-      var numItemsOnLastPage = ctrl.numTotalItems - (numFullPages * ctrl.pageSize);
+      var numItemsOnLastPage = ctrl.numTotalItems - (numFullPages * ctrl.pageSize) || ctrl.pageSize;
       var numItemsOnPage = isLastPage() ? numItemsOnLastPage : ctrl.pageSize;
-      return ctrl.getStartIndex() + numItemsOnPage - 1;
+      return ctrl.numTotalItems ? ctrl.getStartIndex() + numItemsOnPage - 1 : 0;
     };
 
+    function updatePageNumber (newPageNumber) {
+      ctrl.pageNumber = newPageNumber;
+      if (ctrl.updatePageNumber) {
+        ctrl.updatePageNumber({
+          $event: {
+            pageNumber: ctrl.pageNumber
+          }
+        });
+      }
+    }
+
     function getLastPageNumber () {
       return Math.ceil(ctrl.numTotalItems / ctrl.pageSize);
     }

src/table/table.less

@@ -27,6 +27,11 @@ table.dataTable {
     }
   }
   tbody {
+    tr.selected {
+      span a {
+        color: @color-pf-white;
+      }
+    }
     th {
       padding: 2px 10px 3px;
     }

src/table/table.module.js

@@ -5,4 +5,4 @@
  *   Table module for patternfly.
  *
  */
-angular.module('patternfly.table', ['datatables', 'patternfly.utils', 'patternfly.filters', 'patternfly.sort']);
+angular.module('patternfly.table', ['datatables', 'patternfly.pagination', 'patternfly.utils', 'patternfly.filters', 'patternfly.sort']);

src/table/tableview/examples/table-view-basic.js

@@ -61,6 +61,7 @@
             empty-state-action-buttons="emptyStateActionButtons">
       </pf-table-view>
     </div>
+    <hr class="col-md-12">
     <div class="col-md-12" style="padding-top: 12px;">
       <div class="form-group">
         <label class="checkbox-inline">
@@ -73,7 +74,6 @@
         </label>
       </div>
     </div>
-    <hr class="col-md-12">
     <div class="col-md-12">
           <div class="col-md-12" style="padding-top: 12px;">
             <label style="font-weight:normal;vertical-align:center;">Events: </label>
@@ -298,14 +298,14 @@
               state: "New York"
               },
               {
-              status: "ok",
+              status: "warning",
               name: "Mike Bird",
               address: "50 Forth Street",
               city: "New York",
               state: "New York"
               },
               {
-              status: "ok",
+              status: "error",
               name: "Cheryl Taylor",
               address: "2 Main Street",
               city: "New York",

src/table/tableview/examples/table-view-with-toolbar.js

@@ -13,7 +13,16 @@
  *   <li>.itemsAvailable      - (boolean) If 'false', displays the {@link patternfly.views.component:pfEmptyState Empty State} component.
  *   <li>.showCheckboxes      - (boolean) Show checkboxes for row selection, default is true
  * </ul>
- * @param {object} dtOptions Optional angular-datatables DTOptionsBuilder configuration object.  See {@link http://l-lin.github.io/angular-datatables/archives/#/api angular-datatables: DTOptionsBuilder}
+ * @param {object} dtOptions Optional angular-datatables DTOptionsBuilder configuration object. Note: paginationType, displayLength, and dom:"p" are no longer being used for pagination, but are allowed for backward compatibility.
+ * Please switch to prefered 'pageConfig' settings for pf pagination controls.
+ * Other dtOptions can still be used, such as 'order' See {@link http://l-lin.github.io/angular-datatables/archives/#/api angular-datatables: DTOptionsBuilder}
+ * @param {object} pageConfig Optional pagination configuration object.  Since all properties are optional it is ok to specify: 'pageConfig = {}' to indicate that you want to
+ * use pagination with the default parameters.
+ * <ul style='list-style-type: none'>
+ *   <li>.pageNumber  - (number) Optional Initial page number to display. Default is page 1.
+ *   <li>.pageSize    - (number) Optional Initial page size/display length to use. Ie. Number of "Items per Page".  Default is 10 items per page
+ *   <li>.pageSizeIncrements - (Array[Number]) Optional Page size increments for the 'per page' dropdown.  If not specified, the default values are: [5, 10, 20, 40, 80, 100]
+ * </ul>
  * @param {array} items Array of items to display in the table view.
  * @param {array} columns Array of table column information to display in the table's header row and optionaly render the cells of a column.
  * <ul style='list-style-type: none'>
@@ -86,32 +95,30 @@
         <pf-table-view config="tableConfig"
                        empty-state-config="emptyStateConfig"
                        dt-options="dtOptions"
+                       page-config="pageConfig"
                        columns="columns"
                        items="items"
                        action-buttons="tableActionButtons"
                        menu-actions="tableMenuActions">
         </pf-table-view>
       </div>
+      <hr class="col-md-12">
       <div class="col-md-12">
         <div class="form-group">
           <label class="checkbox-inline">
             <input type="checkbox" ng-model="tableConfig.itemsAvailable" ng-change="updateItemsAvailable()">Items Available</input>
           </label>
-          <!-- //[WIP] issues dynamically changing displayLength and turning on/off pagination
-            <label class="checkbox-inline">
-              <input type="checkbox" ng-model="usePagination" ng-change="togglePagination()">Use Pagination</input>
-            </label>
-            <label>
-              <input ng-model="dtOptions.displayLength" ng-disabled="!usePagination" style="width: 24px; padding-left: 6px;"> # Rows Per Page</input>
-            </label> --!>
+          <!-- TODO: I don't know why this comment is neccesary, but if I remove it I get error:
+               Error: [$compile:ctreq] Controller 'tabbable', required by directive 'tabPane', can't be found!
+               I've wasted too much time trying to fix this!  Something to do with ngDoc's <file> directives
+          --!>
         </div>
         <div class="form-group">
           <label class="checkbox-inline">
             <input type="checkbox" ng-model="tableConfig.showCheckboxes" ng-change="addNewComponentToDOM()">Show Checkboxes</input>
           </label>
         </div>
       </div>
-      <hr class="col-md-12">
       <div class="col-md-12">
         <label class="actions-label">Actions: </label>
       </div>
@@ -154,28 +161,22 @@
         { header: "BirthMonth", itemField: "birthMonth"}
       ];
 
-      $scope.dtOptions = {
-        paginationType: 'full',
-        displayLength: 10,
-        dom: "tp"
-      };
-
-      // [WIP] attempt to dyamically change displayLength (#rows) and turn on/off pagination controls
-      // See: issues turning on/off pagination. see: https://datatables.net/manual/tech-notes/3
+      // dtOptions paginationType, displayLength, and dom:"p" are no longer being
+      // used, but are allowed for backward compatibility.
+      // Please switch to prefered 'pageConfig' settings for pf pagination controls
+      // Other dtOptions can still be used, such as 'order'
+      // $scope.dtOptions = {
+      //  paginationType: 'full',
+      //  displayLength: 10,
+      //  dom: "tp"
+      // }
 
-      $scope.usePagination = true;
-      $scope.togglePagination = function () {
-        $scope.usePagination = !$scope.usePagination;
-        console.log("---> togglePagination: " + $scope.usePagination);
-        if($scope.usePagination) {
-          $scope.dtOptions.displayLength = 3;
-          $scope.dtOptions.dom = "tp";
-          console.log("---> use pagination: " + $scope.dtOptions.displayLength + ":" + $scope.dtOptions.dom);
-        } else {
-          $scope.dtOptions.displayLength = undefined;
-          $scope.dtOptions.dom = "t";
-        }
-      };
+      // New pagination config settings
+      $scope.pageConfig = {
+        pageNumber: 1,
+        pageSize: 10,
+        pageSizeIncrements: [5, 10, 15]
+      }
 
       $scope.allItems = [
         {
@@ -305,6 +306,8 @@
           match = item.address.match(filter.value) !== null;
         } else if (filter.id === 'birthMonth') {
           match = item.birthMonth === filter.value;
+        } else if (filter.id === 'status') {
+          match = item.status === filter.value;
         }
         return match;
       };
@@ -364,6 +367,13 @@
 
       $scope.filterConfig = {
         fields: [
+          {
+            id: 'status',
+            title:  'Status',
+            placeholder: 'Filter by Status...',
+            filterType: 'select',
+            filterValues: ['error', 'warning', 'ok']
+          },
           {
             id: 'name',
             title:  'Name',