@porscheinformatik/material-addons 10.2.5 → 10.3.0

package/fesm2015/porscheinformatik-material-addons.js

@@ -8,7 +8,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Title } from '@angular/platform-browser';
-import { TranslateService } from '@ngx-translate/core';
+import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { of, Subject, Subscription } from 'rxjs';
 import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
 import { map, throttleTime, switchMap, tap, startWith, takeUntil, distinctUntilChanged } from 'rxjs/operators';
@@ -20,6 +20,10 @@ import { trigger, transition, style, animate, state } from '@angular/animations'
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { SelectionModel } from '@angular/cdk/collections';
+import { v4 } from 'uuid';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { Directionality } from '@angular/cdk/bidi';
 import { CdkStepHeader, STEP_STATE, CdkStep, CdkStepper, CdkStepperModule } from '@angular/cdk/stepper';
 import { FocusMonitor } from '@angular/cdk/a11y';
@@ -1499,30 +1503,49 @@ TableModule.decorators = [
             },] }
 ];
 
+class DataTableActionType {
+}
+DataTableActionType.SINGLE = "SINGLE";
+DataTableActionType.BATCH = "BATCH";
+DataTableActionType.NONE = "NONE";
+
 class DataTableComponent {
     constructor() {
         var _a;
-        this.ACTION_COLUMN_NAME = '__action__';
+        this.ACTION_COLUMN_NAME = "__action__";
+        this.SINGLE = DataTableActionType.SINGLE;
+        this.BATCH = DataTableActionType.BATCH;
+        this.NONE = DataTableActionType.NONE;
         this.columns = [];
-        this.filterLabel = 'NOT SET';
-        this.filterPlaceholder = 'NOT SET';
+        this.filterLabel = "Filter";
+        this.filterPlaceholder = "";
+        this.noDataText = "No matching data found";
         this.pageSizeOptions = [5, 10, 15];
         this.defaultPageSize = ((_a = this.pageSizeOptions) === null || _a === void 0 ? void 0 : _a[0]) || 10;
-        this.rowActions = [];
-        this.tableActions = [];
-        this.tableAction = new EventEmitter();
-        this.rowAction = new EventEmitter();
+        this.actions = [];
         this.sortEvent = new EventEmitter();
+        this.actionEvent = new EventEmitter();
+        this.pagingEvent = new EventEmitter();
+        this.tableActions = [];
+        this.rowActions = [];
+        this.allSelected = false;
+        this.displayedDataMap = new Map();
+        this.actualDataMap = new Map();
+        this.selectionModel = new SelectionModel(true);
         this.isFilterEnabled = false;
         this.isPaginationEnabled = false;
+        this.mode = this.NONE;
+        this.isRowClickable = false;
+        this.isLoading = false;
     }
-    set displayedData(data) {
+    set tableData(data) {
         if (!this.dataSource) {
             this.dataSource = new MatTableDataSource(data);
         }
-        else {
-            this.dataSource.data = data;
-        }
+        this.createDataMapsAndSetDisplayedDataSourceData(data);
+    }
+    set loading(isLoading) {
+        this.isLoading = isLoading;
     }
     set paginationEnabled(isPaginationEnabled) {
         this.isPaginationEnabled = isPaginationEnabled;
@@ -1536,47 +1559,203 @@ class DataTableComponent {
         this.isFilterEnabled = isFilterEnabled;
         this.setFilterValue(undefined);
     }
+    set forceMode(mode) {
+        if (mode === this.SINGLE || mode === this.BATCH || mode === this.NONE) {
+            this._forceMode = mode;
+            this.mode = mode;
+            this.setActions();
+        }
+    }
     ngOnInit() {
         this.columnNames = this.columns.map(column => column.label);
-        this.isRowClickable = this.rowActions.length > 0;
-        if (this.isRowClickable) {
-            this.columnNames.unshift(this.ACTION_COLUMN_NAME);
+        this.mode = this.getTableMode();
+        this.setActions();
+        if (this.mode !== this.NONE) {
+            this.isRowClickable = true;
             this.defaultAction = this.rowActions[0];
         }
+        this.columnNames.unshift(this.ACTION_COLUMN_NAME);
     }
     ngAfterViewInit() {
         this.dataSource.paginator = this.paginator;
         this.dataSource.sort = this.sort;
     }
-    onFilter(value) {
-        this.setFilterValue(value);
+    get selectedCount() {
+        var _a;
+        return ((_a = this.selectionModel) === null || _a === void 0 ? void 0 : _a.selected) ? this.selectionModel.selected.length : 0;
+    }
+    get rowCount() {
+        var _a;
+        return ((_a = this.dataSource) === null || _a === void 0 ? void 0 : _a._pageData(this.dataSource.data)) ? this.dataSource._pageData(this.dataSource.data).length : 0;
+    }
+    getSelectedCount(actionType) {
+        const count = this.selectedCount;
+        if (actionType != this.BATCH || count < 2) {
+            return "";
+        }
+        return " (" + count + ")";
+    }
+    isDisabled(actionType) {
+        switch (actionType) {
+            case this.SINGLE:
+                return this.selectedCount != 1;
+            case this.BATCH:
+                return this.selectedCount < 1;
+            default:
+                return false;
+        }
+    }
+    onToggleSelectAll() {
+        // clear all selection first
+        this.selectionModel.clear();
+        // toggle all checkbox
+        this.allSelected = !this.allSelected;
+        if (this.allSelected) {
+            // select all rows of the current page
+            this.dataSource._pageData(this.dataSource.data).forEach((row) => {
+                const dataRow = row;
+                const rowId = "" + dataRow.rowId;
+                this.selectionModel.select(rowId);
+            });
+        }
+    }
+    isSelected(rowId) {
+        return this.selectionModel.isSelected(rowId);
+    }
+    setFilterValue(value) {
+        this.dataSource.filter = value === null || value === void 0 ? void 0 : value.trim().toLowerCase();
+    }
+    onRowCheckbox(event, row) {
+        event.stopPropagation(); // no click event on row
+        this.selectionModel.toggle(row.rowId);
     }
     onRowEvent(event, row, action = this.defaultAction) {
-        if (!!action && !this.isClickOnRowMenuIcon(event)) {
-            this.rowAction.emit(Object.assign(Object.assign({}, action), { outputRow: row }));
+        switch (this.mode) {
+            case this.BATCH:
+                this.onRowCheckbox(event, row);
+                break;
+            case this.SINGLE:
+                // emit the default action if the row (not the icon!) was clicked
+                if (!!action && !DataTableComponent.isClickOnRowMenuIcon(event)) {
+                    const selected = [];
+                    // if ID-generator is provided, return the ID, else return the ACTUAL data
+                    selected.push(this.idGenerator ? row.rowId : this.actualDataMap.get(row.rowId));
+                    this.emitTableAction(action, selected);
+                }
+                break;
+            default:
+                // do nothing if mode is NONE (or null)
+                return;
         }
     }
     onSortingEvent(sortingParams) {
         this.sortEvent.emit(sortingParams);
     }
+    onPaginationEvent(event) {
+        this.pagingEvent.emit(event);
+    }
     onTableAction(tableAction) {
         if (!!tableAction) {
-            this.tableAction.emit(tableAction);
+            const selection = [];
+            for (const selected of this.selectionModel.selected) {
+                selection.push(this.idGenerator ? selected : this.actualDataMap.get(selected));
+            }
+            tableAction.selected = selection;
+            this.actionEvent.emit(tableAction);
         }
     }
-    setFilterValue(value) {
-        this.dataSource.filter = value === null || value === void 0 ? void 0 : value.trim().toLowerCase();
+    static transformData(value, transformer, transformerParams) {
+        if (!transformer || !(transformer instanceof Function)) {
+            return value;
+        }
+        return transformer(value, transformerParams);
     }
-    isClickOnRowMenuIcon(event) {
+    static generateRowId() {
+        return v4();
+    }
+    static isClickOnRowMenuIcon(event) {
         var _a;
-        return (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.classList.contains('mat-icon');
+        return (_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.classList.contains("mat-icon");
+    }
+    emitTableAction(action, selected) {
+        const emitAction = Object.assign({}, action);
+        if (action.type !== this.NONE) {
+            emitAction.selected = [...selected];
+        }
+        this.actionEvent.emit(emitAction);
+    }
+    generateDisplayedDataElement(rowId, actualDataElement) {
+        const displayedDataElement = {};
+        displayedDataElement["rowId"] = rowId;
+        for (const column of this.columns) {
+            const actualValue = actualDataElement[column.dataPropertyName];
+            displayedDataElement[column.dataPropertyName] = DataTableComponent.transformData(actualValue, column.transformer, column.transformerParams);
+        }
+        return displayedDataElement;
+    }
+    setActions() {
+        this.rowActions = [];
+        this.tableActions = [];
+        for (const action of this.actions) {
+            if (this.mode !== action.hiddenInMode) {
+                switch (action.type) {
+                    case this.SINGLE:
+                        if (this.mode === this.SINGLE) {
+                            this.rowActions.push(action);
+                        }
+                        else {
+                            this.tableActions.push(action);
+                        }
+                        break;
+                    case this.BATCH:
+                        if (this.mode !== this.SINGLE) {
+                            this.tableActions.push(action);
+                        }
+                        break;
+                    default:
+                        this.tableActions.push(action);
+                }
+            }
+        }
+    }
+    createDataMapsAndSetDisplayedDataSourceData(data) {
+        const displayedDataList = [];
+        this.actualDataMap.clear();
+        this.displayedDataMap.clear();
+        for (const dataEntry of data) {
+            const rowId = (this.idGenerator) ? this.idGenerator(dataEntry) : DataTableComponent.generateRowId();
+            this.actualDataMap.set(rowId, dataEntry);
+            const displayedDataElement = this.generateDisplayedDataElement(rowId, dataEntry);
+            this.displayedDataMap.set(rowId, displayedDataElement);
+            displayedDataList.push(displayedDataElement);
+        }
+        this.dataSource.data = displayedDataList;
+    }
+    getTableMode() {
+        if (this._forceMode) {
+            return this._forceMode;
+        }
+        if (!this.actions) {
+            return this.NONE;
+        }
+        const distinctActionTypes = new Set();
+        for (const rowAction of this.actions) {
+            distinctActionTypes.add(rowAction.type);
+        }
+        if (distinctActionTypes.has(this.BATCH)) {
+            return this.BATCH;
+        }
+        if (distinctActionTypes.has(this.SINGLE)) {
+            return this.SINGLE;
+        }
+        return this.NONE;
     }
 }
 DataTableComponent.decorators = [
     { type: Component, args: [{
-                selector: 'mad-data-table',
-                template: "<!-- Table actions -->\n<div *ngIf=\"tableActions?.length\">\n  <mad-primary-button class=\"table-action\" *ngFor=\"let tableAction of tableActions\" (click)=\"onTableAction(tableAction)\">\n    {{ tableAction.label }}\n  </mad-primary-button>\n</div>\n\n<!-- Row action buttons -->\n<mat-menu #menu=\"matMenu\">\n  <ng-template matMenuContent let-element=\"element\">\n    <button *ngFor=\"let rowAction of rowActions\" mat-menu-item class=\"row-action\" (click)=\"onRowEvent($event, element, rowAction)\">\n      {{ rowAction.label }}\n    </button>\n  </ng-template>\n</mat-menu>\n\n<!-- Table filter -->\n<mat-form-field *ngIf=\"isFilterEnabled\">\n  <mat-label>{{ filterLabel }}</mat-label>\n  <input matInput autocomplete=\"off\" (keyup)=\"onFilter($event?.target?.value)\" placeholder=\"{{ filterPlaceholder }}\" />\n</mat-form-field>\n\n<!-- Table -->\n<div *ngIf=\"dataSource?.data?.length > 0; else noData\" class=\"mad-table\">\n  <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSortingEvent($event)\">\n    <!-- Row actions column -->\n    <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\" *ngIf=\"rowActions?.length\">\n      <th scope=\"col\" mat-header-cell *matHeaderCellDef class=\"row-action-button\"></th>\n      <td mat-cell *matCellDef=\"let element\" class=\"row-action-button\">\n        <mad-icon-button [matMenuTriggerData]=\"{ element: element }\" [matMenuTriggerFor]=\"menu\">\n          <mat-icon>more_vert</mat-icon>\n        </mad-icon-button>\n      </td>\n    </ng-container>\n    <!-- Columns with data -->\n    <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.label\">\n      <ng-container *ngIf=\"column.isSortable; else noSort\">\n        <th\n          scope=\"col\"\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header=\"{{ column.label }}\"\n          [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n          [class.text-right]=\"column.isRightAligned\"\n        >\n          {{ column.label }}\n        </th>\n      </ng-container>\n      <ng-template #noSort>\n        <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n          {{ column.label }}\n        </th>\n      </ng-template>\n      <td mat-cell *matCellDef=\"let element\" [class.text-right]=\"column.isRightAligned\">\n        {{ element[column.dataPropertyName] }}\n      </td>\n    </ng-container>\n    <tr mat-header-row *matHeaderRowDef=\"columnNames\"></tr>\n    <tr\n      mat-row\n      [class.clickable-table-row]=\"isRowClickable\"\n      (click)=\"onRowEvent($event, row)\"\n      *matRowDef=\"let row; columns: columnNames\"\n    ></tr>\n  </table>\n\n  <!-- Pagination -->\n  <mat-paginator\n    [style.display]=\"isPaginationEnabled ? 'block' : 'none'\"\n    [pageSize]=\"defaultPageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    showFirstLastButtons\n  >\n  </mat-paginator>\n</div>\n\n<!-- No data alert -->\n<ng-template #noData>\n  <div class=\"noDataText\">\n    {{ noDataText }}\n  </div>\n</ng-template>\n",
-                styles: [".text-right{padding-right:24px!important;text-align:right!important}.table-action{margin-bottom:.5em;margin-right:.5em}.row-action-button{width:10px}.noDataText{text-align:center;width:100%}.mad-table{overflow-x:auto;width:100%}"]
+                selector: "mad-data-table",
+                template: "<div class=\"mad-datatable-action-bar\">\n  <!-- Table actions: displayed before the table -->\n  <div *ngIf=\"tableActions?.length\">\n    <mad-outline-button\n      [disabled]=\"isDisabled(tableAction.type)\"\n      class=\"table-action\"\n      *ngFor=\"let tableAction of tableActions\"\n      (click)=\"onTableAction(tableAction)\">\n      {{ tableAction.label | translate }} {{ getSelectedCount(tableAction.type) }}\n    </mad-outline-button>\n  </div>\n  <!-- Table filter -->\n  <mat-form-field *ngIf=\"isFilterEnabled\">\n    <mat-label>{{ filterLabel | translate }}</mat-label>\n    <input matInput autocomplete=\"off\" (keyup)=\"setFilterValue($event?.target?.value)\"\n           placeholder=\"{{ filterPlaceholder }}\" />\n  </mat-form-field>\n</div>\n\n\n<!-- Row action menu -->\n<mat-menu #rowActionMenu=\"matMenu\">\n  <ng-template matMenuContent let-element=\"element\">\n    <button *ngFor=\"let rowAction of rowActions\" mat-menu-item class=\"row-action\"\n            (click)=\"onRowEvent($event, element, rowAction)\">\n      {{ rowAction.label | translate }}\n    </button>\n  </ng-template>\n</mat-menu>\n\n<!-- Table -->\n<div *ngIf=\"rowCount > 0; else noData\" class=\"mad-table\">\n  <div class=\"datatable-spinner-wrapper\" *ngIf=\"isLoading\">\n    <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n  </div>\n\n  <table mat-table [dataSource]=\"dataSource\" matSort (matSortChange)=\"onSortingEvent($event)\">\n    <!-- Row actions column-->\n    <ng-container [matColumnDef]=\"ACTION_COLUMN_NAME\">\n      <th scope=\"col\" mat-header-cell *matHeaderCellDef class=\"row-action-button\">\n        <!-- BATCH: master checkbox -->\n        <div *ngIf=\"mode === BATCH\" class=\"mad-datatable-checkbox-container\">\n          <mat-checkbox\n            (change)=\"onToggleSelectAll()\"\n            [checked]=\"allSelected\"\n          >\n          </mat-checkbox>\n        </div>\n        <!-- SINGLE / NONE: nothing in header row -->\n      </th>\n      <td mat-cell *matCellDef=\"let element\" class=\"row-action-button\">\n        <!-- BATCH: row checkbox -->\n        <div *ngIf=\"mode === BATCH\" class=\"mad-datatable-checkbox-container\">\n          <mat-checkbox\n            (click)=\"onRowCheckbox($event, element.rowId)\"\n            [checked]=\"isSelected(element.rowId)\"\n          >\n          </mat-checkbox>\n        </div>\n        <!-- SINGLE: row action menu icon -->\n        <mad-icon-button\n          *ngIf=\"mode === SINGLE\"\n          [matMenuTriggerData]=\"{ element: element }\" [matMenuTriggerFor]=\"rowActionMenu\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </mad-icon-button>\n        <!-- NONE: nothing -->\n      </td>\n    </ng-container>\n    <!-- Columns with data -->\n    <ng-container *ngFor=\"let column of columns\" [matColumnDef]=\"column.label\">\n      <ng-container *ngIf=\"column.isSortable; else noSort\">\n        <th\n          scope=\"col\"\n          mat-header-cell\n          *matHeaderCellDef\n          mat-sort-header=\"{{ column.label | translate}}\"\n          [arrowPosition]=\"column.isRightAligned ? 'before' : 'after'\"\n          [class.text-right]=\"column.isRightAligned\"\n        >\n          {{ column.label }}\n        </th>\n      </ng-container>\n      <ng-template #noSort>\n        <th scope=\"col\" mat-header-cell *matHeaderCellDef [class.text-right]=\"column.isRightAligned\">\n          {{ column.label }}\n        </th>\n      </ng-template>\n      <td mat-cell *matCellDef=\"let element\" [class.text-right]=\"column.isRightAligned\" [ngSwitch]=\"column.transformer\">\n        <span>\n          {{ element[column.dataPropertyName] }}\n        </span>\n      </td>\n    </ng-container>\n    <tr mat-header-row *matHeaderRowDef=\"columnNames\"></tr>\n    <tr\n      mat-row\n      [class.clickable-table-row]=\"isRowClickable\"\n      (click)=\"onRowEvent($event, row)\"\n      *matRowDef=\"let row; columns: columnNames\"\n    ></tr>\n  </table>\n\n  <!-- Pagination -->\n  <mat-paginator\n    [style.display]=\"isPaginationEnabled ? 'block' : 'none'\"\n    [pageSize]=\"defaultPageSize\"\n    [pageSizeOptions]=\"pageSizeOptions\"\n    (page)=\"onPaginationEvent($event)\"\n    showFirstLastButtons\n  >\n  </mat-paginator>\n</div>\n\n<!-- No data alert -->\n<ng-template #noData>\n  <div class=\"noDataText\">\n    <div class=\"datatable-spinner-wrapper\" *ngIf=\"isLoading\">\n      <mat-spinner [diameter]=\"50\" [strokeWidth]=\"3\"></mat-spinner>\n    </div>\n    {{ noDataText }}\n  </div>\n</ng-template>\n",
+                styles: [".text-right{padding-right:24px!important;text-align:right!important}.table-action{margin-bottom:.5em;margin-right:.5em}.row-action-button{width:10px}.noDataText{text-align:center}.mad-table,.noDataText{position:relative;width:100%}.mad-table{overflow-x:auto}.mad-datatable-action-bar{align-items:baseline;display:flex;justify-content:space-between}.mad-datatable-checkbox-container{margin-right:16px}.datatable-spinner-wrapper{align-items:center;background-color:#fff;display:flex;height:100%;justify-content:center;left:0;opacity:.8;pointer-events:unset;position:absolute;top:0;width:100%;z-index:99999}"]
             },] }
 ];
 DataTableComponent.propDecorators = {
@@ -1586,14 +1765,16 @@ DataTableComponent.propDecorators = {
     noDataText: [{ type: Input }],
     pageSizeOptions: [{ type: Input }],
     defaultPageSize: [{ type: Input }],
-    rowActions: [{ type: Input }],
-    tableActions: [{ type: Input }],
-    displayedData: [{ type: Input }],
+    actions: [{ type: Input }],
+    idGenerator: [{ type: Input }],
+    tableData: [{ type: Input }],
+    loading: [{ type: Input }],
     paginationEnabled: [{ type: Input }],
     filterEnabled: [{ type: Input }],
-    tableAction: [{ type: Output }],
-    rowAction: [{ type: Output }],
+    forceMode: [{ type: Input }],
     sortEvent: [{ type: Output }],
+    actionEvent: [{ type: Output }],
+    pagingEvent: [{ type: Output }],
     paginator: [{ type: ViewChild, args: [MatPaginator, { static: false },] }],
     sort: [{ type: ViewChild, args: [MatSort, { static: true },] }]
 };
@@ -1613,9 +1794,13 @@ DataTableModule.decorators = [
                     MatPaginatorModule,
                     MatSortModule,
                     MatTableModule,
+                    MatProgressSpinnerModule,
                     ButtonModule,
+                    TranslateModule,
+                    MatCheckboxModule,
+                    MatBadgeModule
                 ],
-                exports: [DataTableComponent],
+                exports: [DataTableComponent]
             },] }
 ];