Mercurial > hg > ng2-query-ismi

comparison src/app/query-result-table.component.ts @ 47:b65a031c4967 ng2-final

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
first step to angular2-final (2.4) version of the query browser.
author casties
date Fri, 17 Mar 2017 20:16:52 +0100
parents app/query-result-table.component.ts@dc4f0541f04d
children 738e90238443
comparison
equal deleted inserted replaced
46:1f3fed01aef6 47:b65a031c4967
1 import {Component, OnInit} from '@angular/core';
2
3 //import {NG_TABLE_DIRECTIVES} from 'ng2-table/ng2-table';
4 //import {PAGINATION_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap';
5
6 import {QueryState} from './query-state';
7
8 @Component({
9 selector: 'query-result',
10 template: `
11 <div *ngIf="queryState?.results">
12 <span>Cypher query:</span>
13 <pre>{{queryState.getQueryText()}}</pre>
14 <h2>Query result</h2>
15 <pre>{{resultInfo}}</pre>
16 <div *ngIf="showTable"><button (click)="showTable=false">hide results</button></div>
17 <div *ngIf="!showTable"><button (click)="showTable=true">show results</button></div>
18 <div *ngIf="showTable">
19 <div>Show
20 <select (change)="onSelectNumItems($event)">
21 <option value="10">10</option>
22 <option value="100">100</option>
23 <option value="0">all</option>
24 </select>
25 results per page.
26 </div>
27 <div>
28 <form (ngSubmit)="onSelectCols($event)">
29 Columns:
30 <span *ngFor=" let col of allColumns">
31 <input type="checkbox" value="{{col.name}}" [(ngModel)]="col.show">{{col.name}}
32 </span>
33 <button type="submit">change columns</button>
34 </form>
35 </div>
36 <div *ngIf="config.paging">Page {{page}} of {{numPages}}</div>
37 <pagination *ngIf="config.paging"
38 class="pagination-sm"
39 [(ngModel)]="page"
40 [totalItems]="length"
41 [itemsPerPage]="itemsPerPage"
42 [maxSize]="maxSize"
43 [boundaryLinks]="true"
44 [rotate]="false"
45 (pageChanged)="onChangeTable(config, $event)"
46 (numPages)="numPages = $event">
47 </pagination>
48 <ng-table
49 [config]="config.sorting"
50 (tableChanged)="onChangeTable($event)"
51 [rows]="rows" [columns]="columns">
52 </ng-table>
53 </div>
54 </div>
55 `,
56 inputs: ['queryState', 'resultInfo'],
57 // directives: [NG_TABLE_DIRECTIVES, PAGINATION_DIRECTIVES]
58 })
59
60 export class QueryResultTableComponent implements OnInit {
61
62 public queryState: QueryState;
63 public resultInfo: string;
64
65 public showTable = false;
66 public data: Array<any>;
67 public columns: Array<any>;
68 public allColumns: Array<any>;
69
70 public rows: Array<any>;
71
72 public page: number = 1;
73 public itemsPerPage: number = 10;
74 public maxSize: number = 5;
75 public numPages: number = 1;
76 public length: number = 0;
77
78 public config: any = {
79 paging: true,
80 sorting: {'columns': this.columns},
81 //filtering: {filterString: '', columnName: 'position'}
82 };
83
84 ngOnChanges(changes: any) {
85 console.debug("result table changed! changes=", changes);
86 this.data = this.queryState.results;
87 this.allColumns = this.queryState.resultColumns;
88 this.columns = this.allColumns.filter(c => c.show);
89 this.config.sorting = this.columns;
90 this.config.paging = {'page': this.page, 'itemsPerPage': this.itemsPerPage};
91 this.showTable = (this.data.length < 1000);
92 this.onChangeTable(this.config);
93 }
94
95 ngOnInit() {
96 console.debug("result table init!");
97 }
98
99 onSelectNumItems(event: any) {
100 let selected = event.target.value;
101 console.debug("selected number of items:", selected);
102 let num = parseInt(selected);
103 if (num == 0) {
104 this.itemsPerPage = this.length;
105 } else {
106 this.itemsPerPage = num;
107 }
108 // update something
109 this.config.paging = {'page': this.page, 'itemsPerPage': this.itemsPerPage};
110 this.onChangeTable(this.config);
111 }
112
113 onSelectCols(event: any) {
114 console.debug("select cols:", this.allColumns);
115 this.columns = this.allColumns.filter(c => c.show);
116 this.config.sorting = this.columns;
117 }
118
119 changePage(page:any, data:Array<any> = this.data):Array<any> {
120 let start = (page.page - 1) * page.itemsPerPage;
121 let end = page.itemsPerPage > -1 ? (start + page.itemsPerPage) : data.length;
122 return data.slice(start, end);
123 }
124
125 changeSort(data: any, config: any) {
126 if (!config.sorting) {
127 return data;
128 }
129 let columns = this.columns.filter(c => c.sort);
130 // simple sorting
131 let sorted = data.sort((previous: any, current: any) => {
132 for (let i = 0; i < columns.length; i++) {
133 let sort = columns[i].sort;
134 let columnName = columns[i].name;
135 if (previous[columnName] > current[columnName]) {
136 return sort === 'desc' ? -1 : 1;
137 } else if (previous[columnName] < current[columnName]) {
138 return sort === 'asc' ? -1 : 1;
139 }
140 }
141 return 0;
142 });
143 return sorted;
144 }
145
146 changeFilter(data: any, config: any): any {
147 if (!config.filtering) {
148 return data;
149 }
150
151 let filteredData: Array<any> = data.filter((item: any) =>
152 item[config.filtering.columnName].match(this.config.filtering.filterString));
153
154 return filteredData;
155 }
156
157 onChangeTable(config: any, page: any = config.paging) {
158 console.debug("onChangeTable config=", config, " page=", page);
159 if (config.filtering) {
160 Object.assign(this.config.filtering, config.filtering);
161 }
162 if (config.sorting) {
163 Object.assign(this.config.sorting, config.sorting);
164 // changing sorting resets page
165 if (page == null) {
166 this.page = 1;
167 page = {'page': this.page, 'itemsPerPage': this.itemsPerPage};
168 }
169 }
170
171 //let filteredData = this.changeFilter(this.data, this.config);
172 //let sortedData = this.changeSort(filteredData, this.config);
173 let sortedData = this.changeSort(this.data, this.config);
174
175 this.rows = (page && this.config.paging) ? this.changePage(page, sortedData) : sortedData;
176 this.length = sortedData.length;
177 }
178
179 }