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