Mercurial > hg > ng2-query-ismi
comparison src/app/query-result-table.component.js @ 58:3b4046e0cc02 default
Merge from ng2-table branch.
d7c947909ab888c013171b8c037e4f9fab30fe57
author | casties |
---|---|
date | Wed, 29 Mar 2017 17:19:12 +0200 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
49:781a5387ca93 | 58:3b4046e0cc02 |
---|---|
1 "use strict"; | |
2 var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { | |
3 var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; | |
4 if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); | |
5 else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; | |
6 return c > 3 && r && Object.defineProperty(target, key, r), r; | |
7 }; | |
8 var __metadata = (this && this.__metadata) || function (k, v) { | |
9 if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); | |
10 }; | |
11 var core_1 = require('@angular/core'); | |
12 var QueryResultTableComponent = (function () { | |
13 function QueryResultTableComponent() { | |
14 this.showTable = false; | |
15 this.currentPage = 1; | |
16 this.itemsPerPage = 10; | |
17 this.maxSize = 5; | |
18 this.numPages = 1; | |
19 this.length = 0; | |
20 this.config = { | |
21 paging: true, | |
22 sorting: { 'columns': this.columns }, | |
23 }; | |
24 } | |
25 QueryResultTableComponent.prototype.ngOnChanges = function (changes) { | |
26 console.debug("result table changed! changes=", changes); | |
27 this.data = this.queryState.results; | |
28 if (this.data.length > 0) { | |
29 this.allColumns = this.queryState.resultColumns; | |
30 this.columns = this.allColumns.filter(function (c) { return c.show; }); | |
31 this.config.sorting = this.columns; | |
32 this.config.paging = { 'page': this.currentPage, 'itemsPerPage': this.itemsPerPage }; | |
33 this.showTable = (this.data.length < 1000); | |
34 this.onChangeTable(this.config); | |
35 } | |
36 }; | |
37 QueryResultTableComponent.prototype.ngOnInit = function () { | |
38 console.debug("result table init!"); | |
39 }; | |
40 QueryResultTableComponent.prototype.onSelectNumItems = function (event) { | |
41 var selected = event.target.value; | |
42 console.debug("selected number of items:", selected); | |
43 var num = parseInt(selected); | |
44 if (num == 0) { | |
45 this.itemsPerPage = this.length; | |
46 } | |
47 else { | |
48 this.itemsPerPage = num; | |
49 } | |
50 // update something | |
51 this.config.paging = { 'page': this.currentPage, 'itemsPerPage': this.itemsPerPage }; | |
52 this.onChangeTable(this.config); | |
53 }; | |
54 QueryResultTableComponent.prototype.onSelectCols = function (event) { | |
55 console.debug("select cols:", this.allColumns); | |
56 this.columns = this.allColumns.filter(function (c) { return c.show; }); | |
57 this.config.sorting = this.columns; | |
58 }; | |
59 QueryResultTableComponent.prototype.changePage = function (page, data) { | |
60 if (data === void 0) { data = this.data; } | |
61 var start = (page.page - 1) * page.itemsPerPage; | |
62 var end = page.itemsPerPage > -1 ? (start + page.itemsPerPage) : data.length; | |
63 return data.slice(start, end); | |
64 }; | |
65 QueryResultTableComponent.prototype.changeSort = function (data, config) { | |
66 if (!config.sorting) { | |
67 return data; | |
68 } | |
69 var columns = this.columns.filter(function (c) { return c.sort; }); | |
70 // simple sorting | |
71 var sorted = data.sort(function (previous, current) { | |
72 for (var i = 0; i < columns.length; i++) { | |
73 var sort = columns[i].sort; | |
74 var columnName = columns[i].name; | |
75 if (previous[columnName] > current[columnName]) { | |
76 return sort === 'desc' ? -1 : 1; | |
77 } | |
78 else if (previous[columnName] < current[columnName]) { | |
79 return sort === 'asc' ? -1 : 1; | |
80 } | |
81 } | |
82 return 0; | |
83 }); | |
84 return sorted; | |
85 }; | |
86 QueryResultTableComponent.prototype.changeFilter = function (data, config) { | |
87 var _this = this; | |
88 if (!config.filtering) { | |
89 return data; | |
90 } | |
91 var filteredData = data.filter(function (item) { | |
92 return item[config.filtering.columnName].match(_this.config.filtering.filterString); | |
93 }); | |
94 return filteredData; | |
95 }; | |
96 QueryResultTableComponent.prototype.onChangeTable = function (config, page) { | |
97 if (page === void 0) { page = config.paging; } | |
98 console.debug("onChangeTable config=", config, " page=", page); | |
99 if (config.filtering) { | |
100 Object.assign(this.config.filtering, config.filtering); | |
101 } | |
102 if (config.sorting) { | |
103 Object.assign(this.config.sorting, config.sorting); | |
104 // changing sorting resets page | |
105 if (page == null) { | |
106 this.currentPage = 1; | |
107 page = { 'page': this.currentPage, 'itemsPerPage': this.itemsPerPage }; | |
108 } | |
109 } | |
110 //let filteredData = this.changeFilter(this.data, this.config); | |
111 //let sortedData = this.changeSort(filteredData, this.config); | |
112 var sortedData = this.changeSort(this.data, this.config); | |
113 this.rows = (page && this.config.paging) ? this.changePage(page, sortedData) : sortedData; | |
114 this.length = sortedData.length; | |
115 }; | |
116 QueryResultTableComponent = __decorate([ | |
117 core_1.Component({ | |
118 selector: 'query-result', | |
119 template: "\n <div *ngIf=\"queryState?.numResults > 0\">\n <span>Cypher query:</span>\n <pre>{{queryState.getQueryText()}}</pre>\n <h2>Query result</h2>\n <pre>{{resultInfo}}</pre>\n <div *ngIf=\"showTable\"><button (click)=\"showTable=false\">hide results</button></div>\n <div *ngIf=\"!showTable\"><button (click)=\"showTable=true\">show results</button></div>\n <div *ngIf=\"showTable\">\n <div>Show \n <select name=\"numItems\" (change)=\"onSelectNumItems($event)\">\n <option value=\"10\">10</option>\n <option value=\"100\">100</option>\n <option value=\"0\">all</option>\n </select>\n results per page.\n </div>\n <div>\n <form (ngSubmit)=\"onSelectCols($event)\">\n Columns:\n <span *ngFor=\"let col of allColumns\">\n <input type=\"checkbox\" name=\"col{{col.name}}\" value=\"{{col.name}}\" [(ngModel)]=\"col.show\">{{col.name}}\n </span> \n <button type=\"submit\">change columns</button>\n </form>\n </div>\n <pagination *ngIf=\"config.paging\" class=\"pagination-sm\"\n [(ngModel)]=\"currentPage\"\n [totalItems]=\"length\"\n [itemsPerPage]=\"itemsPerPage\"\n [maxSize]=\"maxSize\"\n [boundaryLinks]=\"true\"\n [rotate]=\"false\"\n (pageChanged)=\"onChangeTable(config, $event)\"\n (numPages)=\"numPages = $event\">\n </pagination>\n <ng-table \n [config]=\"config\"\n (tableChanged)=\"onChangeTable($event)\"\n [rows]=\"rows\" [columns]=\"columns\">\n </ng-table>\n </div>\n </div>\n <div *ngIf=\"!(queryState?.numResults > 0)\">\n <h2>No results found</h2>\n </div>\n ", | |
120 inputs: ['queryState', 'resultInfo'] | |
121 }), | |
122 __metadata('design:paramtypes', []) | |
123 ], QueryResultTableComponent); | |
124 return QueryResultTableComponent; | |
125 }()); | |
126 exports.QueryResultTableComponent = QueryResultTableComponent; | |
127 //# sourceMappingURL=query-result-table.component.js.map |