Mercurial > hg > ng2-query-ismi
view app/query-select.component.ts @ 24:f6f4177d0a81
use ng2-table for results.
author | casties |
---|---|
date | Tue, 26 Jan 2016 16:54:38 +0100 |
parents | 34cd764e234b |
children | 4c046f3244ec |
line wrap: on
line source
import {Component, Output, EventEmitter, OnInit} from 'angular2/core'; import {QueryMode} from './query-mode'; import {QueryStep} from './query-step'; import {QueryState} from './query-state'; import {QueryService} from './query.service'; import {NormalizationService} from './normalization.service'; @Component({ selector: 'query-select', template: ` <p *ngIf="resultInfo"> result: {{resultInfo}}</p> <div> <form (ngSubmit)="onSubmit()"> <select (change)="onSelectMode($event)"> <option></option> <option *ngFor="#mode of queryModes" [value]="mode.id"> {{mode.label}} </option> </select> <span *ngIf="selectedMode && (selectedMode.id=='type_is' || selectedMode.id=='relation_is')"> <select *ngIf="queryOptions" [(ngModel)]="selectedOption" (change)="onSelectOption($event)"> <option></option> <option *ngFor="#option of queryOptions" [value]="option"> {{option}} </option> </select> </span> <span *ngIf="selectedMode && (selectedMode.id=='att_contains' || selectedMode.id=='att_contains_norm')"> <select [(ngModel)]="selectedOption"> <option></option> <option *ngFor="#option of queryOptions" [value]="option"> {{option}} </option> </select> <span>contains</span> <input type="text" [(ngModel)]="queryInput"/> </span> <span *ngIf="selectedMode && selectedMode.id=='att_num_range'"> <select [(ngModel)]="selectedOption"> <option></option> <option *ngFor="#option of queryOptions" [value]="option"> {{option}} </option> </select> <span>is between</span> <input type="text" [(ngModel)]="queryInput"/> <span>and</span> <input type="text" [(ngModel)]="queryInput2"/> </span> <button type="submit">Submit</button> </form> </div> `, inputs: ['queryStep', 'index'] //outputs: ['queryChanged'] // this should work but doesn't }) export class QuerySelectComponent implements OnInit { public queryStep: string; public index: number; public resultInfo: string; public queryModes: QueryMode[]; public selectedMode: QueryMode; public queryOptions: string[]; public selectedOption: string; public queryInput: string; public queryInput2: string; @Output('queryChanged') queryChanged = new EventEmitter<QueryState>(); constructor(private _queryService: QueryService, private _normService: NormalizationService) {} ngOnInit() { this.setup(); } setup() { console.log("query-select setup step=", this.queryStep); this.queryModes = this._queryService.getQueryModes(); var step = this._queryService.state.steps[this.index-1]; if (step != null) { this.resultInfo = step.resultInfo; } } onSelectMode(event: any) { var selected = event.target.value; this.selectedMode = this.queryModes.find(mode => mode.id === selected); this.queryOptions = this._queryService.getQueryOptions(this.selectedMode); } onSelectOption(event: any) { var selected = event.target.value; console.debug("selected option:", selected); this.selectedOption = selected; this.onSubmit(); } onSubmit() { console.debug("Submit! selectedMode=", this.selectedMode, " selectedOption=", this.selectedOption, " queryInput=", this.queryInput); var step: QueryStep; if (this.selectedMode.id == 'type_is') { var opt = this.selectedOption; if (opt) { step = new QueryStep(this.selectedMode, {'objectType': opt}); } } else if (this.selectedMode.id == 'relation_is') { var opt = this.selectedOption; if (opt) { step = new QueryStep(this.selectedMode, {'relationType': opt}); } } else if (this.selectedMode.id == 'att_contains') { var att = this.selectedOption; var val = this.queryInput; if (att && val) { step = new QueryStep(this.selectedMode, {'attribute': att, 'value': val}); } } else if (this.selectedMode.id == 'att_num_range') { var att = this.selectedOption; var nlo = this.queryInput; var nhi = this.queryInput2; if (att && nlo && nhi) { step = new QueryStep(this.selectedMode, {'attribute': att, 'numLo': nlo, 'numHi': nhi}); } } else if (this.selectedMode.id == 'att_contains_norm') { var att = this.selectedOption; var val = this.queryInput; if (att && val) { // run search term through normalizer this._normService.fetchArabicTranslitNormalizedString(val) .subscribe( data => { console.debug("openmind norm data=", data); step = new QueryStep(this.selectedMode, {'attribute': att, 'value': val, 'normValue': data.normalized_text}); this._queryService.setQueryStep(this.index, step); // query has changed now this.queryChanged.emit(this._queryService.getState()); }, err => console.error("openmind norm error=", err), () => console.debug("openmind norm query Complete") ); // query has not been set yet return; } } if (step != null) { this._queryService.setQueryStep(this.index, step); this.queryChanged.emit(this._queryService.getState()); } } }