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="row pb-3 mb-3 ">
   5   <div class="col-lg-8">
   6     <ngb-tabset #searchTabs [activeId]="searchTab" (tabChange)="onTabChange($event)">
   7       <ngb-tab title="Keyword Search" i18n-title id="term">
   8         <ng-template ngbTabContent>
   9           <div class="row"
  10             [ngClass]="{'mt-4': idx == 0, 'mt-1': idx > 0}"
  11             *ngFor="let q of context.termSearch.query; let idx = index; trackBy:trackByIdx">
  12             <div class="col-lg-2 pr-1">
  13               <div *ngIf="idx == 0">
  14                 <select class="form-control" [(ngModel)]="context.termSearch.format">
  15                   <option i18n value=''>All Formats</option>
  16                   <option *ngFor="let fmt of ccvmMap.search_format"
  17                     value="{{fmt.code()}}">{{fmt.value()}}</option>
  18                 </select>
  19               </div>
  20               <div *ngIf="idx > 0">
  21                 <select class="form-control"
  22                   [(ngModel)]="context.termSearch.joinOp[idx]">
  23                   <option i18n value='&&'>And</option>
  24                   <option i18n value='||'>Or</option>
  25                 </select>
  26               </div>
  27             </div>
  28             <div class="col-lg-2 pl-0 pr-2">
  29               <select class="form-control"
  30                 [(ngModel)]="context.termSearch.fieldClass[idx]">
  31                 <option i18n value='keyword'>Keyword</option>
  32                 <option i18n value='title'>Title</option>
  33                 <option i18n value='jtitle'>Journal Title</option>
  34                 <option i18n value='author'>Author</option>
  35                 <option i18n value='subject'>Subject</option>
  36                 <option i18n value='series'>Series</option>
  37               </select>
  38             </div>
  39             <div class="col-lg-2 pl-0 pr-2">
  40               <select class="form-control"
  41                 [(ngModel)]="context.termSearch.matchOp[idx]">
  42                 <option i18n value='contains'>Contains</option>
  43                 <option i18n value='nocontains'>Does not contain</option>
  44                 <option i18n value='phrase'>Contains phrase</option>
  45                 <option i18n value='exact'>Matches exactly</option>
  46                 <option i18n value='starts'>Starts with</option>
  47               </select>
  48             </div>
  49             <div class="col-lg-4 pl-0 pr-2">
  50               <div class="form-group">
  51                 <div *ngIf="idx == 0">
  52                   <input type="text" class="form-control"
  53                     id='first-query-input'
  54                     [(ngModel)]="context.termSearch.query[idx]"
  55                     (keyup.enter)="searchByForm()"
  56                     placeholder="Query..."/>
  57                 </div>
  58                 <div *ngIf="idx > 0">
  59                   <input type="text" class="form-control"
  60                     [(ngModel)]="context.termSearch.query[idx]"
  61                     (keyup.enter)="searchByForm()"
  62                     placeholder="Query..."/>
  63                 </div>
  64               </div>
  65             </div>
  66             <div class="col-lg-2 pl-0 pr-1">
  67               <button class="btn btn-sm material-icon-button"
  68                 (click)="addSearchRow(idx + 1)"
  69                 i18n-title title="Add Search Row">
  70                 <span class="material-icons">add_circle_outline</span>
  71               </button>
  72               <button class="btn btn-sm material-icon-button"
  73                 [disabled]="context.termSearch.query.length < 2"
  74                 (click)="delSearchRow(idx)"
  75                 i18n-title title="Remove Search Row">
  76                 <span class="material-icons">remove_circle_outline</span>
  77               </button>
  78               <button *ngIf="idx == 0"
  79                 class="btn btn-sm material-icon-button"
  80                 type="button" (click)="toggleFilters()"
  81                 title="Toggle Search Filters" i18n-title>
  82                 <span class="material-icons">more_vert</span>
  83               </button>
  84             </div>
  85           </div>
  86           <div class="row">
  87             <div class="col-lg-12 form-inline">
  88                 <select class="form-control mr-2" [(ngModel)]="context.sort">
  89                   <option value='' i18n>Sort by Relevance</option>
  90                   <optgroup label="Sort by Title" i18n-label>
  91                     <option value='titlesort' i18n>Title: A to Z</option>
  92                     <option value='titlesort.descending' i18n>Title: Z to A</option>
  93                   </optgroup>
  94                   <optgroup label="Sort by Author" i18n-label>
  95                     <option value='authorsort' i18n>Author: A to Z</option>
  96                     <option value='authorsort.descending' i18n>Author: Z to A</option>
  97                   </optgroup>
  98                   <optgroup label="Sort by Publication Date" i18n-label>
  99                     <option value='pubdate' i18n>Date: A to Z</option>
 100                     <option value='pubdate.descending' i18n>Date: Z to A</option>
 101                   </optgroup>
 102                   <optgroup label="Sort by Popularity" i18n-label>
 103                     <option value='popularity' i18n>Most Popular</option>
 104                     <option value='poprel' i18n>Popularity Adjusted Relevance</option>
 105                   </optgroup>
 106                 </select>
 107                 <div class="checkbox pl-2 ml-2">
 108                   <label>
 109                     <input type="checkbox" [(ngModel)]="context.termSearch.available"/>
 110                     <span class="pl-1" i18n>Limit to Available</span>
 111                   </label>
 112                 </div>
 113                 <div class="checkbox pl-3">
 114                   <label>
 115                     <input type="checkbox"
 116                       [(ngModel)]="context.termSearch.groupByMetarecord"/>
 117                     <span class="pl-1" i18n>Group Formats/Editions</span>
 118                   </label>
 119                 </div>
 120                 <div class="checkbox pl-3">
 121                   <label>
 122                     <input type="checkbox" [(ngModel)]="context.termSearch.global"/>
 123                     <span class="pl-1" i18n>Results from All Libraries</span>
 124                   </label>
 125                 </div>
 126               </div>
 127           </div>
 128           <div class="row mt-3" *ngIf="showFilters()">
 129             <div class="col-lg-3">
 130               <select class="form-control"  multiple="true"
 131                 [(ngModel)]="context.termSearch.ccvmFilters.item_type">
 132                 <option value='' i18n>All Item Types</option>
 133                 <option *ngFor="let itemType of ccvmMap.item_type"
 134                   value="{{itemType.code()}}">{{itemType.value()}}</option>
 135               </select>
 136             </div>
 137             <div class="col-lg-3">
 138               <select class="form-control" multiple="true"
 139                 [(ngModel)]="context.termSearch.ccvmFilters.item_form">
 140                 <option value='' i18n>All Item Forms</option>
 141                 <option *ngFor="let itemForm of ccvmMap.item_form"
 142                   value="{{itemForm.code()}}">{{itemForm.value()}}</option>
 143               </select>
 144             </div>
 145             <div class="col-lg-3">
 146               <select class="form-control"
 147                 [(ngModel)]="context.termSearch.ccvmFilters.item_lang" multiple="true">
 148                 <option value='' i18n>All Languages</option>
 149                 <option *ngFor="let lang of ccvmMap.item_lang"
 150                   value="{{lang.code()}}">{{lang.value()}}</option>
 151               </select>
 152             </div>
 153             <div class="col-lg-3">
 154               <select class="form-control"
 155                 [(ngModel)]="context.termSearch.ccvmFilters.audience" multiple="true">
 156                 <option value='' i18n>All Audiences</option>
 157                 <option *ngFor="let audience of ccvmMap.audience"
 158                   value="{{audience.code()}}">{{audience.value()}}</option>
 159               </select>
 160             </div>
 161           </div>
 162           <div class="row mt-3" *ngIf="showFilters()">
 163             <div class="col-lg-3">
 164               <select class="form-control"
 165                 [(ngModel)]="context.termSearch.ccvmFilters.vr_format" multiple="true">
 166                 <option value='' i18n>All Video Formats</option>
 167                 <option *ngFor="let vrFormat of ccvmMap.vr_format"
 168                   value="{{vrFormat.code()}}">{{vrFormat.value()}}</option>
 169               </select>
 170             </div>
 171             <div class="col-lg-3">
 172               <select class="form-control"
 173                 [(ngModel)]="context.termSearch.ccvmFilters.bib_level" multiple="true">
 174                 <option value='' i18n>All Bib Levels</option>
 175                 <option *ngFor="let bibLevel of ccvmMap.bib_level"
 176                   value="{{bibLevel.code()}}">{{bibLevel.value()}}</option>
 177               </select>
 178             </div>
 179             <div class="col-lg-3">
 180               <select class="form-control"
 181                 [(ngModel)]="context.termSearch.ccvmFilters.lit_form" multiple="true">
 182                 <option value='' i18n>All Literary Forms</option>
 183                 <option *ngFor="let litForm of ccvmMap.lit_form"
 184                   value="{{litForm.code()}}">{{litForm.value()}}</option>
 185               </select>
 186             </div>
 187             <div class="col-lg-3">
 188               <select class="form-control"
 189                 [(ngModel)]="context.termSearch.copyLocations" multiple="true">
 190                 <option value='' i18n>All Copy Locations</option>
 191                 <option *ngFor="let loc of copyLocations" value="{{loc.id()}}" i18n>
 192                   {{loc.name()}} ({{orgName(loc.owning_lib())}})
 193                 </option>
 194               </select>
 195             </div>
 196           </div>
 197           <div class="row mt-3" *ngIf="showFilters()">
 198             <div class="col-lg-12">
 199               <div class="form-inline" i18n>
 200                 <label for="pub-date1-input">Publication Year is</label>
 201                 <select class="form-control ml-2" [(ngModel)]="context.termSearch.dateOp">
 202                   <option value='is'>Is</option>
 203                   <option value='before'>Before</option>
 204                   <option value='after'>After</option>
 205                   <option value='between'>Between</option>
 206                 </select>
 207                 <input class="form-control ml-2" type="number"
 208                   [(ngModel)]="context.termSearch.date1"/>
 209                 <input class="form-control ml-2" type="number"
 210                   *ngIf="context.termSearch.dateOp == 'between'"
 211                   [(ngModel)]="context.termSearch.date2"/>
 212               </div>
 213             </div>
 214           </div>
 215         </ng-template>
 216       </ngb-tab>
 217       <ngb-tab title="Numeric Search" i18n-title id="ident">
 218         <ng-template ngbTabContent>
 219           <div class="row mt-4">
 220             <div class="col-lg-12">
 221               <div class="form-inline">
 222                 <label for="ident-type" i18n>Query Type</label>
 223                 <select class="form-control ml-2" name="ident-type"
 224                   [(ngModel)]="context.identSearch.queryType">
 225                   <option i18n value="identifier|isbn">ISBN</option>
 226                   <option i18n value="identifier|issn">ISSN</option>
 227                   <option i18n disabled value="cnbrowse">Call Number (Shelf Browse)</option>
 228                   <option i18n value="identifier|lccn">LCCN</option>
 229                   <option i18n value="identifier|tcn">TCN</option>
 230                   <option i18n value="item_barcode">Item Barcode</option>
 231                 </select>
 232                 <label for="ident-value" class="ml-2" i18n>Value</label>
 233                 <input name="ident-value" id='ident-query-input'
 234                   type="text" class="form-control ml-2"
 235                   [(ngModel)]="context.identSearch.value"
 236                   (keyup.enter)="searchByForm()"
 237                   placeholder="Numeric Query..."/>
 238               </div>
 239             </div>
 240           </div>
 241         </ng-template>
 242       </ngb-tab>
 243       <ngb-tab title="MARC Search" i18n-title id="marc">
 244         <ng-template ngbTabContent>
 245           <div class="row mt-4">
 246             <div class="col-lg-12">
 247               <div class="form-inline mt-2"
 248                 *ngFor="let q of context.marcSearch.values; let idx = index; trackBy:trackByIdx">
 249                 <label for="marc-tag-{{idx}}" i18n>Tag</label>
 250                 <input class="form-control ml-2" size="3" type="text"
 251                   name="marc-tag-{{idx}}" id="{{ idx == 0 ? 'first-marc-tag' : '' }}"
 252                   [(ngModel)]="context.marcSearch.tags[idx]"
 253                   (keyup.enter)="searchByForm()"/>
 254                 <label for="marc-subfield-{{idx}}" class="ml-2" i18n>Subfield</label>
 255                 <input class="form-control ml-2" size="1" type="text"
 256                   name="marc-subfield-{{idx}}"
 257                   [(ngModel)]="context.marcSearch.subfields[idx]"
 258                   (keyup.enter)="searchByForm()"/>
 259                 <label for="marc-value-{{idx}}" class="ml-2" i18n>Value</label>
 260                 <input class="form-control ml-2" type="text" name="marc-value-{{idx}}"
 261                   [(ngModel)]="context.marcSearch.values[idx]"
 262                   (keyup.enter)="searchByForm()"/>
 263                 <button class="btn btn-sm material-icon-button ml-2"
 264                   (click)="addMarcSearchRow(idx + 1)">
 265                   <span class="material-icons">add_circle_outline</span>
 266                 </button>
 267                 <button class="btn btn-sm material-icon-button ml-2"
 268                   [disabled]="context.marcSearch.values.length < 2"
 269                   (click)="delMarcSearchRow(idx)">
 270                   <span class="material-icons">remove_circle_outline</span>
 271                 </button>
 272               </div>
 273             </div>
 274           </div>
 275         </ng-template>
 276       </ngb-tab>
 277       <ngb-tab title="Browse" i18n-title id="browse">
 278         <ng-template ngbTabContent>
 279           <div class="row mt-4">
 280             <div class="col-lg-12 form-inline">
 281               <label for="field-class" i18n>Browse for</label>
 282               <select class="form-control ml-2" name="field-class"
 283                 [(ngModel)]="context.browseSearch.fieldClass">
 284                 <option i18n value='title'>Title</option>
 285                 <option i18n value='author'>Author</option>
 286                 <option i18n value='subject'>Subject</option>
 287                 <option i18n value='series'>Series</option>
 288               </select>
 289               <label for="query" class="ml-2"> starting with </label>
 290               <input type="text" class="form-control ml-2"
 291                 id='browse-term-input' name="query"
 292                 [(ngModel)]="context.browseSearch.value"
 293                 (keyup.enter)="searchByForm()"
 294                 placeholder="Browse for..."/>
 295             </div>
 296           </div>
 297         </ng-template>
 298       </ngb-tab>
 299     </ngb-tabset>
 300   </div>
 301   <div class="col-lg-4">
 302     <div class="row">
 303       <div class="col-lg-12">
 304         <div class="card">
 305           <div class="card-body">
 306             <div class="float-right d-flex">
 307               <eg-org-select
 308                 (onChange)="orgOnChange($event)"
 309                 [initialOrg]="context.searchOrg"
 310                 [placeholder]="'Library'" >
 311               </eg-org-select>
 312               <button class="btn btn-success mr-1 ml-1" type="button"
 313                 [disabled]="searchIsActive()"
 314                 (click)="context.pager.offset=0;searchByForm()" i18n>
 315                 Search
 316               </button>
 317               <button class="btn btn-warning mr-1" type="button"
 318                 [disabled]="searchIsActive()"
 319                 (click)="context.reset()" i18n>
 320                 Reset
 321               </button>
 322             </div>
 323           </div>
 324         </div>
 325       </div>
 326     </div>
 327     <div class="row mt-2">
 328       <div class="col-lg-12">
 329         <eg-catalog-basket-actions></eg-catalog-basket-actions>
 330       </div>
 331     </div>
 332   </div>
 333 </div>
 334