From 5973631a1d554b914a8a036cd7116c9d9f7f4210 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Mon, 27 Sep 2021 23:16:51 +0300
Subject: [PATCH] Disabled workflow items

---
 src/lib/listing/workflow/workflow.component.html |  3 ++-
 src/lib/listing/workflow/workflow.component.scss |  5 +++++
 src/lib/listing/workflow/workflow.component.ts   | 15 +++++++++++++--
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/lib/listing/workflow/workflow.component.html b/src/lib/listing/workflow/workflow.component.html
index 62f195c..45b39a4 100644
--- a/src/lib/listing/workflow/workflow.component.html
+++ b/src/lib/listing/workflow/workflow.component.html
@@ -20,7 +20,8 @@
             [id]="column.key"
             cdkDropList cdkDropListSortingDisabled>
             <div (cdkDragEnded)="stopDragging()" (cdkDragStarted)="startDragging(column)" *ngFor="let entity of column.entities"
-                 [cdkDragData]="entity" [style.--height]="itemHeight" cdkDrag>
+                 [cdkDragData]="entity" [ngClass]="getItemClasses(entity)" [style.--height]="itemHeight" cdkDrag
+            >
                 <div *cdkDragPlaceholder [style.--height]="itemHeight"></div>
                 <ng-container *ngTemplateOutlet="itemTemplate; context: { entity: entity }"></ng-container>
             </div>
diff --git a/src/lib/listing/workflow/workflow.component.scss b/src/lib/listing/workflow/workflow.component.scss
index c363708..cb6dfb0 100644
--- a/src/lib/listing/workflow/workflow.component.scss
+++ b/src/lib/listing/workflow/workflow.component.scss
@@ -86,6 +86,11 @@
         margin-bottom: 8px;
     }
 
+    &.disabled {
+        background-color: var(--iqser-grey-6);
+        color: var(--iqser-disabled);
+    }
+
     &:hover {
         background-color: var(--iqser-grey-6);
         box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
diff --git a/src/lib/listing/workflow/workflow.component.ts b/src/lib/listing/workflow/workflow.component.ts
index 6d397b1..695e8d5 100644
--- a/src/lib/listing/workflow/workflow.component.ts
+++ b/src/lib/listing/workflow/workflow.component.ts
@@ -30,6 +30,7 @@ export class WorkflowComponent<T extends Listable, K extends string> implements
     @Input() headerTemplate?: TemplateRef<unknown>;
     @Input() @Required() itemTemplate!: TemplateRef<T>;
     @Input() @Required() config!: WorkflowConfig<T, K>;
+    @Input() itemClasses?: { [key: string]: (e: T) => boolean };
 
     dragging = false;
     sourceColumn?: WorkflowColumn<T, K>;
@@ -54,6 +55,16 @@ export class WorkflowComponent<T extends Listable, K extends string> implements
         return this.listingComponent.tableHeaderLabel;
     }
 
+    getItemClasses(entity: T): { [key: string]: boolean } {
+        const classes: { [key: string]: boolean } = {};
+        for (const key in this.itemClasses) {
+            if (Object.prototype.hasOwnProperty.call(this.itemClasses, key)) {
+                classes[key] = this.itemClasses[key](entity);
+            }
+        }
+        return classes;
+    }
+
     async move(event: CdkDragDrop<(T | number)[]>): Promise<void> {
         if (event.previousContainer !== event.container) {
             const column = this._getColumnByKey((<unknown>event.container.id) as K);
@@ -69,12 +80,12 @@ export class WorkflowComponent<T extends Listable, K extends string> implements
         return (item: CdkDrag<T>) => column.enterPredicate(item.data);
     }
 
-    startDragging(column: WorkflowColumn<T, K>) {
+    startDragging(column: WorkflowColumn<T, K>): void {
         this.dragging = true;
         this.sourceColumn = column;
     }
 
-    stopDragging() {
+    stopDragging(): void {
         this.dragging = false;
         this.sourceColumn = undefined;
     }