112ee990314ea1fd3eb301deea502b272e9f3545
[Evergreen.git] / Open-ILS / src / eg2 / src / app / share / grid / grid-filter-control.component.html
1
2 <!-- drop-down toggle link -->
3 <ng-template #dropdownToggle>
4   <span i18n>Filter</span>
5   <ng-container *ngIf="!col.isFiltered">
6     <span class="material-icons mat-icon-in-button">filter_list</span>
7   </ng-container>
8   <ng-container *ngIf="col.isFiltered">
9     <span class="material-icons mat-icon-in-button">create</span>
10   </ng-container>
11 </ng-template>
12
13 <!-- apply/clear actions are the same for all filter types -->
14 <ng-template #actionsTemplate>
15   <div class="pt-2">
16     <button class="btn btn-sm btn-outline-dark" (click)="applyFilterCommon(col)" i18n>Apply filter</button>
17     <span class="pl-2"></span>
18     <button class="btn btn-sm btn-outline-dark" (click)="clearFilter(col)" i18n>Clear filter</button>
19     <span class="pl-2"></span>
20     <button class="btn btn-sm btn-outline-dark" (click)="closeDropdown()" i18n>Close</button>
21   </div>
22 </ng-template>
23
24 <!-- various number filters all use the same operators -->
25 <ng-template #numericOperators>
26   <select id="eg-filter-op-select-{{col.name}}" class="form-control" 
27     [(ngModel)]="col.filterOperator" (change)="operatorChanged(col)">
28     <option value="=" i18n>Is exactly</option>
29     <option value="!=" i18n>Is not</option>
30     <option value="not null" i18n>Exists</option>
31     <option value="null" i18n>Does not exist</option>
32     <option value="<" i18n>Is less than</option>
33     <option value=">" i18n>Is greater than</option>
34     <option value="<=" i18n>Is less than or equal to</option>
35     <option value=">=" i18n>Is greater than or equal to</option>
36   </select>
37 </ng-template>
38
39 <div *ngIf="col.isFilterable" class="eg-grid-filter-control">
40   <div [ngSwitch]="col.datatype">
41     <div *ngSwitchCase="'link'">
42       <div class="input-group">
43         <div ngbDropdown container="body" class="d-inline-block p-1" [autoClose]="false" placement="bottom-left" 
44           [ngClass]="{'border rounded border-secondary eg-grid-col-is-filtered' : col.isFiltered}">
45           <a ngbDropdownToggle class="no-dropdown-caret text-dark" href="javascript:;">
46             <ng-container *ngTemplateOutlet="dropdownToggle"></ng-container>
47           </a>
48           <div ngbDropdownMenu class="eg-grid-filter-menu">
49             <div class="dropdown-item">
50               <div>
51                 <eg-combobox [asyncSupportsEmptyTermClick]="col.asyncSupportsEmptyTermClick" 
52                   [(ngModel)]="linkFilterEntry" [idlClass]="col.idlFieldDef.class"
53                   (ngModelChange)="applyFilterCommon(col)"
54                   [disabled]="col.filterInputDisabled || context.dataSource.requestingData"
55                   i18n-placeholder placeholder="Enter value to filter by"></eg-combobox>
56               </div>
57               <ng-container *ngTemplateOutlet="actionsTemplate"></ng-container>
58             </div>
59           </div>
60         </div>
61       </div>
62     </div>
63     <div *ngSwitchCase="'bool'">
64       <div class="input-group">
65         <div ngbDropdown container="body" class="d-inline-block p-1" autoClose="outside" placement="bottom-left" 
66           [ngClass]="{'border rounded border-secondary eg-grid-col-is-filtered' : col.isFiltered}">
67           <a ngbDropdownToggle class="no-dropdown-caret text-dark" href="javascript:;">
68             <ng-container *ngTemplateOutlet="dropdownToggle"></ng-container>
69           </a>
70           <div ngbDropdownMenu class="eg-grid-filter-menu">
71             <div class="dropdown-item">
72               <div>
73                 <select class="custom-select" [(ngModel)]="col.filterValue"
74                   (change)="applyFilterCommon(col)"
75                   [disabled]="col.filterInputDisabled || context.dataSource.requestingData">
76                   <option value="" i18n>Any</option>
77                   <option value="t" i18n>True</option>
78                   <option value="f" i18n>False</option>
79                 </select>
80               </div>
81               <ng-container *ngTemplateOutlet="actionsTemplate"></ng-container>
82             </div>
83           </div>
84         </div>
85       </div>
86     </div>
87     <div *ngSwitchCase="'text'">
88       <div class="input-group">
89         <div ngbDropdown container="body" class="d-inline-block p-1" autoClose="outside" placement="bottom-left" 
90           [ngClass]="{'border rounded border-secondary eg-grid-col-is-filtered' : col.isFiltered}">
91           <a ngbDropdownToggle class="no-dropdown-caret text-dark" href="javascript:;">
92             <ng-container *ngTemplateOutlet="dropdownToggle"></ng-container>
93           </a>
94           <div ngbDropdownMenu class="eg-grid-filter-menu">
95             <div class="dropdown-item">
96               <div>
97                 <label for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
98                 <select id="eg-filter-op-select-{{col.name}}" class="form-control" 
99                   [(ngModel)]="col.filterOperator" (change)="operatorChanged(col)">
100                   <option value="=" i18n>Is exactly</option>
101                   <option value="!=" i18n>Is not</option>
102                   <option value="like" i18n>Contains</option>
103                   <option value="not like" i18n>Does not contain</option>
104                   <option value="startswith" i18n>Starts with</option>
105                   <option value="endswith" i18n>Ends with</option>
106                   <option value="not null" i18n>Exists</option>
107                   <option value="null" i18n>Does not exist</option>
108                   <option value="<" i18n>Is less than</option>
109                   <option value=">" i18n>Is greater than</option>
110                   <option value="<=" i18n>Is less than or equal to</option>
111                   <option value=">=" i18n>Is greater than or equal to</option>
112                 </select>
113               </div>
114               <div class="pt-2">
115                 <input type="text" class="form-control" 
116                   [(ngModel)]="col.filterValue" (change)="applyFilterCommon(col)"
117                   [disabled]="col.filterInputDisabled || context.dataSource.requestingData" 
118                   i18n-placeholder placeholder="Enter value to filter by">
119               </div>
120               <ng-container *ngTemplateOutlet="actionsTemplate"></ng-container>
121             </div>
122           </div>
123         </div>
124       </div>
125     </div>
126     <div *ngSwitchCase="'int'">
127       <div class="input-group">
128         <div ngbDropdown container="body" class="d-inline-block p-1" autoClose="outside" placement="bottom-left" 
129           [ngClass]="{'border rounded border-secondary eg-grid-col-is-filtered' : col.isFiltered}">
130           <a ngbDropdownToggle class="no-dropdown-caret text-dark" href="javascript:;">
131             <ng-container *ngTemplateOutlet="dropdownToggle"></ng-container>
132           </a>
133           <div ngbDropdownMenu class="eg-grid-filter-menu">
134             <div class="dropdown-item">
135               <div>
136                 <label for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
137                 <ng-container *ngTemplateOutlet="numericOperators"></ng-container>
138               </div>
139               <div class="pt-2">
140                 <input type="number" min="0" step="1" class="form-control" 
141                   [(ngModel)]="col.filterValue" (change)="applyFilterCommon(col)"
142                   [disabled]="col.filterInputDisabled || context.dataSource.requestingData"/>
143               </div>
144               <ng-container *ngTemplateOutlet="actionsTemplate"></ng-container>
145             </div>
146           </div>
147         </div>
148       </div>
149     </div>
150     <div *ngSwitchCase="'id'">
151       <div class="input-group">
152         <div ngbDropdown container="body" class="d-inline-block p-1" autoClose="outside" placement="bottom-left" 
153           [ngClass]="{'border rounded border-secondary eg-grid-col-is-filtered' : col.isFiltered}">
154           <a ngbDropdownToggle class="no-dropdown-caret text-dark" href="javascript:;">
155             <ng-container *ngTemplateOutlet="dropdownToggle"></ng-container>
156           </a>
157           <div ngbDropdownMenu class="eg-grid-filter-menu">
158             <div class="dropdown-item">
159               <div>
160                 <label for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
161                 <ng-container *ngTemplateOutlet="numericOperators"></ng-container>
162               </div>
163               <div class="pt-2">
164                 <input type="number" min="0" step="1" class="form-control" 
165                   [(ngModel)]="col.filterValue" (change)="applyFilterCommon(col)"
166                   [disabled]="col.filterInputDisabled || context.dataSource.requestingData">
167               </div>
168               <ng-container *ngTemplateOutlet="actionsTemplate"></ng-container>
169             </div>
170           </div>
171         </div>
172       </div>
173     </div>
174     <div *ngSwitchCase="'float'">
175       <div class="input-group">
176         <div ngbDropdown container="body" class="d-inline-block p-1" autoClose="outside" placement="bottom-left" 
177           [ngClass]="{'border rounded border-secondary eg-grid-col-is-filtered' : col.isFiltered}">
178           <a ngbDropdownToggle class="no-dropdown-caret text-dark" href="javascript:;">
179             <ng-container *ngTemplateOutlet="dropdownToggle"></ng-container>
180           </a>
181           <div ngbDropdownMenu class="eg-grid-filter-menu">
182             <div class="dropdown-item">
183               <div>
184                 <label for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
185                 <ng-container *ngTemplateOutlet="numericOperators"></ng-container>
186               </div>
187               <div class="pt-2">
188                 <input type="number" class="form-control" 
189                   [(ngModel)]="col.filterValue" (change)="applyFilterCommon(col)"
190                   [disabled]="col.filterInputDisabled || context.dataSource.requestingData">
191               </div>
192               <ng-container *ngTemplateOutlet="actionsTemplate"></ng-container>
193             </div>
194           </div>
195         </div>
196       </div>
197     </div>
198     <div *ngSwitchCase="'money'">
199       <div class="input-group">
200         <div ngbDropdown container="body" class="d-inline-block p-1" autoClose="outside" placement="bottom-left" 
201           [ngClass]="{'border rounded border-secondary eg-grid-col-is-filtered' : col.isFiltered}">
202           <a ngbDropdownToggle class="no-dropdown-caret text-dark" href="javascript:;">
203             <ng-container *ngTemplateOutlet="dropdownToggle"></ng-container>
204           </a>
205           <div ngbDropdownMenu class="eg-grid-filter-menu">
206             <div class="dropdown-item">
207               <div>
208                 <label for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
209                 <ng-container *ngTemplateOutlet="numericOperators"></ng-container>
210               </div>
211               <div class="pt-2">
212                 <input type="number" step="0.01" class="form-control" 
213                   [(ngModel)]="col.filterValue" (change)="applyFilterCommon(col)"
214                   [disabled]="col.filterInputDisabled || context.dataSource.requestingData"/>
215               </div>
216               <ng-container *ngTemplateOutlet="actionsTemplate"></ng-container>
217             </div>
218          </div>
219         </div>
220       </div>
221     </div>
222     <div *ngSwitchCase="'timestamp'">
223       <div class="input-group">
224         <!-- [autoClose]="false" because editing the date widgets, which open
225              their open popups, registers to the dropdown as clicking 
226              outside the dropdown -->
227         <div ngbDropdown container="body" class="d-inline-block p-1" [autoClose]="false" placement="bottom-left" 
228           [ngClass]="{'border rounded border-secondary eg-grid-col-is-filtered' : col.isFiltered}">
229           <a ngbDropdownToggle class="no-dropdown-caret text-dark" href="javascript:;">
230             <ng-container *ngTemplateOutlet="dropdownToggle"></ng-container>
231           </a>
232           <div ngbDropdownMenu class="eg-grid-filter-menu">
233             <div class="dropdown-item">
234               <div>
235                 <label for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
236                 <select id="eg-filter-op-select-{{col.name}}" class="form-control" 
237                   [(ngModel)]="col.filterOperator" (change)="operatorChanged(col)">
238                   <option value="=" i18n>Is exactly</option>
239                   <option value="!=" i18n>Is not</option>
240                   <option value="not null" i18n>Exists</option>
241                   <option value="null" i18n>Does not exist</option>
242                   <option value="<" i18n>Is less than</option>
243                   <option value=">" i18n>Is greater than</option>
244                   <option value="<=" i18n>Is less than or equal to</option>
245                   <option value=">=" i18n>Is greater than or equal to</option>
246                   <option value="between" i18n>Between</option>
247                 </select>
248               </div>
249               <div class="pt-2">
250                 <eg-date-select [initialYmd]="col.filterValue" #dateSelectOne
251                   (onChangeAsYmd)="applyFilterCommon(col)"
252                   [disabled]="col.filterInputDisabled || context.dataSource.requestingData"></eg-date-select>
253                 <div [hidden]="col.filterOperator !== 'between'" class="form-inline form-group">
254                   <label for="eg-filter-end-date-select-{{col.name}}" style="width: 3em;" i18n>and</label>
255                   <eg-date-select [hidden]="col.filterOperator !== 'between'" #dateSelectTwo
256                     (onChangeAsYmd)="applyFilterCommon(col)"
257                     [disabled]="col.filterInputDisabled || context.dataSource.requestingData"
258                     [required]="col.filterOperator == 'between'"></eg-date-select>
259                 </div>
260               </div>
261               <ng-container *ngTemplateOutlet="actionsTemplate"></ng-container>
262             </div>
263           </div>
264         </div>
265       </div>
266     </div>
267     <div *ngSwitchCase="'org_unit'">
268       <div class="input-group">
269         <div ngbDropdown container="body" class="d-inline-block p-1" [autoClose]="false" placement="bottom-left" 
270           [ngClass]="{'border rounded border-secondary eg-grid-col-is-filtered' : col.isFiltered}">
271           <a ngbDropdownToggle class="no-dropdown-caret text-dark" href="javascript:;">
272             <ng-container *ngTemplateOutlet="dropdownToggle"></ng-container>
273           </a>
274           <div ngbDropdownMenu class="eg-grid-filter-menu">
275             <div class="dropdown-item">
276               <div>
277                 <label for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
278                 <select id="eg-filter-op-select-{{col.name}}" class="form-control" 
279                   [(ngModel)]="col.filterOperator" (change)="operatorChanged(col)">
280                   <option value="=" i18n>Is (or includes)</option>
281                   <option value="!=" i18n>Is not (or excludes)</option>
282                 </select>
283               </div>
284               <div class="dropdown-item">
285                 <div class="form-check">
286                   <input type="checkbox"
287                     [(ngModel)]="col.filterIncludeOrgAncestors"
288                     class="form-check-input" id="include-ancestors">
289                   <label class="form-check-label" for="include-ancestors" i18n>+ Ancestors</label>
290                 </div>
291                 <div class="form-check">
292                   <input type="checkbox"
293                     [(ngModel)]="col.filterIncludeOrgDescendants"
294                     class="form-check-input" id="include-descendants">
295                   <label class="form-check-label" for="include-descendants" i18n>+ Descendants</label>
296                 </div>
297               </div>
298               <div class="pt-2">
299                 <eg-org-select [applyOrgId]="col.filterValue" 
300                   (onChange)="col.filterValue = $event; applyFilterCommon(col)"
301                   [disabled]="col.filterInputDisabled || context.dataSource.requestingData"
302                   i18n-placeholder placeholder="Enter library to filter by" #ousel></eg-org-select>
303               </div>
304               <ng-container *ngTemplateOutlet="actionsTemplate"></ng-container>
305             </div>
306           </div>
307         </div>
308       </div>
309     </div>
310     <div *ngSwitchDefault>I don't know how to filter {{col.name}} - {{col.datatype}}</div>
311   </div>
312   <!--
313   <span *ngIf="col.datatype !== 'org_unit'" class="eg-grid-filter-operator"><ng-container i18n>Operator:</ng-container>
314     <span [ngSwitch]="col.filterOperator">
315       <span *ngSwitchCase="'='" i18n>Is exactly</span>
316       <span *ngSwitchCase="'!='" i18n>Is not</span>
317       <span *ngSwitchCase="'>'" i18n>Is greater than</span>
318       <span *ngSwitchCase="'>='" i18n>Is greater than or equal to</span>
319       <span *ngSwitchCase="'<'" i18n>Is less than</span>
320       <span *ngSwitchCase="'<='" i18n>Is less than or equal to</span>
321       <span *ngSwitchCase="'like'" i18n>Contains</span>
322       <span *ngSwitchCase="'not like'" i18n>Does not contain</span>
323       <span *ngSwitchCase="'startswith'" i18n>Starts with</span>
324       <span *ngSwitchCase="'endswith'" i18n>Ends with</span>
325       <span *ngSwitchCase="'null'" i18n>Does not exist</span>
326       <span *ngSwitchCase="'not null'" i18n>Exists</span>
327       <span *ngSwitchCase="'between'" i18n>Between</span>
328     </span>
329   </span>
330   <span *ngIf="col.datatype == 'org_unit'" class="eg-grid-filter-operator"><ng-container i18n>Operator:</ng-container>
331     <span [ngSwitch]="col.filterOperator">
332       <span *ngSwitchCase="'='" i18n>Is (or includes)</span>
333       <span *ngSwitchCase="'!='" i18n>Is not (or excludes)</span>
334     </span>
335   </span>
336   -->
337 </div>