Mercurial > hg > ng2-query-ismi

comparison app/query-select.component.ts @ 7:6cd6c09032aa

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
object type query with results!
author Robert Casties <casties@mpiwg-berlin.mpg.de>
date Fri, 15 Jan 2016 20:00:47 +0100
parents 9f5473536a98
children fa646ee46c19
comparison
equal deleted inserted replaced
6:9f5473536a98 7:6cd6c09032aa
1 import {Component, OnInit} from 'angular2/core'; 1 import {Component, Output, EventEmitter, OnInit} from 'angular2/core';
2 2
3 import {QueryService} from './query.service'; 3 import {QueryService} from './query.service';
4 import {QueryMode} from './query-mode'; 4 import {QueryMode} from './query-mode';
5 import {QueryStep} from './query-step'; 5 import {QueryStep} from './query-step';
6 import {QueryState} from './query-state';
6 7
7 8
8 @Component({ 9 @Component({
9 selector: 'query-select', 10 selector: 'query-select',
10 template: ` 11 template: `
11 <p>Selected option: {{selectedQuery}}</p> 12 <p>Selected option: {{selectedQuery}}</p>
12 <select (change)="onSelectMode($event)"> 13 <select (change)="onSelectMode($event)">
14 <option></option>
13 <option *ngFor="#mode of queryModes" [value]="mode.id"> 15 <option *ngFor="#mode of queryModes" [value]="mode.id">
14 {{mode.label}} 16 {{mode.label}}
15 </option> 17 </option>
16 </select> 18 </select>
17 <select (change)="onSelectOption($event)"> 19 <select (change)="onSelectOption($event)">
18 <option *ngFor="#option of query2Options" [value]="option"> 20 <option *ngFor="#option of query2Options" [value]="option">
19 {{option}} 21 {{option}}
20 </option> 22 </option>
21 </select> 23 </select>
22 ` 24 `
25 //outputs: ['queryChanged']
23 }) 26 })
24 27
25 export class QuerySelectComponent implements OnInit { 28 export class QuerySelectComponent implements OnInit {
26 public queryModes; 29 public queryModes;
27 public selectedMode; 30 public selectedMode;
28 public selectedQuery = 'unknown'; 31 public selectedQuery = 'unknown';
29 public query2Options; 32 public query2Options;
33
34 @Output('queryChanged') queryChanged = new EventEmitter<QueryState>();
30 35
31 constructor(private _queryService: QueryService) {} 36 constructor(private _queryService: QueryService) {}
32 37
33 ngOnInit() { 38 ngOnInit() {
34 this.setup(); 39 this.setup();
35 } 40 }
36 41
37 setup() { 42 setup() {
38 this._queryService.setupIsmiObjectTypes(); 43 this._queryService.setupIsmiObjectTypes();
39 this.queryModes = this._queryService.getQueryModes(); 44 this.queryModes = this._queryService.getQueryModes();
40 // select first mode 45 // select first mode (too early?)
41 this.selectedMode = this.queryModes[0]; 46 this.selectedMode = this.queryModes[0];
42 this.query2Options = this._queryService.getQueryOptions(this.selectedMode); 47 this.query2Options = this._queryService.getQueryOptions(this.selectedMode);
43 } 48 }
44 49
45 onSelectMode(event: any) { 50 onSelectMode(event: any) {
50 55
51 onSelectOption(event: any) { 56 onSelectOption(event: any) {
52 var selected = event.target.value; 57 var selected = event.target.value;
53 this.selectedQuery = selected; 58 this.selectedQuery = selected;
54 console.debug("selected option:", selected); 59 console.debug("selected option:", selected);
55 var query = {'mode': this.selectedMode, 'objectType': selected}; 60 var query: QueryStep = {'mode': this.selectedMode, 'objectType': selected};
56 this._queryService.setQueryStep(0, query); 61 this._queryService.setQueryStep(0, query);
62 this.queryChanged.emit(this._queryService.getState());
57 } 63 }
58 } 64 }