ngx-table-powerfull
Version:
Table with catalog of functionalities for free use based on the ngx-datatable component and other components
40 lines • 8.17 kB
JavaScript
import * as tslib_1 from "tslib";
import { Component, Inject, ViewEncapsulation } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { moveItemInArray } from '@angular/cdk/drag-drop';
var GridColumnsComponent = /** @class */ (function () {
function GridColumnsComponent(dialogRef, data) {
this.dialogRef = dialogRef;
this.data = data;
this.columns = [];
this.description = '';
this.columns = data.columns.map(function (d) { return Object.assign({}, d); });
}
GridColumnsComponent.prototype.ngOnInit = function () {
};
GridColumnsComponent.prototype.save = function () {
this.dialogRef.close(this.columns);
};
GridColumnsComponent.prototype.close = function () {
this.dialogRef.close();
};
GridColumnsComponent.prototype.drop = function (event) {
moveItemInArray(this.columns, event.previousIndex, event.currentIndex);
};
GridColumnsComponent.ctorParameters = function () { return [
{ type: MatDialogRef },
{ type: undefined, decorators: [{ type: Inject, args: [MAT_DIALOG_DATA,] }] }
]; };
GridColumnsComponent = tslib_1.__decorate([
Component({
selector: 'grid-columns-component',
template: "<h2 mat-dialog-title>{{description}}</h2>\r\n<header>{{ data.config.language.columns }}</header>\r\n<mat-dialog-content>\r\n\r\n <div class=\"row py-2 mx-0 list-header\">\r\n <div class=\"col-6 px-1\"><strong>{{ data.config.language.column }}</strong></div>\r\n <div class=\"col-3 text-center\"><strong>{{ data.config.language.show }}</strong></div>\r\n <div class=\"col-3 text-center\"><strong>{{ data.config.language.fix }}</strong></div>\r\n </div>\r\n\r\n <div cdkDropList class=\"example-list\" (cdkDropListDropped)=\"drop($event)\" cdkDropListOrientation=\"vertical\">\r\n\r\n <div class=\"example-box row\" *ngFor=\"let c of columns\" cdkDrag>\r\n <div class=\"col-6 column-name\">{{c.name}}</div>\r\n <div class=\"col-3 text-center pt-2\">\r\n <mat-checkbox [color]=\"'primary'\" [(ngModel)]=\"c.visible\"></mat-checkbox>\r\n </div>\r\n <div class=\"col-3 text-center pt-2\">\r\n <mat-checkbox [color]=\"'primary'\" [disabled]=\"!c.visible\" [(ngModel)]=\"c.fixed\"></mat-checkbox>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n\r\n</mat-dialog-content>\r\n\r\n<mat-dialog-actions class=\"row m-0 py-2\">\r\n <div class=\"col-6\">\r\n <button class=\"col-12 btn btn-default\" (click)=\"close()\">{{ data.config.language.close }}</button>\r\n </div>\r\n <div class=\"col-6\">\r\n <button class=\"col-12 btn btnPrimary\" (click)=\"save()\">{{ data.config.language.save }}</button>\r\n </div>\r\n</mat-dialog-actions>",
encapsulation: ViewEncapsulation.None,
styles: [".right-fixed{position:fixed!important;height:100vh;width:400px;max-width:400px;right:0}.right-fixed mat-dialog-container{border-radius:0;padding:0;overflow:hidden;margin:0}grid-columns-component{margin:-20px 0 0;display:block;height:100vh}grid-columns-component mat-dialog-content{height:calc(100% - 125px)!important;max-height:unset!important;padding:.5rem!important;margin:15px 0 0!important;overflow-y:hidden!important;overflow-x:hidden!important}grid-columns-component mat-dialog-content .list-header{border:1px solid #ccc;background:#efefef}grid-columns-component mat-dialog-content [cdkdroplist]{border-radius:0;border-top:0}grid-columns-component header{padding:.5rem;font-size:1.5rem;background:#efefef}grid-columns-component mat-dialog-actions{background:#efefef;padding:1rem!important;text-align:center}grid-columns-component .example-list{width:100%;max-width:100%;border:1px solid #ccc;display:block;background:#fff;border-radius:4px;overflow:hidden}grid-columns-component .example-box{padding:2px 5px 0;border-bottom:1px solid #ccc;color:rgba(0,0,0,.87);display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff}grid-columns-component .cdk-drag-placeholder{opacity:.6;background:InfoBackground}grid-columns-component .cdk-drag-animating{transition:transform 250ms cubic-bezier(0,0,.2,1)}grid-columns-component .example-box:last-child{border:none}grid-columns-component .example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform 250ms cubic-bezier(0,0,.2,1)}.cdk-drag-preview{opacity:1;cursor:move;background:#fff;box-sizing:border-box;border-radius:0;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.column-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:30px}"]
}),
tslib_1.__param(1, Inject(MAT_DIALOG_DATA))
], GridColumnsComponent);
return GridColumnsComponent;
}());
export { GridColumnsComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JpZENvbHVtbnMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LXRhYmxlLXBvd2VyZnVsbC8iLCJzb3VyY2VzIjpbImxpYi9jb21wb25lbnRzL2dyaWRDb2x1bW5zL2dyaWRDb2x1bW5zLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDckUsT0FBTyxFQUFFLFlBQVksRUFBRSxlQUFlLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUNsRSxPQUFPLEVBQWUsZUFBZSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFTdEU7SUFJSSw4QkFBb0IsU0FBNkMsRUFBa0MsSUFBSTtRQUFuRixjQUFTLEdBQVQsU0FBUyxDQUFvQztRQUFrQyxTQUFJLEdBQUosSUFBSSxDQUFBO1FBSGhHLFlBQU8sR0FBVSxFQUFFLENBQUM7UUFDcEIsZ0JBQVcsR0FBVyxFQUFFLENBQUM7UUFHNUIsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxVQUFBLENBQUMsSUFBSSxPQUFBLE1BQU0sQ0FBQyxNQUFNLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxFQUFwQixDQUFvQixDQUFDLENBQUM7SUFDL0QsQ0FBQztJQUVELHVDQUFRLEdBQVI7SUFDQSxDQUFDO0lBRU0sbUNBQUksR0FBWDtRQUNJLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUN2QyxDQUFDO0lBRU0sb0NBQUssR0FBWjtRQUNJLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxFQUFFLENBQUM7SUFDM0IsQ0FBQztJQUVNLG1DQUFJLEdBQVgsVUFBWSxLQUE0QjtRQUNwQyxlQUFlLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxLQUFLLENBQUMsYUFBYSxFQUFFLEtBQUssQ0FBQyxZQUFZLENBQUMsQ0FBQztJQUMzRSxDQUFDOztnQkFqQjhCLFlBQVk7Z0RBQXlCLE1BQU0sU0FBQyxlQUFlOztJQUpqRixvQkFBb0I7UUFQaEMsU0FBUyxDQUFDO1lBQ1AsUUFBUSxFQUFFLHdCQUF3QjtZQUNsQyxzbERBQTJDO1lBRTNDLGFBQWEsRUFBRSxpQkFBaUIsQ0FBQyxJQUFJOztTQUV4QyxDQUFDO1FBS3NFLG1CQUFBLE1BQU0sQ0FBQyxlQUFlLENBQUMsQ0FBQTtPQUpsRixvQkFBb0IsQ0FzQmhDO0lBQUQsMkJBQUM7Q0FBQSxBQXRCRCxJQXNCQztTQXRCWSxvQkFBb0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEluamVjdCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTWF0RGlhbG9nUmVmLCBNQVRfRElBTE9HX0RBVEEgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbCc7XHJcbmltcG9ydCB7IENka0RyYWdEcm9wLCBtb3ZlSXRlbUluQXJyYXkgfSBmcm9tICdAYW5ndWxhci9jZGsvZHJhZy1kcm9wJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gICAgc2VsZWN0b3I6ICdncmlkLWNvbHVtbnMtY29tcG9uZW50JyxcclxuICAgIHRlbXBsYXRlVXJsOiAnLi9ncmlkQ29sdW1ucy5jb21wb25lbnQuaHRtbCcsXHJcbiAgICBzdHlsZVVybHM6IFsnLi9ncmlkQ29sdW1ucy5jb21wb25lbnQuc2NzcyddLFxyXG4gICAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZVxyXG5cclxufSlcclxuZXhwb3J0IGNsYXNzIEdyaWRDb2x1bW5zQ29tcG9uZW50IHtcclxuICAgIHB1YmxpYyBjb2x1bW5zOiBhbnlbXSA9IFtdO1xyXG4gICAgcHVibGljIGRlc2NyaXB0aW9uOiBzdHJpbmcgPSAnJztcclxuXHJcbiAgICBjb25zdHJ1Y3Rvcihwcml2YXRlIGRpYWxvZ1JlZjogTWF0RGlhbG9nUmVmPEdyaWRDb2x1bW5zQ29tcG9uZW50PiwgQEluamVjdChNQVRfRElBTE9HX0RBVEEpIHB1YmxpYyBkYXRhKSB7XHJcbiAgICAgICAgdGhpcy5jb2x1bW5zID0gZGF0YS5jb2x1bW5zLm1hcChkID0+IE9iamVjdC5hc3NpZ24oe30sIGQpKTtcclxuICAgIH1cclxuXHJcbiAgICBuZ09uSW5pdCgpOiB2b2lkIHsgXHJcbiAgICB9XHJcblxyXG4gICAgcHVibGljIHNhdmUoKSB7XHJcbiAgICAgICAgdGhpcy5kaWFsb2dSZWYuY2xvc2UodGhpcy5jb2x1bW5zKTtcclxuICAgIH1cclxuXHJcbiAgICBwdWJsaWMgY2xvc2UoKSB7XHJcbiAgICAgICAgdGhpcy5kaWFsb2dSZWYuY2xvc2UoKTtcclxuICAgIH1cclxuXHJcbiAgICBwdWJsaWMgZHJvcChldmVudDogQ2RrRHJhZ0Ryb3A8c3RyaW5nW10+KSB7XHJcbiAgICAgICAgbW92ZUl0ZW1JbkFycmF5KHRoaXMuY29sdW1ucywgZXZlbnQucHJldmlvdXNJbmRleCwgZXZlbnQuY3VycmVudEluZGV4KTtcclxuICAgIH1cclxufVxyXG4iXX0=