Mercurial > hg > ng2-query-ismi
comparison app/query-select.component.ts @ 8:fa646ee46c19
more query generation.
author | casties |
---|---|
date | Mon, 18 Jan 2016 09:52:46 +0100 |
parents | 6cd6c09032aa |
children | 66dce99cef4e |
comparison
equal
deleted
inserted
replaced
7:6cd6c09032aa | 8:fa646ee46c19 |
---|---|
7 | 7 |
8 | 8 |
9 @Component({ | 9 @Component({ |
10 selector: 'query-select', | 10 selector: 'query-select', |
11 template: ` | 11 template: ` |
12 <p>Selected option: {{selectedQuery}}</p> | 12 <div> |
13 <select (change)="onSelectMode($event)"> | 13 <select (change)="onSelectMode($event)"> |
14 <option></option> | 14 <option></option> |
15 <option *ngFor="#mode of queryModes" [value]="mode.id"> | 15 <option *ngFor="#mode of queryModes" [value]="mode.id"> |
16 {{mode.label}} | 16 {{mode.label}} |
17 </option> | 17 </option> |
18 </select> | 18 </select> |
19 <select (change)="onSelectOption($event)"> | 19 <select *ngIf="query2Options" (change)="onSelectOption($event)"> |
20 <option></option> | |
20 <option *ngFor="#option of query2Options" [value]="option"> | 21 <option *ngFor="#option of query2Options" [value]="option"> |
21 {{option}} | 22 {{option}} |
22 </option> | 23 </option> |
23 </select> | 24 </select> |
24 ` | 25 </div> |
25 //outputs: ['queryChanged'] | 26 `, |
27 inputs: ['index'] | |
28 //outputs: ['queryChanged'] // this should work but doesn't | |
26 }) | 29 }) |
27 | 30 |
28 export class QuerySelectComponent implements OnInit { | 31 export class QuerySelectComponent implements OnInit { |
29 public queryModes; | 32 public queryStep: QueryStep; |
30 public selectedMode; | 33 public index: number; |
31 public selectedQuery = 'unknown'; | 34 public queryModes: QueryMode[]; |
32 public query2Options; | 35 public selectedMode: QueryMode; |
36 public query2Options: string[]; | |
33 | 37 |
34 @Output('queryChanged') queryChanged = new EventEmitter<QueryState>(); | 38 @Output('queryChanged') queryChanged = new EventEmitter<QueryState>(); |
35 | 39 |
36 constructor(private _queryService: QueryService) {} | 40 constructor(private _queryService: QueryService) {} |
37 | 41 |
38 ngOnInit() { | 42 ngOnInit() { |
39 this.setup(); | 43 this.setup(); |
40 } | 44 } |
41 | 45 |
42 setup() { | 46 setup() { |
43 this._queryService.setupIsmiObjectTypes(); | 47 console.log("query-select setup step=", this.queryStep); |
44 this.queryModes = this._queryService.getQueryModes(); | 48 this.queryModes = this._queryService.getQueryModes(); |
45 // select first mode (too early?) | 49 // select first mode (too early?) |
46 this.selectedMode = this.queryModes[0]; | 50 this.selectedMode = this.queryModes[0]; |
47 this.query2Options = this._queryService.getQueryOptions(this.selectedMode); | 51 this.query2Options = this._queryService.getQueryOptions(this.selectedMode); |
48 } | 52 } |
53 this.query2Options = this._queryService.getQueryOptions(this.selectedMode); | 57 this.query2Options = this._queryService.getQueryOptions(this.selectedMode); |
54 } | 58 } |
55 | 59 |
56 onSelectOption(event: any) { | 60 onSelectOption(event: any) { |
57 var selected = event.target.value; | 61 var selected = event.target.value; |
58 this.selectedQuery = selected; | |
59 console.debug("selected option:", selected); | 62 console.debug("selected option:", selected); |
60 var query: QueryStep = {'mode': this.selectedMode, 'objectType': selected}; | 63 var step = {'mode': this.selectedMode, 'objectType': selected}; |
61 this._queryService.setQueryStep(0, query); | 64 this._queryService.setQueryStep(this.index, step); |
62 this.queryChanged.emit(this._queryService.getState()); | 65 this.queryChanged.emit(this._queryService.getState()); |
63 } | 66 } |
64 } | 67 } |