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 *ngSwitchCase="'interval'">
 311       <!-- this is a short-term fix to prevent *ngSwitchDefault from displaying -->
 312     </div>
 313     <div *ngSwitchDefault>I don't know how to filter {{col.name}} - {{col.datatype}}</div>
 314   </div>
 315   <!--
 316   <span *ngIf="col.datatype !== 'org_unit'" class="eg-grid-filter-operator"><ng-container i18n>Operator:</ng-container>
 317     <span [ngSwitch]="col.filterOperator">
 318       <span *ngSwitchCase="'='" i18n>Is exactly</span>
 319       <span *ngSwitchCase="'!='" i18n>Is not</span>
 320       <span *ngSwitchCase="'>'" i18n>Is greater than</span>
 321       <span *ngSwitchCase="'>='" i18n>Is greater than or equal to</span>
 322       <span *ngSwitchCase="'<'" i18n>Is less than</span>
 323       <span *ngSwitchCase="'<='" i18n>Is less than or equal to</span>
 324       <span *ngSwitchCase="'like'" i18n>Contains</span>
 325       <span *ngSwitchCase="'not like'" i18n>Does not contain</span>
 326       <span *ngSwitchCase="'startswith'" i18n>Starts with</span>
 327       <span *ngSwitchCase="'endswith'" i18n>Ends with</span>
 328       <span *ngSwitchCase="'null'" i18n>Does not exist</span>
 329       <span *ngSwitchCase="'not null'" i18n>Exists</span>
 330       <span *ngSwitchCase="'between'" i18n>Between</span>
 331     </span>
 332   </span>
 333   <span *ngIf="col.datatype == 'org_unit'" class="eg-grid-filter-operator"><ng-container i18n>Operator:</ng-container>
 334     <span [ngSwitch]="col.filterOperator">
 335       <span *ngSwitchCase="'='" i18n>Is (or includes)</span>
 336       <span *ngSwitchCase="'!='" i18n>Is not (or excludes)</span>
 337     </span>
 338   </span>
 339   -->
 340 </div>