Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[6540] Inherited item selector field issues #3852

Draft
wants to merge 11 commits into
base: develop
Choose a base branch
from
4 changes: 2 additions & 2 deletions ui/guest/src/contentController.ts
Original file line number Diff line number Diff line change
Expand Up @@ -170,9 +170,9 @@ export function byPathFetchIfNotLoaded(path: string): Observable<ContentInstance
return of(null);
} else if (requestedPaths[path]) {
return paths$.pipe(
take(1),
filter((paths) => Boolean(paths[path])),
map((paths) => paths[path]),
map((modelId) => models$.value[modelId])
map((paths) => models$.value[paths[path]])
);
} else {
requestedPaths[path] = true;
Expand Down
21 changes: 13 additions & 8 deletions ui/guest/src/elementRegistry.ts
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,8 @@ let db: LookupTable<ElementRecord> = {};
// Lookup table of element record id arrays, indexed by iceId
let registry: LookupTable<number[]> = {};

export let inheritorsModelIdsMap = {};
jvega190 marked this conversation as resolved.
Show resolved Hide resolved
jvega190 marked this conversation as resolved.
Show resolved Hide resolved

export function get(id: number): ElementRecord {
const record = db[id];
record && nullOrUndefined(record.label) && setLabel(record);
Expand Down Expand Up @@ -133,18 +135,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))
};
}

Expand All @@ -154,11 +156,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;
jvega190 marked this conversation as resolved.
Show resolved Hide resolved
inheritorsModelIdsMap[`${modelIdToRegister}-${fieldId}`] = modelId;
jvega190 marked this conversation as resolved.
Show resolved Hide resolved
model$(response.craftercms.id)
.pipe(take(1))
.subscribe(() => {
create();
completeDeferredRegistration(id);
create(modelIdToRegister);
completeDeferredRegistration(id, modelIdToRegister);
});
});
} else {
Expand All @@ -183,21 +187,21 @@ 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] = [];
}
registry[iceId].push(record.id);
!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] = [];
}
Expand Down Expand Up @@ -442,6 +446,7 @@ export function flush(): void {
db = {};
registry = {};
iceRegistry.flush();
inheritorsModelIdsMap = {};
}

export function getRegistry(): typeof db {
Expand Down
10 changes: 8 additions & 2 deletions ui/guest/src/react/GuestProxy.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -422,9 +422,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}`];
jvega190 marked this conversation as resolved.
Show resolved Hide resolved
itemElement = ifrm.contentWindow.document.documentElement.querySelector(
`[data-craftercms-model-id="${inheritedModelId}"][data-craftercms-field-id="${fieldId}"][data-craftercms-index="${targetIndex}"]`
);
}
let component = document.createElement('div');
component.innerHTML = itemElement?.outerHTML;
component = component.firstChild as HTMLDivElement;
Expand Down
2 changes: 1 addition & 1 deletion ui/guest/src/react/ZoneMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 };
};

Expand Down