@neoprospecta/angular-data-box/dist/data-box.component.js

Data table with REST implementation.

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { FormControl } from '@angular/forms';
import { FilterPipe } from '@neoprospecta/angular-custom-pipes';
var DataBoxComponent = (function () {
    /*
    ** Class Methods
    ** Private and public methods used by the component
    */
    function DataBoxComponent() {
        var _this = this;
        this.dataChange = new EventEmitter(); // Emits an event so subscribers with the changed data;
        this.stripped = true; // Stripped table
        this.condensed = false; // Turn the lines compact
        this.hover = true; // Hover the line when the mouse is over
        this.searchable = true; // Defines if the table should be searchable or not
        this.selectable = true; // Defines if the table should be searchable or not
        this.includeTips = true; // Defines if the tips button and div should be included
        this.includeCounter = true; // Defines if the counter should be included
        this.autoSave = false; // Defines if the changes should be automaticaly saved
        this.insert = false; // Defines if the insert button should be displayed or not
        this.insertPosition = 'start'; // Defines where a new item should be placed (start or end of a list)
        /*
        ** Events config
        ** Used to emmit events
        */
        this.multipleSelection = new EventEmitter();
        this.markAllObjects = function (checked) {
            _this.filteredData.forEach(function (object) {
                _this.markObject(checked, object);
            });
        };
        this.isAllObjectsMarked = function () {
            var allMarked = true;
            _this.filteredData.forEach(function (object) {
                allMarked = allMarked && (_this.markedObjects.indexOf(object) >= 0);
            });
            return allMarked;
        };
        this.geActionTitle = function (obj, attr, parent) {
            if (typeof attr === 'string') {
                return attr;
            }
            else {
                return attr(obj, parent);
            }
        };
        this.getAttributeValue = function (obj, attr, parent) {
            if (typeof attr === 'string') {
                return obj !== undefined && obj[attr] !== undefined ? obj[attr] : attr;
            }
            else {
                return attr(obj, parent);
            }
        };
        this.callAction = function (action, obj) {
            if (typeof action === 'string') {
                action = _this.getInternalAction(action);
            }
            var cbk = action(obj);
            if (cbk) {
                cbk.subscribe(function (obj) {
                    if (obj)
                        _this.markChanged(obj);
                });
            }
        };
        this.addItemToTheList = function (newObject) {
            if (_this.insertPosition == 'end') {
                _this.tableData.push(newObject);
            }
            else {
                _this.tableData.unshift(newObject);
            }
        };
        this.markChanged = function (obj) {
            _this.change.next(obj);
            if (_this.httpService) {
                var oldObj = JSON.stringify(_this.getFromData(obj));
                var newObj = JSON.stringify(obj);
                if (newObj != oldObj) {
                    if (typeof obj.forEach === 'function') {
                        obj.forEach(function (obj) { return _this.markChanged(obj); });
                    }
                    else {
                        var exist = false;
                        if (_this.trackByAttr) {
                            exist = _this.dataChanged.find(function (_obj) { return _obj[_this.trackByAttr] == obj[_this.trackByAttr]; });
                        }
                        else {
                            exist = _this.dataChanged.find(function (_obj) { return _obj == obj; });
                        }
                        if (!exist) {
                            _this.dataChanged.push(obj);
                        }
                    }
                }
                else {
                    _this.removeFromChangedObjects(obj);
                }
            }
            else {
                _this.data = _this.tableData;
            }
        };
        this.actions = new Array();
        this.columns = new Array();
        this.tableData = new Array();
        this.filteredData = new Array();
        this.selectedCells = new Array();
        this.markedObjects = new Array();
        this.searchStringControl = new FormControl();
        this.dataChanged = new Array();
        this.noDataProvided = false;
        this.saving = false;
        this.loading = false;
        this.change = new EventEmitter();
        this.onPagination = new EventEmitter();
    }
    DataBoxComponent.prototype.ngOnChanges = function (changes) {
        var _this = this;
        if (changes.data || changes.httpService) {
            this.loadData();
            this.filterData();
        }
        if (changes.trackByAttr) {
            this.trackBy = function (index, obj) {
                return obj[_this.trackByAttr];
            };
        }
    };
    DataBoxComponent.prototype.ngOnInit = function () {
        this.ensureBooleanIputs();
        this.initSearch();
    };
    DataBoxComponent.prototype.pageChanged = function (event) {
        this.onPagination.emit({ event: event.event });
    };
    DataBoxComponent.prototype.trackBy = function (index, obj) {
        return this.trackByAttr ? obj[this.trackByAttr] : index;
    };
    DataBoxComponent.prototype.isCellSelected = function (object, column) {
        if (this.selectedCell) {
            return this.isCellAndColumnEqual(this.selectedCell, object, column) || this.isCellInSelectedCells(object, column);
        }
        else {
            return false;
        }
    };
    DataBoxComponent.prototype.hasMultiSelection = function () {
        return this.selectedCells.length > 1 && this.selectedCells[0].column != '';
    };
    DataBoxComponent.prototype.selectCell = function (event, object, column, editable) {
        if (editable === void 0) { editable = false; }
        if (editable) {
            if ((event.shiftKey || event.ctrlKey) && this.selectedCell) {
                this.preventDefaultSelectionBehaviour(event);
                if (event.shiftKey && event.ctrlKey) {
                    var selectedObjects = this.getObjectsByRange(object, this.selectedCell.object);
                    this.copyDataFromSelectedCellToTheOthers(selectedObjects);
                }
                else if (event.altKey && event.ctrlKey) {
                    var selectedObjects = this.getObjectsByRange(object, this.selectedCell.object);
                    this.copyAndIterateDataFromSelectedCellToTheOthers(selectedObjects);
                }
                else if (event.shiftKey) {
                    var selectedObjects = this.getObjectsByRange(object, this.selectedCell.object);
                    this.selectCellsWithShiftKey(selectedObjects, this.selectedCell.column);
                }
                else if (event.ctrlKey) {
                    this.selectCellsWithCtrlKey(object, this.selectedCell.column);
                }
            }
            else {
                this.selectCellWithoutKey(object, column);
            }
        }
    };
    DataBoxComponent.prototype.copyToMultipleSelection = function (iterates) {
        if (iterates === void 0) { iterates = false; }
        var selectedObjects = this.selectedCells.map(function (selectedCell) { return selectedCell.object; });
        if (iterates) {
            this.copyAndIterateDataFromSelectedCellToTheOthers(selectedObjects);
        }
        else {
            this.copyDataFromSelectedCellToTheOthers(selectedObjects);
        }
    };
    DataBoxComponent.prototype.saveChanges = function () {
        var _this = this;
        var qtd = this.dataChanged.length;
        if (qtd) {
            this.saving = true;
            var done_1 = 0;
            this.dataChanged.forEach(function (object) {
                _this.httpService.save(object).then(function (object) {
                    done_1++;
                    if (done_1 == qtd) {
                        _this.saving = false;
                        _this.copyTableDataToData();
                        _this.dataChange.emit(_this.data);
                        _this.dataChanged = [];
                    }
                });
            });
        }
    };
    DataBoxComponent.prototype.discardChanges = function () {
        this.resetTableData();
    };
    DataBoxComponent.prototype.markObject = function (event, object) {
        this.markedObject = object;
        if (event.checked) {
            this.addToMarkedObjects(object);
        }
        else {
            this.removeFromMarkedObjects(object);
        }
    };
    DataBoxComponent.prototype.markObjectByRange = function (event, object) {
        var _this = this;
        if (event.shiftKey && this.markedObject) {
            this.preventDefaultSelectionBehaviour(event);
            var checked_1 = this.isObjectMarked(this.markedObject);
            var markedObjects = this.getObjectsByRange(object, this.markedObject);
            markedObjects.forEach(function (object) {
                if (checked_1) {
                    _this.addToMarkedObjects(object);
                }
                else {
                    _this.removeFromMarkedObjects(object);
                }
            });
        }
    };
    DataBoxComponent.prototype.isObjectMarked = function (object) {
        if (this.markedObjects) {
            var markedObject = this.markedObjects.find(function (markedObject) { return markedObject == object; });
            return markedObject ? true : false;
        }
        else {
            return false;
        }
    };
    DataBoxComponent.prototype.clearSearch = function () {
    };
    DataBoxComponent.prototype.getOptionLabel = function (option, options) {
        var label = options.find(function (opt) { return opt.id == option; }).label;
        return label ? label : option;
    };
    DataBoxComponent.prototype.showActionButton = function (obj, action) {
        if (action.hide) {
            if (typeof action.hide === 'boolean') {
                return !action.hide;
            }
            else {
                return !action.hide(obj);
            }
        }
        else {
            return true;
        }
    };
    DataBoxComponent.prototype.disableOptionCell = function (obj, disable) {
        if (disable) {
            if (typeof disable === 'boolean') {
                return disable;
            }
            else {
                return disable(obj);
            }
        }
        else {
            return false;
        }
    };
    // SORT
    DataBoxComponent.prototype.sortBy = function (attr) {
        this.sortAttr = attr;
        this.sortDirection = this.sortDirection != undefined ? !this.sortDirection : true;
    };
    DataBoxComponent.prototype.addItem = function () {
        var _this = this;
        if (typeof this.insert === 'function') {
            var cbk = this.insert();
            if (cbk) {
                cbk.subscribe(function (newObject) {
                    if (newObject) {
                        _this.addItemToTheList(newObject);
                        if (_this.httpService) {
                            _this.markChanged(newObject);
                        }
                    }
                });
            }
        }
        else {
            var newObject = this.model ? new this.model() : {};
            this.addItemToTheList(newObject);
            this.markChanged(newObject);
        }
    };
    DataBoxComponent.prototype.deleteItem = function (object) {
        var _this = this;
        if (this.httpService) {
            this.httpService.delete(object).then(function (success) {
                _this.removeObjectFromAllLists(object);
            }, function (error) {
                console.log('Error when deleting the object', error);
            });
        }
        else {
            this.removeObjectFromAllLists(object);
        }
    };
    DataBoxComponent.prototype.getInternalAction = function (actionName) {
        var _this = this;
        switch (actionName) {
            case "delete":
                return function (item) { return _this.deleteItem(item); };
            case "add":
                return function (item) { return _this.addItem(); };
            default:
                return function () { };
        }
    };
    DataBoxComponent.prototype.removeObjectFromAllLists = function (object) {
        this.markChanged(object);
        this.removeFromChangedObjects(object);
        this.removeFromMarkedObjects(object);
        this.removeFromSelectedCells(object);
        this.removeFromTableData(object);
    };
    DataBoxComponent.prototype.removeFromTableData = function (object) {
        var index = this.tableData.indexOf(object);
        this.tableData.splice(index, 1);
    };
    DataBoxComponent.prototype.addToMarkedObjects = function (object) {
        if (!this.isObjectMarked(object)) {
            this.markedObjects.push(object);
        }
    };
    DataBoxComponent.prototype.removeFromChangedObjects = function (object) {
        var index = this.dataChanged.indexOf(object);
        this.dataChanged.splice(index, 1);
    };
    DataBoxComponent.prototype.removeFromMarkedObjects = function (object) {
        var index = this.markedObjects.indexOf(object);
        this.markedObjects.splice(index, 1);
    };
    DataBoxComponent.prototype.ensureBooleanIputs = function () {
        this.autoSave = typeof this.autoSave == 'string' ? this.autoSave === 'true' : false;
    };
    DataBoxComponent.prototype.isCellAndColumnEqual = function (selectedCell, object, column) {
        return (selectedCell.object == object && selectedCell.column == column);
    };
    DataBoxComponent.prototype.isCellInSelectedCells = function (object, column) {
        var _this = this;
        if (this.selectedCells) {
            var selectedCell = this.selectedCells.find(function (selectedCell) { return _this.isCellAndColumnEqual(selectedCell, object, column); });
            return selectedCell ? true : false;
        }
        else {
            return false;
        }
    };
    DataBoxComponent.prototype.isObjectInSelectedCells = function (object) {
        if (this.selectedCells) {
            var selectedCell = this.selectedCells.find(function (selectedCell) { return selectedCell.object == object; });
            return selectedCell ? true : false;
        }
        else {
            return false;
        }
    };
    DataBoxComponent.prototype.selectCellWithoutKey = function (object, column) {
        if (this.isCellSelected(object, column) && this.selectedCells.length == 1) {
            this.selectedCell = undefined;
            this.selectedCells = [];
        }
        else {
            this.selectedCell = { object: object, column: column };
            this.selectedCells = [{ object: object, column: column }];
        }
    };
    DataBoxComponent.prototype.selectCellsWithShiftKey = function (selectedObjects, column) {
        var _this = this;
        selectedObjects.forEach(function (selectedObject) {
            _this.addToSelectedCells(selectedObject, column);
        });
    };
    DataBoxComponent.prototype.addToSelectedCells = function (object, column) {
        if (!this.isCellInSelectedCells(object, column)) {
            this.selectedCells.push({ object: object, column: column });
        }
    };
    DataBoxComponent.prototype.selectCellsWithCtrlKey = function (object, column) {
        if (this.isCellInSelectedCells(object, column)) {
            this.removeFromSelectedCells(object, column);
        }
        else {
            this.addToSelectedCells(object, column);
        }
    };
    DataBoxComponent.prototype.getFromSelected = function (object, column) {
        var _this = this;
        return this.selectedCells.find(function (selectedCell) { return _this.isCellAndColumnEqual(selectedCell, object, column); });
    };
    DataBoxComponent.prototype.removeFromSelectedCells = function (object, column) {
        var _this = this;
        if (column) {
            var index = this.selectedCells.indexOf(this.getFromSelected(object, column));
            this.selectedCells.splice(index, 1);
        }
        else {
            var items = this.selectedCells.filter(function (item) { return item.object == object; });
            items.forEach(function (item) {
                _this.removeFromSelectedCells(object, item.column);
            });
        }
    };
    DataBoxComponent.prototype.getObjectsByRange = function (firstObject, lastObject) {
        var lastIndex = this.filteredData.indexOf(lastObject);
        var startIndex = this.filteredData.indexOf(firstObject);
        if (lastIndex < startIndex) {
            return this.filteredData.filter(function (object, index) {
                return index >= lastIndex && index <= startIndex;
            });
        }
        else {
            return this.filteredData.filter(function (object, index) {
                return index <= lastIndex && index >= startIndex;
            });
        }
    };
    DataBoxComponent.prototype.getInFiltered = function (selectedObjects) {
        var _this = this;
        return selectedObjects.filter(function (selectedObject) { return _this.filteredData.indexOf(selectedObject) >= 0; });
    };
    DataBoxComponent.prototype.copyAndIterateDataFromSelectedCellToTheOthers = function (selectedObjects) {
        var attr = this.selectedCell.column;
        var value = this.selectedCell.object[attr];
        var numericParts = value.match(/\d+$/);
        if (numericParts) {
            var lastIndex = this.filteredData.indexOf(selectedObjects[1]);
            var startIndex = this.filteredData.indexOf(this.selectedCell.object);
            var lastValuePart_1 = parseInt(numericParts[0]);
            var selectedInFiltered = this.getInFiltered(selectedObjects);
            if (startIndex < lastIndex) {
                selectedInFiltered.forEach(function (object) {
                    object[attr] = value.replace(/\d+$([^\d]*)$/, lastValuePart_1 + '$1');
                    lastValuePart_1++;
                });
            }
            else {
                selectedInFiltered.reverse().forEach(function (object) {
                    object[attr] = value.replace(/\d+$([^\d]*)$/, lastValuePart_1 + '$1');
                    lastValuePart_1--;
                });
            }
            if (this.autoSave) {
                this.saveChanges();
            }
            else {
                this.markChanged(selectedInFiltered);
            }
        }
    };
    DataBoxComponent.prototype.copyDataFromSelectedCellToTheOthers = function (selectedObjects) {
        var attr = this.selectedCell.column;
        var value = this.selectedCell.object[attr];
        var selectedInFiltered = this.getInFiltered(selectedObjects);
        selectedInFiltered.forEach(function (object) {
            object[attr] = value;
        });
        if (this.autoSave) {
            this.saveChanges();
        }
        else {
            this.markChanged(selectedInFiltered);
        }
    };
    DataBoxComponent.prototype.loadData = function () {
        var _this = this;
        if (this.httpService) {
            this.loading = true;
            this.httpService.filter().subscribe(function (res) {
                if (res) {
                    _this.data = res;
                    _this.resetTableData();
                    _this.loading = false;
                }
            });
        }
        else if (this.data) {
            this.tableData = this.data;
        }
        else {
            this.noDataProvided = true;
        }
    };
    DataBoxComponent.prototype.resetTableData = function () {
        this.tableData = JSON.parse(JSON.stringify(this.data));
        this.filterData();
        this.dataChanged = [];
        this.markedObject = [];
        this.selectedCells = [];
    };
    DataBoxComponent.prototype.copyTableDataToData = function () {
        this.data = JSON.parse(JSON.stringify(this.tableData));
    };
    DataBoxComponent.prototype.initSearch = function () {
        var _this = this;
        this.searchStringControl.valueChanges
            .debounceTime(300)
            .distinctUntilChanged()
            .subscribe(function (newValue) {
            _this.searchString = newValue;
            _this.filterData();
        });
    };
    DataBoxComponent.prototype.getFromData = function (obj) {
        var _this = this;
        if (this.trackByAttr) {
            return this.data.find(function (_obj) { return _obj[_this.trackByAttr] == obj[_this.trackByAttr]; });
        }
        else {
            return this.data.find(function (_obj) { return _obj == obj; });
        }
    };
    DataBoxComponent.prototype.filterData = function () {
        if (this.searchString) {
            this.filteredData = new FilterPipe().transform(this.tableData, this.searchString);
        }
        else {
            this.filteredData = this.tableData;
        }
    };
    DataBoxComponent.prototype.preventDefaultSelectionBehaviour = function (event) {
        event.preventDefault();
        window.getSelection().removeAllRanges();
    };
    DataBoxComponent.decorators = [
        { type: Component, args: [{
                    selector: 'data-box',
                    styles: [".data-box-wrapper md-icon[fontSet=fa]{font-size:19px;height:auto}.data-box-wrapper md-input-container{width:100%}.data-box-wrapper .table-actions-wrapper{text-align:right}.data-box-wrapper .table-actions-wrapper span{display:inline-block;padding:10px 0px}.data-box-wrapper .text-rigth{text-align:right}.data-box-wrapper table{border-collapse:collapse;width:100%}.data-box-wrapper table .array-ul{list-style:none;margin:0;padding:4px}.data-box-wrapper table .array-ul li{line-height:12px;font-size:10px}.data-box-wrapper table a{text-decoration:none}.data-box-wrapper table .nowrap{white-space:nowrap}.data-box-wrapper table .fit-text{width:1px}.data-box-wrapper table thead tr{height:50px}.data-box-wrapper table td,.data-box-wrapper table th{padding:0px 6px}.data-box-wrapper table tbody md-icon .icon-text{padding:0px 4px 0px 3px;border-radius:3px;font-size:13px;line-height:17px;margin-left:-7px;margin-top:-7px;position:absolute}.data-box-wrapper table tbody a{font-weight:800}.data-box-wrapper table tbody tr{font-size:12px;line-height:20px}.data-box-wrapper table tbody .option-selected{display:grid} "],
                    template: "<div class=\"data-box-wrapper\"> <!-- TITLE section --> <div *ngIf=\"title\"> <div [ngSwitch]=\"titleSize\"> <h1 *ngSwitchCase=\"'h1'\"> {{title}} <button  *ngIf=\"insert\" md-icon-button  (click)=\"addItem()\"> <md-icon fontSet=\"fa\" fontIcon=\"fa-plus\" title=\"Adicionar\" color=\"primary\"></md-icon> </button> </h1> <h2 *ngSwitchCase=\"'h2'\"> {{title}} <button  *ngIf=\"insert\" md-icon-button  (click)=\"addItem()\"> <md-icon fontSet=\"fa\" fontIcon=\"fa-plus\" title=\"Adicionar\" color=\"primary\"></md-icon> </button> </h2> <h3 *ngSwitchCase=\"'h3'\"> {{title}} <button  *ngIf=\"insert\" md-icon-button  (click)=\"addItem()\"> <md-icon fontSet=\"fa\" fontIcon=\"fa-plus\" title=\"Adicionar\" color=\"primary\"></md-icon> </button> </h3> <h4 *ngSwitchCase=\"'h4'\"> {{title}} <button  *ngIf=\"insert\" md-icon-button  (click)=\"addItem()\"> <md-icon fontSet=\"fa\" fontIcon=\"fa-plus\" title=\"Adicionar\" color=\"primary\"></md-icon> </button> </h4> <h5 *ngSwitchCase=\"'h5'\"> {{title}} <button  *ngIf=\"insert\" md-icon-button  (click)=\"addItem()\"> <md-icon fontSet=\"fa\" fontIcon=\"fa-plus\" title=\"Adicionar\" color=\"primary\"></md-icon> </button> </h5> <h6 *ngSwitchCase=\"'h6'\"> {{title}} <button  *ngIf=\"insert\" md-icon-button  (click)=\"addItem()\"> <md-icon fontSet=\"fa\" fontIcon=\"fa-plus\" title=\"Adicionar\" color=\"primary\"></md-icon> </button> </h6> <p *ngSwitchCase=\"undefined\"> {{title}} <button  *ngIf=\"insert\" md-icon-button  (click)=\"addItem()\"> <md-icon fontSet=\"fa\" fontIcon=\"fa-plus\" title=\"Adicionar\" color=\"primary\"></md-icon> </button> </p> </div> </div> <!-- end TITLE section --> <!-- LOAD section --> <div *ngIf=\"noDataProvided\"> <p>Dados não fornecidos.</p> </div> <div *ngIf=\"loading\"> <p>Carregando dados...</p> </div> <div *ngIf=\"saving\"> <p>Salvando dados...</p> </div> <!-- end LOAD section --> <!-- TABLE section--> <div *ngIf=\"!noDataProvided && !loading\"> <!-- TIPS section --> <div class=\"text-rigth\" *ngIf=\"includeTips\"> <button md-icon-button (click)=\"showTips = !showTips\" title=\"Ajuda\"> <md-icon fontSet=\"fa\" fontIcon=\"fa-question\" color=\"primary\"></md-icon> </button> <div *ngIf=\"showTips\"> <hr> Como usar a tabela <ul> <li>shift + click: seleciona multiplas linhas.</li> <li>ctrl + click: seleciona multiplas linhas, uma por clique.</li> <li>shift + ctrl + click: copia um valor pra multiplas linhas.</li> <li>alt + ctrl + click: copia um valor pra multiplas linhas e adiciona +1 se o último conteúdo for numérico (dia 1, dia 2, dia 3...)</li> <li>Nenhuma alteração é salva automaticamente. Para salvar as alterações é preciso clicar em \"Salvar alterações\"</li> </ul> <hr> </div> </div> <!-- end TIPS section --> <div class=\"table-actions-wrapper\"> <span *ngIf=\"dataChanged.length\"> <button md-raised-button color=\"primary\" (click)=\"saveChanges()\">Salvar</button> <button md-raised-button color=\"warn\" (click)=\"discardChanges()\">Descartar</button> </span> <span *ngIf=\"hasMultiSelection()\"> <button md-raised-button color=\"accent\" (click)=\"copyToMultipleSelection()\">Copiar</button> <button md-raised-button color=\"accent\" (click)=\"copyToMultipleSelection(true)\">Iterar</button> </span> </div> <div *ngIf=\"searchable\"> <md-input-container> <input mdInput type=\"text\" [formControl]=\"searchStringControl\" placeholder=\"Filtre pelo nome, código...\" /> <span *ngIf=\"searchStringControl.value\" mdSuffix (click)=\"searchStringControl.setValue('')\"> <md-icon fontSet=\"fa\" fontIcon=\"fa-close\"></md-icon> </span> </md-input-container> </div> <div *ngIf=\"includeCounter\"> <small> Mostrando {{filteredData.length}} de {{tableData.length}} resultados  <a href=\"javascript:void(0)\" *ngIf=\"filteredData.length < tableData.length\" (click)=\"searchStringControl.setValue('')\">(Mostrar tudo)</a> </small> </div> <!-- PAGINATOR --> <np-paginator *ngIf=\"onPagination && currentPage && amountPerPage\" (pageChanged)=\"pageChanged($event)\" [totalItems]=\"totalItems || filteredData.length\" [currentPage]=\"currentPage\" [amountPerPage]=\"amountPerPage\" > </np-paginator> <!-- END PAGINATOR section--> <table [ngClass]=\"{'stripped': stripped, 'hover': hover, 'condensed': condensed}\"> <thead> <tr class=\"nowrap\"> <th class=\"fit-text\" *ngIf=\"selectable\"> <md-checkbox color=\"accent\" (change)=\"markAllObjects($event)\" [checked]=\"isAllObjectsMarked()\"></md-checkbox> </th> <th *ngFor=\"let column of columns\" align=\"{{column.align || left}}\" [ngClass]=\"{'fit-text': column.fitText}\"> <span [attr.title]=\"getAttributeValue(undefined, column.tooltip)\"> <span [ngSwitch]=\"column.sort\"> <span *ngSwitchCase=\"true\" (click)=\"sortBy(column.attr)\"> {{column.header}} <a href=\"javascript:void(0)\" *ngIf=\"sortAttr == column.attr\"><md-icon fontSet=\"fa\" fontIcon=\"fa-sort-{{sortDirection ? 'up' : 'down'}}\" md-input-icon></md-icon></a> <a href=\"javascript:void(0)\" *ngIf=\"!(sortAttr == column.attr)\"><md-icon fontSet=\"fa\" fontIcon=\"fa-sort\" md-input-icon></md-icon></a> </span> <span *ngSwitchDefault=\"\">{{column.header}}</span> </span> </span> </th> <th class=\"fit-text\" *ngIf=\"actions && actions.length\">Ações</th> </tr> </thead> <tbody> <tr *ngFor=\"let object of filteredData | orderBy:sortAttr:sortDirection; let objectIndex = index; trackBy:trackBy\"> <td class=\"fit-text\" *ngIf=\"selectable\"> <md-checkbox color=\"accent\" (change)=\"markObject($event, object)\" (click)=\"markObjectByRange($event, object)\" [checked]=\"isObjectMarked(object)\"></md-checkbox> </td> <td  *ngFor=\"let column of columns\" align=\"{{column.align || left}}\" [ngClass]=\"{'fit-text': column.fitText, 'highlight-cell': isCellSelected(object, column.attr), 'nowrap': column.actions.length > 0}\" (click)=\"selectCell($event, object, column.attr, column.selectable)\" [attr.title]=\"getAttributeValue(object, column.tooltip)\"> <div [ngSwitch]=\"column.editable\"> <span *ngSwitchCase=\"false\"> <div [ngSwitch]=\"column.type\"> <span *ngSwitchCase=\"'text'\">{{getAttributeValue(object, column.attr)}}</span> <span *ngSwitchCase=\"'text-icon'\"> <md-icon color=\"{{getAttributeValue(object, column.colorIcon)}}\" fontSet=\"fa\" fontIcon=\"{{getAttributeValue(object, column.fontIcon)}}\"></md-icon> {{getAttributeValue(object, column.attr)}} </span> <span *ngSwitchCase=\"'number'\">{{getAttributeValue(object, column.attr)}}</span> <span *ngSwitchCase=\"'option'\">{{getOptionLabel(getAttributeValue(object, column.attr), column.options)}}</span> <span *ngSwitchCase=\"'currency'\">{{getAttributeValue(object, column.attr) | currency:column.currencyLocation:true}}</span> <span *ngSwitchCase=\"'date' || 'date-time'\"> <div *ngIf=\"getAttributeValue(object, column.attr) != column.attr\"> {{getAttributeValue(object, column.attr) | date: column.dateFormat}} </div> </span> <span *ngSwitchCase=\"'boolean'\"> <span [ngSwitch]=\"getAttributeValue(object, column.attr)\"> <md-icon *ngSwitchCase=\"true\" color=\"primary\" fontSet=\"fa\" fontIcon=\"fa-check\" md-list-icon></md-icon> </span> </span> <ul *ngSwitchCase=\"'array'\" class=\"array-ul\"> <li *ngFor=\"let item of getAttributeValue(object, column.attr)\">{{getAttributeValue(item, column.arrayAttr, object)}}</li> </ul> <span *ngSwitchCase=\"'actions'\"> <ng-container *ngFor=\"let action of column.actions\"> <span *ngIf=\"action.action === 'menu'\"> <button *ngIf=\"action.icon\" md-icon-button [mdMenuTriggerFor]=\"btnAction\" [attr.title]=\"getAttributeValue(undefined, action.tooltip)\"> <md-icon *ngIf=\"action.icon\" fontSet=\"fa\" fontIcon=\"{{action.icon}}\" color=\"{{action.color}}\"></md-icon> </button> <button *ngIf=\"!action.icon\" md-raised-button [mdMenuTriggerFor]=\"btnAction\" [attr.title]=\"getAttributeValue(undefined, action.tooltip)\" color=\"{{action.color || 'default'}}\"> <span>{{geActionTitle(object, action.title)}}</span> </button> <md-menu #btnAction=\"mdMenu\" xPosition=\"before\" yPosition=\"below\"> <button *ngFor=\"let option of action.options\" (click)=\"callAction(option.function, object)\" md-menu-item>  {{option.name}} </button> </md-menu> </span> <span *ngIf=\"action.action !== 'menu'\"> <button *ngIf=\"action.icon\" md-icon-button [attr.title]=\"getAttributeValue(undefined, action.tooltip)\" (click)=\"callAction(action.action, object)\"> <md-icon *ngIf=\"action.icon\" fontSet=\"fa\" fontIcon=\"{{action.icon}}\" color=\"{{action.color}}\"></md-icon> </button> <button *ngIf=\"!action.icon\" md-raised-button [attr.title]=\"getAttributeValue(undefined, action.tooltip)\" (click)=\"callAction(action.action, object)\" color=\"{{action.color || 'default'}}\"> <span>{{geActionTitle(object, action.title)}}</span> </button> </span> </ng-container> </span> </div> </span> <div *ngSwitchCase=\"true\"> <div [ngSwitch]=\"column.type\"> <span *ngSwitchCase=\"'text'\"> <md-input-container> <input *ngIf=\"!column.attr2\" mdInput type=\"text\" [(ngModel)]=\"object[column.attr]\" (change)=\"markChanged(object)\" name=\"{{column.attr}}{{objectIndex}}\" /> <input *ngIf=\"column.attr2\" mdInput type=\"text\" [(ngModel)]=\"object[column.attr][column.attr2]\" (change)=\"markChanged(object)\" name=\"{{column.attr}}{{column.attr2}}{{objectIndex}}\" /> </md-input-container> </span> <span *ngSwitchCase=\"'text-icon'\"> <md-input-container> <input mdInput type=\"text\" [(ngModel)]=\"object[column.attr]\" (change)=\"markChanged(object)\" name=\"{{column.attr}}{{objectIndex}}\" /> </md-input-container> </span> <span *ngSwitchCase=\"'option'\"> <span *ngIf=\"column.unique\" class=\"option-selected\"> {{object[column.attr]}} </span> <md-select [disabled]=\"disableOptionCell(object, column.disable)\" [(ngModel)]=\"object[column.attr]\" (change)=\"markChanged(object)\" name=\"{{column.attr}}{{objectIndex}}\"> <md-option [value]=\"undefined\" *ngIf=\"column.options.length > 0\" >-</md-option> <md-option [value]=\"undefined\" *ngIf=\"column.options.length === 0\" >Sem opções para selecionar</md-option> <md-option *ngFor=\"let option of column.options\" [value]=\"option.id\"> {{option.label}} </md-option> </md-select> </span> <span *ngSwitchCase=\"'number'\"> <md-input-container> <input mdInput *ngIf=\"!column.attr2\"  type=\"number\" max=\"{{column.max}}\" min=\"{{column.min}}\" [(ngModel)]=\"object[column.attr]\" (change)=\"markChanged(object)\" name=\"{{column.attr}}{{objectIndex}}\" /> <input mdInput *ngIf=\"column.attr2\"  type=\"number\" max=\"{{column.max}}\" min=\"{{column.min}}\" [(ngModel)]=\"object[column.attr][column.attr2]\" (change)=\"markChanged(object)\" name=\"{{column.attr}}{{column.attr2}}{{objectIndex}}\" /> </md-input-container> </span> <span *ngSwitchCase=\"'boolean'\"> <md-checkbox color=\"primary\" name=\"{{column.attr}}{{objectIndex}}\" [(ngModel)]=\"object[column.attr]\" (change)=\"markChanged(object)\"></md-checkbox> </span> <span *ngSwitchCase=\"'date-time'\"> <np-datetime-picker *ngIf=\"!column.attr2\"  [(ngModel)]=\"object[column.attr]\" (change)=\"markChanged(object)\" name=\"{{column.attr}}{{objectIndex}}\" close-on-select=\"false\" date-format=\"{{column.dateFormat}}\" ></np-datetime-picker>     <np-datetime-picker *ngIf=\"column.attr2\"  [(ngModel)]=\"object[column.attr]\" (change)=\"markChanged(object)\" name=\"{{column.attr}}{{column.attr2}}{{objectIndex}}\" close-on-select=\"false\" date-format=\"{{column.dateFormat}}\" ></np-datetime-picker>     </span> <span *ngSwitchCase=\"'date'\"> <np-datetime-picker *ngIf=\"!column.attr2\"  [(ngModel)]=\"object[column.attr]\" (change)=\"markChanged(object)\" name=\"{{column.attr}}{{objectIndex}}\" close-on-select=\"true\" date-format=\"{{column.dateFormat}}\" date-only=\"true\" ></np-datetime-picker> <np-datetime-picker *ngIf=\"column.attr2\"  [(ngModel)]=\"object[column.attr][column.attr2]\" (change)=\"markChanged(object)\" name=\"{{column.attr}}{{column.attr2}}{{objectIndex}}\" close-on-select=\"true\" date-format=\"{{column.dateFormat}}\" date-only=\"true\" ></np-datetime-picker> </span> </div> </div> </div> </td> <td class=\"nowrap\" *ngIf=\"actions && actions.length\"> <ng-container *ngFor=\"let action of actions\"> <button *ngIf=\"showActionButton(object, action)\" md-icon-button  title=\"{{action.title}}\" (click)=\"callAction(action.action, object)\"> <md-icon *ngIf=\"action.icon\" fontSet=\"fa\" fontIcon=\"{{action.icon}}\"  color=\"{{action.color}}\"></md-icon> <span *ngIf=\"!action.icon\">{{action.title}}</span> </button> </ng-container> </td> </tr> </tbody> </table> <div class=\"table-actions-wrapper\"> <span *ngIf=\"dataChanged.length\"> <button md-raised-button color=\"primary\" (click)=\"saveChanges()\">Salvar</button> <button md-raised-button color=\"warn\" (click)=\"discardChanges()\">Descartar</button> </span> <span *ngIf=\"hasMultiSelection()\"> <button md-raised-button color=\"accent\" (click)=\"copyToMultipleSelection()\">Copiar</button> <button md-raised-button color=\"accent\" (click)=\"copyToMultipleSelection(true)\">Iterar</button> </span> </div> <!-- TIPS section --> <div class=\"text-rigth\" *ngIf=\"includeTips\"> <button md-icon-button (click)=\"showTips = !showTips\" title=\"Ajuda\"> <md-icon fontSet=\"fa\" fontIcon=\"fa-question\" color=\"primary\"></md-icon> </button> <div class=\"about-data-box\" *ngIf=\"showTips\"> <hr> Como usar a tabela <ul> <li>shift + click: seleciona multiplas linhas.</li> <li>ctrl + click: seleciona multiplas linhas, uma por clique.</li> <li>shift + ctrl + click: copia um valor pra multiplas linhas.</li> <li>alt + ctrl + click: copia um valor pra multiplas linhas e adiciona +1 se o último conteúdo for numérico (dia 1, dia 2, dia 3...)</li> <li>Nenhuma alteração é salva automaticamente. Para salvar as alterações é preciso clicar em \"Salvar alterações\"</li> </ul> <hr> </div> </div> <!-- end TIPS section --> </div> </div> "
                },] },
    ];
    /** @nocollapse */
    DataBoxComponent.ctorParameters = function () { return []; };
    DataBoxComponent.propDecorators = {
        'columns': [{ type: Input },],
        'actions': [{ type: Input },],
        'data': [{ type: Input },],
        'dataChange': [{ type: Output },],
        'title': [{ type: Input },],
        'titleSize': [{ type: Input, args: ['title-size',] },],
        'maxRows': [{ type: Input, args: ['max-rows',] },],
        'stripped': [{ type: Input },],
        'condensed': [{ type: Input },],
        'hover': [{ type: Input },],
        'searchable': [{ type: Input },],
        'selectable': [{ type: Input },],
        'includeTips': [{ type: Input, args: ['tips',] },],
        'includeCounter': [{ type: Input, args: ['counter',] },],
        'autoSave': [{ type: Input, args: ['auto-save',] },],
        'httpService': [{ type: Input, args: ['http-service',] },],
        'model': [{ type: Input },],
        'trackByAttr': [{ type: Input, args: ['track-by',] },],
        'insert': [{ type: Input },],
        'insertPosition': [{ type: Input, args: ['insert-position',] },],
        'totalItems': [{ type: Input },],
        'currentPage': [{ type: Input },],
        'amountPerPage': [{ type: Input },],
        'multipleSelection': [{ type: Output },],
        'change': [{ type: Output },],
        'onPagination': [{ type: Output, args: ['on-pagination',] },],
    };
    return DataBoxComponent;
}());
export { DataBoxComponent };
//# sourceMappingURL=data-box.component.js.map