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