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