357f7be493b017d850398447133eba49b22a3d6a
[working/Evergreen.git] / Open-ILS / src / eg2 / src / app / staff / catalog / search-form.component.ts
1 import {Component, OnInit, AfterViewInit, Renderer2} from '@angular/core';
2 import {Router, ActivatedRoute, NavigationEnd} from '@angular/router';
3 import {IdlObject} from '@eg/core/idl.service';
4 import {OrgService} from '@eg/core/org.service';
5 import {CatalogService} from '@eg/share/catalog/catalog.service';
6 import {CatalogSearchContext, CatalogSearchState} from '@eg/share/catalog/search-context';
7 import {StaffCatalogService} from './catalog.service';
8 import {NgbTabset, NgbTabChangeEvent} from '@ng-bootstrap/ng-bootstrap';
9
10 // Maps opac-style default tab names to local tab names.
11 const LEGACY_TAB_NAME_MAP = {
12     expert: 'marc',
13     numeric: 'ident',
14     advanced: 'term'
15 };
16
17 @Component({
18   selector: 'eg-catalog-search-form',
19   styleUrls: ['search-form.component.css'],
20   templateUrl: 'search-form.component.html'
21 })
22 export class SearchFormComponent implements OnInit, AfterViewInit {
23
24     context: CatalogSearchContext;
25     ccvmMap: {[ccvm: string]: IdlObject[]} = {};
26     cmfMap: {[cmf: string]: IdlObject} = {};
27     showSearchFilters = false;
28     copyLocations: IdlObject[];
29     searchTab: string;
30
31     // Display the full form if true, otherwise display the expandy.
32     showThyself = true;
33
34     constructor(
35         private renderer: Renderer2,
36         private router: Router,
37         private route: ActivatedRoute,
38         private org: OrgService,
39         private cat: CatalogService,
40         private staffCat: StaffCatalogService
41     ) {
42         this.copyLocations = [];
43
44         // Some search scenarios, like rendering a search template,
45         // will not be searchable and thus not resovle to a specific
46         // search tab.  Check to see if a specific tab is requested
47         // via the URL.
48         this.route.queryParams.subscribe(params => {
49             if (params.searchTab) {
50                 this.searchTab = params.searchTab;
51             }
52         });
53
54         this.router.events.subscribe(routeEvent => {
55             if (routeEvent instanceof NavigationEnd) {
56                 if (routeEvent.url.match(/catalog\/record/)) {
57                     this.showThyself = false;
58                 } else {
59                     this.showThyself = true;
60                 }
61             }
62         });
63     }
64
65     ngOnInit() {
66         this.ccvmMap = this.cat.ccvmMap;
67         this.cmfMap = this.cat.cmfMap;
68         this.context = this.staffCat.searchContext;
69
70         // Start with advanced search options open
71         // if any filters are active.
72         this.showSearchFilters = this.filtersActive();
73     }
74
75     ngAfterViewInit() {
76         // Query inputs are generated from search context data,
77         // so they are not available until after the first render.
78         // Search context data is extracted synchronously from the URL.
79
80         // Avoid changing the tab in the lifecycle hook thread.
81         setTimeout(() => {
82
83             if (this.context.identSearch.queryType === '') {
84                 this.context.identSearch.queryType = 'identifier|isbn';
85             }
86
87             // Apply a tab if none was already specified
88             if (!this.searchTab) {
89                 // Assumes that only one type of search will be searchable
90                 // at any given time.
91                 if (this.context.marcSearch.isSearchable()) {
92                     this.searchTab = 'marc';
93                 } else if (this.context.identSearch.isSearchable()) {
94                     this.searchTab = 'ident';
95                 } else if (this.context.browseSearch.isSearchable()) {
96                     this.searchTab = 'browse';
97                 } else if (this.context.termSearch.isSearchable()) {
98                     this.searchTab = 'term';
99
100                 } else {
101
102                     this.searchTab =
103                         LEGACY_TAB_NAME_MAP[this.staffCat.defaultTab]
104                         || this.staffCat.defaultTab || 'term';
105
106                 }
107
108                 if (this.searchTab === 'term') {
109                     this.refreshCopyLocations();
110                 }
111             }
112
113             this.focusTabInput();
114         });
115     }
116
117     onTabChange(evt: NgbTabChangeEvent) {
118         this.searchTab = evt.nextId;
119
120         // Focus after tab-change event has a chance to complete
121         // or the tab body and its input won't exist yet and no
122         // elements will be focus-able.
123         setTimeout(() => this.focusTabInput());
124     }
125
126     focusTabInput() {
127         // Select a DOM node to focus when the tab changes.
128         let selector: string;
129         switch (this.searchTab) {
130             case 'ident':
131                 selector = '#ident-query-input';
132                 break;
133             case 'marc':
134                 selector = '#first-marc-tag';
135                 break;
136             case 'browse':
137                 selector = '#browse-term-input';
138                 break;
139             case 'cnbrowse':
140                 selector = '#cnbrowse-term-input';
141                 break;
142             default:
143                 this.refreshCopyLocations();
144                 selector = '#first-query-input';
145         }
146
147         try {
148             // TODO: sometime the selector is not available in the DOM
149             // until even later (even with setTimeouts).  Need to fix this.
150             // Note the error is thrown from selectRootElement(), not the
151             // call to .focus() on a null reference.
152             this.renderer.selectRootElement(selector).focus();
153         } catch (E) {}
154     }
155
156     /**
157      * Display the advanced/extended search options when asked to
158      * or if any advanced options are selected.
159      */
160     showFilters(): boolean {
161         // Note that filters may become active due to external
162         // actions on the search context.  Always show the filters
163         // if filter values are applied.
164         return this.showSearchFilters || this.filtersActive();
165     }
166
167     toggleFilters() {
168         this.showSearchFilters = !this.showSearchFilters;
169         this.refreshCopyLocations();
170     }
171
172     filtersActive(): boolean {
173
174         if (this.context.termSearch.copyLocations[0] !== '') { return true; }
175
176         // ccvm filters may be present without any filters applied.
177         // e.g. if filters were applied then removed.
178         let show = false;
179         Object.keys(this.context.termSearch.ccvmFilters).forEach(ccvm => {
180             if (this.context.termSearch.ccvmFilters[ccvm][0] !== '') {
181                 show = true;
182             }
183         });
184
185         return show;
186     }
187
188     orgOnChange = (org: IdlObject): void => {
189         this.context.searchOrg = org;
190         this.refreshCopyLocations();
191     }
192
193     refreshCopyLocations() {
194         if (!this.showFilters()) { return; }
195
196         // TODO: is this how we avoid displaying too many locations?
197         const org = this.context.searchOrg;
198         if (org.id() === this.org.root().id()) {
199             this.copyLocations = [];
200             return;
201         }
202
203         this.cat.fetchCopyLocations(org).then(() =>
204             this.copyLocations = this.cat.copyLocations
205         );
206     }
207
208     orgName(orgId: number): string {
209         return this.org.get(orgId).shortname();
210     }
211
212     addSearchRow(index: number): void {
213         this.context.termSearch.query.splice(index, 0, '');
214         this.context.termSearch.fieldClass.splice(index, 0, 'keyword');
215         this.context.termSearch.joinOp.splice(index, 0, '&&');
216         this.context.termSearch.matchOp.splice(index, 0, 'contains');
217     }
218
219     delSearchRow(index: number): void {
220         this.context.termSearch.query.splice(index, 1);
221         this.context.termSearch.fieldClass.splice(index, 1);
222         this.context.termSearch.joinOp.splice(index, 1);
223         this.context.termSearch.matchOp.splice(index, 1);
224     }
225
226     addMarcSearchRow(index: number): void {
227         this.context.marcSearch.tags.splice(index, 0, '');
228         this.context.marcSearch.subfields.splice(index, 0, '');
229         this.context.marcSearch.values.splice(index, 0, '');
230     }
231
232     delMarcSearchRow(index: number): void {
233         this.context.marcSearch.tags.splice(index, 1);
234         this.context.marcSearch.subfields.splice(index, 1);
235         this.context.marcSearch.values.splice(index, 1);
236     }
237
238     searchByForm(): void {
239         this.context.pager.offset = 0; // New search
240
241         // Form search overrides basket display
242         this.context.showBasket = false;
243
244         this.context.scrub(this.searchTab);
245
246         switch (this.searchTab) {
247
248             case 'term':
249             case 'ident':
250             case 'marc':
251                 this.staffCat.search();
252                 break;
253
254             case 'browse':
255                 this.staffCat.browse();
256                 break;
257
258             case 'cnbrowse':
259                 this.staffCat.cnBrowse();
260                 break;
261         }
262     }
263
264     // https://stackoverflow.com/questions/42322968/angular2-dynamic-input-field-lose-focus-when-input-changes
265     trackByIdx(index: any, item: any) {
266        return index;
267     }
268
269     searchIsActive(): boolean {
270         return this.context.searchState === CatalogSearchState.SEARCHING;
271     }
272 }
273
274