Mercurial > hg > ng2-query-ismi
annotate app/query-result-table.component.ts @ 28:1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
| author | casties |
|---|---|
| date | Wed, 27 Jan 2016 16:01:06 +0100 |
| parents | c2946b7135cd |
| children | 52af480a843e |
| rev | line source |
|---|---|
| 24 | 1 import {Component, OnInit} from 'angular2/core'; |
| 2 | |
| 3 import {NG_TABLE_DIRECTIVES} from 'ng2-table/ng2-table'; | |
| 25 | 4 import {PAGINATION_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap'; |
| 24 | 5 |
| 6 import {QueryState} from './query-state'; | |
| 7 | |
| 8 @Component({ | |
| 27 | 9 selector: 'query-result', |
| 24 | 10 template: ` |
| 11 <div *ngIf="queryState && queryState.results"> | |
| 26 | 12 <span>Cypher query:</span> |
| 24 | 13 <pre>{{queryState.resultCypherQuery}}</pre> |
| 25 | 14 <h2>Query result</h2> |
| 27 | 15 <pre>{{resultInfo}}</pre> |
|
28
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
16 <div><input type="checkbox" [(ngModel)]="showTable"/> show results</div> |
|
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
17 <div *ngIf="showTable"> |
|
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
18 <div *ngIf="config.paging">Page {{page}} of {{numPages}}</div> |
|
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
19 <pagination *ngIf="config.paging" |
|
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
20 class="pagination-sm" |
|
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
21 [(ngModel)]="page" |
|
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
22 [totalItems]="length" |
|
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
23 [itemsPerPage]="itemsPerPage" |
|
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
24 [maxSize]="maxSize" |
|
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
25 [boundaryLinks]="true" |
|
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
26 [rotate]="false" |
|
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
27 (pageChanged)="onChangeTable(config, $event)" |
|
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
28 (numPages)="numPages = $event"> |
|
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
29 </pagination> |
|
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
30 <ngTable |
|
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
31 [config]="config.sorting" |
|
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
32 (tableChanged)="onChangeTable(config)" |
|
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
33 [rows]="rows" [columns]="columns"> |
|
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
34 </ngTable> |
|
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
35 </div> |
| 24 | 36 </div> |
| 37 `, | |
| 27 | 38 inputs: ['queryState', 'resultInfo'], |
| 25 | 39 directives: [NG_TABLE_DIRECTIVES, PAGINATION_DIRECTIVES] |
| 24 | 40 }) |
| 41 | |
| 42 export class QueryResultTableComponent implements OnInit { | |
| 43 | |
| 44 public queryState: QueryState; | |
| 27 | 45 public resultInfo: string; |
| 46 | |
|
28
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
47 public showTable = false; |
| 25 | 48 public data: Array<any>; |
| 49 public columns: Array<any>; | |
| 50 | |
| 51 public rows: Array<any>; | |
| 52 | |
| 53 public page: number = 1; | |
| 54 public itemsPerPage: number = 10; | |
| 55 public maxSize: number = 5; | |
| 56 public numPages: number = 1; | |
| 57 public length: number = 0; | |
| 58 | |
| 59 public config: any = { | |
| 60 paging: true, | |
| 61 sorting: {'columns': this.columns}, | |
| 62 //filtering: {filterString: '', columnName: 'position'} | |
| 63 }; | |
| 24 | 64 |
| 65 ngOnChanges() { | |
| 66 console.debug("result table changed! queryState=", this.queryState?this.queryState.resultColumns:''); | |
| 27 | 67 this.data = this.queryState.results; |
| 68 this.columns = this.queryState.resultColumns; | |
| 25 | 69 this.config.sorting = this.queryState.resultColumns; |
|
28
1ceea716600f
result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents:
27
diff
changeset
|
70 this.showTable = (this.data.length < 1000); |
| 26 | 71 this.onChangeTable(this.config, null); |
| 24 | 72 } |
| 73 | |
| 74 ngOnInit() { | |
| 75 console.debug("result table init!"); | |
| 76 } | |
| 77 | |
| 25 | 78 changePage(page:any, data:Array<any> = this.data):Array<any> { |
| 79 let start = (page.page - 1) * page.itemsPerPage; | |
| 80 let end = page.itemsPerPage > -1 ? (start + page.itemsPerPage) : data.length; | |
| 81 return data.slice(start, end); | |
| 82 } | |
| 83 | |
| 84 changeSort(data: any, config: any) { | |
| 85 if (!config.sorting) { | |
| 86 return data; | |
| 87 } | |
| 88 let columns = this.columns.filter(c => c.sort); | |
| 89 // simple sorting | |
| 26 | 90 let sorted = data.sort((previous: any, current: any) => { |
| 25 | 91 for (let i = 0; i < columns.length; i++) { |
| 92 let sort = columns[i].sort; | |
| 93 let columnName = columns[i].name; | |
| 94 if (previous[columnName] > current[columnName]) { | |
| 95 return sort === 'desc' ? -1 : 1; | |
| 96 } else if (previous[columnName] < current[columnName]) { | |
| 97 return sort === 'asc' ? -1 : 1; | |
| 98 } | |
| 99 } | |
| 100 return 0; | |
| 101 }); | |
| 26 | 102 return sorted; |
| 25 | 103 } |
| 104 | |
| 105 changeFilter(data: any, config: any): any { | |
| 106 if (!config.filtering) { | |
| 107 return data; | |
| 108 } | |
| 109 | |
| 110 let filteredData: Array<any> = data.filter((item: any) => | |
| 111 item[config.filtering.columnName].match(this.config.filtering.filterString)); | |
| 112 | |
| 113 return filteredData; | |
| 114 } | |
| 115 | |
| 116 onChangeTable(config, page: any = config.paging) { | |
| 26 | 117 console.debug("onChangeTable config=", config); |
| 25 | 118 if (config.filtering) { |
| 119 Object.assign(this.config.filtering, config.filtering); | |
| 120 } | |
| 121 if (config.sorting) { | |
| 122 Object.assign(this.config.sorting, config.sorting); | |
| 123 } | |
| 124 | |
| 125 let filteredData = this.changeFilter(this.data, this.config); | |
| 126 let sortedData = this.changeSort(filteredData, this.config); | |
| 127 | |
| 128 this.rows = (page && config.paging) ? this.changePage(page, sortedData) : sortedData; | |
| 129 this.length = sortedData.length; | |
| 130 } | |
| 131 | |
| 24 | 132 } |