From 3616ccaf42f0e50a440d040805cc1c2200f9d8fe Mon Sep 17 00:00:00 2001
From: Dan Percic <dan@devplant.ro>
Date: Thu, 20 Jan 2022 14:46:30 +0200
Subject: [PATCH] use ng-template for drop preview and placeholder

---
 .../listing/workflow/workflow.component.html  | 83 ++++++++++---------
 .../listing/workflow/workflow.component.scss  |  5 ++
 2 files changed, 47 insertions(+), 41 deletions(-)

diff --git a/src/lib/listing/workflow/workflow.component.html b/src/lib/listing/workflow/workflow.component.html
index 7306332..336d191 100644
--- a/src/lib/listing/workflow/workflow.component.html
+++ b/src/lib/listing/workflow/workflow.component.html
@@ -27,51 +27,52 @@
         class="column"
     >
         <iqser-column-header [(selectionColumn)]="selectionColumn" [bulkActions]="bulkActions" [column]="column"></iqser-column-header>
-        <cdk-virtual-scroll-viewport
-            (cdkDropListDropped)="move($event)"
-            *ngIf="column.entities | async as entities"
-            [cdkDropListData]="entities"
-            [cdkDropListEnterPredicate]="canMoveTo(column)"
-            [class.multi-select-active]="selectionColumn === column"
-            [id]="column.key"
-            [itemSize]="itemHeight"
-            cdkDropList
-            cdkDropListSortingDisabled
-        >
+        <cdk-virtual-scroll-viewport [itemSize]="itemHeight">
             <div
-                (cdkDragEnded)="stopDragging()"
-                (cdkDragStarted)="startDragging(column, $event)"
-                (click)="selectionColumn === column && listingService.select(entity)"
-                *cdkVirtualFor="let entity of column.entities; trackBy: trackBy"
-                [cdkDragData]="entity"
-                [class.no-border]="dragging && draggingEntities.includes(entity)"
-                [class.selected]="all[entity.id].isSelected$ | async"
-                [ngClass]="all[entity.id].classes$ | async"
-                cdkDrag
+                (cdkDropListDropped)="move($event)"
+                *ngIf="column.entities | async as entities"
+                [cdkDropListData]="entities"
+                [cdkDropListEnterPredicate]="canMoveTo(column)"
+                [class.multi-select-active]="selectionColumn === column"
+                [id]="column.key"
+                cdkDropList
+                cdkDropListSortingDisabled
             >
-                <ng-container *ngIf="!draggingEntities.includes(entity)">
-                    <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>
-
-                <div *cdkDragPreview>
-                    <ng-container *ngFor="let e of draggingEntities">
-                        <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>
+                <div
+                    (cdkDragEnded)="stopDragging()"
+                    (cdkDragStarted)="startDragging(column, $event)"
+                    (click)="selectionColumn === column && listingService.select(entity)"
+                    *cdkVirtualFor="let entity of column.entities; trackBy: trackBy"
+                    [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>
-                </div>
-            </div>
 
-            <div (click)="addElement.emit()" *ngIf="column.key === addElementColumn" class="add-btn">
-                <mat-icon [svgIcon]="addElementIcon"></mat-icon>
+                    <ng-template cdkDragPlaceholder>
+                        <div *ngFor="let e of draggingEntities" [style.min-height]="itemHeight + 'px'" class="placeholder"></div>
+                    </ng-template>
+
+                    <ng-template cdkDragPreview>
+                        <ng-container *ngFor="let e of draggingEntities">
+                            <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>
+                    </ng-template>
+                </div>
+
+                <div (click)="addElement.emit()" *ngIf="column.key === addElementColumn" class="add-btn">
+                    <mat-icon [svgIcon]="addElementIcon"></mat-icon>
+                </div>
             </div>
         </cdk-virtual-scroll-viewport>
     </div>
diff --git a/src/lib/listing/workflow/workflow.component.scss b/src/lib/listing/workflow/workflow.component.scss
index 99aa44c..a98fcc7 100644
--- a/src/lib/listing/workflow/workflow.component.scss
+++ b/src/lib/listing/workflow/workflow.component.scss
@@ -127,3 +127,8 @@
     border-radius: 8px;
     margin: 0 8px 4px 8px;
 }
+
+cdk-virtual-scroll-viewport {
+    height: 100%;
+    @include no-scroll-bar;
+}