Mercurial > hg > ng2-query-ismi
changeset 8:fa646ee46c19
more query generation.
author | casties |
---|---|
date | Mon, 18 Jan 2016 09:52:46 +0100 |
parents | 6cd6c09032aa |
children | 402c7229dc7c |
files | app/query-app.component.ts app/query-select.component.ts app/query.service.ts |
diffstat | 3 files changed, 53 insertions(+), 25 deletions(-) [+] |
line wrap: on
line diff
--- a/app/query-app.component.ts Fri Jan 15 20:00:47 2016 +0100 +++ b/app/query-app.component.ts Mon Jan 18 09:52:46 2016 +0100 @@ -3,15 +3,23 @@ import {QueryService} from './query.service'; import {QueryState} from './query-state'; +import {QueryStep} from './query-step'; + import {QuerySelectComponent} from './query-select.component'; import {QueryResultComponent} from './query-result.component'; @Component({ selector: 'query-app', template: ` - <h1>My Angular 2 Text: {{title}}</h1> - <p>Selected query: {{selectedQuery}}</p> - <query-select (queryChanged)="onQueryChanged($event)"></query-select> + <h1>Angular2 query builder</h1> + <div>Select a query step:</div> + <query-select *ngFor="#step of querySteps; #i=index;" + [queryStep]="step" [index]="i" + (queryChanged)="onQueryChanged($event)"></query-select> + <div> + <button (click)="addQueryStep()">add step</button> + <button (click)="removeQueryStep()">remove step</button> + </div> <query-result [queryState]="queryState"></query-result> `, directives: [QuerySelectComponent, QueryResultComponent], @@ -19,11 +27,23 @@ }) export class QueryAppComponent { - public title = 'huhu!'; - public selectedQuery: string; public queryState: QueryState; + public querySteps: QueryStep[]; constructor(private _queryService: QueryService) { + this._queryService.setup(); + this.querySteps = []; + this.addQueryStep(); + } + + addQueryStep() { + this.querySteps.push({'mode': null}); + //this.queryState = this._queryService.getState(); + } + + removeQueryStep() { + this._queryService.state.steps.pop(); + //this.queryState = this._queryService.getState(); } onQueryChanged(event: any) {
--- a/app/query-select.component.ts Fri Jan 15 20:00:47 2016 +0100 +++ b/app/query-select.component.ts Mon Jan 18 09:52:46 2016 +0100 @@ -9,27 +9,31 @@ @Component({ selector: 'query-select', template: ` - <p>Selected option: {{selectedQuery}}</p> + <div> <select (change)="onSelectMode($event)"> <option></option> <option *ngFor="#mode of queryModes" [value]="mode.id"> {{mode.label}} </option> </select> - <select (change)="onSelectOption($event)"> + <select *ngIf="query2Options" (change)="onSelectOption($event)"> + <option></option> <option *ngFor="#option of query2Options" [value]="option"> {{option}} </option> </select> - ` - //outputs: ['queryChanged'] + </div> + `, + inputs: ['index'] + //outputs: ['queryChanged'] // this should work but doesn't }) export class QuerySelectComponent implements OnInit { - public queryModes; - public selectedMode; - public selectedQuery = 'unknown'; - public query2Options; + public queryStep: QueryStep; + public index: number; + public queryModes: QueryMode[]; + public selectedMode: QueryMode; + public query2Options: string[]; @Output('queryChanged') queryChanged = new EventEmitter<QueryState>(); @@ -40,7 +44,7 @@ } setup() { - this._queryService.setupIsmiObjectTypes(); + console.log("query-select setup step=", this.queryStep); this.queryModes = this._queryService.getQueryModes(); // select first mode (too early?) this.selectedMode = this.queryModes[0]; @@ -55,10 +59,9 @@ onSelectOption(event: any) { var selected = event.target.value; - this.selectedQuery = selected; console.debug("selected option:", selected); - var query: QueryStep = {'mode': this.selectedMode, 'objectType': selected}; - this._queryService.setQueryStep(0, query); + var step = {'mode': this.selectedMode, 'objectType': selected}; + this._queryService.setQueryStep(this.index, step); this.queryChanged.emit(this._queryService.getState()); } }
--- a/app/query.service.ts Fri Jan 15 20:00:47 2016 +0100 +++ b/app/query.service.ts Mon Jan 18 09:52:46 2016 +0100 @@ -10,9 +10,9 @@ @Injectable() export class QueryService { + public neo4jBaseUrl = 'http://localhost:7474/db/data/cypher/'; public state: QueryState; - - public ismiObjectTypes; + public ismiObjectTypes: any; public QUERY_MODES: QueryMode[] = [ {id: 'type_is', label:'Object type is'}, @@ -29,6 +29,10 @@ }; } + setup() { + this.setupIsmiObjectTypes(); + } + getState() { return this.state; } @@ -73,12 +77,13 @@ createCypherQuery() { var cypher = ''; var returnType = ''; - var step = this.state.steps[0]; - if (step.mode.id === 'type_is') { - cypher = `MATCH (e:${step.objectType}) return e`; - returnType = 'node'; + for (var i=0; i < this.state.steps.length; ++i) { + var step = this.state.steps[i]; + if (step.mode.id === 'type_is') { + cypher = `MATCH (e:${step.objectType}) return e`; + returnType = 'node'; + } } - this.state.cypherQuery = cypher; this.state.resultTypes = returnType; } @@ -109,7 +114,7 @@ // create POST data from query var data = JSON.stringify({'query': query, 'params': params}); // make post request asynchronously - var resp = this._http.post('http://localhost:7474/db/data/cypher/', data, opts) + var resp = this._http.post(this.neo4jBaseUrl, data, opts) // filter result as JSON .map(res => res.json()); // return Observable