@memberjunction/ng-explorer-core 6.2.0-edge.3 → 6.2.0-edge.5

package/dist/lib/shell/components/tabs/tab-container.component.js

@@ -1,7 +1,7 @@
 import { Component, ViewChild, runInInjectionContext, createComponent, ViewEncapsulation, HostListener, Output, EventEmitter, inject } from '@angular/core';
-import { GoldenLayoutManager, FlattenLayoutToSingleStack } from '@memberjunction/ng-base-application';
+import { GoldenLayoutManager, FlattenLayoutToSingleStack, TabService } from '@memberjunction/ng-base-application';
 import { MJGlobal } from '@memberjunction/global';
-import { BaseResourceComponent, HomeAppPinService, NavigationService, IsRecordTabsStyle, IsRecordsTabConfiguration, IsRecordsRegionTab, IsRecordDockedToWorkspace, RECORD_DOCKED_TO_WORKSPACE_KEY, GetRecordSourceContext, SafeDetectChanges, ExplorerBreakpointService, ResolveRecordTypeIcon } from '@memberjunction/ng-shared';
+import { BaseResourceComponent, HomeAppPinService, NavigationService, IsRecordTabsStyle, IsRecordsTabConfiguration, IsRecordsRegionTab, IsRecordDockedToWorkspace, RECORD_DOCKED_TO_WORKSPACE_KEY, GetRecordSourceContext, SafeDetectChanges, ExplorerBreakpointService, ResolveRecordTypeIcon, GetDeletedRecordFromEvent, RecordTabShowsRecord, RemoveDeletedRecordFromOrigin, OriginToTabConfiguration, OriginHasReturnTarget, NormalizeRecordIdForMatch } from '@memberjunction/ng-shared';
 import { ResourceData, ResourcePermissionEngine } from '@memberjunction/core-entities';
 import { RecordOriginCrumbComponent } from '../record-open/record-origin-crumb.component';
 import { RecordSwitcherService } from '../record-open/record-switcher.service';
@@ -141,6 +141,8 @@ function TabContainerComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
 } }
 /** Fallback tab accent when an app has no color (matches pre-existing usage) */
 const DEFAULT_APP_COLOR = '#757575';
+/** A single-field key in URL-segment form ('Field|value'); group 1 is the value. */
+const SINGLE_FIELD_URL_SEGMENT = /^[^|]+\|([^|]+)$/;
 /**
  * Container for Golden Layout tabs with app-colored styling.
  *
@@ -214,6 +216,7 @@ export class TabContainerComponent extends BaseAngularComponent {
     layoutInitError = this.LayoutInitError;
     pinService = inject(HomeAppPinService);
     navigationService = inject(NavigationService);
+    tabService = inject(TabService);
     recordSwitcher = inject(RecordSwitcherService);
     subscriptions = [];
     layoutInitRetryCount = 0;
@@ -471,6 +474,7 @@ export class TabContainerComponent extends BaseAngularComponent {
     flushRegionCd() {
         SafeDetectChanges(this.cdr);
     }
+    recordsLayoutInitRetryCount = 0;
     /**
      * Keep the RECORDS region in lockstep with the workspace configuration:
      * resolve region visibility (active tab is a record), lazily initialize the
@@ -491,6 +495,13 @@ export class TabContainerComponent extends BaseAngularComponent {
         const recordTabs = config.tabs.filter(t => this.isRecordTab(t));
         const activeTab = config.tabs.find(t => t.id === config.activeTabId);
         const showing = !!activeTab && this.isRecordTab(activeTab);
+        if (showing !== this.ShowRecordsRegion) {
+            this.ShowRecordsRegion = showing;
+            // Flush NOW — the visibility class must land BEFORE records GL init/tab
+            // creation so synchronous TabShown events see ShowRecordsRegion=true and
+            // load the active record immediately instead of parking it.
+            this.flushRegionCd();
+        }
         // EAGER init + sync on EVERY emission. The region container always keeps
         // its full layout box (visibility-hidden, never display:none — see the
         // component CSS), so the records GL can initialize and reconcile even
@@ -504,14 +515,8 @@ export class TabContainerComponent extends BaseAngularComponent {
         if (this.recordsLayoutInitialized) {
             this.syncRecordsTabs(recordTabs);
         }
-        if (showing !== this.ShowRecordsRegion) {
-            this.ShowRecordsRegion = showing;
-            // Flush NOW — the visibility class must land in this pass, not
-            // whenever the next unrelated emission happens to run CD.
-            this.flushRegionCd();
-            if (showing) {
-                this.flushPendingRecordShows();
-            }
+        if (this.ShowRecordsRegion) {
+            this.flushPendingRecordShows();
         }
         if (showing && activeTab && this.recordsLayoutInitialized) {
             this.focusRecordsTab(activeTab.id);
@@ -734,17 +739,24 @@ export class TabContainerComponent extends BaseAngularComponent {
             return;
         }
         const container = this.RecordsGlContainer?.nativeElement;
-        if (!container) {
-            return; // Template not settled yet — the next sync pass retries
-        }
-        // NEVER initialize GL inside a zero-size (hidden) container — it bakes a
-        // 0x0 internal size into every stack it later creates and the region
-        // renders collapsed forever. Happens when the region flip is reverted
-        // (activation stolen) before this deferred init runs; staying
-        // uninitialized is safe — the next real show retries.
-        if (container.getBoundingClientRect().height === 0) {
+        if (!container || container.getBoundingClientRect().height === 0) {
+            // NEVER initialize GL inside a missing or zero-size (hidden) container —
+            // it bakes a 0x0 internal size into every stack it later creates and the
+            // region renders collapsed forever. If the records region IS the active
+            // surface (e.g. startup deep link to a record before layout settles),
+            // schedule a bounded retry so initialization is not stranded.
+            if (this.ShowRecordsRegion && this.recordsLayoutInitRetryCount < this.MAX_LAYOUT_INIT_RETRIES) {
+                this.recordsLayoutInitRetryCount++;
+                setTimeout(() => {
+                    const latest = this.workspaceManager.GetConfiguration();
+                    if (latest && !this.recordsLayoutInitialized) {
+                        this.syncRecordsRegion(latest);
+                    }
+                }, 50);
+            }
             return;
         }
+        this.recordsLayoutInitRetryCount = 0;
         // Mobile: headerless GL — the record bar replaces the strip
         this.recordsLayoutManager.Initialize(container, { HideHeaders: this.mobileRecordsActive });
         this.recordsLayoutInitialized = true;
@@ -763,6 +775,14 @@ export class TabContainerComponent extends BaseAngularComponent {
             // loading such a layout would render a ghost pane for a closed record.
             if (layoutToLoad?.root && recordTabs.length > 0 && this.layoutCoversExactTabSet(layoutToLoad.root, recordTabs)) {
                 if (this.recordsLayoutManager.LoadLayout(layoutToLoad)) {
+                    recordTabs.forEach(tab => this.updateTabDisplayName(tab));
+                    setTimeout(() => {
+                        const latest = this.workspaceManager.GetConfiguration();
+                        if (latest?.activeTabId && this.ShowRecordsRegion) {
+                            this.focusRecordsTab(latest.activeTabId);
+                        }
+                        this.recordsLayoutManager.updateSize();
+                    }, 50);
                     return;
                 }
             }
@@ -872,6 +892,23 @@ export class TabContainerComponent extends BaseAngularComponent {
             this.ShowContextMenu(event.x, event.y, event.tabId, event.anchorEl);
         }));
         this.wireRecordsLayoutEvents();
+        // A record deleted in this session: close every tab showing it and move the
+        // user off it (see HandleRecordDeleted). Remote deletes are left to the
+        // record tab itself, which shows a banner rather than vanishing under the user.
+        this.subscriptions.push(MJGlobal.Instance.GetEventListener().subscribe(event => {
+            // Read the key NOW: right after raising 'delete' the entity calls
+            // NewRecord() and its key is gone.
+            const deleted = GetDeletedRecordFromEvent(event);
+            if (!deleted || deleted.Remote) {
+                return;
+            }
+            // Deferred one macrotask: the event fires inside BaseEntity.Delete(), and
+            // the deleting form still has to finish (success toast, RecordDeleted
+            // handlers) before its tab is torn down.
+            setTimeout(() => {
+                this.HandleRecordDeleted(deleted).catch(err => LogError(err));
+            }, 0);
+        }));
         // Breakpoint crossings rebuild the records GL in the other chrome mode
         // (headerless+flattened vs full strip+splits). Skip-if-equal: the
         // BehaviorSubject replays the current value on subscribe.
@@ -1034,6 +1071,11 @@ export class TabContainerComponent extends BaseAngularComponent {
         }));
     }
     ngAfterViewInit() {
+        const config = this.workspaceManager.GetConfiguration();
+        if (config) {
+            this.syncRecordsRegion(config);
+            this.updateRecordSurfaceState(config);
+        }
         // Initialize Golden Layout only if we're not in single-resource mode
         if (!this.UseSingleResourceMode) {
             this.initializeGoldenLayout();
@@ -1725,13 +1767,26 @@ export class TabContainerComponent extends BaseAngularComponent {
         const config = this.workspaceManager.GetConfiguration();
         const tab = config?.tabs.find(t => t.id === tabId);
         const isLastTab = config?.tabs.length === 1 && config.tabs[0].id === tabId;
-        // DESTROY (not just detach) the cached component before closing. The default
-        // tab-close path detaches and keeps components alive for reuse — but the
-        // discarded form is exactly what we DON'T want to keep: it holds a stale
-        // BaseEntity in view mode. The next "Create New Record" click for the same
-        // entity would otherwise hit the cache discriminator lookup, find this stale
-        // component, and reattach it — surfacing a blank form in view mode instead
-        // of a fresh edit-mode form. Destroy here forces a cache miss on the next click.
+        this.closeTabDestroyingComponent(tabId);
+        if (isLastTab && tab) {
+            // CloseTab kept the tab around but unpinned it. Replace it with the app's
+            // default tab so the user lands on a meaningful surface (typically the
+            // home dashboard) instead of staying on the discarded form.
+            await this.openAppDefaultTab(tab.applicationId);
+        }
+    }
+    /**
+     * Close a tab and DESTROY (not just detach) its cached component.
+     *
+     * The default tab-close path detaches and keeps components alive for reuse —
+     * but a discarded or deleted record's form is exactly what we DON'T want to
+     * keep: it holds a stale BaseEntity in view mode. The next "Create New Record"
+     * click for the same entity would otherwise hit the cache discriminator
+     * lookup, find this stale component, and reattach it — surfacing a blank form
+     * in view mode instead of a fresh edit-mode form. Destroy here forces a cache
+     * miss on the next open.
+     */
+    closeTabDestroyingComponent(tabId) {
         if (this.singleResourceCacheIdentity?.tabId === tabId) {
             // Single-resource mode: the component is tracked via singleResource* fields,
             // and its cache entry is currently marked attached. Use the identity directly
@@ -1742,7 +1797,7 @@ export class TabContainerComponent extends BaseAngularComponent {
             this.singleResourceComponentRef = null;
             this.singleResourceCacheIdentity = null;
             // Clear the host container's DOM so the user isn't briefly looking at the
-            // destroyed component's wrapper between CloseTab and the default-tab load.
+            // destroyed component's wrapper between CloseTab and the next tab's load.
             const directContainer = this.DirectContentContainer?.nativeElement;
             if (directContainer) {
                 while (directContainer.firstChild)
@@ -1756,18 +1811,78 @@ export class TabContainerComponent extends BaseAngularComponent {
             this.componentRefs.delete(tabId);
         }
         this.workspaceManager.CloseTab(tabId);
-        if (isLastTab && tab) {
-            // CloseTab kept the tab around but unpinned it. Replace it with the app's
-            // default tab so the user lands on a meaningful surface (typically the
-            // home dashboard) instead of staying on the discarded form.
-            const app = this.appManager.GetAppById(tab.applicationId);
-            if (app) {
-                const defaultTabRequest = await app.CreateDefaultTab();
-                if (defaultTabRequest) {
-                    this.workspaceManager.OpenTab(defaultTabRequest, app.GetColor());
-                }
+    }
+    /** Open an app's default tab (its home / landing surface), if it has one. */
+    async openAppDefaultTab(appId) {
+        const app = this.appManager.GetAppById(appId);
+        if (app) {
+            const defaultTabRequest = await app.CreateDefaultTab();
+            if (defaultTabRequest) {
+                this.workspaceManager.OpenTab(defaultTabRequest, app.GetColor());
+            }
+        }
+    }
+    /**
+     * A record was deleted in this session — from its own form, a custom form, a
+     * grid row, or any other `BaseEntity.Delete()`. Nothing may keep showing it:
+     *
+     * 1. Other record tabs whose origin chain names it get the record spliced out,
+     *    so their crumb returns to where the user was before it.
+     * 2. Every record tab showing it closes, its cached form destroyed.
+     * 3. If one of those was the ACTIVE tab, the user is taken back to where it
+     *    was opened from; with no origin (e.g. loaded straight from a URL), to the
+     *    Home dashboard, or the tab's own app landing page when there is no Home
+     *    app. Its URL's history entry is replaced so browser Back can't reopen it.
+     *
+     * Inactive tabs showing it just close: the user wasn't looking at them.
+     */
+    async HandleRecordDeleted(record) {
+        const config = this.workspaceManager.GetConfiguration();
+        if (!config) {
+            return;
+        }
+        const showing = config.tabs.filter(t => RecordTabShowsRecord(t, record));
+        const showingIds = new Set(showing.map(t => t.id));
+        for (const tab of config.tabs) {
+            if (showingIds.has(tab.id) || !IsRecordsTabConfiguration(tab.configuration)) {
+                continue;
+            }
+            const origin = GetRecordSourceContext(tab.configuration) ?? undefined;
+            const pruned = RemoveDeletedRecordFromOrigin(origin, record);
+            if (pruned !== origin) {
+                this.workspaceManager.UpdateTabConfiguration(tab.id, OriginToTabConfiguration(pruned));
             }
         }
+        if (showing.length === 0) {
+            return;
+        }
+        const activeTab = showing.find(t => t.id === config.activeTabId);
+        const returnTo = activeTab
+            ? RemoveDeletedRecordFromOrigin(GetRecordSourceContext(activeTab.configuration) ?? undefined, record)
+            : undefined;
+        if (activeTab) {
+            // Mark by what the tab's URL carries (its own entity string and id), not
+            // the event's canonical name: the URL is built from the tab.
+            const urlEntity = activeTab.configuration?.['Entity'];
+            this.tabService.MarkRecordUrlForReplacement(typeof urlEntity === 'string' ? urlEntity : record.EntityName, NormalizeRecordIdForMatch(activeTab.resourceRecordId || record.RecordId));
+        }
+        for (const tab of showing) {
+            this.closeTabDestroyingComponent(tab.id);
+        }
+        if (activeTab) {
+            await this.leaveDeletedRecord(activeTab, returnTo);
+        }
+    }
+    /** Where the user goes after the record they were looking at is deleted. */
+    async leaveDeletedRecord(deletedTab, origin) {
+        if (OriginHasReturnTarget(origin)) {
+            await this.navigationService.ReturnToRecordSource(origin);
+            return;
+        }
+        if (await this.navigationService.OpenHomeDashboard()) {
+            return;
+        }
+        await this.openAppDefaultTab(deletedTab.applicationId);
     }
     /**
      * Generate a signature for tab content to detect when content changes
@@ -2176,6 +2291,18 @@ export class TabContainerComponent extends BaseAngularComponent {
         const normalize = (name) => (name ?? '').trim().toLowerCase().replace(/^mj:\s*/, '');
         return normalize(a) === normalize(b);
     }
+    /**
+     * Whether two resource record ids name the same record. A component's ResourceRecordSaved
+     * stores a single-field key in the URL-segment form ('ID|<uuid>'), while its tab may keep the
+     * bare value ('<uuid>'). The field name is dropped only when the other id is a bare value, so
+     * two ids that both contain '|' are compared as they are.
+     */
+    static IsSameRecordId(a, b) {
+        const left = (a ?? '').trim();
+        const right = (b ?? '').trim();
+        const bareValue = (id) => SINGLE_FIELD_URL_SEGMENT.exec(id)?.[1] ?? id;
+        return left === right || bareValue(left) === right || left === bareValue(right);
+    }
     async getResourceTypeId(resourceType) {
         const rt = await this.getResourceTypeEntity(resourceType);
         if (rt) {
@@ -2386,9 +2513,13 @@ export class TabContainerComponent extends BaseAngularComponent {
                     // reload from being handed back the component it just detached.
                     const existingEntity = existingResourceData?.Configuration?.Entity;
                     const newEntity = tab.configuration['Entity'];
+                    // The record id comparison accepts the URL-segment form ResourceRecordSaved writes into
+                    // the component's Data ('ID|<uuid>' for a tab that keeps '<uuid>'). An exact comparison
+                    // reloads the same cached component on every configuration emission, and each reload
+                    // emits a new configuration.
                     const needsReload = !TabContainerComponent.IsSameResourceType(existingResourceData?.ResourceType, tab.configuration['resourceType']) ||
                         existingResourceData?.Configuration?.applicationId !== tab.applicationId ||
-                        existingRecordId !== newRecordId ||
+                        !TabContainerComponent.IsSameRecordId(existingRecordId, newRecordId) ||
                         existingEntity !== newEntity ||
                         (tab.configuration['resourceType'] === 'Custom' && existingDriverClass !== newDriverClass);
                     if (needsReload) {
@@ -2953,5 +3084,5 @@ export class TabContainerComponent extends BaseAngularComponent {
             type: HostListener,
             args: ['window:resize']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TabContainerComponent, { className: "TabContainerComponent", filePath: "src/lib/shell/components/tabs/tab-container.component.ts", lineNumber: 62 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TabContainerComponent, { className: "TabContainerComponent", filePath: "src/lib/shell/components/tabs/tab-container.component.ts", lineNumber: 68 }); })();
 //# sourceMappingURL=tab-container.component.js.map