Multi drag WIP

src/lib/listing/workflow/workflow.component.html

@@ -15,7 +15,7 @@
     [text]="noDataText"
 ></iqser-empty-state>
 
-<div *ngIf="(entitiesService.noData$ | async) === false" [cdkDropListGroupDisabled]="!!selectionColumn" cdkDropListGroup
+<div *ngIf="(entitiesService.noData$ | async) === false" cdkDropListGroup
      class="columns-wrapper">
     <div *ngFor="let column of config.columns" [class.dragging]="dragging"
          [class.list-can-receive]="isReceiving(column)"
@@ -23,10 +23,11 @@
          [class.list-source]="isSource(column)"
          [style.--color]="column.color"
          class="column">
-        <iqser-column-header [(selectionColumn)]="this.selectionColumn" [bulkActions]="bulkActions" [column]="column"></iqser-column-header>
+        <iqser-column-header [(selectionColumn)]="selectionColumn" [bulkActions]="bulkActions" [column]="column"></iqser-column-header>
         <div
             (cdkDropListDropped)="move($event)"
             [cdkDropListData]="column.entities | async"
+            [cdkDropListDisabled]="selectionColumn && selectionColumn !== column"
             [cdkDropListEnterPredicate]="canMoveTo(column)"
             [id]="column.key"
             cdkDropList cdkDropListSortingDisabled>
@@ -36,8 +37,23 @@
                  [class.selected]="listingService.isSelected$(entity) | async"
                  [ngClass]="getItemClasses(entity)" cdkDrag
             >
-                <div *cdkDragPlaceholder [style.min-height]="itemHeight + 'px'"></div>
-                <ng-container *ngTemplateOutlet="itemTemplate; context: { entity: entity, itemWidth: itemWidth }"></ng-container>
+                <div *cdkDragPlaceholder>
+                    <!-- TODO: Check selected entities for single select -->
+                    <div *ngFor="let e of (listingService.selectedEntities$ | async)" [style.min-height]="itemHeight + 'px'"
+                         class="placeholder"></div>
+                </div>
+                <div *cdkDragPreview>
+                    <ng-container *ngFor="let e of (listingService.selectedEntities$ | async)">
+                        <div [class.selected]="listingService.isSelected$(entity) | async" [ngClass]="getItemClasses(entity, true)"
+                             [style.max-width]="itemWidth + 'px'"
+                        >
+                            <ng-container *ngTemplateOutlet="itemTemplate; context: { entity: e, itemWidth: itemWidth }"></ng-container>
+                        </div>
+                    </ng-container>
+                </div>
+                <ng-container *ngIf="!(dragging && (listingService.isSelected$(entity) | async)) ">
+                    <ng-container *ngTemplateOutlet="itemTemplate; context: { entity: entity, itemWidth: itemWidth }"></ng-container>
+                </ng-container>
             </div>
             <div (click)="addElement.emit()" *ngIf="column.key === addElementColumn" class="add-btn">
                 <mat-icon [svgIcon]="addElementIcon"></mat-icon>

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;

src/lib/listing/workflow/workflow.component.ts

@@ -85,20 +85,31 @@ export class WorkflowComponent<T extends IListable, K extends string> 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<void> {
         if (event.previousContainer !== event.container) {
             const column = this._getColumnByKey((<unknown>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);
+            }
         }
     }