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