Mercurial > hg > ng2-query-ismi
comparison app/query-result-table.component.ts @ 31:4926885f8a99
selectable result columns. nicer cypher query output.
author | casties |
---|---|
date | Mon, 01 Feb 2016 20:10:55 +0100 |
parents | 193271b6b9d2 |
children | 739eb38ec2a2 |
comparison
equal
deleted
inserted
replaced
30:193271b6b9d2 | 31:4926885f8a99 |
---|---|
8 @Component({ | 8 @Component({ |
9 selector: 'query-result', | 9 selector: 'query-result', |
10 template: ` | 10 template: ` |
11 <div *ngIf="queryState && queryState.results"> | 11 <div *ngIf="queryState && queryState.results"> |
12 <span>Cypher query:</span> | 12 <span>Cypher query:</span> |
13 <pre>{{queryState.resultCypherQuery}}</pre> | 13 <pre>{{queryState.getQueryText()}}</pre> |
14 <h2>Query result</h2> | 14 <h2>Query result</h2> |
15 <pre>{{resultInfo}}</pre> | 15 <pre>{{resultInfo}}</pre> |
16 <div *ngIf="showTable"><button (click)="showTable=false">hide results</button></div> | 16 <div *ngIf="showTable"><button (click)="showTable=false">hide results</button></div> |
17 <div *ngIf="!showTable"><button (click)="showTable=true">show results</button></div> | 17 <div *ngIf="!showTable"><button (click)="showTable=true">show results</button></div> |
18 <div *ngIf="showTable"> | 18 <div *ngIf="showTable"> |
21 <option value="10">10</option> | 21 <option value="10">10</option> |
22 <option value="100">100</option> | 22 <option value="100">100</option> |
23 <option value="0">all</option> | 23 <option value="0">all</option> |
24 </select> | 24 </select> |
25 results per page. | 25 results per page. |
26 </div> | |
27 <div> | |
28 <form (ngSubmit)="onSelectCols($event)"> | |
29 Columns: | |
30 <span *ngFor="#col of allColumns"> | |
31 <input type="checkbox" value="{{col.name}}" [(ngModel)]="col.show">{{col.name}} | |
32 </span> | |
33 <button type="submit">change columns</button> | |
34 </form> | |
26 </div> | 35 </div> |
27 <div *ngIf="config.paging">Page {{page}} of {{numPages}}</div> | 36 <div *ngIf="config.paging">Page {{page}} of {{numPages}}</div> |
28 <pagination *ngIf="config.paging" | 37 <pagination *ngIf="config.paging" |
29 class="pagination-sm" | 38 class="pagination-sm" |
30 [(ngModel)]="page" | 39 [(ngModel)]="page" |
54 public resultInfo: string; | 63 public resultInfo: string; |
55 | 64 |
56 public showTable = false; | 65 public showTable = false; |
57 public data: Array<any>; | 66 public data: Array<any>; |
58 public columns: Array<any>; | 67 public columns: Array<any>; |
68 public allColumns: Array<any>; | |
59 | 69 |
60 public rows: Array<any>; | 70 public rows: Array<any>; |
61 | 71 |
62 public page: number = 1; | 72 public page: number = 1; |
63 public itemsPerPage: number = 10; | 73 public itemsPerPage: number = 10; |
69 paging: true, | 79 paging: true, |
70 sorting: {'columns': this.columns}, | 80 sorting: {'columns': this.columns}, |
71 //filtering: {filterString: '', columnName: 'position'} | 81 //filtering: {filterString: '', columnName: 'position'} |
72 }; | 82 }; |
73 | 83 |
74 ngOnChanges() { | 84 ngOnChanges(changes: any) { |
75 console.debug("result table changed! queryState=", this.queryState?this.queryState.resultColumns:''); | 85 console.debug("result table changed! changes=", changes); |
76 this.data = this.queryState.results; | 86 this.data = this.queryState.results; |
77 this.columns = this.queryState.resultColumns; | 87 this.allColumns = this.queryState.resultColumns; |
78 this.config.sorting = this.queryState.resultColumns; | 88 this.columns = this.allColumns.filter(c => c.show); |
89 this.config.sorting = this.columns; | |
79 this.showTable = (this.data.length < 1000); | 90 this.showTable = (this.data.length < 1000); |
80 this.onChangeTable(this.config, null); | 91 this.onChangeTable(this.config, null); |
81 } | 92 } |
82 | 93 |
83 ngOnInit() { | 94 ngOnInit() { |
91 if (num == 0) { | 102 if (num == 0) { |
92 this.itemsPerPage = this.length; | 103 this.itemsPerPage = this.length; |
93 } else { | 104 } else { |
94 this.itemsPerPage = num; | 105 this.itemsPerPage = num; |
95 } | 106 } |
107 } | |
108 | |
109 onSelectCols(event: any) { | |
110 console.debug("select cols:", this.allColumns); | |
111 this.columns = this.allColumns.filter(c => c.show); | |
112 this.config.sorting = this.columns; | |
96 } | 113 } |
97 | 114 |
98 changePage(page:any, data:Array<any> = this.data):Array<any> { | 115 changePage(page:any, data:Array<any> = this.data):Array<any> { |
99 let start = (page.page - 1) * page.itemsPerPage; | 116 let start = (page.page - 1) * page.itemsPerPage; |
100 let end = page.itemsPerPage > -1 ? (start + page.itemsPerPage) : data.length; | 117 let end = page.itemsPerPage > -1 ? (start + page.itemsPerPage) : data.length; |
140 } | 157 } |
141 if (config.sorting) { | 158 if (config.sorting) { |
142 Object.assign(this.config.sorting, config.sorting); | 159 Object.assign(this.config.sorting, config.sorting); |
143 } | 160 } |
144 | 161 |
145 let filteredData = this.changeFilter(this.data, this.config); | 162 //let filteredData = this.changeFilter(this.data, this.config); |
146 let sortedData = this.changeSort(filteredData, this.config); | 163 //let sortedData = this.changeSort(filteredData, this.config); |
164 let sortedData = this.changeSort(this.data, this.config); | |
147 | 165 |
148 this.rows = (page && config.paging) ? this.changePage(page, sortedData) : sortedData; | 166 this.rows = (page && config.paging) ? this.changePage(page, sortedData) : sortedData; |
149 this.length = sortedData.length; | 167 this.length = sortedData.length; |
150 } | 168 } |
151 | 169 |