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