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