Mercurial > hg > ng2-query-ismi

comparison app/query-select.component.ts @ 11:6989cd00e8d7

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
relations work now as well as longer queries.
author Robert Casties <casties@mpiwg-berlin.mpg.de>
date Wed, 20 Jan 2016 19:49:10 +0100
parents 66dce99cef4e
children 98b435bb6c0c
comparison
equal deleted inserted replaced
10:66dce99cef4e 11:6989cd00e8d7
7 7
8 8
9 @Component({ 9 @Component({
10 selector: 'query-select', 10 selector: 'query-select',
11 template: ` 11 template: `
12 <div> 12 <div>
13 <form (ngSubmit)="onSubmit()"> 13 <form (ngSubmit)="onSubmit()">
14 <select (change)="onSelectMode($event)"> 14 <select (change)="onSelectMode($event)">
15 <option></option> 15 <option></option>
16 <option *ngFor="#mode of queryModes" [value]="mode.id"> 16 <option *ngFor="#mode of queryModes" [value]="mode.id">
17 {{mode.label}} 17 {{mode.label}}
18 </option> 18 </option>
19 </select> 19 </select>
20 20
21 <select *ngIf="selectedMode.id=='type_is' && queryOptions" (change)="onSelectOption($event)"> 21 <span *ngIf="selectedMode.id=='type_is' || selectedMode.id=='relation_is'">
22 <option></option> 22 <select *ngIf="queryOptions" [(ngModel)]="selectedOption" (change)="onSelectOption($event)">
23 <option *ngFor="#option of queryOptions" [value]="option"> 23 <option></option>
24 {{option}} 24 <option *ngFor="#option of queryOptions" [value]="option">
25 </option> 25 {{option}}
26 </select> 26 </option>
27 </select>
28 </span>
27 29
28 <span *ngIf="selectedMode.id=='att_contains'"> 30 <span *ngIf="selectedMode.id=='att_contains' || selectedMode.id=='att_contains_norm'">
29 <select [(ngModel)]="selectedOption"> 31 <select [(ngModel)]="selectedOption">
30 <option></option> 32 <option></option>
31 <option *ngFor="#option of queryOptions" [value]="option"> 33 <option *ngFor="#option of queryOptions" [value]="option">
32 {{option}} 34 {{option}}
33 </option> 35 </option>
34 </select> 36 </select>
35 <span>contains</span> 37 <span>contains</span>
36 <input type="text" [(ngModel)]="queryInput"/> 38 <input type="text" [(ngModel)]="queryInput"/>
37 </span> 39 </span>
38 <button type="submit">Submit</button> 40 <button type="submit">Submit</button>
39 </form> 41 </form>
40 </div> 42 </div>
41 `, 43 `,
42 inputs: ['index'] 44 inputs: ['index']
43 //outputs: ['queryChanged'] // this should work but doesn't 45 //outputs: ['queryChanged'] // this should work but doesn't
44 }) 46 })
45 47
75 } 77 }
76 78
77 onSelectOption(event: any) { 79 onSelectOption(event: any) {
78 var selected = event.target.value; 80 var selected = event.target.value;
79 console.debug("selected option:", selected); 81 console.debug("selected option:", selected);
80 var step = {'mode': this.selectedMode, 'objectType': selected}; 82 this.selectedOption = selected;
81 this._queryService.setQueryStep(this.index, step); 83 this.onSubmit();
82 this.queryChanged.emit(this._queryService.getState());
83 } 84 }
84 85
85 onSubmit() { 86 onSubmit() {
86 console.debug("Submit! selectedMode=", this.selectedMode, " selectedOption=", this.selectedOption, " queryInput=", this.queryInput); 87 console.debug("Submit! selectedMode=", this.selectedMode, " selectedOption=", this.selectedOption, " queryInput=", this.queryInput);
87 if (this.selectedMode.id == 'att_contains') { 88 var step: QueryStep;
89 if (this.selectedMode.id == 'type_is') {
90 var opt = this.selectedOption;
91 if (opt) {
92 step = {'mode': this.selectedMode, 'objectType': opt};
93 }
94 } else if (this.selectedMode.id == 'relation_is') {
95 var opt = this.selectedOption;
96 if (opt) {
97 step = {'mode': this.selectedMode, 'relationType': opt};
98 }
99 } else if (this.selectedMode.id == 'att_contains' || this.selectedMode.id == 'att_contains_norm') {
88 var att = this.selectedOption; 100 var att = this.selectedOption;
89 var val = this.queryInput; 101 var val = this.queryInput;
90 if (att && val) { 102 if (att && val) {
91 var step = {'mode': this.selectedMode, 'attribute': att, 'value': val}; 103 step = {'mode': this.selectedMode, 'attribute': att, 'value': val};
92 this._queryService.setQueryStep(this.index, step);
93 this.queryChanged.emit(this._queryService.getState());
94 } 104 }
105 }
106
107 if (step != null) {
108 this._queryService.setQueryStep(this.index, step);
109 this.queryChanged.emit(this._queryService.getState());
95 } 110 }
96 } 111 }
97 } 112 }