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

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