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