Mercurial > hg > ng2-query-ismi
view app/query-result-table.component.ts @ 26:991bf349bb04
re-display table more often.
author | casties |
---|---|
date | Wed, 27 Jan 2016 13:30:38 +0100 |
parents | 0795207f3b90 |
children | c2946b7135cd |
line wrap: on
line source
import {Component, OnInit} from 'angular2/core'; import {NG_TABLE_DIRECTIVES} from 'ng2-table/ng2-table'; import {PAGINATION_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap'; import {QueryState} from './query-state'; @Component({ selector: 'query-result-table', template: ` <div *ngIf="queryState && queryState.results"> <span>Cypher query:</span> <pre>{{queryState.resultCypherQuery}}</pre> <h2>Query result</h2> <pre *ngIf="config.paging">{{queryState.resultInfo}}: page {{page}} of {{numPages}}</pre> <pagination *ngIf="config.paging" class="pagination-sm" [(ngModel)]="page" [totalItems]="length" [itemsPerPage]="itemsPerPage" [maxSize]="maxSize" [boundaryLinks]="true" [rotate]="false" (pageChanged)="onChangeTable(config, $event)" (numPages)="numPages = $event"> </pagination> <ngTable [config]="config.sorting" (tableChanged)="onChangeTable(config)" [rows]="rows" [columns]="columns"> </ngTable> </div> `, inputs: ['queryState', 'data', 'columns'], directives: [NG_TABLE_DIRECTIVES, PAGINATION_DIRECTIVES] }) export class QueryResultTableComponent implements OnInit { public queryState: QueryState; public data: Array<any>; public columns: Array<any>; public rows: Array<any>; public page: number = 1; public itemsPerPage: number = 10; public maxSize: number = 5; public numPages: number = 1; public length: number = 0; public config: any = { paging: true, sorting: {'columns': this.columns}, //filtering: {filterString: '', columnName: 'position'} }; ngOnChanges() { console.debug("result table changed! queryState=", this.queryState?this.queryState.resultColumns:''); this.config.sorting = this.queryState.resultColumns; this.onChangeTable(this.config, null); } ngOnInit() { console.debug("result table init!"); } changePage(page:any, data:Array<any> = this.data):Array<any> { let start = (page.page - 1) * page.itemsPerPage; let end = page.itemsPerPage > -1 ? (start + page.itemsPerPage) : data.length; return data.slice(start, end); } changeSort(data: any, config: any) { console.debug("changeSort start"); if (!config.sorting) { return data; } let columns = this.columns.filter(c => c.sort); // simple sorting let sorted = data.sort((previous: any, current: any) => { for (let i = 0; i < columns.length; i++) { let sort = columns[i].sort; let columnName = columns[i].name; if (previous[columnName] > current[columnName]) { return sort === 'desc' ? -1 : 1; } else if (previous[columnName] < current[columnName]) { return sort === 'asc' ? -1 : 1; } } return 0; }); console.debug("changeSort done"); return sorted; } changeFilter(data: any, config: any): any { if (!config.filtering) { return data; } let filteredData: Array<any> = data.filter((item: any) => item[config.filtering.columnName].match(this.config.filtering.filterString)); return filteredData; } onChangeTable(config, page: any = config.paging) { console.debug("onChangeTable config=", config); if (config.filtering) { Object.assign(this.config.filtering, config.filtering); } if (config.sorting) { Object.assign(this.config.sorting, config.sorting); } let filteredData = this.changeFilter(this.data, this.config); let sortedData = this.changeSort(filteredData, this.config); this.rows = (page && config.paging) ? this.changePage(page, sortedData) : sortedData; this.length = sortedData.length; } }