Panel is compatible with observable model #9844

If `model` is found in the resolved data of a panel, then it will be automatically subscribed to and `this.data` will be updated whenever it emits.
Ecodev · Mar 23, 2024 · 6d77f49 · 6d77f49
1 parent b34cc51
commit 6d77f49
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 9 deletions.
diff --git a/projects/natural/src/lib/modules/panels/abstract-panel.ts b/projects/natural/src/lib/modules/panels/abstract-panel.ts
@@ -1,8 +1,8 @@
 import {Directive, HostBinding, HostListener} from '@angular/core';
-import {merge} from 'lodash-es';
 import {NaturalAbstractController} from '../../classes/abstract-controller';
 import {NaturalPanelsService} from './panels.service';
 import {NaturalPanelData} from './types';
+import {Observable, Subscription, takeUntil} from 'rxjs';
 
 @Directive()
 export class NaturalAbstractPanel extends NaturalAbstractController {
@@ -11,6 +11,7 @@ export class NaturalAbstractPanel extends NaturalAbstractController {
      * When loading a component from a panel opening (dialog), receives the data provided by the service
      */
     public data: any = {};
+    #modelSubscription: Subscription | null = null;
 
     /**
      * Bind isFrontPanel style class on root component
@@ -48,7 +49,24 @@ export class NaturalAbstractPanel extends NaturalAbstractController {
         this.isPanel = true;
 
         if (this.panelData?.data) {
-            merge(this.data, this.panelData.data);
+            if (this.panelData.data.model instanceof Observable) {
+                // Subscribe to model to know when Apollo cache is changed, so we can reflect it into `data.model`
+                this.#modelSubscription?.unsubscribe();
+                this.#modelSubscription = this.panelData.data.model
+                    .pipe(takeUntil(this.ngUnsubscribe))
+                    .subscribe(model => {
+                        this.data = {
+                            ...this.data,
+                            ...this.panelData?.data,
+                            model: model,
+                        };
+                    });
+            } else {
+                this.data = {
+                    ...this.data,
+                    ...this.panelData.data,
+                };
+            }
         }
     }
 }
diff --git a/projects/natural/src/lib/modules/panels/panels.service.ts b/projects/natural/src/lib/modules/panels/panels.service.ts
@@ -5,7 +5,6 @@ import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
 import {ActivatedRoute, DefaultUrlSerializer, NavigationError, Router, UrlSegment} from '@angular/router';
 import {differenceWith, flatten, isEqual} from 'lodash-es';
 import {forkJoin, Observable, of, Subject, Subscription} from 'rxjs';
-import {map} from 'rxjs/operators';
 import {NaturalAbstractPanel} from './abstract-panel';
 import {getStackConfig} from './panels.urlmatcher';
 import {
@@ -280,7 +279,7 @@ export class NaturalPanelsService {
         const subject = new Subject<Observable<any> | null>();
 
         // Resolve everything before opening a single panel
-        const resolves = newItemsConfig.map((conf: NaturalPanelConfig) => this.getResolvedData(conf));
+        const resolves = newItemsConfig.map(conf => this.getResolvedData(conf));
 
         // ForkJoin emits when all promises are executed;
         forkJoin(resolves).subscribe(resolvedResult => {
@@ -334,11 +333,7 @@ export class NaturalPanelsService {
             });
         }
 
-        return forkJoin(resolvedData).pipe(
-            map(result => {
-                return (result as any).model || result;
-            }),
-        );
+        return forkJoin(resolvedData);
     }
 
     private openPanel(componentOrTemplateRef: ComponentType<NaturalAbstractPanel>, data: NaturalPanelData): void {