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