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 }