Mercurial > hg > ng2-query-ismi
changeset 48:f8d6f8479e77 ng2-final
first working version with angular 2.4 (using old table w/o pager).
author | casties |
---|---|
date | Mon, 20 Mar 2017 18:12:48 +0100 |
parents | b65a031c4967 |
children | 781a5387ca93 |
files | src/app/query-app.component.ts src/app/query-app.module.ts src/app/query-result-row.component.ts src/app/query-result.component.ts src/app/query-select.component.ts |
diffstat | 5 files changed, 32 insertions(+), 24 deletions(-) [+] |
line wrap: on
line diff
--- a/src/app/query-app.component.ts Fri Mar 17 20:16:52 2017 +0100 +++ b/src/app/query-app.component.ts Mon Mar 20 18:12:48 2017 +0100 @@ -8,8 +8,8 @@ import {NormalizationService} from './normalization.service'; import {QuerySelectComponent} from './query-select.component'; -//import {QueryResultComponent} from './query-result.component'; -import {QueryResultTableComponent} from './query-result-table.component'; +import {QueryResultComponent} from './query-result.component'; +//import {QueryResultTableComponent} from './query-result-table.component'; @Component({ selector: 'query-app',
--- a/src/app/query-app.module.ts Fri Mar 17 20:16:52 2017 +0100 +++ b/src/app/query-app.module.ts Mon Mar 20 18:12:48 2017 +0100 @@ -1,17 +1,22 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; +import { HttpModule } from '@angular/http'; import { QueryAppComponent } from './query-app.component'; import { QuerySelectComponent } from './query-select.component'; import { QueryResultComponent } from './query-result.component'; import { QueryResultRowComponent } from './query-result-row.component'; //import { QueryResultTableComponent } from './query-result-table.component'; +import { QueryService } from './query.service'; +import { NormalizationService } from './normalization.service'; @NgModule({ - imports: [ BrowserModule ], + imports: [ BrowserModule, FormsModule, HttpModule ], declarations: [ QueryAppComponent, QuerySelectComponent, QueryResultComponent, QueryResultRowComponent ], + providers: [ QueryService, NormalizationService ], bootstrap: [ QueryAppComponent ] }) export class AppModule { }
--- a/src/app/query-result-row.component.ts Fri Mar 17 20:16:52 2017 +0100 +++ b/src/app/query-result-row.component.ts Mon Mar 20 18:12:48 2017 +0100 @@ -3,14 +3,16 @@ @Component({ selector: 'tr.resultRow', template: ` - <td style="vertical-align: top;" - *ngIf="rowType=='node'" *ngFor="let col of columns"> + <ng-container *ngIf="rowType=='node'"> + <td style="vertical-align: top;" + *ngFor="let col of columns"> <a *ngIf="col && col.name=='link'" href="{{rowData[col.name]}}" target="_blank">Link</a> <span *ngIf="col && col.name!='link'">{{rowData[col.name]}}</span> - </td> - - <td style="vertical-align: top;" - *ngIf="rowType=='text'">{{rowData}}</td> + </td> + </ng-container> + <ng-container *ngIf="rowType=='text'"> + <td style="vertical-align: top;">{{rowData}}</td> + </ng-container> `, inputs: ['rowData', 'rowType', 'columns'] }) @@ -21,7 +23,7 @@ public rowData: any; public columns: any[]; - /* ngOnInit() { - console.debug("row init! columns=", this.columns, " rowData=", this.rowData); - } */ + ngOnInit() { + console.debug("row init! rowType=", this.rowType, " columns=", this.columns, " rowData=", this.rowData); + } }
--- a/src/app/query-result.component.ts Fri Mar 17 20:16:52 2017 +0100 +++ b/src/app/query-result.component.ts Mon Mar 20 18:12:48 2017 +0100 @@ -11,10 +11,11 @@ <span>Cypher query:</span> <pre>{{queryState.resultCypherQuery}}</pre> <p>Query results ({{queryState.resultInfo}}):</p> - <table> + <table border="1"> <tr> - <th *ngIf="queryState.resultTypes=='node' && queryState.resultColumns" - *ngFor="let col of queryState.resultColumns">{{col?col.title:col}}</th> + <ng-container *ngIf="queryState.resultTypes=='node' && queryState.resultColumns"> + <th *ngFor="let col of queryState.resultColumns">{{col?col.title:col}}</th> + </ng-container> </tr> <tr class="resultRow" *ngFor="let row of queryState.results" [rowData]="row" [rowType]="queryState.resultTypes"
--- a/src/app/query-select.component.ts Fri Mar 17 20:16:52 2017 +0100 +++ b/src/app/query-select.component.ts Mon Mar 20 18:12:48 2017 +0100 @@ -15,7 +15,7 @@ <p *ngIf="resultInfo"> result: {{resultInfo}}</p> <div> <form (ngSubmit)="onSubmit()"> - <select (change)="onSelectMode($event)"> + <select name="mode" (change)="onSelectMode($event)"> <option></option> <option *ngFor="let mode of getQueryModes()" [value]="mode.id"> {{mode.label}} @@ -23,7 +23,7 @@ </select> <span *ngIf="selectedMode?.id=='type_is'"> - <select *ngIf="queryOptions" [ngModel]="selectedOption" (change)="onSelectOption($event)"> + <select name="option" *ngIf="queryOptions" [ngModel]="selectedOption" (change)="onSelectOption($event)"> <option></option> <option *ngFor="let option of queryOptions" [value]="option"> {{option}} @@ -32,7 +32,7 @@ </span> <span *ngIf="selectedMode?.id=='relation_is'"> - <select *ngIf="queryOptions" [ngModel]="selectedOption" (change)="onSelectOption($event)"> + <select name="option" *ngIf="queryOptions" [ngModel]="selectedOption" (change)="onSelectOption($event)"> <option></option> <option *ngFor="let option of queryOptions" [value]="option.getName()"> {{option.getLabel()}} @@ -41,31 +41,31 @@ </span> <span *ngIf="selectedMode?.id=='att_contains' || selectedMode?.id=='att_contains_norm'"> - <select [ngModel]="selectedOption" (change)="selectedOption=$event.target.value"> + <select name="option" [ngModel]="selectedOption" (change)="selectedOption=$event.target.value"> <option></option> <option *ngFor="let option of queryOptions" [value]="option"> {{option}} </option> </select> <span>contains</span> - <input type="text" [(ngModel)]="queryInput"/> + <input type="text" name="value" [(ngModel)]="queryInput"/> </span> <span *ngIf="selectedMode?.id=='att_num_range'"> - <select [ngModel]="selectedOption" (change)="selectedOption=$event.target.value"> + <select name="option" [ngModel]="selectedOption" (change)="selectedOption=$event.target.value"> <option></option> <option *ngFor="let option of queryOptions" [value]="option"> {{option}} </option> </select> <span>is between</span> - <input type="text" [(ngModel)]="queryInput"/> + <input type="text" name="value1" [(ngModel)]="queryInput"/> <span>and</span> - <input type="text" [(ngModel)]="queryInput2"/> + <input type="text" name="value2" [(ngModel)]="queryInput2"/> </span> <span *ngIf="selectedMode?.id=='id_is'"> - <input type="text" [(ngModel)]="queryInput"/> + <input type="text" name="value" [(ngModel)]="queryInput"/> </span> <button type="submit">Submit</button>