From afba284dc5dd74d2d9f8ca497c25394a296d9cca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Fri, 24 Sep 2021 23:24:45 +0300
Subject: [PATCH] Fixed some style issues

---
 .../listing/workflow/workflow.component.html  | 22 +++++++------
 .../listing/workflow/workflow.component.scss  | 28 ++++++++++------
 .../listing/workflow/workflow.component.ts    | 32 +++++++++++++++++--
 3 files changed, 61 insertions(+), 21 deletions(-)

diff --git a/src/lib/listing/workflow/workflow.component.html b/src/lib/listing/workflow/workflow.component.html
index 99ad25c..62f195c 100644
--- a/src/lib/listing/workflow/workflow.component.html
+++ b/src/lib/listing/workflow/workflow.component.html
@@ -6,18 +6,22 @@
 </iqser-table-header>
 
 <div cdkDropListGroup class="columns-wrapper">
-    <div (cdkDropListDropped)="move($event)" *ngFor="let column of config.columns"
-         [cdkDropListData]="column.entities"
-         [cdkDropListEnterPredicate]="canMoveTo(column)"
-         [class.dragging]="dragging"
-         [id]="column.key"
+    <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"
-         cdkDropList cdkDropListSortingDisabled>
+         class="column">
         <div class="heading">{{ column.label | translate }} ({{column.entities.length}})</div>
-        <div class="list">
-            <div (cdkDragEnded)="dragging = false" (cdkDragStarted)="dragging = true" *ngFor="let entity of column.entities"
+        <div
+            (cdkDropListDropped)="move($event)"
+            [cdkDropListData]="column.entities"
+            [cdkDropListEnterPredicate]="canMoveTo(column)"
+            [id]="column.key"
+            cdkDropList cdkDropListSortingDisabled>
+            <div (cdkDragEnded)="stopDragging()" (cdkDragStarted)="startDragging(column)" *ngFor="let entity of column.entities"
                  [cdkDragData]="entity" [style.--height]="itemHeight" cdkDrag>
-                <div *cdkDragPlaceholder [style.--height]="itemHeight" class="placeholder"></div>
+                <div *cdkDragPlaceholder [style.--height]="itemHeight"></div>
                 <ng-container *ngTemplateOutlet="itemTemplate; context: { entity: entity }"></ng-container>
             </div>
         </div>
diff --git a/src/lib/listing/workflow/workflow.component.scss b/src/lib/listing/workflow/workflow.component.scss
index e1b37c1..dd25803 100644
--- a/src/lib/listing/workflow/workflow.component.scss
+++ b/src/lib/listing/workflow/workflow.component.scss
@@ -11,7 +11,7 @@
     padding: 10px;
     height: calc(100% - 70px);
 
-    > .cdk-drop-list {
+    > .column {
         display: flex;
         flex-direction: column;
         flex: 1;
@@ -41,19 +41,16 @@
             margin-bottom: 16px;
         }
 
-        > .list {
-            overflow-y: auto;
-            @include no-scroll-bar;
-            min-height: calc(100% - 36px);
-
-        }
-
         &.dragging {
             .cdk-drag {
                 pointer-events: none;
             }
 
-            &:not(.cdk-drop-list-receiving):not(.cdk-drop-list-dragging) {
+            &.list-dragging:not(.list-source) {
+                box-shadow: inset 0 0 0 2px var(--color);
+            }
+
+            &:not(.list-can-receive):not(.list-dragging) {
                 background: repeating-linear-gradient(
                         -45deg,
                         $separator,
@@ -71,19 +68,30 @@
     }
 }
 
+
+.cdk-drop-list {
+    overflow-y: auto;
+    @include no-scroll-bar;
+    min-height: calc(100% - 36px);
+}
+
 .cdk-drag {
     background-color: $white;
     transition: background-color 0.2s, box-shadow 0.2s;
     border-radius: 8px;
     margin: 0 8px 4px 8px;
 
+    &:last-child {
+        margin-bottom: 8px;
+    }
+
     &:hover {
         background-color: $grey-6;
         box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
     }
 }
 
-.placeholder {
+.cdk-drag-placeholder {
     border: 1px dashed $grey-5;
     border-radius: 8px;
     min-height: var(--height);
diff --git a/src/lib/listing/workflow/workflow.component.ts b/src/lib/listing/workflow/workflow.component.ts
index faad148..6d397b1 100644
--- a/src/lib/listing/workflow/workflow.component.ts
+++ b/src/lib/listing/workflow/workflow.component.ts
@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, forwardRef, Inject, Input, OnInit, TemplateRef } from '@angular/core';
+import { ChangeDetectionStrategy, Component, forwardRef, Inject, Input, OnInit, QueryList, TemplateRef, ViewChildren } from '@angular/core';
 import { ListingComponent } from '../listing-component.directive';
 import { Listable, ListingModes } from '../models';
-import { CdkDrag, CdkDragDrop } from '@angular/cdk/drag-drop';
+import { CdkDrag, CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop';
 import { Required } from '../../utils';
 import { LoadingService } from '../../loading';
 
@@ -32,6 +32,8 @@ export class WorkflowComponent<T extends Listable, K extends string> implements
     @Input() @Required() config!: WorkflowConfig<T, K>;
 
     dragging = false;
+    sourceColumn?: WorkflowColumn<T, K>;
+    @ViewChildren(CdkDropList) private readonly _dropLists!: QueryList<CdkDropList>;
 
     constructor(
         @Inject(forwardRef(() => ListingComponent)) private _parent: ListingComponent<T>,
@@ -67,6 +69,32 @@ export class WorkflowComponent<T extends Listable, K extends string> implements
         return (item: CdkDrag<T>) => column.enterPredicate(item.data);
     }
 
+    startDragging(column: WorkflowColumn<T, K>) {
+        this.dragging = true;
+        this.sourceColumn = column;
+    }
+
+    stopDragging() {
+        this.dragging = false;
+        this.sourceColumn = undefined;
+    }
+
+    isSource(column: WorkflowColumn<T, K>): boolean {
+        return this.sourceColumn === column;
+    }
+
+    isDragging(column: WorkflowColumn<T, K>): boolean {
+        return !!this._getListById(column.key)?._dropListRef.isDragging();
+    }
+
+    isReceiving(column: WorkflowColumn<T, K>): boolean {
+        return !!this._getListById(column.key)?._dropListRef.isReceiving();
+    }
+
+    private _getListById(id: K): CdkDropList | undefined {
+        return this._dropLists?.find(list => list.id === id);
+    }
+
     private _computeItemHeight(): void {
         const items = document.getElementsByClassName('cdk-drag');
         if (items.length) {