-
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
implements
@Input() @Required() config!: WorkflowConfig;
dragging = false;
+ sourceColumn?: WorkflowColumn;
+ @ViewChildren(CdkDropList) private readonly _dropLists!: QueryList;
constructor(
@Inject(forwardRef(() => ListingComponent)) private _parent: ListingComponent,
@@ -67,6 +69,32 @@ export class WorkflowComponent implements
return (item: CdkDrag) => column.enterPredicate(item.data);
}
+ startDragging(column: WorkflowColumn) {
+ this.dragging = true;
+ this.sourceColumn = column;
+ }
+
+ stopDragging() {
+ this.dragging = false;
+ this.sourceColumn = undefined;
+ }
+
+ isSource(column: WorkflowColumn): boolean {
+ return this.sourceColumn === column;
+ }
+
+ isDragging(column: WorkflowColumn): boolean {
+ return !!this._getListById(column.key)?._dropListRef.isDragging();
+ }
+
+ isReceiving(column: WorkflowColumn): 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) {