Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.html

   1 <!--
   2 TODO focus search input
   3 -->
   4 <div id='staffcat-search-form' class='pb-2 mb-3'>
   5   <div class="row"
   6     *ngFor="let q of searchContext.query; let idx = index; trackBy:trackByIdx">
   7     <div class="col-lg-9 d-flex">
   8       <div class="flex-1">
   9         <div *ngIf="idx == 0">
  10           <select class="form-control" [(ngModel)]="searchContext.format">
  11             <option i18n value=''>All Formats</option>
  12             <option *ngFor="let fmt of ccvmMap.search_format"
  13               value="{{fmt.code()}}">{{fmt.value()}}</option>
  14           </select>
  15         </div>
  16         <div *ngIf="idx > 0">
  17           <select class="form-control"
  18             [(ngModel)]="searchContext.joinOp[idx]">
  19             <option i18n value='&&'>And</option>
  20             <option i18n value='||'>Or</option>
  21           </select>
  22         </div>
  23       </div>
  24       <div class="flex-1 pl-1">
  25         <select class="form-control"
  26           [(ngModel)]="searchContext.fieldClass[idx]">
  27           <option i18n value='keyword'>Keyword</option>
  28           <option i18n value='title'>Title</option>
  29           <option i18n value='jtitle'>Journal Title</option>
  30           <option i18n value='author'>Author</option>
  31           <option i18n value='subject'>Subject</option>
  32           <option i18n value='series'>Series</option>
  33         </select>
  34       </div>
  35       <div class="flex-1 pl-1">
  36         <select class="form-control"
  37           [(ngModel)]="searchContext.matchOp[idx]">
  38           <option i18n value='contains'>Contains</option>
  39           <option i18n value='nocontains'>Does not contain</option>
  40           <option i18n value='phrase'>Contains phrase</option>
  41           <option i18n value='exact'>Matches exactly</option>
  42           <option i18n value='starts'>Starts with</option>
  43         </select>
  44       </div>
  45       <div class="flex-2 pl-1">
  46         <div class="form-group">
  47           <div *ngIf="idx == 0">
  48             <input type="text" class="form-control"
  49               id='first-query-input'
  50               [(ngModel)]="searchContext.query[idx]"
  51               (keyup.enter)="formEnter('query')"
  52               placeholder="Query..."/>
  53           </div>
  54           <div *ngIf="idx > 0">
  55             <input type="text" class="form-control"
  56               [(ngModel)]="searchContext.query[idx]"
  57               (keyup.enter)="formEnter('query')"
  58               placeholder="Query..."/>
  59           </div>
  60         </div>
  61       </div>
  62       <div class="flex-1 pl-1">
  63         <button class="btn btn-sm material-icon-button"
  64           (click)="addSearchRow(idx + 1)">
  65           <span class="material-icons">add_circle_outline</span>
  66         </button>
  67         <button class="btn btn-sm material-icon-button"
  68           [disabled]="searchContext.query.length < 2"
  69           (click)="delSearchRow(idx)">
  70           <span class="material-icons">remove_circle_outline</span>
  71         </button>
  72       </div>
  73     </div><!-- col -->
  74     <div class="col-lg-3">
  75       <div *ngIf="idx == 0" class="float-right">
  76         <button class="btn btn-success mr-1" type="button"
  77           [disabled]="searchIsActive()"
  78           (click)="searchContext.pager.offset=0;searchByForm()">
  79           Search
  80         </button>
  81         <button class="btn btn-warning mr-1" type="button"
  82           [disabled]="searchIsActive()"
  83           (click)="searchContext.reset()">
  84           Clear Form
  85         </button>
  86         <button class="btn btn-outline-secondary" type="button"
  87           *ngIf="!showAdvanced()"
  88           [disabled]="searchIsActive()"
  89           (click)="showAdvancedSearch=true">
  90           More Filters
  91         </button>
  92         <button class="btn btn-outline-secondary" type="button"
  93           *ngIf="showAdvanced()"
  94           (click)="showAdvancedSearch=false">
  95           Hide Filters
  96         </button>
  97       </div>
  98     </div>
  99   </div><!-- row -->
 100
 101   <div class="row">
 102     <div class="col-lg-9 d-flex">
 103       <div class="flex-1">
 104         <eg-org-select
 105           (onChange)="orgOnChange($event)"
 106           [initialOrg]="searchContext.searchOrg"
 107           [placeholder]="'Library'" >
 108         </eg-org-select>
 109       </div>
 110       <div class="flex-3 pl-1">
 111         <select class="form-control" [(ngModel)]="searchContext.sort">
 112           <option value='' i18n>Sort by Relevance</option>
 113           <optgroup label="Sort by Title" i18n-label>
 114             <option value='titlesort' i18n>Title: A to Z</option>
 115             <option value='titlesort.descending' i18n>Title: Z to A</option>
 116           </optgroup>
 117           <optgroup label="Sort by Author" i18n-label>
 118             <option value='authorsort' i18n>Author: A to Z</option>
 119             <option value='authorsort.descending' i18n>Author: Z to A</option>
 120           </optgroup>
 121           <optgroup label="Sort by Publication Date" i18n-label>
 122             <option value='pubdate' i18n>Date: A to Z</option>
 123             <option value='pubdate.descending' i18n>Date: Z to A</option>
 124           </optgroup>
 125           <optgroup label="Sort by Popularity" i18n-label>
 126             <option value='popularity' i18n>Most Popular</option>
 127             <option value='poprel' i18n>Popularity Adjusted Relevance</option>
 128           </optgroup>
 129         </select>
 130       </div>
 131       <div class="flex-2 pl-2 align-self-end">
 132         <div class="checkbox">
 133           <label>
 134             <input type="checkbox" [(ngModel)]="searchContext.available"/>
 135             <span i18n>Limit to Available</span>
 136           </label>
 137         </div>
 138       </div>
 139       <div class="flex-4 pl-2 align-self-end">
 140         <div class="checkbox">
 141           <label>
 142             <input type="checkbox" [(ngModel)]="searchContext.global"/>
 143             <span i18n>Show Results from All Libraries</span>
 144           </label>
 145         </div>
 146       </div>
 147       <div class="flex-2 pl-1">
 148         <!-- alignment -->
 149       </div>
 150     </div>
 151     <div class="col-lg-3">
 152       <div *ngIf="searchIsActive()">
 153         <div class="progress">
 154           <div class="progress-bar progress-bar-striped active w-100"
 155             role="progressbar" aria-valuenow="100"
 156             aria-valuemin="0" aria-valuemax="100">
 157             <span class="sr-only" i18n>Searching..</span>
 158           </div>
 159         </div>
 160       </div>
 161     </div>
 162   </div>
 163   <div class="row pt-2" *ngIf="showAdvanced()">
 164     <div class="col-lg-2">
 165       <select class="form-control"  multiple="true"
 166         [(ngModel)]="searchContext.ccvmFilters.item_type">
 167         <option value='' i18n>All Item Types</option>
 168         <option *ngFor="let itemType of ccvmMap.item_type"
 169           value="{{itemType.code()}}">{{itemType.value()}}</option>
 170       </select>
 171     </div>
 172     <div class="col-lg-2">
 173       <select class="form-control" multiple="true"
 174         [(ngModel)]="searchContext.ccvmFilters.item_form">
 175         <option value='' i18n>All Item Forms</option>
 176         <option *ngFor="let itemForm of ccvmMap.item_form"
 177           value="{{itemForm.code()}}">{{itemForm.value()}}</option>
 178       </select>
 179     </div>
 180     <div class="col-lg-2">
 181       <select class="form-control"
 182         [(ngModel)]="searchContext.ccvmFilters.item_lang" multiple="true">
 183         <option value='' i18n>All Languages</option>
 184         <option *ngFor="let lang of ccvmMap.item_lang"
 185           value="{{lang.code()}}">{{lang.value()}}</option>
 186       </select>
 187     </div>
 188     <div class="col-lg-2">
 189       <select class="form-control"
 190         [(ngModel)]="searchContext.ccvmFilters.audience" multiple="true">
 191         <option value='' i18n>All Audiences</option>
 192         <option *ngFor="let audience of ccvmMap.audience"
 193           value="{{audience.code()}}">{{audience.value()}}</option>
 194       </select>
 195     </div>
 196     <div class="col-lg-2">
 197       <select class="form-control"
 198         [(ngModel)]="searchContext.identQueryType">
 199         <option i18n value="identifier|isbn">ISBN</option>
 200         <option i18n value="identifier|issn">ISSN</option>
 201         <option i18n disabled value="cnbrowse">Call Number (Shelf Browse)</option>
 202         <option i18n value="identifier|lccn">LCCN</option>
 203         <option i18n value="identifier|tcn">TCN</option>
 204         <option i18n disabled value="item_barcode">Item Barcode</option>
 205       </select>
 206     </div>
 207     <div class="col-lg-2">
 208       <input id='ident-query-input' type="text" class="form-control"
 209         [(ngModel)]="searchContext.identQuery"
 210         (keyup.enter)="formEnter('ident')"
 211         placeholder="Numeric Query..."/>
 212     </div>
 213   </div>
 214   <div class="row pt-2" *ngIf="showAdvanced()">
 215     <div class="col-lg-2">
 216       <select class="form-control"
 217         [(ngModel)]="searchContext.ccvmFilters.vr_format" multiple="true">
 218         <option value='' i18n>All Video Formats</option>
 219         <option *ngFor="let vrFormat of ccvmMap.vr_format"
 220           value="{{vrFormat.code()}}">{{vrFormat.value()}}</option>
 221       </select>
 222     </div>
 223     <div class="col-lg-2">
 224       <select class="form-control"
 225         [(ngModel)]="searchContext.ccvmFilters.bib_level" multiple="true">
 226         <option value='' i18n>All Bib Levels</option>
 227         <option *ngFor="let bibLevel of ccvmMap.bib_level"
 228           value="{{bibLevel.code()}}">{{bibLevel.value()}}</option>
 229       </select>
 230     </div>
 231     <div class="col-lg-2">
 232       <select class="form-control"
 233         [(ngModel)]="searchContext.ccvmFilters.lit_form" multiple="true">
 234         <option value='' i18n>All Literary Forms</option>
 235         <option *ngFor="let litForm of ccvmMap.lit_form"
 236           value="{{litForm.code()}}">{{litForm.value()}}</option>
 237       </select>
 238     </div>
 239     <div class="col-lg-2">
 240       <i>Copy location filter goes here...</i>
 241     </div>
 242   </div>
 243 </div>
 244