LP#1461739: Added paging controls to the bottom of autogrids

This is a repatch of LP#1461739: Paging controls needed at the bottom
of the web client patron search.

The actions drop-down menu now appears on the Record Buckets,
and Copy Buckets pages.

staff/services/grid.js was updated to account for the new
*Top and *Bottom variables (e.g., gridColumnPickerIsOpenTop).

To test the fix for this bug
  [1] Under Cataloging choose Record Buckets.
  [2] Under Cataloging choose Copy Buckets.

Signed-off-by: Victoria Lewis <vlewis@catalystitservices.com>
	modified:   Open-ILS/src/templates/staff/share/button_bar.tt2
	modified:   Open-ILS/src/templates/staff/share/t_autogrid.tt2
	modified:   Open-ILS/web/js/ui/default/staff/services/grid.js

diff --git a/Open-ILS/src/templates/staff/share/button_bar.tt2 b/Open-ILS/src/templates/staff/share/button_bar.tt2
index be205f8..419129e 100644 (file)
--- a/Open-ILS/src/templates/staff/share/button_bar.tt2
+++ b/Open-ILS/src/templates/staff/share/button_bar.tt2
@@ -4,7 +4,7 @@
   <!-- putting a flex div here forces the remaining content to float right -->
   <div class="flex-cell"></div>  
   <!-- column picker, pager, etc. -->
-  <div class="btn-group column-picker">
+  <div class="btn-group column-picker" ng-show="showPagination || showActions || showPicker">
 
     <!-- first page -->
     <button type="button" class="btn btn-default" 
@@ -32,15 +32,19 @@
     </button>
 
     <!-- actions drop-down menu -->
-    <div class="btn-group" ng-if="actions.length" dropdown>                                                  
+    <div class="btn-group" ng-show="showActions" ng-if="actionGroups.length > 1 || actionGroups[0].actions.length" dropdown>                                         
       <button type="button" class="btn btn-default dropdown-toggle">
         [% l('Actions') %] <span class="caret"></span>                       
       </button>                                                              
       <ul class="dropdown-menu pull-right grid-action-dropdown">                                  
-        <li ng-repeat="action in actions" ng-class="{divider: action.divider}" ng-hide="actionHide(action)">
+        <li ng-repeat-start="group in actionGroups">
+          <span style="padding-left: 1em;" ng-if="group.label"><strong><u>{{group.label}}</u></strong></span>
+        </li>
+        <li ng-repeat="action in group.actions" ng-class="{divider: action.divider, disabled: actionDisable(action)}" ng-hide="actionHide(action)">
           <a ng-if="!action.divider" href
-            ng-click="actionLauncher(action)">{{action.label}}</a>
+            ng-click="!actionDisable(action) && actionLauncher(action)">{{action.label}}</a>
         </li>
+        <span ng-repeat-end/>
       </ul>
     </div>
 
@@ -96,7 +100,7 @@
         </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='goToPage(t);gridPageSelectIsOpen=false;'>{{t}}</a>
+          <a href ng-click='goToPage(t);gridPageSelectIsOpenTop=false; gridPageSelectIsOpenBottom=false;'>{{t}}</a>
         </li>
       </ul>
     </div>

diff --git a/Open-ILS/src/templates/staff/share/t_autogrid.tt2 b/Open-ILS/src/templates/staff/share/t_autogrid.tt2
index 4d25413..3157686 100644 (file)
--- a/Open-ILS/src/templates/staff/share/t_autogrid.tt2
+++ b/Open-ILS/src/templates/staff/share/t_autogrid.tt2
@@ -57,147 +57,6 @@
         [% INCLUDE "staff/share/button_bar.tt2" top=1 %]
     </div>
 
-
-  <!-- column picker, pager, etc. -->
-  <div class="btn-group column-picker" ng-show="showPagination || showActions || showPicker">
-
-    <!-- first page -->
-    <button type="button" class="btn btn-default" 
-      ng-show="showPagination"
-      ng-class="{disabled : onFirstPage()}" 
-      ng-click="offset(0);collect()"
-      title="[% l('Start') %]">
-        <span class="glyphicon glyphicon-fast-backward"></span>
-    </button>
-
-    <!-- previous page -->
-    <button type="button" class="btn btn-default" 
-      ng-show="showPagination"
-      ng-class="{disabled : onFirstPage()}"
-      ng-click="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-show="showPagination"
-      ng-class="{disabled : !hasNextPage()}"
-      ng-click="incrementPage()"
-      title="[% l('Next Page') %]">
-        <span class="glyphicon glyphicon-forward"></span>
-    </button>
-
-    <!-- actions drop-down menu -->
-    <div class="btn-group" ng-show="showActions" ng-if="actionGroups.length > 1 || actionGroups[0].actions.length" dropdown>                                                  
-      <button type="button" class="btn btn-default dropdown-toggle">
-        [% l('Actions') %] <span class="caret"></span>                       
-      </button>                                                              
-      <ul class="dropdown-menu pull-right grid-action-dropdown">                                  
-        <li ng-repeat-start="group in actionGroups">
-          <span style="padding-left: 1em;" ng-if="group.label"><strong><u>{{group.label}}</u></strong></span>
-        </li>
-        <li ng-repeat="action in group.actions" ng-class="{divider: action.divider, disabled: actionDisable(action)}" ng-hide="actionHide(action)">
-          <a ng-if="!action.divider" href
-            ng-click="!actionDisable(action) && actionLauncher(action)">{{action.label}}</a>
-        </li>
-        <span ng-repeat-end/>
-      </ul>
-    </div>
-
-    <div class="btn-group" dropdown is-open="gridRowCountIsOpen" ng-show="showPagination">
-      <button type="button" title="[% ('Select Row Count') %]"
-        class="btn btn-default dropdown-toggle">
-        [% l('Rows [_1]', '{{limit()}}') %]
-        <span class="caret"></span>
-      </button>
-      <ul class="dropdown-menu">
-        <li ng-repeat="t in [5,10,25,50,100]">
-          <a href ng-click='offset(0);limit(t);collect()'>
-            {{t}}
-          </a>
-        </li>
-      </ul>
-    </div>
-
-    <div class="btn-group" dropdown is-open="gridPageSelectIsOpen" ng-show="showPagination">
-      <button type="button" title="[% ('Select Page') %]"
-        class="btn btn-default dropdown-toggle">
-        [% l('Page [_1]', '{{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="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='goToPage(t);gridPageSelectIsOpen=false;'>{{t}}</a>
-        </li>
-      </ul>
-    </div>
-
-    <div class="btn-group" dropdown is-open="gridColumnPickerIsOpen" ng-show="showPicker">
-      <button type="button" 
-        class="btn btn-default dropdown-toggle">
-        <span class="caret"></span>
-      </button>
-      <ul class="dropdown-menu pull-right eg-grid-column-picker">
-        <li><a href ng-click="toggleConfDisplay()">
-          <span class="glyphicon glyphicon-wrench"></span>
-          [% l('Configure Columns') %]
-        </a></li>
-        <li><a href ng-click="saveConfig()">
-          <span class="glyphicon glyphicon-floppy-save"></span>
-          [% l('Save Columns') %]
-        </a></li>
-<!--
-        <li><a href ng-click="showAllColumns()">
-          <span class="glyphicon glyphicon-resize-full"></span>
-          [% l('Show All Columns') %]
-        </a></li>
-        <li><a href ng-click="hideAllColumns()">
-          <span class="glyphicon glyphicon-resize-small"></span>
-          [% l('Hide All Columns') %]
-        </a></li>
--->
-        <li><a href ng-click="resetColumns()">
-          <span class="glyphicon glyphicon-refresh"></span>
-          [% l('Reset Columns') %]
-        </a></li>
-        <li><a ng-click="generateCSVExportURL()" 
-          download="{{csvExportFileName}}.csv" ng-href="{{csvExportURL}}">
-          <span class="glyphicon glyphicon-download"></span>
-          [% l('Download CSV') %]
-        </a></li>
-        <li><a href ng-click="printCSV()">
-          <span class="glyphicon glyphicon-print"></span>
-          [% l('Print CSV') %]
-        </a></li>
-        <li role="presentation" class="divider"></li>
-        <li ng-repeat="col in columns">
-          <a href title="{{col.idlclass}}" ng-click="toggleColumnVisibility(col)">
-              <span ng-if="col.visible" 
-                class="label label-success">&#x2713;</span>
-              <span ng-if="!col.visible" 
-                class="label label-warning">&#x2717;</span>
-              <span>{{col.label}}</span>
-          </a>
-        </li>
-      </ul>
-    </div>
-  </div>
 </div>
 
 <!-- Grid -->

diff --git a/Open-ILS/web/js/ui/default/staff/services/grid.js b/Open-ILS/web/js/ui/default/staff/services/grid.js
index 66a2bf3..682344c 100644 (file)
--- a/Open-ILS/web/js/ui/default/staff/services/grid.js
+++ b/Open-ILS/web/js/ui/default/staff/services/grid.js
@@ -356,7 +356,8 @@ angular.module('egGridMod',
             // remove the stored column configuration preferenc, then recover 
             // the column visibility information from the initial page load.
             $scope.resetColumns = function() {
-                $scope.gridColumnPickerIsOpen = false;
+                $scope.gridColumnPickerIsOpenTop = false;
+                $scope.gridColumnPickerIsOpenBottom = false;
                 egCore.hatch.removeItem('eg.grid.' + grid.persistKey)
                 .then(function() {
                     grid.columnsProvider.reset(); 
@@ -365,19 +366,22 @@ angular.module('egGridMod',
             }
 
             $scope.showAllColumns = function() {
-                $scope.gridColumnPickerIsOpen = false;
+                $scope.gridColumnPickerIsOpenTop = false;
+                $scope.gridColumnPickerIsOpenBottom = false;
                 grid.columnsProvider.showAllColumns();
                 if (grid.selfManagedData) grid.collect();
             }
 
             $scope.hideAllColumns = function() {
-                $scope.gridColumnPickerIsOpen = false;
+                $scope.gridColumnPickerIsOpenTop = false;
+                $scope.gridColumnPickerIsOpenBottom = false;
                 grid.columnsProvider.hideAllColumns();
                 // note: no need to fetch new data if no columns are visible
             }
 
             $scope.toggleColumnVisibility = function(col) {
-                $scope.gridColumnPickerIsOpen = false;
+                $scope.gridColumnPickerIsOpenTop = false;
+                $scope.gridColumnPickerIsOpenBottom = false;
                 col.visible = !col.visible;
 
                 // egGridFlatDataProvider only retrieves data to be
@@ -389,7 +393,8 @@ angular.module('egGridMod',
             // save the columns configuration (position, sort, width) to
             // eg.grid.<persist-key>
             $scope.saveConfig = function() {
-                $scope.gridColumnPickerIsOpen = false;
+                $scope.gridColumnPickerIsOpenTop = false;
+                $scope.gridColumnPickerIsOpenBottom = false;
 
                 if (!grid.persistKey) {
                     console.warn(
@@ -847,7 +852,8 @@ angular.module('egGridMod',
                     $scope.showGridConf = true;
                 }
 
-                $scope.gridColumnPickerIsOpen = false;
+                $scope.gridColumnPickerIsOpenTop = false;
+                $scope.gridColumnPickerIsOpenBottom = false;
             }
 
             // called when a dragged column is dropped onto itself
@@ -892,7 +898,8 @@ angular.module('egGridMod',
             // sets the download file name and inserts the current CSV
             // into a Blob URL for browser download.
             $scope.generateCSVExportURL = function() {
-                $scope.gridColumnPickerIsOpen = false;
+                $scope.gridColumnPickerIsOpenTop = false;
+                $scope.gridColumnPickerIsOpenBottom = false;
 
                 // let the file name describe the grid
                 $scope.csvExportFileName = 
@@ -907,7 +914,8 @@ angular.module('egGridMod',
             }
 
             $scope.printCSV = function() {
-                $scope.gridColumnPickerIsOpen = false;
+                $scope.gridColumnPickerIsOpenTop = false;
+                $scope.gridColumnPickerIsOpenBottom = false;
                 egCore.print.print({
                     context : 'default', 
                     content : grid.generateCSV(),
@@ -983,9 +991,12 @@ angular.module('egGridMod',
                 // ensure all of our dropdowns are closed
                 // TODO: git rid of these and just use dropdown-toggle, 
                 // which is more reliable.
-                $scope.gridColumnPickerIsOpen = false;
-                $scope.gridRowCountIsOpen = false;
-                $scope.gridPageSelectIsOpen = false;
+                $scope.gridColumnPickerIsOpenTop = false;
+                $scope.gridColumnPickerIsOpenBottom = false;
+                $scope.gridRowCountIsOpenTop = false;
+                $scope.gridRowCountIsOpenBottom = false;
+                $scope.gridPageSelectIsOpenTop = false;
+                $scope.gridPageSelectIsOpenBottom = false;
 
                 $scope.items = [];
                 $scope.selected = {};