Open-ILS/src/eg2/src/app/share/grid/grid-filter-control.component.html

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