view 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
line wrap: on
line source

"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    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;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = require('@angular/core');
var QueryResultTableComponent = (function () {
    function QueryResultTableComponent() {
        this.showTable = false;
        this.currentPage = 1;
        this.itemsPerPage = 10;
        this.maxSize = 5;
        this.numPages = 1;
        this.length = 0;
        this.config = {
            paging: true,
            sorting: { 'columns': this.columns },
        };
    }
    QueryResultTableComponent.prototype.ngOnChanges = function (changes) {
        console.debug("result table changed! changes=", changes);
        this.data = this.queryState.results;
        if (this.data.length > 0) {
            this.allColumns = this.queryState.resultColumns;
            this.columns = this.allColumns.filter(function (c) { return c.show; });
            this.config.sorting = this.columns;
            this.config.paging = { 'page': this.currentPage, 'itemsPerPage': this.itemsPerPage };
            this.showTable = (this.data.length < 1000);
            this.onChangeTable(this.config);
        }
    };
    QueryResultTableComponent.prototype.ngOnInit = function () {
        console.debug("result table init!");
    };
    QueryResultTableComponent.prototype.onSelectNumItems = function (event) {
        var selected = event.target.value;
        console.debug("selected number of items:", selected);
        var num = parseInt(selected);
        if (num == 0) {
            this.itemsPerPage = this.length;
        }
        else {
            this.itemsPerPage = num;
        }
        // update something
        this.config.paging = { 'page': this.currentPage, 'itemsPerPage': this.itemsPerPage };
        this.onChangeTable(this.config);
    };
    QueryResultTableComponent.prototype.onSelectCols = function (event) {
        console.debug("select cols:", this.allColumns);
        this.columns = this.allColumns.filter(function (c) { return c.show; });
        this.config.sorting = this.columns;
    };
    QueryResultTableComponent.prototype.changePage = function (page, data) {
        if (data === void 0) { data = this.data; }
        var start = (page.page - 1) * page.itemsPerPage;
        var end = page.itemsPerPage > -1 ? (start + page.itemsPerPage) : data.length;
        return data.slice(start, end);
    };
    QueryResultTableComponent.prototype.changeSort = function (data, config) {
        if (!config.sorting) {
            return data;
        }
        var columns = this.columns.filter(function (c) { return c.sort; });
        // simple sorting
        var sorted = data.sort(function (previous, current) {
            for (var i = 0; i < columns.length; i++) {
                var sort = columns[i].sort;
                var 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;
        });
        return sorted;
    };
    QueryResultTableComponent.prototype.changeFilter = function (data, config) {
        var _this = this;
        if (!config.filtering) {
            return data;
        }
        var filteredData = data.filter(function (item) {
            return item[config.filtering.columnName].match(_this.config.filtering.filterString);
        });
        return filteredData;
    };
    QueryResultTableComponent.prototype.onChangeTable = function (config, page) {
        if (page === void 0) { page = config.paging; }
        console.debug("onChangeTable config=", config, " page=", page);
        if (config.filtering) {
            Object.assign(this.config.filtering, config.filtering);
        }
        if (config.sorting) {
            Object.assign(this.config.sorting, config.sorting);
            // changing sorting resets page
            if (page == null) {
                this.currentPage = 1;
                page = { 'page': this.currentPage, 'itemsPerPage': this.itemsPerPage };
            }
        }
        //let filteredData = this.changeFilter(this.data, this.config);
        //let sortedData = this.changeSort(filteredData, this.config);
        var sortedData = this.changeSort(this.data, this.config);
        this.rows = (page && this.config.paging) ? this.changePage(page, sortedData) : sortedData;
        this.length = sortedData.length;
    };
    QueryResultTableComponent = __decorate([
        core_1.Component({
            selector: 'query-result',
            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       ",
            inputs: ['queryState', 'resultInfo']
        }), 
        __metadata('design:paramtypes', [])
    ], QueryResultTableComponent);
    return QueryResultTableComponent;
}());
exports.QueryResultTableComponent = QueryResultTableComponent;
//# sourceMappingURL=query-result-table.component.js.map