annotate app/query-result-table.component.ts @ 25:0795207f3b90

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