LP#1461739 Paging controls on bottom

Patches code introduced in commit e999fa846 to work as
intended, no longer removing the actions menu.  The grid
controls menu will now display above and below the grid
correctly.

Signed-off-by: Kyle Huckins <khuckins@catalystdevworks.com>
 Changes to be committed:
	modified:   Open-ILS/src/templates/staff/share/t_autogrid.tt2
	new file:   Open-ILS/src/templates/staff/share/t_button_bar.tt2
	modified:   Open-ILS/web/js/ui/default/staff/services/grid.js

diff --git a/Open-ILS/src/templates/staff/share/t_autogrid.tt2 b/Open-ILS/src/templates/staff/share/t_autogrid.tt2
index 82fa3b2..2bef2b1 100644 (file)
--- a/Open-ILS/src/templates/staff/share/t_autogrid.tt2
+++ b/Open-ILS/src/templates/staff/share/t_autogrid.tt2
@@ -54,148 +54,10 @@
   <div class="flex-cell"></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" uib-dropdown>                                                  
-      <button type="button" class="btn btn-default" uib-dropdown-toggle>
-        [% l('Actions') %] <span class="caret"></span>                       
-      </button>                                                              
-      <ul class="pull-right grid-action-dropdown scrollable-menu" uib-dropdown-menu>
-        <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" uib-dropdown is-open="gridRowCountIsOpen" ng-show="showPagination">
-      <button type="button" title="[% l('Select Row Count') %]"
-        class="btn btn-default" uib-dropdown-toggle>
-        [% l('Rows [_1]', '{{limit()}}') %]
-        <span class="caret"></span>
-      </button>
-      <ul uib-dropdown-menu>
-        <li ng-repeat="t in [5,10,25,50,100]">
-          <a href ng-click='offset(0);limit(t);collect()'>
-            {{t}}
-          </a>
-        </li>
-        <li ng-if="allowAll" >
-          <a href ng-click='offset(0);limit(10000);collect()'>[% l('All') %]</a>
-        </li>
-      </ul>
-    </div>
-
-    <div class="btn-group" uib-dropdown is-open="gridPageSelectIsOpen" ng-show="showPagination">
-      <button type="button" title="[% l('Select Page') %]"
-        class="btn btn-default" uib-dropdown-toggle>
-        [% l('Page [_1]', '{{page()}}') %]
-        <span class="caret"></span>
-      </button>
-      <ul uib-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>
+        [% INCLUDE "staff/share/t_button_bar.tt2" top=1 %]
     </div>
 
-    <div class="btn-group" uib-dropdown is-open="gridColumnPickerIsOpen" ng-show="showPicker">
-      <button type="button" 
-        class="btn btn-default" uib-dropdown-toggle>
-        <span class="caret"></span>
-      </button>
-      <ul class="pull-right eg-grid-column-picker" uib-dropdown-menu>
-        <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 -->
@@ -320,7 +182,12 @@
       </div>
     </div>
   </div>
-
-
 </div>
-
+<div class="eg-grid-row eg-grid-action-row"></div>
+<div class="eg-grid-row eg-grid-action-row">
+  <div class="flex-cell"></div>
+  <!-- column picker, pager, etc. -->
+  <div>
+      [% INCLUDE "staff/share/t_button_bar.tt2" top=0 %]
+  </div>
+</div>

diff --git a/Open-ILS/src/templates/staff/share/t_button_bar.tt2 b/Open-ILS/src/templates/staff/share/t_button_bar.tt2
new file mode 100644 (file)
index 0000000..6b42f7b
--- /dev/null
+++ b/Open-ILS/src/templates/staff/share/t_button_bar.tt2
@@ -0,0 +1,142 @@
+<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" uib-dropdown>                                                  
+      <button type="button" class="btn btn-default" uib-dropdown-toggle>
+        [% l('Actions') %] <span class="caret"></span>
+      </button>
+      <ul class="pull-right grid-action-dropdown scrollable-menu" uib-dropdown-menu>
+        <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" uib-dropdown is-open="gridRowCountIsOpen[% top %]" ng-show="showPagination">
+      <button type="button" title="[% l('Select Row Count') %]"
+        class="btn btn-default" uib-dropdown-toggle>
+        [% l('Rows [_1]', '{{limit()}}') %]
+        <span class="caret"></span>
+      </button>
+      <ul uib-dropdown-menu>
+        <li ng-repeat="t in [5,10,25,50,100]">
+          <a href ng-click='offset(0);limit(t);collect()'>
+            {{t}}
+          </a>
+        </li>
+        <li ng-if="allowAll" >
+          <a href ng-click='offset(0);limit(10000);collect()'>[% l('All') %]</a>
+        </li>
+      </ul>
+    </div>
+
+    <div class="btn-group" uib-dropdown is-open="gridPageSelectIsOpen[% top %]" ng-show="showPagination">
+      <button type="button" title="[% l('Select Page') %]"
+        class="btn btn-default" uib-dropdown-toggle>
+        [% l('Page [_1]', '{{page()}}') %]
+        <span class="caret"></span>
+      </button>
+      <ul uib-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[% top %]=false;'>{{t}}</a>
+        </li>
+      </ul>
+    </div>
+
+    <div class="btn-group" uib-dropdown is-open="gridColumnPickerIsOpen[% top %]" ng-show="showPicker">
+      <button type="button" 
+        class="btn btn-default" uib-dropdown-toggle>
+        <span class="caret"></span>
+      </button>
+      <ul class="pull-right eg-grid-column-picker" uib-dropdown-menu>
+        <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>
\ No newline at end of file

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 6c3e075..fc6f4b6 100644 (file)
--- a/Open-ILS/web/js/ui/default/staff/services/grid.js
+++ b/Open-ILS/web/js/ui/default/staff/services/grid.js
@@ -358,7 +358,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.gridColumnPickerIsOpen1 = false;
+                $scope.gridColumnPickerIsOpen0 = false;
                 egCore.hatch.removeItem('eg.grid.' + grid.persistKey)
                 .then(function() {
                     grid.columnsProvider.reset(); 
@@ -367,19 +368,22 @@ angular.module('egGridMod',
             }
 
             $scope.showAllColumns = function() {
-                $scope.gridColumnPickerIsOpen = false;
+                $scope.gridColumnPickerIsOpen1 = false;
+                $scope.gridColumnPickerIsOpen0 = false;
                 grid.columnsProvider.showAllColumns();
                 if (grid.selfManagedData) grid.collect();
             }
 
             $scope.hideAllColumns = function() {
-                $scope.gridColumnPickerIsOpen = false;
+                $scope.gridColumnPickerIsOpen1 = false;
+                $scope.gridColumnPickerIsOpen0 = false;
                 grid.columnsProvider.hideAllColumns();
                 // note: no need to fetch new data if no columns are visible
             }
 
             $scope.toggleColumnVisibility = function(col) {
-                $scope.gridColumnPickerIsOpen = false;
+                $scope.gridColumnPickerIsOpen1 = false;
+                $scope.gridColumnPickerIsOpen0 = false;
                 col.visible = !col.visible;
 
                 // egGridFlatDataProvider only retrieves data to be
@@ -391,7 +395,8 @@ angular.module('egGridMod',
             // save the columns configuration (position, sort, width) to
             // eg.grid.<persist-key>
             $scope.saveConfig = function() {
-                $scope.gridColumnPickerIsOpen = false;
+                $scope.gridColumnPickerIsOpen1 = false;
+                $scope.gridColumnPickerIsOpen0 = false;
 
                 if (!grid.persistKey) {
                     console.warn(
@@ -854,7 +859,8 @@ angular.module('egGridMod',
                     $scope.showGridConf = true;
                 }
 
-                $scope.gridColumnPickerIsOpen = false;
+                $scope.gridColumnPickerIsOpen1 = false;
+                $scope.gridColumnPickerIsOpen0 = false;
             }
 
             // called when a dragged column is dropped onto itself
@@ -899,7 +905,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.gridColumnPickerIsOpen1 = false;
+                $scope.gridColumnPickerIsOpen0 = false;
 
                 // let the file name describe the grid
                 $scope.csvExportFileName = 
@@ -914,7 +921,8 @@ angular.module('egGridMod',
             }
 
             $scope.printCSV = function() {
-                $scope.gridColumnPickerIsOpen = false;
+                $scope.gridColumnPickerIsOpen1 = false;
+                $scope.gridColumnPickerIsOpen0 = false;
                 egCore.print.print({
                     context : 'default', 
                     content : grid.generateCSV(),
@@ -990,9 +998,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.gridColumnPickerIsOpen1 = false;
+                $scope.gridColumnPickerIsOpen0 = false;
+                $scope.gridRowCountIsOpen1 = false;
+                $scope.gridRowCountIsOpen0 = false;
+                $scope.gridPageSelectIsOpen1 = false;
+                $scope.gridPageSelectIsOpen0 = false;
 
                 $scope.items = [];
                 $scope.selected = {};