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