web staff : grid cont.

Signed-off-by: Bill Erickson <berick@esilibrary.com>

diff --git a/Open-ILS/src/templates/staff/parts/t_autogrid2.tt2 b/Open-ILS/src/templates/staff/parts/t_autogrid2.tt2
index 1ce032f..36ccfc5 100644 (file)
--- a/Open-ILS/src/templates/staff/parts/t_autogrid2.tt2
+++ b/Open-ILS/src/templates/staff/parts/t_autogrid2.tt2
@@ -1,7 +1,121 @@
 
+<!-- 
+  Actions row.
+  This sits above the grid and contains the column picker, etc.
+-->
+
+<div class="eg-grid-row eg-grid-action-row">
+
+  <div style="flex:1">
+    <div class="eg-grid-primary-label">{{grid.mainLabel}}</div>
+  </div>
+  
+  <!-- column picker -->
+  <div class="btn-group column-picker">
+
+    <!-- first page -->
+    <button type="button" class="btn btn-default" 
+      ng-class="{disabled : grid.onFirstPage()}" 
+      ng-click="grid.offset = 0;grid.collect()"
+      title="[% l('Start') %]">
+        <span class="glyphicon glyphicon-fast-backward"></span>
+    </button>
+
+    <!-- previous page -->
+    <button type="button" class="btn btn-default" 
+      ng-class="{disabled : grid.onFirstPage()}"
+      ng-click="grid.decrementPage()"
+      title="[% l('Previous Page') %]">
+        <span class="glyphicon glyphicon-backward"></span>
+    </button>
+
+    <!-- next page -->
+    <!-- todo: paging needs a total count value to be fully functional -->
+    <button type="button" class="btn btn-default" 
+      ng-class="{disabled : !grid.hasNextPage()}"
+      ng-click="grid.incrementPage()"
+      title="[% l('Next Page') %]">
+        <span class="glyphicon glyphicon-forward"></span>
+    </button>
+
+    <div class="btn-group">
+      <button type="button" title="[% ('Select Row Count') %]"
+        class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+        [% l('Rows [_1]', '{{grid.limit}}') %]
+        <span class="caret"></span>
+      </button>
+      <ul class="dropdown-menu">
+        <li ng-repeat="t in [5,10,25,50,100]">
+          <a href='' ng-click='grid.offset=0;grid.limit=t;grid.collect()'>
+            {{t}}
+          </a>
+        </li>
+      </ul>
+    </div>
+
+    <div class="btn-group">
+      <button type="button" title="[% ('Select Page') %]"
+        class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+        [% l('Page [_1]', '{{grid.page()}}') %]
+        <span class="caret"></span>
+      </button>
+      <ul class="dropdown-menu">
+        <li>
+          <div class="input-group">
+            <input type="text" class="form-control"
+              ng-model="pageFromUI"
+              ng-click="$event.stopPropagation()"/>
+            <span class="input-group-btn">
+              <button class="btn btn-default" type="button"
+                ng-click="grid.goToPage(pageFromUI);pageFromUI=''">
+                [% l('Go To...') %]
+              </button>
+            </span>
+          </div>
+        </li>
+        <li role="presentation" class="divider"></li>
+        <li ng-repeat="t in [1,2,3,4,5,10,25,50,100]">
+          <a href='' ng-click='grid.goToPage(t)'>{{t}}</a>
+        </li>
+      </ul>
+    </div>
+
+    <button type="button" 
+      class="btn btn-default dropdown-toggle" 
+      data-toggle="dropdown"><span class="caret"></span>
+    </button>
+    <ul class="dropdown-menu pull-right">
+      <li><a href='' ng-click="grid.toggleConfDisplay()">
+        <span class="glyphicon glyphicon-wrench"></span>
+        [% l('Configure Columns') %]
+      </a></li>
+      <li><a href='' ng-click="grid.columnsProvider.showAllColumns()">
+        <span class="glyphicon glyphicon-resize-full"></span>
+        [% l('Show All Columns') %]
+      </a></li>
+      <li><a href='' ng-click="grid.columnsProvider.hideAllColumns()">
+        <span class="glyphicon glyphicon-resize-small"></span>
+        [% l('Hide All Columns') %]
+      </a></li>
+      <li role="presentation" class="divider"></li>
+      <li ng-repeat="col in grid.columnsProvider.columns">
+        <a href='' ng-click="grid.columnsProvider.visible[col.name] = 
+            !grid.columnsProvider.visible[col.name]">
+            <span ng-if="grid.columnsProvider.visible[col.name]" 
+              class="label label-success">&#x2713;</span>
+            <span ng-if="!grid.columnsProvider.visible[col.name]" 
+              class="label label-warning">&#x2717;</span>
+            <span>{{col.label}}</span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>
+
 <!-- Grid -->
 <div class="eg-grid" ng-class="{'eg-grid-as-conf' : grid.showGridConf}">
 
+  <!-- import our eg-grid-field defs -->
   <div ng-transclude></div>
 
   <div class="eg-grid-row eg-grid-header-row">
@@ -21,18 +135,19 @@
     </div>
   </div>
 
-  <div class="eg-grid-content-body" ng-repeat="item in grid.items">
+  <div class="eg-grid-content-body">
 
     <div ng-show="grid.count() == 0" 
       class="alert alert-info">[% l('No Items To Display') %]</div>
 
     <div class="eg-grid-row" 
         id="eg-grid-row-{{$index + 1}}"
+        ng-repeat="item in grid.items"
         ng-show="grid.count() > 0"
         ng-class="{'eg-grid-row-selected' : grid.selected[grid.indexValue(item)]}">
       <div class="eg-grid-cell eg-grid-cell-stock" style="flex:{{grid.indexFlex}}"
         ng-click="grid.handleRowClick($event, item)">
-        {{$index + grid.offset}}
+        {{$index + grid.offset + 1}}
       </div>
       <div class="eg-grid-cell eg-grid-cell-stock" style="flex:{{grid.selectorFlex}}">
         <!-- ng-click=handleRowClick here has unintended 

diff --git a/Open-ILS/src/templates/staff/test/t_autogrid.tt2 b/Open-ILS/src/templates/staff/test/t_autogrid.tt2
index 5824c7c..0c077ba 100644 (file)
--- a/Open-ILS/src/templates/staff/test/t_autogrid.tt2
+++ b/Open-ILS/src/templates/staff/test/t_autogrid.tt2
@@ -25,8 +25,6 @@
 </eg-grid>
 -->
 
-<h1>AutoGrid w/ Auto Fields</h1>
-
 <eg-grid
   persist-key="eg.staff.test.grid.auto-fields"
   idl-class="rmsr"

diff --git a/Open-ILS/web/js/ui/default/staff/services/grid2.js b/Open-ILS/web/js/ui/default/staff/services/grid2.js
index 19be36e..9d5c152 100644 (file)
--- a/Open-ILS/web/js/ui/default/staff/services/grid2.js
+++ b/Open-ILS/web/js/ui/default/staff/services/grid2.js
@@ -64,6 +64,7 @@ angular.module('egGridMod',
                 grid.limit = 25;
                 grid.items = [];
                 grid.selected = {}; // idField-based
+                grid.totalCount = -1;
                 grid.dataProvider = $scope.dataProvider;
                 grid.idlClass = $scope.idlClass;
                 grid.mainLabel = $scope.mainLabel;
@@ -80,6 +81,8 @@ angular.module('egGridMod',
 
                 if ($scope.autoFields) {
                     grid.indexField = egIDL.classes[grid.idlClass].pkey;
+                    if (!grid.mainLabel)
+                        grid.mainLabel = egIDL.classes[grid.idlClass].label;
                     grid.columnsProvider.compileAutoColumns();
                 }
 
@@ -96,10 +99,55 @@ angular.module('egGridMod',
                 $scope.grid = grid;
             }
 
+            grid.page = function() {
+                return (grid.offset / grid.limit) + 1;
+            }
+
+            grid.goToPage = function(page) {
+                page = Number(page);
+                if (angular.isNumber(page) && page > 0) {
+                    grid.offset = (page - 1) * grid.limit;
+                    grid.collect();
+                }
+            }
+
+            grid.onFirstPage = function() {
+                return grid.offset == 0;
+            }
+
+            grid.hasNextPage = function() {
+                // we have less data than requested, there must
+                // not be any more pages
+                if (grid.count() < grid.limit) return false;
+
+                // if the total count is not known, assume that a full
+                // page of data implies more pages are available.
+                if (grid.totalCount == -1) return true;
+
+                // we have a full page of data, but is there more?
+                return grid.totalCount > (grid.offset + grid.count());
+            }
+
+            grid.incrementPage = function() {
+                grid.offset += grid.limit;
+                grid.collect();
+            }
+
+            grid.decrementPage = function() {
+                if (grid.offset < grid.limit) {
+                    grid.offset = 0;
+                } else {
+                    grid.offset -= grid.limit;
+                }
+                grid.collect();
+            }
+
+            // number of items loaded for the current page of results
             grid.count = function() {
                 return grid.items.length;
             }
 
+            // returns the unique identifier value for the provided item
             grid.indexValue = function(item) {
                 if (angular.isObject(item)) {
                     if (item !== null) {
@@ -171,6 +219,7 @@ angular.module('egGridMod',
                 return -1;
             }
 
+            // handles click, control-click, and shift-click
             grid.handleRowClick = function($event, item) {
                 var index = grid.indexValue(item);
 
@@ -253,6 +302,16 @@ angular.module('egGridMod',
                 grid.collect();
             }
 
+            grid.toggleConfDisplay = function() {
+                if (grid.showGridConf) {
+                    grid.showGridConf = false;
+                    grid.compileSort();
+                    grid.collect();
+                } else {
+                    grid.showGridConf = true;
+                }
+            }
+
             // asks the dataProvider for a page of data
             grid.collect = function() {
                 grid.items = [];
@@ -304,7 +363,7 @@ angular.module('egGridMod',
 
         cols.showAllColumns = function() {
             angular.forEach(cols.columns, function(column) {
-                col.visible[column.name] = true;
+                cols.visible[column.name] = true;
             });
         }