Mercurial > hg > ng2-query-ismi

comparison src/app/query-result-table.component.ts @ 58:3b4046e0cc02 default

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Merge from ng2-table branch. d7c947909ab888c013171b8c037e4f9fab30fe57
author casties
date Wed, 29 Mar 2017 17:19:12 +0200
parents d7c947909ab8
children
comparison
equal deleted inserted replaced
49:781a5387ca93 58:3b4046e0cc02
1 import {Component, OnInit} from '@angular/core'; 1 import {Component, OnInit} from '@angular/core';
2
3 //import {NG_TABLE_DIRECTIVES} from 'ng2-table/ng2-table';
4 //import {PAGINATION_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
5 2
6 import {QueryState} from './query-state'; 3 import {QueryState} from './query-state';
7 4
8 @Component({ 5 @Component({
9 selector: 'query-result', 6 selector: 'query-result',
10 template: ` 7 template: `
11 <div *ngIf="queryState?.results"> 8 <div *ngIf="queryState?.numResults > 0">
12 <span>Cypher query:</span> 9 <span>Cypher query:</span>
13 <pre>{{queryState.getQueryText()}}</pre> 10 <pre>{{queryState.getQueryText()}}</pre>
14 <h2>Query result</h2> 11 <h2>Query result</h2>
15 <pre>{{resultInfo}}</pre> 12 <pre>{{resultInfo}}</pre>
16 <div *ngIf="showTable"><button (click)="showTable=false">hide results</button></div> 13 <div *ngIf="showTable"><button (click)="showTable=false">hide results</button></div>
17 <div *ngIf="!showTable"><button (click)="showTable=true">show results</button></div> 14 <div *ngIf="!showTable"><button (click)="showTable=true">show results</button></div>
18 <div *ngIf="showTable"> 15 <div *ngIf="showTable">
19 <div>Show 16 <div>Show
20 <select (change)="onSelectNumItems($event)"> 17 <select name="numItems" (change)="onSelectNumItems($event)">
21 <option value="10">10</option> 18 <option value="10">10</option>
22 <option value="100">100</option> 19 <option value="100">100</option>
23 <option value="0">all</option> 20 <option value="0">all</option>
24 </select> 21 </select>
25 results per page. 22 results per page.
26 </div> 23 </div>
27 <div> 24 <div>
28 <form (ngSubmit)="onSelectCols($event)"> 25 <form (ngSubmit)="onSelectCols($event)">
29 Columns: 26 Columns:
30 <span *ngFor=" let col of allColumns"> 27 <span *ngFor="let col of allColumns">
31 <input type="checkbox" value="{{col.name}}" [(ngModel)]="col.show">{{col.name}} 28 <input type="checkbox" name="col{{col.name}}" value="{{col.name}}" [(ngModel)]="col.show">{{col.name}}
32 </span> 29 </span>
33 <button type="submit">change columns</button> 30 <button type="submit">change columns</button>
34 </form> 31 </form>
35 </div> 32 </div>
36 <div *ngIf="config.paging">Page {{page}} of {{numPages}}</div> 33 <pagination *ngIf="config.paging" class="pagination-sm"
37 <pagination *ngIf="config.paging" 34 [(ngModel)]="currentPage"
38 class="pagination-sm"
39 [(ngModel)]="page"
40 [totalItems]="length" 35 [totalItems]="length"
41 [itemsPerPage]="itemsPerPage" 36 [itemsPerPage]="itemsPerPage"
42 [maxSize]="maxSize" 37 [maxSize]="maxSize"
43 [boundaryLinks]="true" 38 [boundaryLinks]="true"
44 [rotate]="false" 39 [rotate]="false"
45 (pageChanged)="onChangeTable(config, $event)" 40 (pageChanged)="onChangeTable(config, $event)"
46 (numPages)="numPages = $event"> 41 (numPages)="numPages = $event">
47 </pagination> 42 </pagination>
48 <ng-table 43 <ng-table
49 [config]="config.sorting" 44 [config]="config"
50 (tableChanged)="onChangeTable($event)" 45 (tableChanged)="onChangeTable($event)"
51 [rows]="rows" [columns]="columns"> 46 [rows]="rows" [columns]="columns">
52 </ng-table> 47 </ng-table>
53 </div> 48 </div>
54 </div> 49 </div>
55 `, 50 <div *ngIf="!(queryState?.numResults > 0)">
56 inputs: ['queryState', 'resultInfo'], 51 <h2>No results found</h2>
57 // directives: [NG_TABLE_DIRECTIVES, PAGINATION_DIRECTIVES] 52 </div>
53 `,
54 inputs: ['queryState', 'resultInfo']
58 }) 55 })
59 56
60 export class QueryResultTableComponent implements OnInit { 57 export class QueryResultTableComponent implements OnInit {
61 58
62 public queryState: QueryState; 59 public queryState: QueryState;
67 public columns: Array<any>; 64 public columns: Array<any>;
68 public allColumns: Array<any>; 65 public allColumns: Array<any>;
69 66
70 public rows: Array<any>; 67 public rows: Array<any>;
71 68
72 public page: number = 1; 69 public currentPage: number = 1;
73 public itemsPerPage: number = 10; 70 public itemsPerPage: number = 10;
74 public maxSize: number = 5; 71 public maxSize: number = 5;
75 public numPages: number = 1; 72 public numPages: number = 1;
76 public length: number = 0; 73 public length: number = 0;
77 74
82 }; 79 };
83 80
84 ngOnChanges(changes: any) { 81 ngOnChanges(changes: any) {
85 console.debug("result table changed! changes=", changes); 82 console.debug("result table changed! changes=", changes);
86 this.data = this.queryState.results; 83 this.data = this.queryState.results;
87 this.allColumns = this.queryState.resultColumns; 84 if (this.data.length > 0) {
88 this.columns = this.allColumns.filter(c => c.show); 85 this.allColumns = this.queryState.resultColumns;
89 this.config.sorting = this.columns; 86 this.columns = this.allColumns.filter(c => c.show);
90 this.config.paging = {'page': this.page, 'itemsPerPage': this.itemsPerPage}; 87 this.config.sorting = this.columns;
91 this.showTable = (this.data.length < 1000); 88 this.config.paging = {'page': this.currentPage, 'itemsPerPage': this.itemsPerPage};
92 this.onChangeTable(this.config); 89 this.showTable = (this.data.length < 1000);
90 this.onChangeTable(this.config);
91 }
93 } 92 }
94 93
95 ngOnInit() { 94 ngOnInit() {
96 console.debug("result table init!"); 95 console.debug("result table init!");
97 } 96 }
104 this.itemsPerPage = this.length; 103 this.itemsPerPage = this.length;
105 } else { 104 } else {
106 this.itemsPerPage = num; 105 this.itemsPerPage = num;
107 } 106 }
108 // update something 107 // update something
109 this.config.paging = {'page': this.page, 'itemsPerPage': this.itemsPerPage}; 108 this.config.paging = {'page': this.currentPage, 'itemsPerPage': this.itemsPerPage};
110 this.onChangeTable(this.config); 109 this.onChangeTable(this.config);
111 } 110 }
112 111
113 onSelectCols(event: any) { 112 onSelectCols(event: any) {
114 console.debug("select cols:", this.allColumns); 113 console.debug("select cols:", this.allColumns);
115 this.columns = this.allColumns.filter(c => c.show); 114 this.columns = this.allColumns.filter(c => c.show);
116 this.config.sorting = this.columns; 115 this.config.sorting = this.columns;
117 } 116 }
118 117
119 changePage(page:any, data:Array<any> = this.data):Array<any> { 118 changePage(page: any, data: Array<any> = this.data): Array<any> {
120 let start = (page.page - 1) * page.itemsPerPage; 119 let start = (page.page - 1) * page.itemsPerPage;
121 let end = page.itemsPerPage > -1 ? (start + page.itemsPerPage) : data.length; 120 let end = page.itemsPerPage > -1 ? (start + page.itemsPerPage) : data.length;
122 return data.slice(start, end); 121 return data.slice(start, end);
123 } 122 }
124 123
161 } 160 }
162 if (config.sorting) { 161 if (config.sorting) {
163 Object.assign(this.config.sorting, config.sorting); 162 Object.assign(this.config.sorting, config.sorting);
164 // changing sorting resets page 163 // changing sorting resets page
165 if (page == null) { 164 if (page == null) {
166 this.page = 1; 165 this.currentPage = 1;
167 page = {'page': this.page, 'itemsPerPage': this.itemsPerPage}; 166 page = {'page': this.currentPage, 'itemsPerPage': this.itemsPerPage};
168 } 167 }
169 } 168 }
170 169
171 //let filteredData = this.changeFilter(this.data, this.config); 170 //let filteredData = this.changeFilter(this.data, this.config);
172 //let sortedData = this.changeSort(filteredData, this.config); 171 //let sortedData = this.changeSort(filteredData, this.config);