74 batch mode (#101)

porscheinformatik · Jun 29, 2022 · a72262c · a72262c
1 parent 71577b3
commit a72262c
Show file tree

Hide file tree

Showing 35 changed files with 2,850 additions and 21,267 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
     "@angular/compiler-cli": "10.2.5",
     "@angular/language-service": "10.2.5",
     "@types/node": "^12.11.1",
+    "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^2.16.0",
     "@typescript-eslint/eslint-plugin-tslint": "^2.16.0",
     "@typescript-eslint/parser": "^2.16.0",
@@ -63,7 +64,8 @@
     "prettier": "^1.19.1",
     "scss-bundle": "^3.0.1",
     "ts-node": "~7.0.0",
-    "typescript": "~3.9.5"
+    "typescript": "~3.9.5",
+    "uuid": "8.3.2"
   },
   "optionalDependencies": {
     "@porscheinformatik/material-addons": "file:dist/material-addons"

diff --git a/projects/material-addons/src/lib/data-table/data-table-action-type.ts b/projects/material-addons/src/lib/data-table/data-table-action-type.ts
@@ -0,0 +1,5 @@
+export class DataTableActionType {
+  public static SINGLE = "SINGLE";
+  public static BATCH = "BATCH";
+  public static NONE = "NONE";
+}
diff --git a/projects/material-addons/src/lib/data-table/data-table-action.ts b/projects/material-addons/src/lib/data-table/data-table-action.ts
@@ -1,5 +1,7 @@
 export interface DataTableAction {
   label: string;
   action: string;
-  outputRow?: any;
+  type: "SINGLE" | "BATCH" | "NONE";
+  selected?: any[];
+  hiddenInMode?: string;
 }
diff --git a/projects/material-addons/src/lib/data-table/data-table-column-header.ts b/projects/material-addons/src/lib/data-table/data-table-column-header.ts
@@ -1,6 +1,8 @@
 export interface DataTableColumnHeader {
   label: string;
-  isSortable?: boolean;
   dataPropertyName: string;
+  isSortable?: boolean;
   isRightAligned?: boolean;
+  transformer?: any;
+  transformerParams?: any[];
 }
diff --git a/projects/material-addons/src/lib/data-table/data-table-row.ts b/projects/material-addons/src/lib/data-table/data-table-row.ts
@@ -0,0 +1,5 @@
+export interface DataTableRow {
+  id: string;
+  actualData: any;
+  displayedData: any;
+}
diff --git a/projects/material-addons/src/lib/data-table/data-table.component.html b/projects/material-addons/src/lib/data-table/data-table.component.html
@@ -1,35 +1,70 @@
-<!-- Table actions -->
-<div *ngIf="tableActions?.length">
-  <mad-primary-button class="table-action" *ngFor="let tableAction of tableActions" (click)="onTableAction(tableAction)">
-    {{ tableAction.label }}
-  </mad-primary-button>
+<div class="mad-datatable-action-bar">
+  <!-- Table actions: displayed before the table -->
+  <div *ngIf="tableActions?.length">
+    <mad-outline-button
+      [disabled]="isDisabled(tableAction.type)"
+      class="table-action"
+      *ngFor="let tableAction of tableActions"
+      (click)="onTableAction(tableAction)">
+      {{ tableAction.label | translate }} {{ getSelectedCount(tableAction.type) }}
+    </mad-outline-button>
+  </div>
+  <!-- Table filter -->
+  <mat-form-field *ngIf="isFilterEnabled">
+    <mat-label>{{ filterLabel | translate }}</mat-label>
+    <input matInput autocomplete="off" (keyup)="setFilterValue($event?.target?.value)"
+           placeholder="{{ filterPlaceholder }}" />
+  </mat-form-field>
 </div>
 
-<!-- Row action buttons -->
-<mat-menu #menu="matMenu">
+
+<!-- Row action menu -->
+<mat-menu #rowActionMenu="matMenu">
   <ng-template matMenuContent let-element="element">
-    <button *ngFor="let rowAction of rowActions" mat-menu-item class="row-action" (click)="onRowEvent($event, element, rowAction)">
-      {{ rowAction.label }}
+    <button *ngFor="let rowAction of rowActions" mat-menu-item class="row-action"
+            (click)="onRowEvent($event, element, rowAction)">
+      {{ rowAction.label | translate }}
     </button>
   </ng-template>
 </mat-menu>
 
-<!-- Table filter -->
-<mat-form-field *ngIf="isFilterEnabled">
-  <mat-label>{{ filterLabel }}</mat-label>
-  <input matInput autocomplete="off" (keyup)="onFilter($event?.target?.value)" placeholder="{{ filterPlaceholder }}" />
-</mat-form-field>
-
 <!-- Table -->
-<div *ngIf="dataSource?.data?.length > 0; else noData" class="mad-table">
+<div *ngIf="rowCount > 0; else noData" class="mad-table">
+  <div class="datatable-spinner-wrapper" *ngIf="isLoading">
+    <mat-spinner [diameter]="50" [strokeWidth]="3"></mat-spinner>
+  </div>
+
   <table mat-table [dataSource]="dataSource" matSort (matSortChange)="onSortingEvent($event)">
-    <!-- Row actions column -->
-    <ng-container [matColumnDef]="ACTION_COLUMN_NAME" *ngIf="rowActions?.length">
-      <th scope="col" mat-header-cell *matHeaderCellDef class="row-action-button"></th>
+    <!-- Row actions column-->
+    <ng-container [matColumnDef]="ACTION_COLUMN_NAME">
+      <th scope="col" mat-header-cell *matHeaderCellDef class="row-action-button">
+        <!-- BATCH: master checkbox -->
+        <div *ngIf="mode === BATCH" class="mad-datatable-checkbox-container">
+          <mat-checkbox
+            (change)="onToggleSelectAll()"
+            [checked]="allSelected"
+          >
+          </mat-checkbox>
+        </div>
+        <!-- SINGLE / NONE: nothing in header row -->
+      </th>
       <td mat-cell *matCellDef="let element" class="row-action-button">
-        <mad-icon-button [matMenuTriggerData]="{ element: element }" [matMenuTriggerFor]="menu">
+        <!-- BATCH: row checkbox -->
+        <div *ngIf="mode === BATCH" class="mad-datatable-checkbox-container">
+          <mat-checkbox
+            (click)="onRowCheckbox($event, element.rowId)"
+            [checked]="isSelected(element.rowId)"
+          >
+          </mat-checkbox>
+        </div>
+        <!-- SINGLE: row action menu icon -->
+        <mad-icon-button
+          *ngIf="mode === SINGLE"
+          [matMenuTriggerData]="{ element: element }" [matMenuTriggerFor]="rowActionMenu"
+        >
           <mat-icon>more_vert</mat-icon>
         </mad-icon-button>
+        <!-- NONE: nothing -->
       </td>
     </ng-container>
     <!-- Columns with data -->
@@ -39,7 +74,7 @@
           scope="col"
           mat-header-cell
           *matHeaderCellDef
-          mat-sort-header="{{ column.label }}"
+          mat-sort-header="{{ column.label | translate}}"
           [arrowPosition]="column.isRightAligned ? 'before' : 'after'"
           [class.text-right]="column.isRightAligned"
         >
@@ -51,8 +86,10 @@
           {{ column.label }}
         </th>
       </ng-template>
-      <td mat-cell *matCellDef="let element" [class.text-right]="column.isRightAligned">
-        {{ element[column.dataPropertyName] }}
+      <td mat-cell *matCellDef="let element" [class.text-right]="column.isRightAligned" [ngSwitch]="column.transformer">
+        <span>
+          {{ element[column.dataPropertyName] }}
+        </span>
       </td>
     </ng-container>
     <tr mat-header-row *matHeaderRowDef="columnNames"></tr>
@@ -69,6 +106,7 @@
     [style.display]="isPaginationEnabled ? 'block' : 'none'"
     [pageSize]="defaultPageSize"
     [pageSizeOptions]="pageSizeOptions"
+    (page)="onPaginationEvent($event)"
     showFirstLastButtons
   >
   </mat-paginator>
@@ -77,6 +115,9 @@
 <!-- No data alert -->
 <ng-template #noData>
   <div class="noDataText">
+    <div class="datatable-spinner-wrapper" *ngIf="isLoading">
+      <mat-spinner [diameter]="50" [strokeWidth]="3"></mat-spinner>
+    </div>
     {{ noDataText }}
   </div>
 </ng-template>
diff --git a/projects/material-addons/src/lib/data-table/data-table.component.scss b/projects/material-addons/src/lib/data-table/data-table.component.scss
@@ -9,15 +9,43 @@
 }
 
 .row-action-button {
+
   width: 10px;
 }
 
 .noDataText {
   width: 100%;
   text-align: center;
+  position: relative;
 }
 
 .mad-table {
   width: 100%;
   overflow-x: auto;
+  position: relative;
+}
+
+.mad-datatable-action-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.mad-datatable-checkbox-container {
+  margin-right: 16px;
+}
+
+.datatable-spinner-wrapper {
+  background-color: white;
+  opacity: .8;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 99999;
+  pointer-events: unset;
 }