Mercurial > hg > ng2-query-ismi

comparison src/app/query-select.component.ts @ 49:781a5387ca93

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Merge with angular2-final branch f8d6f8479e77011fd043c5feb2b14a476d0aaffc
author casties
date Mon, 20 Mar 2017 18:50:31 +0100
parents f8d6f8479e77
children b22e52a128a8
comparison
equal deleted inserted replaced
43:39edd27d83e4 49:781a5387ca93
1 import {Component, Output, EventEmitter, OnInit} from '@angular/core';
2
3 import {QueryMode} from './query-mode';
4 import {QueryStep} from './query-step';
5 import {QueryState} from './query-state';
6
7 import {QueryService} from './query.service';
8 import {NormalizationService} from './normalization.service';
9 import {getRelationByName} from './ismi-relation-types';
10
11
12 @Component({
13 selector: 'query-select',
14 template: `
15 <p *ngIf="resultInfo">&nbsp;&nbsp;&nbsp;result: {{resultInfo}}</p>
16 <div>
17 <form (ngSubmit)="onSubmit()">
18 <select name="mode" (change)="onSelectMode($event)">
19 <option></option>
20 <option *ngFor="let mode of getQueryModes()" [value]="mode.id">
21 {{mode.label}}
22 </option>
23 </select>
24
25 <span *ngIf="selectedMode?.id=='type_is'">
26 <select name="option" *ngIf="queryOptions" [ngModel]="selectedOption" (change)="onSelectOption($event)">
27 <option></option>
28 <option *ngFor="let option of queryOptions" [value]="option">
29 {{option}}
30 </option>
31 </select>
32 </span>
33
34 <span *ngIf="selectedMode?.id=='relation_is'">
35 <select name="option" *ngIf="queryOptions" [ngModel]="selectedOption" (change)="onSelectOption($event)">
36 <option></option>
37 <option *ngFor="let option of queryOptions" [value]="option.getName()">
38 {{option.getLabel()}}
39 </option>
40 </select>
41 </span>
42
43 <span *ngIf="selectedMode?.id=='att_contains' || selectedMode?.id=='att_contains_norm'">
44 <select name="option" [ngModel]="selectedOption" (change)="selectedOption=$event.target.value">
45 <option></option>
46 <option *ngFor="let option of queryOptions" [value]="option">
47 {{option}}
48 </option>
49 </select>
50 <span>contains</span>
51 <input type="text" name="value" [(ngModel)]="queryInput"/>
52 </span>
53
54 <span *ngIf="selectedMode?.id=='att_num_range'">
55 <select name="option" [ngModel]="selectedOption" (change)="selectedOption=$event.target.value">
56 <option></option>
57 <option *ngFor="let option of queryOptions" [value]="option">
58 {{option}}
59 </option>
60 </select>
61 <span>is between</span>
62 <input type="text" name="value1" [(ngModel)]="queryInput"/>
63 <span>and</span>
64 <input type="text" name="value2" [(ngModel)]="queryInput2"/>
65 </span>
66
67 <span *ngIf="selectedMode?.id=='id_is'">
68 <input type="text" name="value" [(ngModel)]="queryInput"/>
69 </span>
70
71 <button type="submit">Submit</button>
72 </form>
73 </div>
74 `,
75 inputs: ['queryStep', 'index'],
76 outputs: ['queryChanged']
77 })
78
79 export class QuerySelectComponent implements OnInit {
80 public queryStep: string;
81 public index: number;
82 public resultInfo: string;
83 public queryModes: QueryMode[];
84 public selectedMode: QueryMode;
85 public queryOptions: string[];
86 public selectedOption: string;
87 public queryInput: string;
88 public queryInput2: string;
89
90 // output queryChanged
91 public queryChanged: EventEmitter<QueryState> = new EventEmitter<QueryState>();
92
93 constructor(private _queryService: QueryService, private _normService: NormalizationService) {}
94
95 ngOnInit() {
96 this.setup();
97 }
98
99 setup() {
100 console.log("query-select setup step=", this.queryStep);
101 var step = this._queryService.state.steps[this.index-1];
102 if (step != null) {
103 this.resultInfo = step.resultInfo;
104 }
105 }
106
107 getQueryModes(): QueryMode[] {
108 this.queryModes = this._queryService.getQueryModes(this.index);
109 return this.queryModes;
110 }
111
112 onSelectMode(event: any) {
113 var selected = event.target.value;
114 this.selectedMode = this.queryModes.find(mode => mode.id === selected);
115 this.queryOptions = this._queryService.getQueryOptions(this.selectedMode);
116 }
117
118 onSelectOption(event: any) {
119 var selected = event.target.value;
120 console.debug("selected option:", selected);
121 this.selectedOption = selected;
122 this.onSubmit();
123 }
124
125 onSubmit() {
126 console.debug("Submit! selectedMode=", this.selectedMode, " selectedOption=", this.selectedOption, " queryInput=", this.queryInput);
127 var step: QueryStep;
128 if (this.selectedMode.id == 'type_is') {
129 /*
130 * type_is
131 */
132 let opt = this.selectedOption;
133 if (opt) {
134 step = new QueryStep(this.selectedMode, {'objectType': opt});
135 }
136 } else if (this.selectedMode.id == 'relation_is') {
137 /*
138 * relation_is
139 */
140 let opt = this.selectedOption;
141 if (opt) {
142 let rel = getRelationByName(opt);
143 step = new QueryStep(this.selectedMode, {'relationType': rel});
144 }
145 } else if (this.selectedMode.id == 'id_is') {
146 /*
147 * id is
148 */
149 let val = this.queryInput;
150 if (val) {
151 step = new QueryStep(this.selectedMode, {'value': val});
152 }
153 } else if (this.selectedMode.id == 'att_contains') {
154 /*
155 * att_contains
156 */
157 let att = this.selectedOption;
158 let val = this.queryInput;
159 if (att && val) {
160 step = new QueryStep(this.selectedMode, {'attribute': att, 'value': val});
161 }
162 } else if (this.selectedMode.id == 'att_num_range') {
163 /*
164 * att_num_range
165 */
166 let att = this.selectedOption;
167 let nlo = this.queryInput;
168 let nhi = this.queryInput2;
169 if (att && nlo && nhi) {
170 step = new QueryStep(this.selectedMode, {'attribute': att, 'numLo': nlo, 'numHi': nhi});
171 }
172 } else if (this.selectedMode.id == 'att_contains_norm') {
173 /*
174 * att_contains_norm
175 *
176 * calls normalization service and submits event in callback
177 */
178 let att = this.selectedOption;
179 let val = this.queryInput;
180 if (att && val) {
181 // run search term through normalizer
182 this._normService.fetchArabicTranslitNormalizedString(val)
183 .subscribe(
184 data => {
185 console.debug("openmind norm data=", data);
186 step = new QueryStep(this.selectedMode, {'attribute': att, 'value': val, 'normValue': data.normalized_text});
187 this._queryService.setQueryStep(this.index, step);
188 // query has changed now
189 this.queryChanged.emit(this._queryService.getState());
190 },
191 err => console.error("openmind norm error=", err),
192 () => console.debug("openmind norm query Complete")
193 );
194 // query has not been set yet
195 return;
196 }
197 }
198
199 /*
200 * set step and submit change event
201 */
202 if (step != null) {
203 this._queryService.setQueryStep(this.index, step);
204 this.queryChanged.emit(this._queryService.getState());
205 }
206 }
207 }