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