LP1872867 Staff catalog filters use search labels
[Evergreen.git] / 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' i18n>Date: A to Z</option>
121                     <option value='pubdate.descending' i18n>Date: Z to A</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