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