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