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