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

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