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

Don't pass width to workflow item

Browse Source
This commit is contained in:
Adina Țeudan 2021-12-06 15:19:46 +02:00
parent 4c119e2a78
commit 7ec9b548fa
4 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/assets/styles/common-loading.scss
View File

@ -28,6 +28,9 @@
animation-iteration-count: infinite;
animation-timing-function: linear;
height: fit-content;
width: fit-content;
> mat-icon {
height: 10px;
width: 10px;

2
src/lib/listing/workflow/column-header/column-header.component.ts
View File

@ -75,7 +75,7 @@ export class ColumnHeaderComponent<T extends IListable, K extends string> extend
this.selectionColumnChange.emit(this.selectionColumn);
setTimeout(() => {
this._setupResizeObserver();
}, 0);
}, 10);
}
disableSelection(): void {

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

@ -39,7 +39,7 @@
[ngClass]="all[entity.id].classes$ | async" cdkDrag
>
<ng-container *ngIf="!draggingEntities.includes(entity)">
<ng-container *ngTemplateOutlet="itemTemplate; context: { entity: entity, itemWidth: itemWidth }">
<ng-container *ngTemplateOutlet="itemTemplate; context: { entity: entity }">
</ng-container>
</ng-container>
@ -52,9 +52,11 @@
<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'">
<ng-container *ngTemplateOutlet="itemTemplate; context: { entity: e, itemWidth: itemWidth }"></ng-container>
[style.max-width]="itemWidth + 'px'"
>
<ng-container *ngTemplateOutlet="itemTemplate; context: { entity: e }"></ng-container>
</div>
</ng-container>
</div>

11
src/lib/listing/workflow/workflow.component.ts
View File

@ -82,8 +82,8 @@ export class WorkflowComponent<T extends IListable, K extends string> extends Au
@Output() readonly noDataAction = new EventEmitter<void>();
@Output() readonly addElement = new EventEmitter<void>();
itemWidth?: number;
itemHeight?: number;
itemWidth?: number;
dragging = false;
sourceColumn?: WorkflowColumn<T, K>;
selectionColumn?: WorkflowColumn<T, K>;
@ -91,7 +91,7 @@ export class WorkflowComponent<T extends IListable, K extends string> extends Au
all: { [key: string]: EntityWrapper<T> } = {};
@ViewChildren(CdkDropList) private readonly _dropLists!: QueryList<CdkDropList>;
private _observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
this._updateItemWidth(entries[0]);
this._updateItemSize(entries[0]);
});
constructor(
@ -120,6 +120,9 @@ export class WorkflowComponent<T extends IListable, K extends string> extends Au
}
ngOnInit(): void {
for (const column of this.config.columns) {
column.entities = new BehaviorSubject<T[]>([]);
}
this.addSubscription = this.listingService.displayed$.pipe(tap(entities => this._updateConfigItems(entities))).subscribe();
this.addSubscription = this.entitiesService.noData$
.pipe(
@ -171,14 +174,14 @@ export class WorkflowComponent<T extends IListable, K extends string> extends Au
}
@Debounce(30)
private _updateItemWidth(entry: ResizeObserverEntry): void {
private _updateItemSize(entry: ResizeObserverEntry): void {
if (entry.contentRect.height === 0) {
this._observer.unobserve(entry.target);
this._setupResizeObserver();
return;
}
this.itemWidth = entry.contentRect.width;
this.itemHeight = entry.contentRect.height;
this.itemWidth = entry.contentRect.width;
this._changeRef.markForCheck();
}