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