From 67ae381607fa946231e44c2946a66bef1b13498f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Thu, 2 Dec 2021 03:37:31 +0200
Subject: [PATCH] Resize observer fix

---
 .../listing/workflow/workflow.component.ts    | 25 ++++++++++++++-----
 1 file changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/lib/listing/workflow/workflow.component.ts b/src/lib/listing/workflow/workflow.component.ts
index b0bbef6..f5bbb67 100644
--- a/src/lib/listing/workflow/workflow.component.ts
+++ b/src/lib/listing/workflow/workflow.component.ts
@@ -20,6 +20,7 @@ import { LoadingService } from '../../loading';
 import { IListable } from '../models';
 import { EntitiesService, ListingService } from '../services';
 import { BehaviorSubject } from 'rxjs';
+import { filter, tap } from 'rxjs/operators';
 
 export interface WorkflowColumn<T, K> {
     key: K;
@@ -65,6 +66,9 @@ export class WorkflowComponent<T extends IListable, K extends string> extends Au
     selectionColumn?: WorkflowColumn<T, K>;
     @ViewChildren(CdkDropList) private readonly _dropLists!: QueryList<CdkDropList>;
     private _existingEntities: { [key: string]: T } = {};
+    private _observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+        this._updateItemWidth(entries[0]);
+    });
 
     constructor(
         @Inject(forwardRef(() => ListingComponent)) readonly listingComponent: ListingComponent<T>,
@@ -99,7 +103,13 @@ export class WorkflowComponent<T extends IListable, K extends string> extends Au
     }
 
     ngOnInit(): void {
-        this.addSubscription = this.listingService.displayed$.subscribe(entities => this._updateConfigItems(entities));
+        this.addSubscription = this.listingService.displayed$.pipe(tap(entities => this._updateConfigItems(entities))).subscribe();
+        this.addSubscription = this.entitiesService.noData$
+            .pipe(
+                filter(noData => noData),
+                tap(() => this._setupResizeObserver()),
+            )
+            .subscribe();
         this._setupResizeObserver();
     }
 
@@ -130,15 +140,18 @@ export class WorkflowComponent<T extends IListable, K extends string> extends Au
     }
 
     private _setupResizeObserver(): void {
-        const observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
-            this._updateItemWidth(entries[0]);
-        });
-
-        observer.observe(this._elementRef.nativeElement.querySelector('.cdk-drag'));
+        const cdkDragElement: Element = this._elementRef.nativeElement.querySelector('.cdk-drag') as Element;
+        if (cdkDragElement) {
+            this._observer.observe(cdkDragElement);
+        }
     }
 
     @Debounce(30)
     private _updateItemWidth(entry: ResizeObserverEntry): void {
+        if (entry.contentRect.width === 0) {
+            this._observer.unobserve(entry.target);
+            this._setupResizeObserver();
+        }
         this.itemWidth = entry.contentRect.width;
         this.itemHeight = entry.contentRect.height;
         this._changeRef.markForCheck();