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