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