diff --git a/projects/natural/src/lib/modules/panels/abstract-panel.ts b/projects/natural/src/lib/modules/panels/abstract-panel.ts index 7907129c..16923d20 100644 --- 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 index 8e233368..ebc230da 100644 --- 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 | 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, data: NaturalPanelData): void {