-
+
@@ -36,8 +37,23 @@
[class.selected]="listingService.isSelected$(entity) | async"
[ngClass]="getItemClasses(entity)" cdkDrag
>
-
-
+
+
+
+
+
diff --git a/src/lib/listing/workflow/workflow.component.scss b/src/lib/listing/workflow/workflow.component.scss
index cb71b21..2e58e78 100644
--- a/src/lib/listing/workflow/workflow.component.scss
+++ b/src/lib/listing/workflow/workflow.component.scss
@@ -38,7 +38,7 @@
}
&.dragging {
- .cdk-drag {
+ .item {
pointer-events: none;
}
@@ -55,7 +55,7 @@
var(--iqser-white) 8px
);
- > .heading, .add-btn, ::ng-deep.cdk-drag > * > * {
+ > .heading, .add-btn, ::ng-deep.item > * > * {
opacity: 0.3;
}
@@ -70,7 +70,7 @@
min-height: calc(100% - 36px);
}
-.cdk-drag {
+.item {
background-color: var(--iqser-white);
border: 2px solid var(--iqser-white);
@@ -87,6 +87,10 @@
&.selected {
border-color: var(--iqser-primary);
}
+
+ &.no-border {
+ border: none;
+ }
}
.add-btn {
@@ -105,7 +109,7 @@
}
}
-.cdk-drag, .add-btn {
+.item, .add-btn {
transition: background-color 0.2s, box-shadow 0.2s;
border-radius: 8px;
margin: 0 8px 4px 8px;
@@ -115,7 +119,7 @@
}
}
-.cdk-drag-placeholder {
+.placeholder {
border: 1px dashed var(--iqser-grey-5);
border-radius: 8px;
margin: 0 8px 4px 8px;
diff --git a/src/lib/listing/workflow/workflow.component.ts b/src/lib/listing/workflow/workflow.component.ts
index f5bbb67..a364ad9 100644
--- a/src/lib/listing/workflow/workflow.component.ts
+++ b/src/lib/listing/workflow/workflow.component.ts
@@ -85,20 +85,31 @@ export class WorkflowComponent extends Au
return this.listingComponent.tableHeaderLabel;
}
- getItemClasses(entity: T): { [key: string]: boolean } {
+ getItemClasses(entity: T, preview = false): { [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);
}
}
+ classes.item = true;
+ if (!preview) {
+ classes['no-border'] = this.dragging && this.listingService.isSelected(entity);
+ }
return classes;
}
async move(event: CdkDragDrop<(T | number)[]>): Promise {
if (event.previousContainer !== event.container) {
const column = this._getColumnByKey((event.container.id) as K);
- await column.enterFn(event.item.data);
+
+ if (this.selectionColumn) {
+ // TODO: Improve this
+ await Promise.all(this.listingService.selected.map(file => column.enterFn(file)));
+ this.listingService.setSelected([]);
+ } else {
+ await column.enterFn(event.item.data);
+ }
}
}