LP#1777207: have eg-grid generate DOM nodes only for visible columns
[evergreen-equinox.git] / Open-ILS / src / templates / staff / share / t_autogrid.tt2
index 7a85f51..73850e0 100644 (file)
@@ -8,14 +8,14 @@
 
   <div class="eg-grid-primary-label">{{mainLabel}}</div>
 
-  <div class="btn-group" 
-    is-open="gridMenuIsOpen" ng-if="menuLabel && showMenu" dropdown>
-    <button type="button" class="btn btn-default dropdown-toggle eg-grid-menu-item">
+  <div class="btn-group" style="margin-top: 4px"
+    is-open="gridMenuIsOpen" ng-if="menuLabel && showMenu" uib-dropdown>
+    <button type="button" class="btn btn-default eg-grid-menu-item" uib-dropdown-toggle>
       {{menuLabel}}<span class="caret"></span>
     </button>
-    <ul class="dropdown-menu">
-      <li ng-repeat="item in menuItems | filter : { standalone : 'false' }" ng-class="{divider: item.divider}">
-        <a ng-if="!item.divider" href ng-disabled="item.disabled"
+    <ul class="scrollable-menu" uib-dropdown-menu>
+      <li ng-repeat="item in menuItems | filter : { standalone : 'false' }" ng-if="!item.checkbox && !item.hidden()" ng-class="{divider: item.divider}">
+        <a ng-if="!item.divider" href a-disabled="item.disabled()"
           ng-click="item.handler()">{{item.label}}</a>
       </li>
     </ul>
       ng-click="item.handler(item, item.handlerData)">
         {{item.label}}
     </button>
+  </div>
+
+  <!-- Always show checkbox items as a
+       horizontal row of buttons -->
+  <div class="btn-group" ng-if="showMenu">
     <div ng-if="item.checkbox"
       class="btn btn-default eg-grid-menu-item"
       ng-repeat="item in menuItems">
     <button type="button" class="btn btn-default" 
       ng-show="showPagination"
       ng-class="{disabled : !hasNextPage()}"
+      ng-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">
+    <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
+        ng-disabled="!hasSelected()">
         [% l('Actions') %] <span class="caret"></span>                       
       </button>                                                              
-      <ul class="dropdown-menu pull-right grid-action-dropdown">                                  
+      <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>
       </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">
+    <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 class="dropdown-menu">
+      <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" ng-repeat="t in [500,1000]">
+          <a href ng-click='offset(0);limit(t);collect()'>
+            {{t}}
+          </a>
+        </li>
+        <li ng-if="allowAll" >
+          <a href ng-click='confirmAllowAllAndCollect();'>[% l('All') %]</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">
+    <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 class="dropdown-menu">
+      <ul uib-dropdown-menu>
         <li>
           <div class="input-group">
             <input type="text" class="form-control"
       </ul>
     </div>
 
-    <div class="btn-group" dropdown is-open="gridColumnPickerIsOpen" ng-show="showPicker">
+    <div class="btn-group" uib-dropdown is-open="gridColumnPickerIsOpen" ng-show="showPicker">
       <button type="button" 
-        class="btn btn-default dropdown-toggle">
+        class="btn btn-default" uib-dropdown-toggle>
         <span class="caret"></span>
       </button>
-      <ul class="dropdown-menu pull-right eg-grid-column-picker">
+      <ul class="pull-right eg-grid-column-picker" uib-dropdown-menu>
+        <li>
+          <a href ng-click="showColumnDialog()">
+            <span class="glyphicon glyphicon-wrench"></span>
+            [% l('Manage Columns') %]
+          </a>
+        </li>
         <li><a href ng-click="toggleConfDisplay()">
-          <span class="glyphicon glyphicon-wrench"></span>
-          [% l('Configure Columns') %]
+          <span class="glyphicon glyphicon-resize-horizontal"></span>
+          [% l('Manage Column Widths') %]
         </a></li>
         <li><a href ng-click="saveConfig()">
           <span class="glyphicon glyphicon-floppy-save"></span>
           <span class="glyphicon glyphicon-refresh"></span>
           [% l('Reset Columns') %]
         </a></li>
-        <li><a ng-click="generateCSVExportURL()" 
+        <li><a ng-click="generateCSVExportURL($event)" 
           download="{{csvExportFileName}}.csv" ng-href="{{csvExportURL}}">
           <span class="glyphicon glyphicon-download"></span>
-          [% l('Download CSV') %]
+          [% l('Download Full CSV') %]
         </a></li>
-        <li><a href ng-click="printCSV()">
+        <li><a href ng-click="printHTML()">
           <span class="glyphicon glyphicon-print"></span>
-          [% l('Print CSV') %]
+          [% l('Print Full Grid') %]
         </a></li>
         <li role="presentation" class="divider"></li>
         <li ng-repeat="col in columns">
 <div class="eg-grid" ng-class="{'eg-grid-as-conf' : showGridConf}">
 
   <!-- import our eg-grid-field defs -->
-  <div ng-transclude></div>
+  <div style="display: none;" ng-transclude></div>
 
   <div class="eg-grid-row eg-grid-header-row">
     <div class="eg-grid-cell eg-grid-cell-stock" ng-show="showIndex">
           type='checkbox' ng-model="selectAll"/> 
       </div>
     </div>
+    <div class="eg-grid-cell eg-grid-cell-stock-status" ng-show="statusColumn.isEnabled">
+      <div title="[% l('Status Icon Column') %]">[% l('Status') %]</div>
+    </div>
     <div class="eg-grid-cell"
         eg-grid-column-drag-dest
+        ng-class="{'eg-grid-column-last-mod' : isLastModifiedColumn(col)}"
         column="{{col.name}}"
         eg-right-click="onContextMenu($event)"
         ng-repeat="col in columns"
 
   <!-- Inline grid configuration row -->
   <div class="eg-grid-row eg-grid-conf-row" ng-show="showGridConf">
-    <div class="eg-grid-cell eg-grid-cell-conf-header">
+    <div class="eg-grid-cell"
+      ng-class="statusColumn.isEnabled ? 'eg-grid-cell-conf-header-status' : 'eg-grid-cell-conf-header'">
       <div class="eg-grid-conf-cell-entry">[% l('Expand') %]</div>
       <div class="eg-grid-conf-cell-entry">[% l('Shrink') %]</div>
-      <div class="eg-grid-conf-cell-entry" ng-if="!disableMultiSort">[% l('Sort') %]</div>
     </div>
     <div class="eg-grid-cell"
       ng-repeat="col in columns"
       <div class="eg-grid-conf-cell-entry">
         <a href="" title="[% l('Make column wider') %]"
           ng-click="modifyColumnFlex(col,1)">
-          <span class="glyphicon glyphicon-fast-forward"></span>
+          <span class="glyphicon glyphicon-resize-full"></span>
         </a>
       </div>
       <div class="eg-grid-conf-cell-entry">
         <a href="" title="[% l('Make column narrower') %]"
           ng-click="modifyColumnFlex(col,-1)">
-          <span class="glyphicon glyphicon-fast-backward"></span>
+          <span class="glyphicon glyphicon-resize-small"></span>
         </a>
       </div>
-      <div class="eg-grid-conf-cell-entry" ng-if="!disableMultiSort">
-        <div ng-if="col.multisortable">
-          <input type='number' ng-model="col.sort"
-            title="[% l('Sort Priority / Direction') %]" style='width:2.3em'/>
-        </div>
-      </div>
     </div>
   </div>
 
         id="eg-grid-row-{{$index + 1}}"
         ng-repeat="item in items"
         ng-show="items.length > 0"
-        ng-class="{'eg-grid-row-selected' : selected[indexValue(item)]}">
+        ng-class="[{'eg-grid-row-selected' : selected[indexValue(item)]}, rowClass.apply(item)]">
       <div class="eg-grid-cell eg-grid-cell-stock" ng-show="showIndex"
         ng-click="handleRowClick($event, item)" title="[% l('Row Index') %]">
         <a href ng-show="gridControls.activateItem" 
              consequences and is unnecessary, avoid it -->
         <div>
           <input type='checkbox' title="[% l('Select Row') %]"
+            ng-change="updateSelected()"
             ng-model="selected[indexValue(item)]"/>
         </div>
       </div>
+      <div class="eg-grid-cell eg-grid-cell-stock-status" ng-show="statusColumn.isEnabled">
+          <span ng-bind-html="statusColumn.template(item)"></span>
+      </div>
       <div class="eg-grid-cell eg-grid-cell-content"
           ng-click="handleRowClick($event, item)"
           ng-dblclick="gridControls.activateItem(item)"
           ng-repeat="col in columns"
-          style="text-align:{{col.align}}; padding-left:5px; padding-right:5px; flex:{{col.flex}}"
-          ng-show="col.visible">
+          ng-class="col.cssSelector"
+          style="text-align:{{col.align}}; flex:{{col.flex}}"
+          ng-if="col.visible">
 
           <!-- if the cell comes with its own template,
                translate that content into HTML and insert it here -->
-          <span ng-if="col.template" 
-            ng-bind-html="translateCellTemplate(col, item)">
+          <span ng-if="col.template && !col.compiled" 
+            style="padding-left:5px; padding-right:10px;">
+            <span tooltip-class="eg-grid-tooltip"
+              tooltip-class="eg-grid-tooltip"
+              tooltip-placement="top-left"
+              uib-tooltip-html="getHtmlTooltip(col, item)">
+              <span ng-bind-html="translateCellTemplate(col, item)"></span>
+            </span>
+          </span>
+
+          <span ng-if="col.template && col.compiled" style="padding-left:5px; padding-right:10px;"
+            compile="col.template">
           </span>
 
           <!-- otherwise, simply display the item value, which may 
                pass through datatype-specific filtering. -->
-          <span ng-if="!col.template">
-            {{itemFieldValue(item, col) | egGridValueFilter:col}}
+          <span ng-if="!col.template" 
+            uib-tooltip="{{itemFieldValue(item, col) | egGridValueFilter:col:item}}"
+            tooltip-placement="top-left"
+            tooltip-class="eg-grid-tooltip"
+            style="padding-left:5px; padding-right:10px;">
+            {{itemFieldValue(item, col) | egGridValueFilter:col:item}}
           </span>
       </div>
     </div>