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-iteration-count: infinite;
animation-timing-function: linear; animation-timing-function: linear;
height: fit-content;
width: fit-content;
> mat-icon { > mat-icon {
height: 10px; height: 10px;
width: 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); this.selectionColumnChange.emit(this.selectionColumn);
setTimeout(() => { setTimeout(() => {
this._setupResizeObserver(); this._setupResizeObserver();
}, 0); }, 10);
} }
disableSelection(): void { disableSelection(): void {

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

@ -39,7 +39,7 @@
[ngClass]="all[entity.id].classes$ | async" cdkDrag [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, itemWidth: itemWidth }"> <ng-container *ngTemplateOutlet="itemTemplate; context: { entity: entity }">
</ng-container> </ng-container>
</ng-container> </ng-container>
@ -52,9 +52,11 @@
<ng-container *ngFor="let e of draggingEntities"> <ng-container *ngFor="let e of draggingEntities">
<div [class.selected]="all[e.id].isSelected$ | async" <div [class.selected]="all[e.id].isSelected$ | async"
[ngClass]="all[e.id].classes$ | async" [ngClass]="all[e.id].classes$ | async"
[style.max-width]="itemWidth + 'px'"> [style.max-width]="itemWidth + 'px'"
<ng-container *ngTemplateOutlet="itemTemplate; context: { entity: e, itemWidth: itemWidth }"></ng-container> >
<ng-container *ngTemplateOutlet="itemTemplate; context: { entity: e }"></ng-container>
</div> </div>
</ng-container> </ng-container>
</div> </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 noDataAction = new EventEmitter<void>();
@Output() readonly addElement = new EventEmitter<void>(); @Output() readonly addElement = new EventEmitter<void>();
itemWidth?: number;
itemHeight?: number; itemHeight?: number;
itemWidth?: number;
dragging = false; dragging = false;
sourceColumn?: WorkflowColumn<T, K>; sourceColumn?: WorkflowColumn<T, K>;
selectionColumn?: 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> } = {}; all: { [key: string]: EntityWrapper<T> } = {};
@ViewChildren(CdkDropList) private readonly _dropLists!: QueryList<CdkDropList>; @ViewChildren(CdkDropList) private readonly _dropLists!: QueryList<CdkDropList>;
private _observer = new ResizeObserver((entries: ResizeObserverEntry[]) => { private _observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
this._updateItemWidth(entries[0]); this._updateItemSize(entries[0]);
}); });
constructor( constructor(
@ -120,6 +120,9 @@ export class WorkflowComponent<T extends IListable, K extends string> extends Au
} }
ngOnInit(): void { 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.listingService.displayed$.pipe(tap(entities => this._updateConfigItems(entities))).subscribe();
this.addSubscription = this.entitiesService.noData$ this.addSubscription = this.entitiesService.noData$
.pipe( .pipe(
@ -171,14 +174,14 @@ export class WorkflowComponent<T extends IListable, K extends string> extends Au
} }
@Debounce(30) @Debounce(30)
private _updateItemWidth(entry: ResizeObserverEntry): void { private _updateItemSize(entry: ResizeObserverEntry): void {
if (entry.contentRect.height === 0) { if (entry.contentRect.height === 0) {
this._observer.unobserve(entry.target); this._observer.unobserve(entry.target);
this._setupResizeObserver(); this._setupResizeObserver();
return; return;
} }
this.itemWidth = entry.contentRect.width;
this.itemHeight = entry.contentRect.height; this.itemHeight = entry.contentRect.height;
this.itemWidth = entry.contentRect.width;
this._changeRef.markForCheck(); this._changeRef.markForCheck();
} }