sp-grid
Version:
<div align="center"> <h1>sp-grid</h1>
292 lines (285 loc) • 23.2 kB
JavaScript
import { __decorate } from 'tslib';
import { EventEmitter, ViewChild, Input, Output, Component, NgModule } from '@angular/core';
import { MatSort, MatSortModule } from '@angular/material/sort';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { MatTableDataSource, MatTableModule } from '@angular/material/table';
import { CommonModule } from '@angular/common';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { ClickOutsideModule } from 'ng-click-outside';
import { MatButtonModule } from '@angular/material/button';
import { FormsModule } from '@angular/forms';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
class SettingsVM {
constructor() {
this.expandable = false;
this.paginable = false;
this.pageSize = 5;
this.pageSizeOptions = [5, 10, 20, 50];
this.theme = "default";
}
}
let SpGridComponent = class SpGridComponent {
constructor() {
this.settings = new SettingsVM();
//output
this.rowClickEmit = new EventEmitter;
this.updatedRow = new EventEmitter;
this.getDetails = new EventEmitter();
this.sortEvent = new EventEmitter();
this.pageEvent = new EventEmitter();
//private
this.clickedCol = false;
}
ngOnInit() {
}
ngOnChanges(changes) {
if (changes && changes.settings) {
this._setColor();
}
if (changes && changes.colDef) {
if (this.settings.expandable)
this.colDef.splice(0, 0, ({
key: 'expand',
label: '',
sortable: false,
template: this.expandTemplate
}));
}
if (changes && changes.data) {
//set colums to display
this.displayedColumns = this.colDef.map((col) => {
return col['key'];
});
//set dataSopurce
this.dataSource = new MatTableDataSource(this.data);
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
}
if (changes && changes.dataExpanded) {
if (this.dataExpanded && this.dataExpanded.length > 0) {
//set colums to display
this.displayedColumnsExpanded = this.colDefExpanded.map((col) => {
return col['key'];
});
}
;
this.dataSourceExpanded = this.dataExpanded;
this.expandedElement = this.clickedElement;
}
;
}
sortData(sort) {
const data = this.data.slice();
if (!sort.active || sort.direction === '') {
return;
}
this.sortEvent.emit(sort);
}
expandClick(element) {
this.dataSourceExpanded = [];
if (this.expandedElement == element) {
this.expandedElement = "";
}
else {
this.clickedElement = element;
//emit
this.getDetails.emit(element);
}
}
clickCol(col, element) {
//set clicked col
this.clickedCol = true;
//reset all editing
this.dataSource.data.forEach((cc) => {
cc.isEditingCol = "";
});
//set specific editing field
if (col.editable) {
element.isEditingCol = col.key;
element.editValue = element[col.key];
switch (col.inputType) {
case 'text':
this.editingTemplate = this.inputTextTemplate;
break;
case 'select':
this.editingTemplate = this.selectTemplate;
break;
case 'date':
this.editingTemplate = this.datePickerTemplate;
break;
default:
break;
}
}
}
setDate(element, evt) {
element.editValue = evt.value;
}
removeEditing(element) {
element.isEditingCol = "";
}
saveEditing(element, key) {
element[key] = element.editValue;
this.updatedRow.emit(element);
element.isEditingCol = "";
}
page(evt) {
this.pageEvent.emit(evt);
}
_setColor() {
//setting default theme
if (this.settings.theme) {
switch (this.settings.theme) {
case 'green':
document.documentElement.style.setProperty('--accent-color', "#009500");
document.documentElement.style.setProperty('--border-color', "#B4BFCC");
document.documentElement.style.setProperty('--title-color', "white");
document.documentElement.style.setProperty('--title-background', "#00C300");
document.documentElement.style.setProperty('--light-background', "rgb(237, 237, 237)");
document.documentElement.style.setProperty('--hover-color', "#B4BFCC");
break;
case 'dark':
document.documentElement.style.setProperty('--accent-color', "#88629A");
document.documentElement.style.setProperty('--border-color', "#B4BFCC");
document.documentElement.style.setProperty('--title-color', "white");
document.documentElement.style.setProperty('--title-background', "#222423");
document.documentElement.style.setProperty('--light-background', "rgb(237, 237, 237)");
document.documentElement.style.setProperty('--hover-color', "#B4BFCC");
break;
case 'gray':
document.documentElement.style.setProperty('--accent-color', "#5E3C4C");
document.documentElement.style.setProperty('--border-color', "#B4BFCC");
document.documentElement.style.setProperty('--title-color', "white");
document.documentElement.style.setProperty('--title-background', "#C9C7B0");
document.documentElement.style.setProperty('--light-background', "rgb(237, 237, 237)");
document.documentElement.style.setProperty('--hover-color', "#B4BFCC");
break;
default:
document.documentElement.style.setProperty('--accent-color', "#22406d");
document.documentElement.style.setProperty('--border-color', "#B4BFCC");
document.documentElement.style.setProperty('--title-color', "white");
document.documentElement.style.setProperty('--title-background', "#47618E");
document.documentElement.style.setProperty('--light-background', "rgb(237, 237, 237)");
document.documentElement.style.setProperty('--hover-color', "#B4BFCC");
break;
}
}
//setting custom color
if (this.settings.colorTitleBackground)
document.documentElement.style.setProperty('--title-background', this.settings.colorTitleBackground);
if (this.settings.colorLightBackground)
document.documentElement.style.setProperty('--light-background', this.settings.colorLightBackground);
if (this.settings.colorAccent)
document.documentElement.style.setProperty('--accent-color', this.settings.colorAccent);
if (this.settings.colorBorder)
document.documentElement.style.setProperty('--border-color', this.settings.colorBorder);
if (this.settings.colorHover)
document.documentElement.style.setProperty('--hover-color', this.settings.colorHover);
if (this.settings.colorTitle)
document.documentElement.style.setProperty('--title-color', this.settings.colorTitle);
}
};
__decorate([
ViewChild('percTemplate', { static: true })
], SpGridComponent.prototype, "percTemplate", void 0);
__decorate([
ViewChild('currencyTemplate', { static: true })
], SpGridComponent.prototype, "currencyTemplate", void 0);
__decorate([
ViewChild('expandTemplate', { static: true })
], SpGridComponent.prototype, "expandTemplate", void 0);
__decorate([
ViewChild('inputTextTemplate', { static: true })
], SpGridComponent.prototype, "inputTextTemplate", void 0);
__decorate([
ViewChild('selectTemplate', { static: true })
], SpGridComponent.prototype, "selectTemplate", void 0);
__decorate([
ViewChild('datePickerTemplate', { static: true })
], SpGridComponent.prototype, "datePickerTemplate", void 0);
__decorate([
ViewChild(MatPaginator, { static: true })
], SpGridComponent.prototype, "paginator", void 0);
__decorate([
ViewChild(MatSort, { static: true })
], SpGridComponent.prototype, "sort", void 0);
__decorate([
Input()
], SpGridComponent.prototype, "data", void 0);
__decorate([
Input()
], SpGridComponent.prototype, "colDef", void 0);
__decorate([
Input()
], SpGridComponent.prototype, "dataExpanded", void 0);
__decorate([
Input()
], SpGridComponent.prototype, "colDefExpanded", void 0);
__decorate([
Input()
], SpGridComponent.prototype, "settings", void 0);
__decorate([
Output()
], SpGridComponent.prototype, "rowClickEmit", void 0);
__decorate([
Output()
], SpGridComponent.prototype, "updatedRow", void 0);
__decorate([
Output()
], SpGridComponent.prototype, "getDetails", void 0);
__decorate([
Output()
], SpGridComponent.prototype, "sortEvent", void 0);
__decorate([
Output()
], SpGridComponent.prototype, "pageEvent", void 0);
SpGridComponent = __decorate([
Component({
selector: 'app-sp-grid',
template: "<table multiTemplateDataRows mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"sortData($event)\"\r\n class=\"data-table-custom\">\r\n\r\n <ng-container [matColumnDef]=\"col?.key\" *ngFor=\"let col of colDef; let i = index\">\r\n\r\n\r\n <th [ngStyle]=\"{'width': col?.width ? col.width : 'auto'}\" class=\"fade-in\" mat-header-cell *matHeaderCellDef mat-sort-header [disabled]=\"!col?.sortable\">{{col?.label}}</th>\r\n <td mat-cell *matCellDef=\"let element\" [ngClass]=\"{'editable-cell': col?.editable}\">\r\n <div class=\"edit-icon\" *ngIf=\"element.isEditingCol!==col.key\" (click)=\"clickCol(col,element)\"> <i class=\"material-icons\">edit</i> </div>\r\n\r\n <div *ngIf=\"!col?.template && !col?.defaultTemplate\">\r\n <span [hidden]=\"element.isEditingCol==col.key\" (click)=\"clickCol(col,element)\">\r\n <span *ngIf=\"col?.type=='date'\">{{element[col?.key] | date: col?.formatDate}}</span>\r\n <span *ngIf=\"col?.type=='number'\">{{element[col?.key] | number: col?.formatNumber}}</span>\r\n <span *ngIf=\"col?.type!=='date' && col?.type!=='number'\">{{element[col?.key]}}</span>\r\n </span>\r\n <div *ngIf=\"element.isEditingCol==col.key\">\r\n <ng-container\r\n *ngTemplateOutlet=\"editingTemplate;context:{$implicit: element, col: col.key, options: col?.optionsSelect}\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <!-- Perc Template -->\r\n <div *ngIf=\" col?.defaultTemplate=='percTemplate'\">\r\n <ng-container *ngTemplateOutlet=\" percTemplate;context:{$implicit: element[col?.key]}\">\r\n </ng-container>\r\n </div>\r\n <!-- Currency template -->\r\n <div *ngIf=\"col?.defaultTemplate=='currencyTemplate'\">\r\n <ng-container\r\n *ngTemplateOutlet=\"currencyTemplate;context:{$implicit: element[col?.key], symbol: col?.currency}\">\r\n </ng-container>\r\n </div>\r\n <!-- Expand template -->\r\n <div *ngIf=\"col?.template && col?.template==expandTemplate\">\r\n <ng-container *ngTemplateOutlet=\"col?.template;context:{$implicit: element}\">\r\n </ng-container>\r\n </div>\r\n <!-- Template custom -->\r\n <div *ngIf=\"col?.template && col?.template!==expandTemplate\">\r\n <ng-container\r\n *ngTemplateOutlet=\"col?.template;context:{$implicit: element[col?.key], secondVal: element[col?.secondVal], thirdVal: element[col?.thirdVal]}\">\r\n </ng-container>\r\n </div>\r\n </td>\r\n </ng-container>\r\n <!-- Expanded details -->\r\n <ng-container matColumnDef=\"expandedDetail\">\r\n <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"displayedColumns.length\">\r\n <div class=\"example-element-detail\" [@detailExpand]=\"element == expandedElement ? 'expanded' : 'collapsed'\">\r\n <table mat-table [dataSource]=\"dataSourceExpanded\" class=\"data-table-custom inner-after-open-table\">\r\n <ng-container [matColumnDef]=\"colExpanded?.key\"\r\n *ngFor=\"let colExpanded of colDefExpanded; let iExpanded = index\">\r\n <th mat-header-cell *matHeaderCellDef>\r\n {{colExpanded?.label}}</th>\r\n <td mat-cell class=\"cell-expanded\" *matCellDef=\"let element\">\r\n <div *ngIf=\"!colExpanded?.template && !colExpanded?.defaultTemplate\">\r\n <span [hidden]=\"element.isEditingCol==colExpanded.key\" (click)=\"clickCol(colExpanded,element)\">\r\n <span\r\n *ngIf=\"colExpanded?.type=='date'\">{{element[colExpanded?.key] | date: colExpanded?.formatDate}}</span>\r\n <span *ngIf=\"colExpanded?.type!=='date'\">{{element[colExpanded?.key]}}</span>\r\n </span>\r\n <div *ngIf=\"element.isEditingCol==colExpanded.key\">\r\n <ng-container\r\n *ngTemplateOutlet=\"editingTemplate;context:{$implicit: element, col: colExpanded.key, options: colExpanded?.optionsSelect}\">\r\n </ng-container>\r\n </div>\r\n </div>\r\n <!-- Perc Template -->\r\n <div *ngIf=\" colExpanded?.defaultTemplate=='percTemplate'\">\r\n <ng-container *ngTemplateOutlet=\" percTemplate;context:{$implicit: element[colExpanded?.key]}\">\r\n </ng-container>\r\n </div>\r\n <!-- Currency template -->\r\n <div *ngIf=\"colExpanded?.defaultTemplate=='currencyTemplate'\">\r\n <ng-container\r\n *ngTemplateOutlet=\"currencyTemplate;context:{$implicit: element[colExpanded?.key], symbol: colExpanded?.currency}\">\r\n </ng-container>\r\n </div>\r\n <!-- Template custom -->\r\n <div *ngIf=\"colExpanded?.template\">\r\n <ng-container\r\n *ngTemplateOutlet=\"colExpanded?.template;context:{$implicit: element[colExpanded?.key], secondVal: element[colExpanded?.secondVal], thirdVal: element[colExpanded?.thirdVal]}\">\r\n </ng-container>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumnsExpanded\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: displayedColumnsExpanded;\"></tr>\r\n </table>\r\n </div>\r\n </td>\r\n </ng-container>\r\n\r\n <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\r\n <tr mat-row *matRowDef=\"let element; columns: displayedColumns;\"\r\n [ngClass]=\"{'expandable-row': settings.expandable}\" [class.example-expanded-row]=\"expandedElement === element\"></tr>\r\n <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']\" class=\"example-detail-row\"></tr>\r\n</table>\r\n<div [hidden]=\"!settings.paginable\">\r\n <mat-paginator (page)=\"page($event)\" [pageSizeOptions]=\"settings.pageSizeOptions\" [pageSize]=\"settings.pageSize\">\r\n </mat-paginator>\r\n</div>\r\n\r\n<ng-template #percTemplate let-value>\r\n {{value | number}} %\r\n</ng-template>\r\n\r\n<ng-template #numberTemplate let-value>\r\n {{value | number}}\r\n</ng-template>\r\n\r\n<ng-template #currencyTemplate let-value let-symbol=\"symbol\">\r\n {{value | number}} {{symbol}}\r\n</ng-template>\r\n\r\n<ng-template #expandTemplate let-value>\r\n <div class=\"master-detail-button\">\r\n <div (click)=\"expandClick(value)\">+</div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #inputTextTemplate let-value let-key=\"col\">\r\n <div class=\"wrap-editor fade-in\">\r\n <div><input class=\"custom-editing-item\" type=\"text\" [(ngModel)]=\"value.editValue\"></div>\r\n <div><button class=\"save-button\" mat-button (click)=\"saveEditing(value,key)\">Save</button></div>\r\n <div> <button class=\"save-button\" mat-button (click)=\"removeEditing(value)\">Undo</button> </div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #selectTemplate let-value let-key=\"col\" let-optionsList=\"options\">\r\n <div class=\"wrap-editor fade-in\">\r\n <select [(ngModel)]=\"value.editValue\" class=\"custom-editing-item\">\r\n <option *ngFor=\"let opt of optionsList\" [value]=\"opt\">{{opt}}</option>\r\n </select><br>\r\n <button class=\"save-button\" mat-button (click)=\"saveEditing(value,key)\">Save</button>\r\n <button class=\"save-button\" mat-button (click)=\"removeEditing(value)\">Undo</button>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #datePickerTemplate let-value let-key=\"col\">\r\n <div class=\"wrap-editor fade-in\">\r\n\r\n <input class=\"custom-editing-item\" matInput [matDatepicker]=\"picker\" placeholder=\"Date\"\r\n (dateChange)=\"setDate(value, $event)\">\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n <br>\r\n <button class=\"save-button\" mat-button (click)=\"saveEditing(value,key)\">Save</button>\r\n <button class=\"save-button\" mat-button (click)=\"removeEditing(value)\">Undo</button>\r\n </div>\r\n</ng-template>\r\n",
animations: [
trigger('detailExpand', [
state('collapsed', style({ height: '0px', minHeight: '0' })),
state('expanded', style({ height: '*' })),
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
]),
],
styles: ["@charset \"UTF-8\";@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);@import url(https://fonts.googleapis.com/icon?family=Material+Icons);.fade-in{animation:1s fadein;-moz-animation:1s fadein;-webkit-animation:1s fadein;-o-animation:1s fadein}@-webkit-keyframes fadein{from{opacity:0}to{opacity:1}}@keyframes fadein{from{opacity:0}to{opacity:1}}input,select,td,tr{transition:.3s}.data-table-custom{width:100%;font-family:\"Source Sans Pro\",sans-serif}.data-table-custom tr.mat-header-row,.data-table-custom tr.mat-row{padding:0}.wrap-editor input,.wrap-editor select{font-family:\"Source Sans Pro\",sans-serif;margin-right:10px;outline:0!important;margin-top:0!important;border:0;line-height:25px;background:rgba(0,0,0,.1);padding:0 10px;border-radius:40px}.wrap-editor input:focus,.wrap-editor select:focus{outline:0;background:rgba(0,0,0,.2)}tr.example-detail-row{height:0}.example-element-detail{overflow:hidden;display:flex}.example-element-detail .mat-tab-group{width:100%}.example-element-detail ::ng-deep .mat-tab-body-content{height:auto}.example-element-diagram{min-width:80px;border:2px solid #000;padding:8px;font-weight:lighter;margin:8px 0;height:104px}.example-element-symbol{font-weight:700;font-size:40px;line-height:normal}.example-element-description{padding:16px}.example-element-description-attribution{opacity:.5}.ng-trigger{margin-top:0!important}.mat-column-expandedDetail{padding:0!important}.expandable-row{cursor:pointer}.example-expanded-row{background-color:var(--accent-color);box-shadow:0 3px 3px rgba(0,0,0,.3);mix-blend-mode:multiply}.example-expanded-row .mat-cell{color:#fff;border-left:none;border-bottom:0!important;cursor:default}.example-detail-row .mat-cell{border-bottom:0}.example-detail-row .cell-expanded{border-bottom:1px solid var(--border-color)}.inner-after-open-table{padding:12px;background:var(--light-background);box-shadow:none!important}.inner-after-open-table td:last-child{border-right:1px solid rgba(0,0,0,.12)!important;border-bottom:1px solid var(--border-color)}.inner-after-open-table .table-title{padding:0;text-align:center}.inner-after-open-table tr{background:#fff}.inner-after-open-table tr:hover{background:var(--hover-color)}.first-layer-row{box-shadow:2px 2px 2px #000}.mat-column-arrow{padding:10px 16px!important;text-align:center}.mat-column-arrow::after{font-family:\"Font Awesome 5 Free\";font-weight:900;content:\"\uF054\";font-style:normal;font-variant:normal;text-rendering:auto;-webkit-font-smoothing:antialiased}th.mat-column-arrow::after{display:none}.example-expanded-row .mat-column-arrow::after{font-family:\"Font Awesome 5 Free\";font-weight:900;content:\"\uF078\";font-style:normal;font-variant:normal;text-rendering:auto;-webkit-font-smoothing:antialiased}td.mat-cell{border-bottom:.5px solid var(--border-color);border-bottom-width:.5px}td.mat-cell:last-of-type.mat-column-expand{border-bottom:1px solid var(--border-color)}th.mat-header-cell{border-bottom-color:var(--border-color);background-color:var(--title-background);text-transform:uppercase;color:var(--title-color);letter-spacing:1px}::ng-deep button.mat-sort-header-button{color:var(--title-color);letter-spacing:1px;text-transform:uppercase;font-weight:700}.custom-editing-item{float:left}.save-button{background-color:var(--title-background);line-height:25px;border-radius:40px;margin-right:5px;font-size:10px;font-weight:500;text-transform:uppercase;float:left;color:var(--title-color)}.wrap-editor{display:flex;align-items:center}.edit-icon{display:none;float:left;padding:2px}.edit-icon i{font-size:14px;line-height:1;color:var(--title-background)}.editable-cell{cursor:pointer}.editable-cell .edit-icon{display:flex!important}"]
})
], SpGridComponent);
let SpGridModule = class SpGridModule {
};
SpGridModule = __decorate([
NgModule({
declarations: [
SpGridComponent
],
imports: [
CommonModule,
MatTableModule,
MatSortModule,
MatCheckboxModule,
MatButtonModule,
ClickOutsideModule,
FormsModule,
MatDatepickerModule,
MatNativeDateModule,
MatPaginatorModule
],
providers: [
MatDatepickerModule,
],
exports: [
SpGridComponent
]
})
], SpGridModule);
class ColumnDefinition {
}
/**
* Generated bundle index. Do not edit.
*/
export { ColumnDefinition, SettingsVM, SpGridModule, SpGridComponent as ɵa };
//# sourceMappingURL=sp-grid.js.map