Open-ILS/src/templates/staff/share/t_autogrid.tt2

   1
   2 <!--
   3   Actions row.
   4   This sits above the grid and contains the column picker, etc.
   5 -->
   6
   7 <div class="eg-grid-row eg-grid-action-row">
   8
   9   <div class="eg-grid-primary-label">{{mainLabel}}</div>
  10
  11   <div class="btn-group" style="margin-top: 4px"
  12     is-open="gridMenuIsOpen" ng-if="menuLabel && showMenu" uib-dropdown>
  13     <button type="button" class="btn btn-default eg-grid-menu-item" uib-dropdown-toggle>
  14       {{menuLabel}}<span class="caret"></span>
  15     </button>
  16     <ul class="scrollable-menu" uib-dropdown-menu>
  17       <li ng-repeat="item in menuItems | filter : { standalone : 'false' }" ng-if="!item.checkbox && !item.hidden()" ng-class="{divider: item.divider}">
  18         <a ng-if="!item.divider" href a-disabled="item.disabled()"
  19           ng-click="item.handler()">{{item.label}}</a>
  20       </li>
  21     </ul>
  22     <button ng-if="!item.checkbox && !item.hidden()"
  23       class="btn btn-default eg-grid-menu-item"
  24       ng-disabled="item.disabled()"
  25       ng-repeat="item in menuItems | filter : { standalone : 'true' }"
  26       ng-click="item.handler()">{{item.label}}</button>
  27   </div>
  28
  29   <!-- if no menu label is present, present menu-items as a
  30        horizontal row of buttons -->
  31   <div class="btn-group" ng-if="!menuLabel && showMenu">
  32     <button ng-if="!item.checkbox && !item.hidden()"
  33       class="btn btn-default eg-grid-menu-item"
  34       ng-repeat="item in menuItems"
  35       ng-disabled="item.disabled()"
  36       ng-click="item.handler(item, item.handlerData)">
  37         {{item.label}}
  38     </button>
  39   </div>
  40
  41   <!-- Always show checkbox items as a
  42        horizontal row of buttons -->
  43   <div class="btn-group" ng-if="showMenu">
  44     <div ng-if="item.checkbox"
  45       class="btn btn-default eg-grid-menu-item"
  46       ng-repeat="item in menuItems">
  47         <label for="{{item.checkbox}}">{{item.label}}</label>
  48         <input style="padding-left: 5px"
  49                type="checkbox"
  50                id="{{item.checkbox}}"
  51                ng-disabled="item.disabled()"
  52                ng-model="item.checked"
  53                ng-checked="item.checked"
  54                ng-change="item.handler(item)"/>
  55     </div>
  56   </div>
  57
  58   <!-- putting a flex div here forces the remaining content to float right -->
  59   <div class="flex-cell"></div>
  60
  61   <!-- column picker, pager, etc. -->
  62   <div class="btn-group column-picker" ng-show="showPagination || showActions || showPicker">
  63
  64     <!-- first page -->
  65     <button type="button" class="btn btn-default"
  66       ng-show="showPagination"
  67       ng-class="{disabled : onFirstPage()}"
  68       ng-click="offset(0);collect()"
  69       title="[% l('Start') %]">
  70         <span class="glyphicon glyphicon-fast-backward"></span>
  71     </button>
  72
  73     <!-- previous page -->
  74     <button type="button" class="btn btn-default"
  75       ng-show="showPagination"
  76       ng-class="{disabled : onFirstPage()}"
  77       ng-click="decrementPage()"
  78       title="[% l('Previous Page') %]">
  79         <span class="glyphicon glyphicon-backward"></span>
  80     </button>
  81
  82     <!-- next page -->
  83     <!-- todo: paging needs a total count value to be fully functional -->
  84     <button type="button" class="btn btn-default"
  85       ng-show="showPagination"
  86       ng-class="{disabled : !hasNextPage()}"
  87       ng-click="incrementPage()"
  88       title="[% l('Next Page') %]">
  89         <span class="glyphicon glyphicon-forward"></span>
  90     </button>
  91
  92     <!-- actions drop-down menu -->
  93     <div class="btn-group" ng-show="showActions" ng-if="actionGroups.length > 1 || actionGroups[0].actions.length" uib-dropdown>
  94       <button type="button" class="btn btn-default" uib-dropdown-toggle
  95         ng-disabled="!hasSelected()">
  96         [% l('Actions') %] <span class="caret"></span>
  97       </button>
  98       <ul class="pull-right grid-action-dropdown scrollable-menu" uib-dropdown-menu>
  99         <li ng-repeat-start="group in actionGroups">
 100           <span style="padding-left: 1em;" ng-if="group.label"><strong><u>{{group.label}}</u></strong></span>
 101         </li>
 102         <li ng-repeat="action in group.actions" ng-class="{divider: action.divider, disabled: actionDisable(action)}" ng-hide="actionHide(action)">
 103           <a ng-if="!action.divider" href
 104             ng-click="!actionDisable(action) && actionLauncher(action)">{{action.label}}</a>
 105         </li>
 106         <span ng-repeat-end/>
 107       </ul>
 108     </div>
 109
 110     <div class="btn-group" uib-dropdown is-open="gridRowCountIsOpen" ng-show="showPagination">
 111       <button type="button" title="[% l('Select Row Count') %]"
 112         class="btn btn-default" uib-dropdown-toggle>
 113         [% l('Rows [_1]', '{{limit()}}') %]
 114         <span class="caret"></span>
 115       </button>
 116       <ul uib-dropdown-menu>
 117         <li ng-repeat="t in [5,10,25,50,100]">
 118           <a href ng-click='offset(0);limit(t);collect()'>
 119             {{t}}
 120           </a>
 121         </li>
 122         <li ng-if="allowAll" >
 123           <a href ng-click='offset(0);limit(10000);collect()'>[% l('All') %]</a>
 124         </li>
 125       </ul>
 126     </div>
 127
 128     <div class="btn-group" uib-dropdown is-open="gridPageSelectIsOpen" ng-show="showPagination">
 129       <button type="button" title="[% l('Select Page') %]"
 130         class="btn btn-default" uib-dropdown-toggle>
 131         [% l('Page [_1]', '{{page()}}') %]
 132         <span class="caret"></span>
 133       </button>
 134       <ul uib-dropdown-menu>
 135         <li>
 136           <div class="input-group">
 137             <input type="text" class="form-control"
 138               ng-model="pageFromUI"
 139               ng-click="$event.stopPropagation()"/>
 140             <span class="input-group-btn">
 141               <button class="btn btn-default" type="button"
 142                 ng-click="goToPage(pageFromUI);pageFromUI='';">
 143                 [% l('Go To...') %]
 144               </button>
 145             </span>
 146           </div>
 147         </li>
 148         <li role="presentation" class="divider"></li>
 149         <li ng-repeat="t in [1,2,3,4,5,10,25,50,100]">
 150           <a href ng-click='goToPage(t);gridPageSelectIsOpen=false;'>{{t}}</a>
 151         </li>
 152       </ul>
 153     </div>
 154
 155     <div class="btn-group" uib-dropdown is-open="gridColumnPickerIsOpen" ng-show="showPicker">
 156       <button type="button"
 157         class="btn btn-default" uib-dropdown-toggle>
 158         <span class="caret"></span>
 159       </button>
 160       <ul class="pull-right eg-grid-column-picker" uib-dropdown-menu>
 161         <li><a href ng-click="toggleConfDisplay()">
 162           <span class="glyphicon glyphicon-wrench"></span>
 163           [% l('Configure Columns') %]
 164         </a></li>
 165         <li><a href ng-click="saveConfig()">
 166           <span class="glyphicon glyphicon-floppy-save"></span>
 167           [% l('Save Columns') %]
 168         </a></li>
 169 <!--
 170         <li><a href ng-click="showAllColumns()">
 171           <span class="glyphicon glyphicon-resize-full"></span>
 172           [% l('Show All Columns') %]
 173         </a></li>
 174         <li><a href ng-click="hideAllColumns()">
 175           <span class="glyphicon glyphicon-resize-small"></span>
 176           [% l('Hide All Columns') %]
 177         </a></li>
 178 -->
 179         <li><a href ng-click="resetColumns()">
 180           <span class="glyphicon glyphicon-refresh"></span>
 181           [% l('Reset Columns') %]
 182         </a></li>
 183         <li><a ng-click="generateCSVExportURL($event)"
 184           download="{{csvExportFileName}}.csv" ng-href="{{csvExportURL}}">
 185           <span class="glyphicon glyphicon-download"></span>
 186           [% l('Download Full CSV') %]
 187         </a></li>
 188         <li><a href ng-click="printHTML()">
 189           <span class="glyphicon glyphicon-print"></span>
 190           [% l('Print Full Grid') %]
 191         </a></li>
 192         <li role="presentation" class="divider"></li>
 193         <li ng-repeat="col in columns">
 194           <a href title="{{col.idlclass}}" ng-click="toggleColumnVisibility(col)">
 195               <span ng-if="col.visible"
 196                 class="label label-success">&#x2713;</span>
 197               <span ng-if="!col.visible"
 198                 class="label label-warning">&#x2717;</span>
 199               <span>{{col.label}}</span>
 200           </a>
 201         </li>
 202       </ul>
 203     </div>
 204   </div>
 205 </div>
 206
 207 <!-- Grid -->
 208 <div class="eg-grid" ng-class="{'eg-grid-as-conf' : showGridConf}">
 209
 210   <!-- import our eg-grid-field defs -->
 211   <div ng-transclude></div>
 212
 213   <div class="eg-grid-row eg-grid-header-row">
 214     <div class="eg-grid-cell eg-grid-cell-stock" ng-show="showIndex">
 215       <div title="[% l('Row Number Column') %]">[% l('#') %]</div>
 216     </div>
 217     <div class="eg-grid-cell eg-grid-cell-stock" ng-show="canMultiSelect">
 218       <div>
 219         <input title="[% l('Row Selector Column') %]"
 220           focus-me="gridControls.focusRowSelector"
 221           type='checkbox' ng-model="selectAll"/>
 222       </div>
 223     </div>
 224     <div class="eg-grid-cell eg-grid-cell-stock-status" ng-show="statusCell.isEnabled">
 225       <div title="[% l('Status Icon Column') %]">[% l('Status') %]</div>
 226     </div>
 227     <div class="eg-grid-cell"
 228         eg-grid-column-drag-dest
 229         ng-class="{'eg-grid-column-last-mod' : lastModColumn==col.name}"
 230         column="{{col.name}}"
 231         eg-right-click="onContextMenu($event)"
 232         ng-repeat="col in columns"
 233         style="flex:{{col.flex}}"
 234         ng-show="col.visible">
 235
 236         <div style="display:flex">
 237           <div style="flex:1" class="eg-grid-column-move-handle">
 238             <div ng-if="col.sortable">
 239               <a column="{{col.name}}" href
 240                 eg-grid-column-drag-source
 241                 ng-click="quickSort(col.name)">{{col.label}}</a>
 242             </div>
 243             <div ng-if="!col.sortable">
 244               <div column="{{col.name}}" eg-grid-column-drag-source>{{col.label}}</div>
 245             </div>
 246           </div>
 247           <div eg-grid-column-drag-source
 248             drag-type="resize" column="{{col.name}}"
 249             class="eg-grid-column-resize-handle">&nbsp;</div>
 250         </div>
 251     </div>
 252   </div>
 253
 254   <!-- Inline grid configuration row -->
 255   <div class="eg-grid-row eg-grid-conf-row" ng-show="showGridConf">
 256     <div class="eg-grid-cell"
 257       ng-class="statusicon.isEnabled ? 'eg-grid-cell-conf-header-status' : 'eg-grid-cell-conf-header'">
 258       <div class="eg-grid-conf-cell-entry">[% l('Expand') %]</div>
 259       <div class="eg-grid-conf-cell-entry">[% l('Shrink') %]</div>
 260       <div class="eg-grid-conf-cell-entry">[% l('Left') %]</div>
 261       <div class="eg-grid-conf-cell-entry">[% l('Right') %]</div>
 262       <div class="eg-grid-conf-cell-entry">[% l('Far Left') %]</div>
 263       <div class="eg-grid-conf-cell-entry">[% l('Far Right') %]</div>
 264       <div class="eg-grid-conf-cell-entry" ng-if="!disableMultiSort">[% l('Sort') %]</div>
 265     </div>
 266     <div class="eg-grid-cell"
 267       ng-repeat="col in columns"
 268       style="flex:{{col.flex}}"
 269       ng-show="col.visible">
 270       <div class="eg-grid-conf-cell-entry">
 271         <a href="" title="[% l('Make column wider') %]"
 272           ng-click="modifyColumnFlex(col,1)">
 273           <span class="glyphicon glyphicon-resize-full"></span>
 274         </a>
 275       </div>
 276       <div class="eg-grid-conf-cell-entry">
 277         <a href="" title="[% l('Make column narrower') %]"
 278           ng-click="modifyColumnFlex(col,-1)">
 279           <span class="glyphicon glyphicon-resize-small"></span>
 280         </a>
 281       </div>
 282       <div class="eg-grid-conf-cell-entry">
 283         <a href="" title="[% l('Move column left') %]"
 284           ng-click="modifyColumnPos(col, -1)">
 285           <span class="glyphicon glyphicon-backward"></span>
 286         </a>
 287       </div>
 288       <div class="eg-grid-conf-cell-entry">
 289         <a href="" title="[% l('Move column right') %]"
 290           ng-click="modifyColumnPos(col, 1)">
 291           <span class="glyphicon glyphicon-forward"></span>
 292         </a>
 293       </div>
 294       <div class="eg-grid-conf-cell-entry">
 295         <a href="" title="[% l('Move column far left') %]"
 296           ng-click="modifyColumnPos(col, -10000)">
 297           <span class="glyphicon glyphicon-fast-backward"></span>
 298         </a>
 299       </div>
 300       <div class="eg-grid-conf-cell-entry">
 301         <a href="" title="[% l('Move column far right') %]"
 302           ng-click="modifyColumnPos(col, 10000)">
 303           <span class="glyphicon glyphicon-fast-forward"></span>
 304         </a>
 305       </div>
 306       <div class="eg-grid-conf-cell-entry" ng-if="!disableMultiSort">
 307         <div ng-if="col.multisortable">
 308           <input type='number' ng-model="col.sort"
 309             title="[% l('Sort Priority / Direction') %]" style='width:2.3em'/>
 310         </div>
 311       </div>
 312     </div>
 313   </div>
 314
 315   <div class="eg-grid-content-body">
 316     <div ng-show="items.length == 0"
 317       class="alert alert-info">[% l('No Items To Display') %]</div>
 318
 319     <div class="eg-grid-row"
 320         id="eg-grid-row-{{$index + 1}}"
 321         ng-repeat="item in items"
 322         ng-show="items.length > 0"
 323         ng-class="{'eg-grid-row-selected' : selected[indexValue(item)]}">
 324       <div class="eg-grid-cell eg-grid-cell-stock" ng-show="showIndex"
 325         ng-click="handleRowClick($event, item)" title="[% l('Row Index') %]"
 326           ng-class="rowClass.rowClass(item)">
 327         <a href ng-show="gridControls.activateItem"
 328           ng-click="gridControls.activateItem(item)" style="font-weight:bold">
 329           {{$index + offset() + 1}}
 330         </a>
 331         <div ng-hide="gridControls.activateItem">{{$index + offset() + 1}}</div>
 332       </div>
 333       <div class="eg-grid-cell eg-grid-cell-stock" ng-show="canMultiSelect"
 334           ng-class="rowClass.rowClass(item)">
 335         <!-- ng-click=handleRowClick here has unintended
 336              consequences and is unnecessary, avoid it -->
 337         <div>
 338           <input type='checkbox' title="[% l('Select Row') %]"
 339             ng-change="updateSelected()"
 340             ng-model="selected[indexValue(item)]"/>
 341         </div>
 342       </div>
 343       <div class="eg-grid-cell eg-grid-cell-stock-status" ng-show="statusCell.isEnabled"
 344           ng-class="rowClass.rowClass(item)">
 345           <span ng-bind-html="statusCell.template(item)"></span>
 346       </div>
 347       <div class="eg-grid-cell eg-grid-cell-content"
 348           ng-click="handleRowClick($event, item)"
 349           ng-dblclick="gridControls.activateItem(item)"
 350           ng-repeat="col in columns"
 351           style="text-align:{{col.align}}; flex:{{col.flex}}"
 352           ng-show="col.visible"
 353           ng-class="rowClass.rowClass(item)">
 354
 355           <!-- if the cell comes with its own template,
 356                translate that content into HTML and insert it here -->
 357           <span ng-if="col.template" style="padding-left:5px; padding-right:10px;"
 358             ng-bind-html="translateCellTemplate(col, item)">
 359           </span>
 360
 361           <!-- otherwise, simply display the item value, which may
 362                pass through datatype-specific filtering. -->
 363           <span ng-if="!col.template" style="padding-left:5px; padding-right:10px;">
 364             {{itemFieldValue(item, col) | egGridValueFilter:col:item}}
 365           </span>
 366       </div>
 367     </div>
 368   </div>
 369
 370
 371 </div>
 372