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>
8 <ng-container *ngIf="col.isFiltered">
9 <span class="material-icons mat-icon-in-button">create</span>
13 <!-- apply/clear actions are the same for all filter types -->
14 <ng-template #actionsTemplate>
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>
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>
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>
48 <div ngbDropdownMenu class="eg-grid-filter-menu">
49 <div class="dropdown-item">
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>
57 <ng-container *ngTemplateOutlet="actionsTemplate"></ng-container>
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>
70 <div ngbDropdownMenu class="eg-grid-filter-menu">
71 <div class="dropdown-item">
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>
81 <ng-container *ngTemplateOutlet="actionsTemplate"></ng-container>
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>
94 <div ngbDropdownMenu class="eg-grid-filter-menu">
95 <div class="dropdown-item">
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>
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">
120 <ng-container *ngTemplateOutlet="actionsTemplate"></ng-container>
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>
133 <div ngbDropdownMenu class="eg-grid-filter-menu">
134 <div class="dropdown-item">
136 <label for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
137 <ng-container *ngTemplateOutlet="numericOperators"></ng-container>
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"/>
144 <ng-container *ngTemplateOutlet="actionsTemplate"></ng-container>
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>
157 <div ngbDropdownMenu class="eg-grid-filter-menu">
158 <div class="dropdown-item">
160 <label for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
161 <ng-container *ngTemplateOutlet="numericOperators"></ng-container>
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">
168 <ng-container *ngTemplateOutlet="actionsTemplate"></ng-container>
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>
181 <div ngbDropdownMenu class="eg-grid-filter-menu">
182 <div class="dropdown-item">
184 <label for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
185 <ng-container *ngTemplateOutlet="numericOperators"></ng-container>
188 <input type="number" class="form-control"
189 [(ngModel)]="col.filterValue" (change)="applyFilterCommon(col)"
190 [disabled]="col.filterInputDisabled || context.dataSource.requestingData">
192 <ng-container *ngTemplateOutlet="actionsTemplate"></ng-container>
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>
205 <div ngbDropdownMenu class="eg-grid-filter-menu">
206 <div class="dropdown-item">
208 <label for="eg-filter-op-select-{{col.name}}" i18n>Operator</label>
209 <ng-container *ngTemplateOutlet="numericOperators"></ng-container>
212 <input type="number" step="0.01" class="form-control"
213 [(ngModel)]="col.filterValue" (change)="applyFilterCommon(col)"
214 [disabled]="col.filterInputDisabled || context.dataSource.requestingData"/>
216 <ng-container *ngTemplateOutlet="actionsTemplate"></ng-container>
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>
232 <div ngbDropdownMenu class="eg-grid-filter-menu">
233 <div class="dropdown-item">
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>
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>
261 <ng-container *ngTemplateOutlet="actionsTemplate"></ng-container>
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>
274 <div ngbDropdownMenu class="eg-grid-filter-menu">
275 <div class="dropdown-item">
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>
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>
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>
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>
304 <ng-container *ngTemplateOutlet="actionsTemplate"></ng-container>
310 <div *ngSwitchDefault>I don't know how to filter {{col.name}} - {{col.datatype}}</div>
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>
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>