webstaff: Enhance grid item selection API for external hooks
[working/Evergreen.git] / 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" 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 && 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" dropdown>                                                  
89       <button type="button" class="btn btn-default dropdown-toggle">
90         [% l('Actions') %] <span class="caret"></span>                       
91       </button>                                                              
92       <ul class="dropdown-menu pull-right grid-action-dropdown">                                  
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" dropdown is-open="gridRowCountIsOpen" ng-show="showPagination">
105       <button type="button" title="[% ('Select Row Count') %]"
106         class="btn btn-default dropdown-toggle">
107         [% l('Rows [_1]', '{{limit()}}') %]
108         <span class="caret"></span>
109       </button>
110       <ul class="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       </ul>
117     </div>
118
119     <div class="btn-group" dropdown is-open="gridPageSelectIsOpen" ng-show="showPagination">
120       <button type="button" title="[% ('Select Page') %]"
121         class="btn btn-default dropdown-toggle">
122         [% l('Page [_1]', '{{page()}}') %]
123         <span class="caret"></span>
124       </button>
125       <ul class="dropdown-menu">
126         <li>
127           <div class="input-group">
128             <input type="text" class="form-control"
129               ng-model="pageFromUI"
130               ng-click="$event.stopPropagation()"/>
131             <span class="input-group-btn">
132               <button class="btn btn-default" type="button"
133                 ng-click="goToPage(pageFromUI);pageFromUI='';">
134                 [% l('Go To...') %]
135               </button>
136             </span>
137           </div>
138         </li>
139         <li role="presentation" class="divider"></li>
140         <li ng-repeat="t in [1,2,3,4,5,10,25,50,100]">
141           <a href ng-click='goToPage(t);gridPageSelectIsOpen=false;'>{{t}}</a>
142         </li>
143       </ul>
144     </div>
145
146     <div class="btn-group" dropdown is-open="gridColumnPickerIsOpen" ng-show="showPicker">
147       <button type="button" 
148         class="btn btn-default dropdown-toggle">
149         <span class="caret"></span>
150       </button>
151       <ul class="dropdown-menu pull-right eg-grid-column-picker">
152         <li><a href ng-click="toggleConfDisplay()">
153           <span class="glyphicon glyphicon-wrench"></span>
154           [% l('Configure Columns') %]
155         </a></li>
156         <li><a href ng-click="saveConfig()">
157           <span class="glyphicon glyphicon-floppy-save"></span>
158           [% l('Save Columns') %]
159         </a></li>
160 <!--
161         <li><a href ng-click="showAllColumns()">
162           <span class="glyphicon glyphicon-resize-full"></span>
163           [% l('Show All Columns') %]
164         </a></li>
165         <li><a href ng-click="hideAllColumns()">
166           <span class="glyphicon glyphicon-resize-small"></span>
167           [% l('Hide All Columns') %]
168         </a></li>
169 -->
170         <li><a href ng-click="resetColumns()">
171           <span class="glyphicon glyphicon-refresh"></span>
172           [% l('Reset Columns') %]
173         </a></li>
174         <li><a ng-click="generateCSVExportURL()" 
175           download="{{csvExportFileName}}.csv" ng-href="{{csvExportURL}}">
176           <span class="glyphicon glyphicon-download"></span>
177           [% l('Download CSV') %]
178         </a></li>
179         <li><a href ng-click="printCSV()">
180           <span class="glyphicon glyphicon-print"></span>
181           [% l('Print CSV') %]
182         </a></li>
183         <li role="presentation" class="divider"></li>
184         <li ng-repeat="col in columns">
185           <a href title="{{col.idlclass}}" ng-click="toggleColumnVisibility(col)">
186               <span ng-if="col.visible" 
187                 class="label label-success">&#x2713;</span>
188               <span ng-if="!col.visible" 
189                 class="label label-warning">&#x2717;</span>
190               <span>{{col.label}}</span>
191           </a>
192         </li>
193       </ul>
194     </div>
195   </div>
196 </div>
197
198 <!-- Grid -->
199 <div class="eg-grid" ng-class="{'eg-grid-as-conf' : showGridConf}">
200
201   <!-- import our eg-grid-field defs -->
202   <div ng-transclude></div>
203
204   <div class="eg-grid-row eg-grid-header-row">
205     <div class="eg-grid-cell eg-grid-cell-stock" ng-show="showIndex">
206       <div title="[% l('Row Number Column') %]">[% l('#') %]</div>
207     </div>
208     <div class="eg-grid-cell eg-grid-cell-stock" ng-show="canMultiSelect">
209       <div>
210         <input title="[% l('Row Selector Column') %]"
211           focus-me="gridControls.focusRowSelector"
212           type='checkbox' ng-model="selectAll"/> 
213       </div>
214     </div>
215     <div class="eg-grid-cell"
216         eg-grid-column-drag-dest
217         column="{{col.name}}"
218         eg-right-click="onContextMenu($event)"
219         ng-repeat="col in columns"
220         style="flex:{{col.flex}}"
221         ng-show="col.visible">
222
223         <div style="display:flex">
224           <div style="flex:1" class="eg-grid-column-move-handle">
225             <div ng-if="col.sortable">
226               <a column="{{col.name}}" href
227                 eg-grid-column-drag-source
228                 ng-click="quickSort(col.name)">{{col.label}}</a>
229             </div>
230             <div ng-if="!col.sortable">
231               <div column="{{col.name}}" eg-grid-column-drag-source>{{col.label}}</div>
232             </div>
233           </div>
234           <div eg-grid-column-drag-source 
235             drag-type="resize" column="{{col.name}}" 
236             class="eg-grid-column-resize-handle">&nbsp;</div>
237         </div>
238     </div>
239   </div>
240
241   <!-- Inline grid configuration row -->
242   <div class="eg-grid-row eg-grid-conf-row" ng-show="showGridConf">
243     <div class="eg-grid-cell eg-grid-cell-conf-header">
244       <div class="eg-grid-conf-cell-entry">[% l('Expand') %]</div>
245       <div class="eg-grid-conf-cell-entry">[% l('Shrink') %]</div>
246       <div class="eg-grid-conf-cell-entry" ng-if="!disableMultiSort">[% l('Sort') %]</div>
247     </div>
248     <div class="eg-grid-cell"
249       ng-repeat="col in columns"
250       style="flex:{{col.flex}}"
251       ng-show="col.visible">
252       <div class="eg-grid-conf-cell-entry">
253         <a href="" title="[% l('Make column wider') %]"
254           ng-click="modifyColumnFlex(col,1)">
255           <span class="glyphicon glyphicon-fast-forward"></span>
256         </a>
257       </div>
258       <div class="eg-grid-conf-cell-entry">
259         <a href="" title="[% l('Make column narrower') %]"
260           ng-click="modifyColumnFlex(col,-1)">
261           <span class="glyphicon glyphicon-fast-backward"></span>
262         </a>
263       </div>
264       <div class="eg-grid-conf-cell-entry" ng-if="!disableMultiSort">
265         <div ng-if="col.multisortable">
266           <input type='number' ng-model="col.sort"
267             title="[% l('Sort Priority / Direction') %]" style='width:2.3em'/>
268         </div>
269       </div>
270     </div>
271   </div>
272
273   <div class="eg-grid-content-body">
274     <div ng-show="items.length == 0" 
275       class="alert alert-info">[% l('No Items To Display') %]</div>
276
277     <div class="eg-grid-row" 
278         id="eg-grid-row-{{$index + 1}}"
279         ng-repeat="item in items"
280         ng-show="items.length > 0"
281         ng-class="{'eg-grid-row-selected' : selected[indexValue(item)]}">
282       <div class="eg-grid-cell eg-grid-cell-stock" ng-show="showIndex"
283         ng-click="handleRowClick($event, item)" title="[% l('Row Index') %]">
284         <a href ng-show="gridControls.activateItem" 
285           ng-click="gridControls.activateItem(item)" style="font-weight:bold">
286           {{$index + offset() + 1}}
287         </a>
288         <div ng-hide="gridControls.activateItem">{{$index + offset() + 1}}</div>
289       </div>
290       <div class="eg-grid-cell eg-grid-cell-stock" ng-show="canMultiSelect">
291         <!-- ng-click=handleRowClick here has unintended 
292              consequences and is unnecessary, avoid it -->
293         <div>
294           <input type='checkbox' title="[% l('Select Row') %]"
295             ng-change="updateSelected()"
296             ng-model="selected[indexValue(item)]"/>
297         </div>
298       </div>
299       <div class="eg-grid-cell eg-grid-cell-content"
300           ng-click="handleRowClick($event, item)"
301           ng-dblclick="gridControls.activateItem(item)"
302           ng-repeat="col in columns"
303           style="text-align:{{col.align}}; padding-left:5px; padding-right:5px; flex:{{col.flex}}"
304           ng-show="col.visible">
305
306           <!-- if the cell comes with its own template,
307                translate that content into HTML and insert it here -->
308           <span ng-if="col.template" 
309             ng-bind-html="translateCellTemplate(col, item)">
310           </span>
311
312           <!-- otherwise, simply display the item value, which may 
313                pass through datatype-specific filtering. -->
314           <span ng-if="!col.template">
315             {{itemFieldValue(item, col) | egGridValueFilter:col}}
316           </span>
317       </div>
318     </div>
319   </div>
320
321
322 </div>
323