Marmelator/common-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use ng-template for drop preview and placeholder

Browse Source
This commit is contained in:
Dan Percic 2022-01-20 14:46:30 +02:00
parent 212576cb77
commit 3616ccaf42
2 changed files with 47 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
src/lib/listing/workflow/workflow.component.html
View File

@ -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>

5
src/lib/listing/workflow/workflow.component.scss
View File

@ -127,3 +127,8 @@
border-radius: 8px;
margin: 0 8px 4px 8px;
}
cdk-virtual-scroll-viewport {
height: 100%;
@include no-scroll-bar;
}