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