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