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

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