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

Fixed workflow item width when dragging

Browse Source
This commit is contained in:
Adina Țeudan 2021-12-09 16:24:05 +02:00
parent af9adfd579
commit a82a08cd89
1 changed files with 34 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,4 @@
<iqser-table-header
[tableHeaderLabel]="tableHeaderLabel"
listingMode="workflow"
>
<iqser-table-header [tableHeaderLabel]="tableHeaderLabel" listingMode="workflow">
<ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
</iqser-table-header>
@ -15,14 +12,20 @@
[text]="noDataText"
></iqser-empty-state>
<div *ngIf="(entitiesService.noData$ | async) === false && (draggingEntities$ | async) as draggingEntities" cdkDropListGroup
class="columns-wrapper">
<div *ngFor="let column of config.columns" [class.dragging]="dragging"
[class.list-can-receive]="isReceiving(column)"
[class.list-dragging]="isDragging(column)"
[class.list-source]="isSource(column)"
[style.--color]="column.color"
class="column">
<div
*ngIf="(entitiesService.noData$ | async) === false && (draggingEntities$ | async) as draggingEntities"
cdkDropListGroup
class="columns-wrapper"
>
<div
*ngFor="let column of config.columns"
[class.dragging]="dragging"
[class.list-can-receive]="isReceiving(column)"
[class.list-dragging]="isDragging(column)"
[class.list-source]="isSource(column)"
[style.--color]="column.color"
class="column"
>
<iqser-column-header [(selectionColumn)]="selectionColumn" [bulkActions]="bulkActions" [column]="column"></iqser-column-header>
<div
(cdkDropListDropped)="move($event)"
@ -30,36 +33,39 @@
[cdkDropListData]="entities"
[cdkDropListEnterPredicate]="canMoveTo(column)"
[id]="column.key"
cdkDropList cdkDropListSortingDisabled>
<div (cdkDragEnded)="stopDragging()" (cdkDragStarted)="startDragging(column, $event)"
(click)="selectionColumn === column && listingService.select(entity)"
*ngFor="let entity of entities" [cdkDragData]="entity"
[class.no-border]="dragging && draggingEntities.includes(entity)"
[class.selected]="all[entity.id].isSelected$ | async"
[ngClass]="all[entity.id].classes$ | async" cdkDrag
cdkDropList
cdkDropListSortingDisabled
>
<div
(cdkDragEnded)="stopDragging()"
(cdkDragStarted)="startDragging(column, $event)"
(click)="selectionColumn === column && listingService.select(entity)"
*ngFor="let entity of entities"
[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 *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 *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.max-width]="itemWidth + 'px'"
<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>
</div>
</div>
<div (click)="addElement.emit()" *ngIf="column.key === addElementColumn" class="add-btn">
<mat-icon [svgIcon]="addElementIcon"></mat-icon>