Mercurial > hg > ng2-query-ismi
annotate src/app/query-result-table.component.ts @ 54:4341c1b4e3ae ng2-table
cleanup.
author | casties |
---|---|
date | Thu, 23 Mar 2017 18:57:01 +0100 |
parents | ac4bfbd99638 |
children | d7c947909ab8 |
rev | line source |
---|---|
45 | 1 import {Component, OnInit} from '@angular/core'; |
24 | 2 |
3 import {QueryState} from './query-state'; | |
4 | |
5 @Component({ | |
27 | 6 selector: 'query-result', |
24 | 7 template: ` |
33 | 8 <div *ngIf="queryState?.results"> |
26 | 9 <span>Cypher query:</span> |
31
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
10 <pre>{{queryState.getQueryText()}}</pre> |
25 | 11 <h2>Query result</h2> |
27 | 12 <pre>{{resultInfo}}</pre> |
29 | 13 <div *ngIf="showTable"><button (click)="showTable=false">hide results</button></div> |
14 <div *ngIf="!showTable"><button (click)="showTable=true">show results</button></div> | |
28
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
15 <div *ngIf="showTable"> |
30
193271b6b9d2
configure attributes per result type. select number of items per result page.
casties
parents:
29
diff
changeset
|
16 <div>Show |
52
738e90238443
ng2-table version mostly works (without page-n-of-m, problems with columns).
casties
parents:
47
diff
changeset
|
17 <select name="numItems" (change)="onSelectNumItems($event)"> |
30
193271b6b9d2
configure attributes per result type. select number of items per result page.
casties
parents:
29
diff
changeset
|
18 <option value="10">10</option> |
193271b6b9d2
configure attributes per result type. select number of items per result page.
casties
parents:
29
diff
changeset
|
19 <option value="100">100</option> |
193271b6b9d2
configure attributes per result type. select number of items per result page.
casties
parents:
29
diff
changeset
|
20 <option value="0">all</option> |
193271b6b9d2
configure attributes per result type. select number of items per result page.
casties
parents:
29
diff
changeset
|
21 </select> |
193271b6b9d2
configure attributes per result type. select number of items per result page.
casties
parents:
29
diff
changeset
|
22 results per page. |
193271b6b9d2
configure attributes per result type. select number of items per result page.
casties
parents:
29
diff
changeset
|
23 </div> |
31
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
24 <div> |
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
25 <form (ngSubmit)="onSelectCols($event)"> |
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
26 Columns: |
54 | 27 <span *ngFor="let col of allColumns"> |
28 <input type="checkbox" name="col{{col.name}}" value="{{col.name}}" [(ngModel)]="col.show">{{col.name}} | |
31
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
29 </span> |
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
30 <button type="submit">change columns</button> |
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
31 </form> |
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
32 </div> |
52
738e90238443
ng2-table version mostly works (without page-n-of-m, problems with columns).
casties
parents:
47
diff
changeset
|
33 <pagination *ngIf="config.paging" class="pagination-sm" |
738e90238443
ng2-table version mostly works (without page-n-of-m, problems with columns).
casties
parents:
47
diff
changeset
|
34 [(ngModel)]="currentPage" |
28
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
35 [totalItems]="length" |
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
36 [itemsPerPage]="itemsPerPage" |
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
37 [maxSize]="maxSize" |
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
38 [boundaryLinks]="true" |
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
39 [rotate]="false" |
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
40 (pageChanged)="onChangeTable(config, $event)" |
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
41 (numPages)="numPages = $event"> |
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
42 </pagination> |
45 | 43 <ng-table |
53 | 44 [config]="config" |
42 | 45 (tableChanged)="onChangeTable($event)" |
28
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
46 [rows]="rows" [columns]="columns"> |
45 | 47 </ng-table> |
28
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
48 </div> |
24 | 49 </div> |
50 `, | |
54 | 51 inputs: ['queryState', 'resultInfo'] |
24 | 52 }) |
42 | 53 |
24 | 54 export class QueryResultTableComponent implements OnInit { |
55 | |
56 public queryState: QueryState; | |
27 | 57 public resultInfo: string; |
58 | |
28
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
59 public showTable = false; |
25 | 60 public data: Array<any>; |
61 public columns: Array<any>; | |
31
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
62 public allColumns: Array<any>; |
25 | 63 |
64 public rows: Array<any>; | |
65 | |
52
738e90238443
ng2-table version mostly works (without page-n-of-m, problems with columns).
casties
parents:
47
diff
changeset
|
66 public currentPage: number = 1; |
25 | 67 public itemsPerPage: number = 10; |
68 public maxSize: number = 5; | |
69 public numPages: number = 1; | |
70 public length: number = 0; | |
71 | |
72 public config: any = { | |
73 paging: true, | |
74 sorting: {'columns': this.columns}, | |
75 //filtering: {filterString: '', columnName: 'position'} | |
76 }; | |
24 | 77 |
31
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
78 ngOnChanges(changes: any) { |
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
79 console.debug("result table changed! changes=", changes); |
27 | 80 this.data = this.queryState.results; |
31
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
81 this.allColumns = this.queryState.resultColumns; |
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
82 this.columns = this.allColumns.filter(c => c.show); |
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
83 this.config.sorting = this.columns; |
52
738e90238443
ng2-table version mostly works (without page-n-of-m, problems with columns).
casties
parents:
47
diff
changeset
|
84 this.config.paging = {'page': this.currentPage, 'itemsPerPage': this.itemsPerPage}; |
28
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
85 this.showTable = (this.data.length < 1000); |
42 | 86 this.onChangeTable(this.config); |
24 | 87 } |
88 | |
89 ngOnInit() { | |
90 console.debug("result table init!"); | |
91 } | |
92 | |
30
193271b6b9d2
configure attributes per result type. select number of items per result page.
casties
parents:
29
diff
changeset
|
93 onSelectNumItems(event: any) { |
193271b6b9d2
configure attributes per result type. select number of items per result page.
casties
parents:
29
diff
changeset
|
94 let selected = event.target.value; |
193271b6b9d2
configure attributes per result type. select number of items per result page.
casties
parents:
29
diff
changeset
|
95 console.debug("selected number of items:", selected); |
193271b6b9d2
configure attributes per result type. select number of items per result page.
casties
parents:
29
diff
changeset
|
96 let num = parseInt(selected); |
193271b6b9d2
configure attributes per result type. select number of items per result page.
casties
parents:
29
diff
changeset
|
97 if (num == 0) { |
193271b6b9d2
configure attributes per result type. select number of items per result page.
casties
parents:
29
diff
changeset
|
98 this.itemsPerPage = this.length; |
193271b6b9d2
configure attributes per result type. select number of items per result page.
casties
parents:
29
diff
changeset
|
99 } else { |
193271b6b9d2
configure attributes per result type. select number of items per result page.
casties
parents:
29
diff
changeset
|
100 this.itemsPerPage = num; |
193271b6b9d2
configure attributes per result type. select number of items per result page.
casties
parents:
29
diff
changeset
|
101 } |
42 | 102 // update something |
52
738e90238443
ng2-table version mostly works (without page-n-of-m, problems with columns).
casties
parents:
47
diff
changeset
|
103 this.config.paging = {'page': this.currentPage, 'itemsPerPage': this.itemsPerPage}; |
42 | 104 this.onChangeTable(this.config); |
30
193271b6b9d2
configure attributes per result type. select number of items per result page.
casties
parents:
29
diff
changeset
|
105 } |
193271b6b9d2
configure attributes per result type. select number of items per result page.
casties
parents:
29
diff
changeset
|
106 |
31
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
107 onSelectCols(event: any) { |
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
108 console.debug("select cols:", this.allColumns); |
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
109 this.columns = this.allColumns.filter(c => c.show); |
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
110 this.config.sorting = this.columns; |
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
111 } |
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
112 |
53 | 113 changePage(page: any, data: Array<any> = this.data): Array<any> { |
25 | 114 let start = (page.page - 1) * page.itemsPerPage; |
115 let end = page.itemsPerPage > -1 ? (start + page.itemsPerPage) : data.length; | |
116 return data.slice(start, end); | |
117 } | |
118 | |
119 changeSort(data: any, config: any) { | |
120 if (!config.sorting) { | |
121 return data; | |
122 } | |
123 let columns = this.columns.filter(c => c.sort); | |
124 // simple sorting | |
26 | 125 let sorted = data.sort((previous: any, current: any) => { |
25 | 126 for (let i = 0; i < columns.length; i++) { |
127 let sort = columns[i].sort; | |
128 let columnName = columns[i].name; | |
129 if (previous[columnName] > current[columnName]) { | |
130 return sort === 'desc' ? -1 : 1; | |
131 } else if (previous[columnName] < current[columnName]) { | |
132 return sort === 'asc' ? -1 : 1; | |
133 } | |
134 } | |
135 return 0; | |
136 }); | |
26 | 137 return sorted; |
25 | 138 } |
139 | |
140 changeFilter(data: any, config: any): any { | |
141 if (!config.filtering) { | |
142 return data; | |
143 } | |
144 | |
145 let filteredData: Array<any> = data.filter((item: any) => | |
146 item[config.filtering.columnName].match(this.config.filtering.filterString)); | |
147 | |
148 return filteredData; | |
149 } | |
150 | |
47
b65a031c4967
first step to angular2-final (2.4) version of the query browser.
casties
parents:
45
diff
changeset
|
151 onChangeTable(config: any, page: any = config.paging) { |
42 | 152 console.debug("onChangeTable config=", config, " page=", page); |
25 | 153 if (config.filtering) { |
154 Object.assign(this.config.filtering, config.filtering); | |
155 } | |
156 if (config.sorting) { | |
157 Object.assign(this.config.sorting, config.sorting); | |
42 | 158 // changing sorting resets page |
159 if (page == null) { | |
52
738e90238443
ng2-table version mostly works (without page-n-of-m, problems with columns).
casties
parents:
47
diff
changeset
|
160 this.currentPage = 1; |
738e90238443
ng2-table version mostly works (without page-n-of-m, problems with columns).
casties
parents:
47
diff
changeset
|
161 page = {'page': this.currentPage, 'itemsPerPage': this.itemsPerPage}; |
42 | 162 } |
25 | 163 } |
164 | |
31
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
165 //let filteredData = this.changeFilter(this.data, this.config); |
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
166 //let sortedData = this.changeSort(filteredData, this.config); |
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
167 let sortedData = this.changeSort(this.data, this.config); |
25 | 168 |
42 | 169 this.rows = (page && this.config.paging) ? this.changePage(page, sortedData) : sortedData; |
25 | 170 this.length = sortedData.length; |
171 } | |
172 | |
24 | 173 } |