Mercurial > hg > ng2-query-ismi

annotate app/query-result-table.component.ts @ 39:7578b21cdf2e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
make relation types configurable. relations can have custom labels for incoming or outgoing direction.
author casties
date Sun, 14 Feb 2016 19:40:07 +0100
parents 739eb38ec2a2
children 99fb5a953a40
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: `
33
739eb38ec2a2 more elvis operator :-)
casties
parents: 31
diff changeset
11 <div *ngIf="queryState?.results">
26
991bf349bb04 re-display table more often.
casties
parents: 25
diff changeset
12 <span>Cypher query:</span>
31
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
13 <pre>{{queryState.getQueryText()}}</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>
31
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
27 <div>
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
28 <form (ngSubmit)="onSelectCols($event)">
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
29 Columns:
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
30 <span *ngFor="#col of allColumns">
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
31 <input type="checkbox" value="{{col.name}}" [(ngModel)]="col.show">{{col.name}}
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
32 </span>
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
33 <button type="submit">change columns</button>
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
34 </form>
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
35 </div>
28
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
36 <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
37 <pagination *ngIf="config.paging"
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
38 class="pagination-sm"
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
39 [(ngModel)]="page"
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
40 [totalItems]="length"
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
41 [itemsPerPage]="itemsPerPage"
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
42 [maxSize]="maxSize"
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
43 [boundaryLinks]="true"
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
44 [rotate]="false"
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
45 (pageChanged)="onChangeTable(config, $event)"
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
46 (numPages)="numPages = $event">
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
47 </pagination>
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
48 <ngTable
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
49 [config]="config.sorting"
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
50 (tableChanged)="onChangeTable(config)"
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
51 [rows]="rows" [columns]="columns">
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
52 </ngTable>
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
53 </div>
24
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
54 </div>
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
55 `,
27
c2946b7135cd working on larger results.
casties
parents: 26
diff changeset
56 inputs: ['queryState', 'resultInfo'],
25
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
57 directives: [NG_TABLE_DIRECTIVES, PAGINATION_DIRECTIVES]
24
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
58 })
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
59
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
60 export class QueryResultTableComponent implements OnInit {
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
61
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
62 public queryState: QueryState;
27
c2946b7135cd working on larger results.
casties
parents: 26
diff changeset
63 public resultInfo: string;
c2946b7135cd working on larger results.
casties
parents: 26
diff changeset
64
28
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
65 public showTable = false;
25
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
66 public data: Array<any>;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
67 public columns: Array<any>;
31
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
68 public allColumns: Array<any>;
25
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
69
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
70 public rows: Array<any>;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
71
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
72 public page: number = 1;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
73 public itemsPerPage: number = 10;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
74 public maxSize: number = 5;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
75 public numPages: number = 1;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
76 public length: number = 0;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
77
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
78 public config: any = {
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
79 paging: true,
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
80 sorting: {'columns': this.columns},
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
81 //filtering: {filterString: '', columnName: 'position'}
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
82 };
24
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
83
31
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
84 ngOnChanges(changes: any) {
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
85 console.debug("result table changed! changes=", changes);
27
c2946b7135cd working on larger results.
casties
parents: 26
diff changeset
86 this.data = this.queryState.results;
31
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
87 this.allColumns = this.queryState.resultColumns;
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
88 this.columns = this.allColumns.filter(c => c.show);
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
89 this.config.sorting = this.columns;
28
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
90 this.showTable = (this.data.length < 1000);
26
991bf349bb04 re-display table more often.
casties
parents: 25
diff changeset
91 this.onChangeTable(this.config, null);
24
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
92 }
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
93
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
94 ngOnInit() {
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
95 console.debug("result table init!");
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
96 }
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
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 }
193271b6b9d2 configure attributes per result type. select number of items per result page.
casties
parents: 29
diff changeset
107 }
193271b6b9d2 configure attributes per result type. select number of items per result page.
casties
parents: 29
diff changeset
108
31
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
109 onSelectCols(event: any) {
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
110 console.debug("select cols:", this.allColumns);
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
111 this.columns = this.allColumns.filter(c => c.show);
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
112 this.config.sorting = this.columns;
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
113 }
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
114
25
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
115 changePage(page:any, data:Array<any> = this.data):Array<any> {
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
116 let start = (page.page - 1) * page.itemsPerPage;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
117 let end = page.itemsPerPage > -1 ? (start + page.itemsPerPage) : data.length;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
118 return data.slice(start, end);
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
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
121 changeSort(data: any, config: any) {
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
122 if (!config.sorting) {
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
123 return data;
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 let columns = this.columns.filter(c => c.sort);
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
126 // simple sorting
26
991bf349bb04 re-display table more often.
casties
parents: 25
diff changeset
127 let sorted = data.sort((previous: any, current: any) => {
25
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
128 for (let i = 0; i < columns.length; i++) {
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
129 let sort = columns[i].sort;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
130 let columnName = columns[i].name;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
131 if (previous[columnName] > current[columnName]) {
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
132 return sort === 'desc' ? -1 : 1;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
133 } else if (previous[columnName] < current[columnName]) {
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
134 return sort === 'asc' ? -1 : 1;
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 }
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
137 return 0;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
138 });
26
991bf349bb04 re-display table more often.
casties
parents: 25
diff changeset
139 return sorted;
25
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
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
142 changeFilter(data: any, config: any): any {
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
143 if (!config.filtering) {
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
144 return data;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
145 }
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
146
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
147 let filteredData: Array<any> = data.filter((item: any) =>
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
148 item[config.filtering.columnName].match(this.config.filtering.filterString));
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
149
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
150 return filteredData;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
151 }
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
152
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
153 onChangeTable(config, page: any = config.paging) {
26
991bf349bb04 re-display table more often.
casties
parents: 25
diff changeset
154 console.debug("onChangeTable config=", config);
25
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
155 if (config.filtering) {
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
156 Object.assign(this.config.filtering, config.filtering);
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
157 }
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
158 if (config.sorting) {
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
159 Object.assign(this.config.sorting, config.sorting);
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
160 }
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
161
31
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
162 //let filteredData = this.changeFilter(this.data, this.config);
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
163 //let sortedData = this.changeSort(filteredData, this.config);
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
164 let sortedData = this.changeSort(this.data, this.config);
25
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
165
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
166 this.rows = (page && config.paging) ? this.changePage(page, sortedData) : sortedData;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
167 this.length = sortedData.length;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
168 }
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
169
24
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
170 }