From e691c76d6207ae0756f0c819ca7c0f4a10e6744a Mon Sep 17 00:00:00 2001 From: jvega190 Date: Wed, 8 May 2024 12:32:57 -0600 Subject: [PATCH] [6540] Inherited item selector field issues --- ui/guest/src/contentController.ts | 4 ++-- ui/guest/src/elementRegistry.ts | 21 +++++++++++++-------- ui/guest/src/react/GuestProxy.tsx | 10 ++++++++-- ui/guest/src/react/ZoneMenu.tsx | 2 +- 4 files changed, 24 insertions(+), 13 deletions(-) diff --git a/ui/guest/src/contentController.ts b/ui/guest/src/contentController.ts index 39e5180085..ae3b089b0c 100644 --- a/ui/guest/src/contentController.ts +++ b/ui/guest/src/contentController.ts @@ -170,9 +170,9 @@ export function byPathFetchIfNotLoaded(path: string): Observable Boolean(paths[path])), - pluck(path), - map((modelId) => models$.value[modelId]) + map((paths) => models$.value[paths[path]]) ); } else { requestedPaths[path] = true; diff --git a/ui/guest/src/elementRegistry.ts b/ui/guest/src/elementRegistry.ts index e09905c078..b45552d355 100644 --- a/ui/guest/src/elementRegistry.ts +++ b/ui/guest/src/elementRegistry.ts @@ -49,6 +49,8 @@ let db: LookupTable = {}; // Lookup table of element record id arrays, indexed by iceId let registry: LookupTable = {}; +export let inheritorsModelIdsMap = {}; + export function get(id: number): ElementRecord { const record = db[id]; record && nullOrUndefined(record.label) && setLabel(record); @@ -134,18 +136,18 @@ export function register(payload: ElementRecordRegistration): number { ? fieldId : fieldId.split(',').map((str) => str.trim()); - function create() { + function create(inheritanceParentModelId?: string) { // Create/register the physical record db[id] = { id, element, - modelId, + modelId: inheritanceParentModelId ?? modelId, index, label, fieldId: fieldIds, iceIds, complete: false, - inherited: fieldIds.some((fieldId) => isInheritedField(modelId, fieldId)) + inherited: fieldIds.some((fieldId) => isInheritedField(inheritanceParentModelId ?? modelId, fieldId)) }; } @@ -155,11 +157,13 @@ export function register(payload: ElementRecordRegistration): number { // for the model to be loaded. if (isInheritedField(model.craftercms.id, fieldId)) { byPathFetchIfNotLoaded(model.craftercms.sourceMap?.[fieldId]).subscribe((response) => { + const modelIdToRegister = response.craftercms.id; + inheritorsModelIdsMap[`${modelIdToRegister}-${fieldId}`] = modelId; model$(response.craftercms.id) .pipe(take(1)) .subscribe(() => { - create(); - completeDeferredRegistration(id); + create(modelIdToRegister); + completeDeferredRegistration(id, modelIdToRegister); }); }); } else { @@ -184,13 +188,13 @@ export function register(payload: ElementRecordRegistration): number { return id; } -export function completeDeferredRegistration(id: number): void { +export function completeDeferredRegistration(id: number, inheritanceParentModelId?: string): void { const record = db[id]; const { modelId, index, fieldId: fieldIds, iceIds } = record; if (fieldIds.length > 0) { fieldIds.forEach((fieldId) => { - const iceId = iceRegistry.register({ modelId, index, fieldId }); + const iceId = iceRegistry.register({ modelId: inheritanceParentModelId ?? modelId, index, fieldId }); if (!registry[iceId]) { registry[iceId] = []; } @@ -198,7 +202,7 @@ export function completeDeferredRegistration(id: number): void { !iceIds.includes(iceId) && iceIds.push(iceId); }); } else { - const iceId = iceRegistry.register({ modelId, index }); + const iceId = iceRegistry.register({ modelId: inheritanceParentModelId ?? modelId, index }); if (!registry[iceId]) { registry[iceId] = []; } @@ -451,6 +455,7 @@ export function flush(): void { db = {}; registry = {}; iceRegistry.flush(); + inheritorsModelIdsMap = {}; } export function getRegistry(): typeof db { diff --git a/ui/guest/src/react/GuestProxy.tsx b/ui/guest/src/react/GuestProxy.tsx index e874deca67..d5fd5bf5c6 100644 --- a/ui/guest/src/react/GuestProxy.tsx +++ b/ui/guest/src/react/GuestProxy.tsx @@ -17,7 +17,7 @@ import React, { useEffect, useRef } from 'react'; import { useGuestContext, useSelector } from './GuestContext'; import * as ElementRegistry from '../elementRegistry'; -import { getParentElementFromICEProps } from '../elementRegistry'; +import { getParentElementFromICEProps, inheritorsModelIdsMap } from '../elementRegistry'; import * as iceRegistry from '../iceRegistry'; import $ from 'jquery'; import { @@ -418,9 +418,15 @@ export function GuestProxy() { ifrm.onload = function () { $spinner.remove(); - const itemElement = ifrm.contentWindow.document.documentElement.querySelector( + let itemElement = ifrm.contentWindow.document.documentElement.querySelector( `[data-craftercms-model-id="${modelId}"][data-craftercms-field-id="${fieldId}"][data-craftercms-index="${targetIndex}"]` ); + if (!itemElement) { + const inheritedModelId = inheritorsModelIdsMap[`${modelId}-${fieldId}`]; + itemElement = ifrm.contentWindow.document.documentElement.querySelector( + `[data-craftercms-model-id="${inheritedModelId}"][data-craftercms-field-id="${fieldId}"][data-craftercms-index="${targetIndex}"]` + ); + } const $component = $(itemElement?.outerHTML); insertElement($component, $daddy, targetIndex); updateElementRegistrations(Array.from($daddy.children()), 'insert', targetIndex, null, fieldId); diff --git a/ui/guest/src/react/ZoneMenu.tsx b/ui/guest/src/react/ZoneMenu.tsx index 50b5107e15..9708785c6d 100644 --- a/ui/guest/src/react/ZoneMenu.tsx +++ b/ui/guest/src/react/ZoneMenu.tsx @@ -180,7 +180,7 @@ export function ZoneMenu(props: ZoneMenuProps) { const itemFieldId = isNodeSelectorItem ? nodeSelectorItemRecord.fieldId : fieldId; const itemIndex = isNodeSelectorItem ? nodeSelectorItemRecord.index : index; const parentModelId = getParentModelId(itemModelId, models, modelHierarchyMap); - const path = models[parentModelId ?? itemModelId].craftercms.path; + const path = modelPath; return { path, itemModelId, itemFieldId, itemIndex }; };