Mercurial > hg > ng2-query-ismi
annotate src/app/query-result-table.component.ts @ 57:d7c947909ab8 ng2-table
renamed query-app.module to app.module. loading query from url fragment works now.
author | casties |
---|---|
date | Wed, 29 Mar 2017 17:16:10 +0200 |
parents | 4341c1b4e3ae |
children |
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: ` |
57
d7c947909ab8
renamed query-app.module to app.module. loading query from url fragment works now.
casties
parents:
54
diff
changeset
|
8 <div *ngIf="queryState?.numResults > 0"> |
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> |
57
d7c947909ab8
renamed query-app.module to app.module. loading query from url fragment works now.
casties
parents:
54
diff
changeset
|
50 <div *ngIf="!(queryState?.numResults > 0)"> |
d7c947909ab8
renamed query-app.module to app.module. loading query from url fragment works now.
casties
parents:
54
diff
changeset
|
51 <h2>No results found</h2> |
d7c947909ab8
renamed query-app.module to app.module. loading query from url fragment works now.
casties
parents:
54
diff
changeset
|
52 </div> |
d7c947909ab8
renamed query-app.module to app.module. loading query from url fragment works now.
casties
parents:
54
diff
changeset
|
53 `, |
54 | 54 inputs: ['queryState', 'resultInfo'] |
24 | 55 }) |
42 | 56 |
24 | 57 export class QueryResultTableComponent implements OnInit { |
58 | |
59 public queryState: QueryState; | |
27 | 60 public resultInfo: string; |
61 | |
28
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
62 public showTable = false; |
25 | 63 public data: Array<any>; |
64 public columns: Array<any>; | |
31
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
65 public allColumns: Array<any>; |
25 | 66 |
67 public rows: Array<any>; | |
68 | |
52
738e90238443
ng2-table version mostly works (without page-n-of-m, problems with columns).
casties
parents:
47
diff
changeset
|
69 public currentPage: number = 1; |
25 | 70 public itemsPerPage: number = 10; |
71 public maxSize: number = 5; | |
72 public numPages: number = 1; | |
73 public length: number = 0; | |
74 | |
75 public config: any = { | |
76 paging: true, | |
77 sorting: {'columns': this.columns}, | |
78 //filtering: {filterString: '', columnName: 'position'} | |
79 }; | |
24 | 80 |
31
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
81 ngOnChanges(changes: any) { |
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
82 console.debug("result table changed! changes=", changes); |
27 | 83 this.data = this.queryState.results; |
57
d7c947909ab8
renamed query-app.module to app.module. loading query from url fragment works now.
casties
parents:
54
diff
changeset
|
84 if (this.data.length > 0) { |
d7c947909ab8
renamed query-app.module to app.module. loading query from url fragment works now.
casties
parents:
54
diff
changeset
|
85 this.allColumns = this.queryState.resultColumns; |
d7c947909ab8
renamed query-app.module to app.module. loading query from url fragment works now.
casties
parents:
54
diff
changeset
|
86 this.columns = this.allColumns.filter(c => c.show); |
d7c947909ab8
renamed query-app.module to app.module. loading query from url fragment works now.
casties
parents:
54
diff
changeset
|
87 this.config.sorting = this.columns; |
d7c947909ab8
renamed query-app.module to app.module. loading query from url fragment works now.
casties
parents:
54
diff
changeset
|
88 this.config.paging = {'page': this.currentPage, 'itemsPerPage': this.itemsPerPage}; |
d7c947909ab8
renamed query-app.module to app.module. loading query from url fragment works now.
casties
parents:
54
diff
changeset
|
89 this.showTable = (this.data.length < 1000); |
d7c947909ab8
renamed query-app.module to app.module. loading query from url fragment works now.
casties
parents:
54
diff
changeset
|
90 this.onChangeTable(this.config); |
d7c947909ab8
renamed query-app.module to app.module. loading query from url fragment works now.
casties
parents:
54
diff
changeset
|
91 } |
24 | 92 } |
93 | |
94 ngOnInit() { | |
95 console.debug("result table init!"); | |
96 } | |
97 | |
30
193271b6b9d2
configure attributes per result type. select number of items per result page.
casties
parents:
29
diff
changeset
|
98 onSelectNumItems(event: any) { |
193271b6b9d2
configure attributes per result type. select number of items per result page.
casties
parents:
29
diff
changeset
|
99 let selected = event.target.value; |
193271b6b9d2
configure attributes per result type. select number of items per result page.
casties
parents:
29
diff
changeset
|
100 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
|
101 let num = parseInt(selected); |
193271b6b9d2
configure attributes per result type. select number of items per result page.
casties
parents:
29
diff
changeset
|
102 if (num == 0) { |
193271b6b9d2
configure attributes per result type. select number of items per result page.
casties
parents:
29
diff
changeset
|
103 this.itemsPerPage = this.length; |
193271b6b9d2
configure attributes per result type. select number of items per result page.
casties
parents:
29
diff
changeset
|
104 } else { |
193271b6b9d2
configure attributes per result type. select number of items per result page.
casties
parents:
29
diff
changeset
|
105 this.itemsPerPage = num; |
193271b6b9d2
configure attributes per result type. select number of items per result page.
casties
parents:
29
diff
changeset
|
106 } |
42 | 107 // update something |
52
738e90238443
ng2-table version mostly works (without page-n-of-m, problems with columns).
casties
parents:
47
diff
changeset
|
108 this.config.paging = {'page': this.currentPage, 'itemsPerPage': this.itemsPerPage}; |
42 | 109 this.onChangeTable(this.config); |
30
193271b6b9d2
configure attributes per result type. select number of items per result page.
casties
parents:
29
diff
changeset
|
110 } |
193271b6b9d2
configure attributes per result type. select number of items per result page.
casties
parents:
29
diff
changeset
|
111 |
31
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
112 onSelectCols(event: any) { |
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
113 console.debug("select cols:", this.allColumns); |
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
114 this.columns = this.allColumns.filter(c => c.show); |
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
115 this.config.sorting = this.columns; |
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
116 } |
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
117 |
53 | 118 changePage(page: any, data: Array<any> = this.data): Array<any> { |
25 | 119 let start = (page.page - 1) * page.itemsPerPage; |
120 let end = page.itemsPerPage > -1 ? (start + page.itemsPerPage) : data.length; | |
121 return data.slice(start, end); | |
122 } | |
123 | |
124 changeSort(data: any, config: any) { | |
125 if (!config.sorting) { | |
126 return data; | |
127 } | |
128 let columns = this.columns.filter(c => c.sort); | |
129 // simple sorting | |
26 | 130 let sorted = data.sort((previous: any, current: any) => { |
25 | 131 for (let i = 0; i < columns.length; i++) { |
132 let sort = columns[i].sort; | |
133 let columnName = columns[i].name; | |
134 if (previous[columnName] > current[columnName]) { | |
135 return sort === 'desc' ? -1 : 1; | |
136 } else if (previous[columnName] < current[columnName]) { | |
137 return sort === 'asc' ? -1 : 1; | |
138 } | |
139 } | |
140 return 0; | |
141 }); | |
26 | 142 return sorted; |
25 | 143 } |
144 | |
145 changeFilter(data: any, config: any): any { | |
146 if (!config.filtering) { | |
147 return data; | |
148 } | |
149 | |
150 let filteredData: Array<any> = data.filter((item: any) => | |
151 item[config.filtering.columnName].match(this.config.filtering.filterString)); | |
152 | |
153 return filteredData; | |
154 } | |
155 | |
47
b65a031c4967
first step to angular2-final (2.4) version of the query browser.
casties
parents:
45
diff
changeset
|
156 onChangeTable(config: any, page: any = config.paging) { |
42 | 157 console.debug("onChangeTable config=", config, " page=", page); |
25 | 158 if (config.filtering) { |
159 Object.assign(this.config.filtering, config.filtering); | |
160 } | |
161 if (config.sorting) { | |
162 Object.assign(this.config.sorting, config.sorting); | |
42 | 163 // changing sorting resets page |
164 if (page == null) { | |
52
738e90238443
ng2-table version mostly works (without page-n-of-m, problems with columns).
casties
parents:
47
diff
changeset
|
165 this.currentPage = 1; |
738e90238443
ng2-table version mostly works (without page-n-of-m, problems with columns).
casties
parents:
47
diff
changeset
|
166 page = {'page': this.currentPage, 'itemsPerPage': this.itemsPerPage}; |
42 | 167 } |
25 | 168 } |
169 | |
31
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
170 //let filteredData = this.changeFilter(this.data, this.config); |
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
171 //let sortedData = this.changeSort(filteredData, this.config); |
4926885f8a99
selectable result columns. nicer cypher query output.
casties
parents:
30
diff
changeset
|
172 let sortedData = this.changeSort(this.data, this.config); |
25 | 173 |
42 | 174 this.rows = (page && this.config.paging) ? this.changePage(page, sortedData) : sortedData; |
25 | 175 this.length = sortedData.length; |
176 } | |
177 | |
24 | 178 } |