ngx-table-powerfull
Version:
Table with catalog of functionalities for free use based on the ngx-datatable component and other components
39 lines • 7.82 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';
let GridColumnsComponent = class GridColumnsComponent {
constructor(dialogRef, data) {
this.dialogRef = dialogRef;
this.data = data;
this.columns = [];
this.description = '';
this.columns = data.columns.map(d => Object.assign({}, d));
}
ngOnInit() {
}
save() {
this.dialogRef.close(this.columns);
}
close() {
this.dialogRef.close();
}
drop(event) {
moveItemInArray(this.columns, event.previousIndex, event.currentIndex);
}
};
GridColumnsComponent.ctorParameters = () => [
{ 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);
export { GridColumnsComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JpZENvbHVtbnMuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vbmd4LXRhYmxlLXBvd2VyZnVsbC8iLCJzb3VyY2VzIjpbImxpYi9jb21wb25lbnRzL2dyaWRDb2x1bW5zL2dyaWRDb2x1bW5zLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiO0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDckUsT0FBTyxFQUFFLFlBQVksRUFBRSxlQUFlLEVBQUUsTUFBTSxtQkFBbUIsQ0FBQztBQUNsRSxPQUFPLEVBQWUsZUFBZSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7QUFTdEUsSUFBYSxvQkFBb0IsR0FBakMsTUFBYSxvQkFBb0I7SUFJN0IsWUFBb0IsU0FBNkMsRUFBa0MsSUFBSTtRQUFuRixjQUFTLEdBQVQsU0FBUyxDQUFvQztRQUFrQyxTQUFJLEdBQUosSUFBSSxDQUFBO1FBSGhHLFlBQU8sR0FBVSxFQUFFLENBQUM7UUFDcEIsZ0JBQVcsR0FBVyxFQUFFLENBQUM7UUFHNUIsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDL0QsQ0FBQztJQUVELFFBQVE7SUFDUixDQUFDO0lBRU0sSUFBSTtRQUNQLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUN2QyxDQUFDO0lBRU0sS0FBSztRQUNSLElBQUksQ0FBQyxTQUFTLENBQUMsS0FBSyxFQUFFLENBQUM7SUFDM0IsQ0FBQztJQUVNLElBQUksQ0FBQyxLQUE0QjtRQUNwQyxlQUFlLENBQUMsSUFBSSxDQUFDLE9BQU8sRUFBRSxLQUFLLENBQUMsYUFBYSxFQUFFLEtBQUssQ0FBQyxZQUFZLENBQUMsQ0FBQztJQUMzRSxDQUFDO0NBQ0osQ0FBQTs7WUFsQmtDLFlBQVk7NENBQXlCLE1BQU0sU0FBQyxlQUFlOztBQUpqRixvQkFBb0I7SUFQaEMsU0FBUyxDQUFDO1FBQ1AsUUFBUSxFQUFFLHdCQUF3QjtRQUNsQyxzbERBQTJDO1FBRTNDLGFBQWEsRUFBRSxpQkFBaUIsQ0FBQyxJQUFJOztLQUV4QyxDQUFDO0lBS3NFLG1CQUFBLE1BQU0sQ0FBQyxlQUFlLENBQUMsQ0FBQTtHQUpsRixvQkFBb0IsQ0FzQmhDO1NBdEJZLG9CQUFvQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5qZWN0LCBWaWV3RW5jYXBzdWxhdGlvbiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBNYXREaWFsb2dSZWYsIE1BVF9ESUFMT0dfREFUQSB9IGZyb20gJ0Bhbmd1bGFyL21hdGVyaWFsJztcclxuaW1wb3J0IHsgQ2RrRHJhZ0Ryb3AsIG1vdmVJdGVtSW5BcnJheSB9IGZyb20gJ0Bhbmd1bGFyL2Nkay9kcmFnLWRyb3AnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgICBzZWxlY3RvcjogJ2dyaWQtY29sdW1ucy1jb21wb25lbnQnLFxyXG4gICAgdGVtcGxhdGVVcmw6ICcuL2dyaWRDb2x1bW5zLmNvbXBvbmVudC5odG1sJyxcclxuICAgIHN0eWxlVXJsczogWycuL2dyaWRDb2x1bW5zLmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lXHJcblxyXG59KVxyXG5leHBvcnQgY2xhc3MgR3JpZENvbHVtbnNDb21wb25lbnQge1xyXG4gICAgcHVibGljIGNvbHVtbnM6IGFueVtdID0gW107XHJcbiAgICBwdWJsaWMgZGVzY3JpcHRpb246IHN0cmluZyA9ICcnO1xyXG5cclxuICAgIGNvbnN0cnVjdG9yKHByaXZhdGUgZGlhbG9nUmVmOiBNYXREaWFsb2dSZWY8R3JpZENvbHVtbnNDb21wb25lbnQ+LCBASW5qZWN0KE1BVF9ESUFMT0dfREFUQSkgcHVibGljIGRhdGEpIHtcclxuICAgICAgICB0aGlzLmNvbHVtbnMgPSBkYXRhLmNvbHVtbnMubWFwKGQgPT4gT2JqZWN0LmFzc2lnbih7fSwgZCkpO1xyXG4gICAgfVxyXG5cclxuICAgIG5nT25Jbml0KCk6IHZvaWQgeyBcclxuICAgIH1cclxuXHJcbiAgICBwdWJsaWMgc2F2ZSgpIHtcclxuICAgICAgICB0aGlzLmRpYWxvZ1JlZi5jbG9zZSh0aGlzLmNvbHVtbnMpO1xyXG4gICAgfVxyXG5cclxuICAgIHB1YmxpYyBjbG9zZSgpIHtcclxuICAgICAgICB0aGlzLmRpYWxvZ1JlZi5jbG9zZSgpO1xyXG4gICAgfVxyXG5cclxuICAgIHB1YmxpYyBkcm9wKGV2ZW50OiBDZGtEcmFnRHJvcDxzdHJpbmdbXT4pIHtcclxuICAgICAgICBtb3ZlSXRlbUluQXJyYXkodGhpcy5jb2x1bW5zLCBldmVudC5wcmV2aW91c0luZGV4LCBldmVudC5jdXJyZW50SW5kZXgpO1xyXG4gICAgfVxyXG59XHJcbiJdfQ==