From a82a08cd89e33325a789f5b433cd80adc8aa5e59 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Thu, 9 Dec 2021 16:24:05 +0200
Subject: [PATCH] Fixed workflow item width when dragging

---
 .../listing/workflow/workflow.component.html  | 62 ++++++++++---------
 1 file changed, 34 insertions(+), 28 deletions(-)

diff --git a/src/lib/listing/workflow/workflow.component.html b/src/lib/listing/workflow/workflow.component.html
index 00b74fd..58c087e 100644
--- a/src/lib/listing/workflow/workflow.component.html
+++ b/src/lib/listing/workflow/workflow.component.html
@@ -1,7 +1,4 @@
-<iqser-table-header
-    [tableHeaderLabel]="tableHeaderLabel"
-    listingMode="workflow"
->
+<iqser-table-header [tableHeaderLabel]="tableHeaderLabel" listingMode="workflow">
     <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
 </iqser-table-header>
 
@@ -15,14 +12,20 @@
     [text]="noDataText"
 ></iqser-empty-state>
 
-<div *ngIf="(entitiesService.noData$ | async) === false && (draggingEntities$ | async) as draggingEntities" cdkDropListGroup
-     class="columns-wrapper">
-    <div *ngFor="let column of config.columns" [class.dragging]="dragging"
-         [class.list-can-receive]="isReceiving(column)"
-         [class.list-dragging]="isDragging(column)"
-         [class.list-source]="isSource(column)"
-         [style.--color]="column.color"
-         class="column">
+<div
+    *ngIf="(entitiesService.noData$ | async) === false && (draggingEntities$ | async) as draggingEntities"
+    cdkDropListGroup
+    class="columns-wrapper"
+>
+    <div
+        *ngFor="let column of config.columns"
+        [class.dragging]="dragging"
+        [class.list-can-receive]="isReceiving(column)"
+        [class.list-dragging]="isDragging(column)"
+        [class.list-source]="isSource(column)"
+        [style.--color]="column.color"
+        class="column"
+    >
         <iqser-column-header [(selectionColumn)]="selectionColumn" [bulkActions]="bulkActions" [column]="column"></iqser-column-header>
         <div
             (cdkDropListDropped)="move($event)"
@@ -30,36 +33,39 @@
             [cdkDropListData]="entities"
             [cdkDropListEnterPredicate]="canMoveTo(column)"
             [id]="column.key"
-            cdkDropList cdkDropListSortingDisabled>
-            <div (cdkDragEnded)="stopDragging()" (cdkDragStarted)="startDragging(column, $event)"
-                 (click)="selectionColumn === column && listingService.select(entity)"
-                 *ngFor="let entity of entities" [cdkDragData]="entity"
-                 [class.no-border]="dragging && draggingEntities.includes(entity)"
-                 [class.selected]="all[entity.id].isSelected$ | async"
-                 [ngClass]="all[entity.id].classes$ | async" cdkDrag
+            cdkDropList
+            cdkDropListSortingDisabled
+        >
+            <div
+                (cdkDragEnded)="stopDragging()"
+                (cdkDragStarted)="startDragging(column, $event)"
+                (click)="selectionColumn === column && listingService.select(entity)"
+                *ngFor="let entity of entities"
+                [cdkDragData]="entity"
+                [class.no-border]="dragging && draggingEntities.includes(entity)"
+                [class.selected]="all[entity.id].isSelected$ | async"
+                [ngClass]="all[entity.id].classes$ | async"
+                cdkDrag
             >
                 <ng-container *ngIf="!draggingEntities.includes(entity)">
-                    <ng-container *ngTemplateOutlet="itemTemplate; context: { entity: entity }">
-                    </ng-container>
+                    <ng-container *ngTemplateOutlet="itemTemplate; context: { entity: entity }"></ng-container>
                 </ng-container>
 
                 <div *cdkDragPlaceholder>
-                    <div *ngFor="let e of draggingEntities" [style.min-height]="itemHeight + 'px'"
-                         class="placeholder"></div>
+                    <div *ngFor="let e of draggingEntities" [style.min-height]="itemHeight + 'px'" class="placeholder"></div>
                 </div>
 
                 <div *cdkDragPreview>
                     <ng-container *ngFor="let e of draggingEntities">
-                        <div [class.selected]="all[e.id].isSelected$ | async"
-                             [ngClass]="all[e.id].classes$ | async"
-                             [style.max-width]="itemWidth + 'px'"
+                        <div
+                            [class.selected]="all[e.id].isSelected$ | async"
+                            [ngClass]="all[e.id].classes$ | async"
+                            [style.width]="itemWidth + 'px'"
                         >
                             <ng-container *ngTemplateOutlet="itemTemplate; context: { entity: e }"></ng-container>
                         </div>
-
                     </ng-container>
                 </div>
-
             </div>
             <div (click)="addElement.emit()" *ngIf="column.key === addElementColumn" class="add-btn">
                 <mat-icon [svgIcon]="addElementIcon"></mat-icon>