Mercurial > hg > ng2-query-ismi

comparison app/query-result-table.component.ts @ 25:0795207f3b90

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