Mercurial > hg > ng2-query-ismi

annotate src/app/query-result-table.component.ts @ 57:d7c947909ab8 ng2-table

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
renamed query-app.module to app.module. loading query from url fragment works now.
author casties
date Wed, 29 Mar 2017 17:16:10 +0200
parents 4341c1b4e3ae
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
45
dc4f0541f04d update to angular2-rc1. mostly working ;-(
casties
parents: 42
diff changeset
1 import {Component, OnInit} from '@angular/core';
24
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
2
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
3 import {QueryState} from './query-state';
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
4
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
5 @Component({
27
c2946b7135cd working on larger results.
casties
parents: 26
diff changeset
6 selector: 'query-result',
24
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
7 template: `
57
d7c947909ab8 renamed query-app.module to app.module. loading query from url fragment works now.
casties
parents: 54
diff changeset
8 <div *ngIf="queryState?.numResults > 0">
26
991bf349bb04 re-display table more often.
casties
parents: 25
diff changeset
9 <span>Cypher query:</span>
31
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
10 <pre>{{queryState.getQueryText()}}</pre>
25
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
11 <h2>Query result</h2>
27
c2946b7135cd working on larger results.
casties
parents: 26
diff changeset
12 <pre>{{resultInfo}}</pre>
29
52af480a843e show/hide results buttons.
casties
parents: 28
diff changeset
13 <div *ngIf="showTable"><button (click)="showTable=false">hide results</button></div>
52af480a843e show/hide results buttons.
casties
parents: 28
diff changeset
14 <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
15 <div *ngIf="showTable">
30
193271b6b9d2 configure attributes per result type. select number of items per result page.
casties
parents: 29
diff changeset
16 <div>Show
52
738e90238443 ng2-table version mostly works (without page-n-of-m, problems with columns).
casties
parents: 47
diff changeset
17 <select name="numItems" (change)="onSelectNumItems($event)">
30
193271b6b9d2 configure attributes per result type. select number of items per result page.
casties
parents: 29
diff changeset
18 <option value="10">10</option>
193271b6b9d2 configure attributes per result type. select number of items per result page.
casties
parents: 29
diff changeset
19 <option value="100">100</option>
193271b6b9d2 configure attributes per result type. select number of items per result page.
casties
parents: 29
diff changeset
20 <option value="0">all</option>
193271b6b9d2 configure attributes per result type. select number of items per result page.
casties
parents: 29
diff changeset
21 </select>
193271b6b9d2 configure attributes per result type. select number of items per result page.
casties
parents: 29
diff changeset
22 results per page.
193271b6b9d2 configure attributes per result type. select number of items per result page.
casties
parents: 29
diff changeset
23 </div>
31
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
24 <div>
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
25 <form (ngSubmit)="onSelectCols($event)">
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
26 Columns:
54
4341c1b4e3ae cleanup.
casties
parents: 53
diff changeset
27 <span *ngFor="let col of allColumns">
4341c1b4e3ae cleanup.
casties
parents: 53
diff changeset
28 <input type="checkbox" name="col{{col.name}}" value="{{col.name}}" [(ngModel)]="col.show">{{col.name}}
31
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
29 </span>
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
30 <button type="submit">change columns</button>
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
31 </form>
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
32 </div>
52
738e90238443 ng2-table version mostly works (without page-n-of-m, problems with columns).
casties
parents: 47
diff changeset
33 <pagination *ngIf="config.paging" class="pagination-sm"
738e90238443 ng2-table version mostly works (without page-n-of-m, problems with columns).
casties
parents: 47
diff changeset
34 [(ngModel)]="currentPage"
28
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
35 [totalItems]="length"
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
36 [itemsPerPage]="itemsPerPage"
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
37 [maxSize]="maxSize"
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
38 [boundaryLinks]="true"
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
39 [rotate]="false"
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
40 (pageChanged)="onChangeTable(config, $event)"
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
41 (numPages)="numPages = $event">
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
42 </pagination>
45
dc4f0541f04d update to angular2-rc1. mostly working ;-(
casties
parents: 42
diff changeset
43 <ng-table
53
ac4bfbd99638 small change.
casties
parents: 52
diff changeset
44 [config]="config"
42
99fb5a953a40 fixed issues with paging and sorting.
casties
parents: 33
diff changeset
45 (tableChanged)="onChangeTable($event)"
28
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
46 [rows]="rows" [columns]="columns">
45
dc4f0541f04d update to angular2-rc1. mostly working ;-(
casties
parents: 42
diff changeset
47 </ng-table>
28
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
48 </div>
24
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
49 </div>
57
d7c947909ab8 renamed query-app.module to app.module. loading query from url fragment works now.
casties
parents: 54
diff changeset
50 <div *ngIf="!(queryState?.numResults > 0)">
d7c947909ab8 renamed query-app.module to app.module. loading query from url fragment works now.
casties
parents: 54
diff changeset
51 <h2>No results found</h2>
d7c947909ab8 renamed query-app.module to app.module. loading query from url fragment works now.
casties
parents: 54
diff changeset
52 </div>
d7c947909ab8 renamed query-app.module to app.module. loading query from url fragment works now.
casties
parents: 54
diff changeset
53 `,
54
4341c1b4e3ae cleanup.
casties
parents: 53
diff changeset
54 inputs: ['queryState', 'resultInfo']
24
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
55 })
42
99fb5a953a40 fixed issues with paging and sorting.
casties
parents: 33
diff changeset
56
24
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
57 export class QueryResultTableComponent implements OnInit {
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
58
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
59 public queryState: QueryState;
27
c2946b7135cd working on larger results.
casties
parents: 26
diff changeset
60 public resultInfo: string;
c2946b7135cd working on larger results.
casties
parents: 26
diff changeset
61
28
1ceea716600f result table can be shown with checkbox. initially hidden if > 1000 results.
casties
parents: 27
diff changeset
62 public showTable = false;
25
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
63 public data: Array<any>;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
64 public columns: Array<any>;
31
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
65 public allColumns: Array<any>;
25
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
66
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
67 public rows: Array<any>;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
68
52
738e90238443 ng2-table version mostly works (without page-n-of-m, problems with columns).
casties
parents: 47
diff changeset
69 public currentPage: number = 1;
25
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
70 public itemsPerPage: number = 10;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
71 public maxSize: number = 5;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
72 public numPages: number = 1;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
73 public length: number = 0;
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 public config: any = {
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
76 paging: true,
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
77 sorting: {'columns': this.columns},
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
78 //filtering: {filterString: '', columnName: 'position'}
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
79 };
24
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
80
31
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
81 ngOnChanges(changes: any) {
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
82 console.debug("result table changed! changes=", changes);
27
c2946b7135cd working on larger results.
casties
parents: 26
diff changeset
83 this.data = this.queryState.results;
57
d7c947909ab8 renamed query-app.module to app.module. loading query from url fragment works now.
casties
parents: 54
diff changeset
84 if (this.data.length > 0) {
d7c947909ab8 renamed query-app.module to app.module. loading query from url fragment works now.
casties
parents: 54
diff changeset
85 this.allColumns = this.queryState.resultColumns;
d7c947909ab8 renamed query-app.module to app.module. loading query from url fragment works now.
casties
parents: 54
diff changeset
86 this.columns = this.allColumns.filter(c => c.show);
d7c947909ab8 renamed query-app.module to app.module. loading query from url fragment works now.
casties
parents: 54
diff changeset
87 this.config.sorting = this.columns;
d7c947909ab8 renamed query-app.module to app.module. loading query from url fragment works now.
casties
parents: 54
diff changeset
88 this.config.paging = {'page': this.currentPage, 'itemsPerPage': this.itemsPerPage};
d7c947909ab8 renamed query-app.module to app.module. loading query from url fragment works now.
casties
parents: 54
diff changeset
89 this.showTable = (this.data.length < 1000);
d7c947909ab8 renamed query-app.module to app.module. loading query from url fragment works now.
casties
parents: 54
diff changeset
90 this.onChangeTable(this.config);
d7c947909ab8 renamed query-app.module to app.module. loading query from url fragment works now.
casties
parents: 54
diff changeset
91 }
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 }
42
99fb5a953a40 fixed issues with paging and sorting.
casties
parents: 33
diff changeset
107 // update something
52
738e90238443 ng2-table version mostly works (without page-n-of-m, problems with columns).
casties
parents: 47
diff changeset
108 this.config.paging = {'page': this.currentPage, 'itemsPerPage': this.itemsPerPage};
42
99fb5a953a40 fixed issues with paging and sorting.
casties
parents: 33
diff changeset
109 this.onChangeTable(this.config);
30
193271b6b9d2 configure attributes per result type. select number of items per result page.
casties
parents: 29
diff changeset
110 }
193271b6b9d2 configure attributes per result type. select number of items per result page.
casties
parents: 29
diff changeset
111
31
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
112 onSelectCols(event: any) {
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
113 console.debug("select cols:", this.allColumns);
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
114 this.columns = this.allColumns.filter(c => c.show);
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
115 this.config.sorting = this.columns;
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
116 }
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
117
53
ac4bfbd99638 small change.
casties
parents: 52
diff changeset
118 changePage(page: any, data: Array<any> = this.data): Array<any> {
25
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
119 let start = (page.page - 1) * page.itemsPerPage;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
120 let end = page.itemsPerPage > -1 ? (start + page.itemsPerPage) : data.length;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
121 return data.slice(start, end);
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
122 }
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 changeSort(data: any, config: any) {
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
125 if (!config.sorting) {
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
126 return data;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
127 }
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
128 let columns = this.columns.filter(c => c.sort);
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
129 // simple sorting
26
991bf349bb04 re-display table more often.
casties
parents: 25
diff changeset
130 let sorted = data.sort((previous: any, current: any) => {
25
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
131 for (let i = 0; i < columns.length; i++) {
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
132 let sort = columns[i].sort;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
133 let columnName = columns[i].name;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
134 if (previous[columnName] > current[columnName]) {
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
135 return sort === 'desc' ? -1 : 1;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
136 } else if (previous[columnName] < current[columnName]) {
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
137 return sort === 'asc' ? -1 : 1;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
138 }
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
139 }
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
140 return 0;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
141 });
26
991bf349bb04 re-display table more often.
casties
parents: 25
diff changeset
142 return sorted;
25
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 changeFilter(data: any, config: any): any {
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
146 if (!config.filtering) {
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
147 return data;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
148 }
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 let filteredData: Array<any> = data.filter((item: any) =>
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
151 item[config.filtering.columnName].match(this.config.filtering.filterString));
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 return filteredData;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
154 }
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
155
47
b65a031c4967 first step to angular2-final (2.4) version of the query browser.
casties
parents: 45
diff changeset
156 onChangeTable(config: any, page: any = config.paging) {
42
99fb5a953a40 fixed issues with paging and sorting.
casties
parents: 33
diff changeset
157 console.debug("onChangeTable config=", config, " page=", page);
25
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
158 if (config.filtering) {
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
159 Object.assign(this.config.filtering, config.filtering);
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 if (config.sorting) {
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
162 Object.assign(this.config.sorting, config.sorting);
42
99fb5a953a40 fixed issues with paging and sorting.
casties
parents: 33
diff changeset
163 // changing sorting resets page
99fb5a953a40 fixed issues with paging and sorting.
casties
parents: 33
diff changeset
164 if (page == null) {
52
738e90238443 ng2-table version mostly works (without page-n-of-m, problems with columns).
casties
parents: 47
diff changeset
165 this.currentPage = 1;
738e90238443 ng2-table version mostly works (without page-n-of-m, problems with columns).
casties
parents: 47
diff changeset
166 page = {'page': this.currentPage, 'itemsPerPage': this.itemsPerPage};
42
99fb5a953a40 fixed issues with paging and sorting.
casties
parents: 33
diff changeset
167 }
25
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
31
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
170 //let filteredData = this.changeFilter(this.data, this.config);
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
171 //let sortedData = this.changeSort(filteredData, this.config);
4926885f8a99 selectable result columns. nicer cypher query output.
casties
parents: 30
diff changeset
172 let sortedData = this.changeSort(this.data, this.config);
25
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
173
42
99fb5a953a40 fixed issues with paging and sorting.
casties
parents: 33
diff changeset
174 this.rows = (page && this.config.paging) ? this.changePage(page, sortedData) : sortedData;
25
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
175 this.length = sortedData.length;
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
176 }
0795207f3b90 ng2-table now with pager, sorting and styling.
casties
parents: 24
diff changeset
177
24
f6f4177d0a81 use ng2-table for results.
casties
parents:
diff changeset
178 }