Mercurial > hg > ng2-query-ismi

annotate app/query-result-table.component.ts @ 30:193271b6b9d2

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
configure attributes per result type. select number of items per result page.
author casties
date Mon, 01 Feb 2016 17:29:04 +0100
parents 52af480a843e
children 4926885f8a99
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({
27
c2946b7135cd working on larger results.
casties
parents: 26
diff changeset
9 selector: 'query-result',
24
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">
26
991bf349bb04 re-display table more often.
casties
parents: 25
diff changeset
12 <span>Cypher query:</span>
24
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
13 <pre>{{queryState.resultCypherQuery}}</pre>
25
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
14 <h2>Query result</h2>
27
c2946b7135cd working on larger results.
casties
parents: 26
diff changeset
15 <pre>{{resultInfo}}</pre>
29
52af480a843e show/hide results buttons.
casties
parents: 28
diff changeset
16 <div *ngIf="showTable"><button (click)="showTable=false">hide results</button></div>
52af480a843e show/hide results buttons.
casties
parents: 28
diff changeset
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">
30
193271b6b9d2 configure attributes per result type. select number of items per result page.
casties
parents: 29
diff changeset
19 <div>Show
193271b6b9d2 configure attributes per result type. select number of items per result page.
casties
parents: 29
diff changeset
20 <select (change)="onSelectNumItems($event)">
193271b6b9d2 configure attributes per result type. select number of items per result page.
casties
parents: 29
diff changeset
21 <option value="10">10</option>
193271b6b9d2 configure attributes per result type. select number of items per result page.
casties
parents: 29
diff changeset
22 <option value="100">100</option>
193271b6b9d2 configure attributes per result type. select number of items per result page.
casties
parents: 29
diff changeset
23 <option value="0">all</option>
193271b6b9d2 configure attributes per result type. select number of items per result page.
casties
parents: 29
diff changeset
24 </select>
193271b6b9d2 configure attributes per result type. select number of items per result page.
casties
parents: 29
diff changeset
25 results per page.
193271b6b9d2 configure attributes per result type. select number of items per result page.
casties
parents: 29
diff changeset
26 </div>
28
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
27 <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
28 <pagination *ngIf="config.paging"
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
29 class="pagination-sm"
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
30 [(ngModel)]="page"
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
31 [totalItems]="length"
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
32 [itemsPerPage]="itemsPerPage"
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
33 [maxSize]="maxSize"
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
34 [boundaryLinks]="true"
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
35 [rotate]="false"
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
36 (pageChanged)="onChangeTable(config, $event)"
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
37 (numPages)="numPages = $event">
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
38 </pagination>
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
39 <ngTable
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
40 [config]="config.sorting"
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
41 (tableChanged)="onChangeTable(config)"
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
42 [rows]="rows" [columns]="columns">
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
43 </ngTable>
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
44 </div>
24
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
45 </div>
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
46 `,
27
c2946b7135cd working on larger results.
casties
parents: 26
diff changeset
47 inputs: ['queryState', 'resultInfo'],
25
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
48 directives: [NG_TABLE_DIRECTIVES, PAGINATION_DIRECTIVES]
24
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
49 })
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
50
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
51 export class QueryResultTableComponent implements OnInit {
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
52
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
53 public queryState: QueryState;
27
c2946b7135cd working on larger results.
casties
parents: 26
diff changeset
54 public resultInfo: string;
c2946b7135cd working on larger results.
casties
parents: 26
diff changeset
55
28
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
56 public showTable = false;
25
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
57 public data: Array<any>;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
58 public columns: Array<any>;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
59
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
60 public rows: Array<any>;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
61
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
62 public page: number = 1;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
63 public itemsPerPage: number = 10;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
64 public maxSize: number = 5;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
65 public numPages: number = 1;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
66 public length: number = 0;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
67
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
68 public config: any = {
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
69 paging: true,
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
70 sorting: {'columns': this.columns},
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
71 //filtering: {filterString: '', columnName: 'position'}
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
72 };
24
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
73
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
74 ngOnChanges() {
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
75 console.debug("result table changed! queryState=", this.queryState?this.queryState.resultColumns:'');
27
c2946b7135cd working on larger results.
casties
parents: 26
diff changeset
76 this.data = this.queryState.results;
c2946b7135cd working on larger results.
casties
parents: 26
diff changeset
77 this.columns = this.queryState.resultColumns;
25
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
78 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
79 this.showTable = (this.data.length < 1000);
26
991bf349bb04 re-display table more often.
casties
parents: 25
diff changeset
80 this.onChangeTable(this.config, null);
24
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
81 }
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
82
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
83 ngOnInit() {
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
84 console.debug("result table init!");
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
85 }
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
86
30
193271b6b9d2 configure attributes per result type. select number of items per result page.
casties
parents: 29
diff changeset
87 onSelectNumItems(event: any) {
193271b6b9d2 configure attributes per result type. select number of items per result page.
casties
parents: 29
diff changeset
88 let selected = event.target.value;
193271b6b9d2 configure attributes per result type. select number of items per result page.
casties
parents: 29
diff changeset
89 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
90 let num = parseInt(selected);
193271b6b9d2 configure attributes per result type. select number of items per result page.
casties
parents: 29
diff changeset
91 if (num == 0) {
193271b6b9d2 configure attributes per result type. select number of items per result page.
casties
parents: 29
diff changeset
92 this.itemsPerPage = this.length;
193271b6b9d2 configure attributes per result type. select number of items per result page.
casties
parents: 29
diff changeset
93 } else {
193271b6b9d2 configure attributes per result type. select number of items per result page.
casties
parents: 29
diff changeset
94 this.itemsPerPage = num;
193271b6b9d2 configure attributes per result type. select number of items per result page.
casties
parents: 29
diff changeset
95 }
193271b6b9d2 configure attributes per result type. select number of items per result page.
casties
parents: 29
diff changeset
96 }
193271b6b9d2 configure attributes per result type. select number of items per result page.
casties
parents: 29
diff changeset
97
25
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
98 changePage(page:any, data:Array<any> = this.data):Array<any> {
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
99 let start = (page.page - 1) * page.itemsPerPage;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
100 let end = page.itemsPerPage > -1 ? (start + page.itemsPerPage) : data.length;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
101 return data.slice(start, end);
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 changeSort(data: any, config: any) {
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
105 if (!config.sorting) {
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
106 return data;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
107 }
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
108 let columns = this.columns.filter(c => c.sort);
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
109 // simple sorting
26
991bf349bb04 re-display table more often.
casties
parents: 25
diff changeset
110 let sorted = data.sort((previous: any, current: any) => {
25
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
111 for (let i = 0; i < columns.length; i++) {
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
112 let sort = columns[i].sort;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
113 let columnName = columns[i].name;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
114 if (previous[columnName] > current[columnName]) {
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
115 return sort === 'desc' ? -1 : 1;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
116 } else if (previous[columnName] < current[columnName]) {
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
117 return sort === 'asc' ? -1 : 1;
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 }
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
120 return 0;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
121 });
26
991bf349bb04 re-display table more often.
casties
parents: 25
diff changeset
122 return sorted;
25
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
123 }
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 changeFilter(data: any, config: any): any {
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
126 if (!config.filtering) {
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
127 return data;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
128 }
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
129
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
130 let filteredData: Array<any> = data.filter((item: any) =>
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
131 item[config.filtering.columnName].match(this.config.filtering.filterString));
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
132
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
133 return filteredData;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
134 }
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
135
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
136 onChangeTable(config, page: any = config.paging) {
26
991bf349bb04 re-display table more often.
casties
parents: 25
diff changeset
137 console.debug("onChangeTable config=", config);
25
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
138 if (config.filtering) {
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
139 Object.assign(this.config.filtering, config.filtering);
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
140 }
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
141 if (config.sorting) {
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
142 Object.assign(this.config.sorting, config.sorting);
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
143 }
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
144
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
145 let filteredData = this.changeFilter(this.data, this.config);
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
146 let sortedData = this.changeSort(filteredData, this.config);
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
147
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
148 this.rows = (page && config.paging) ? this.changePage(page, sortedData) : sortedData;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
149 this.length = sortedData.length;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
150 }
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
151
24
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
152 }