diff --git a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/dynamic-root/components/input-content-picker-document-root.element.ts b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/dynamic-root/components/input-content-picker-document-root.element.ts index 901b185141..21df4ede50 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/dynamic-root/components/input-content-picker-document-root.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/property-editors/content-picker/dynamic-root/components/input-content-picker-document-root.element.ts @@ -4,15 +4,20 @@ import { UMB_CONTENT_PICKER_DOCUMENT_ROOT_QUERY_STEP_PICKER_MODAL, } from '../modals/index.js'; import type { ManifestDynamicRootOrigin, ManifestDynamicRootQueryStep } from '../dynamic-root.extension.js'; -import { html, css, customElement, property, ifDefined, state, repeat } from '@umbraco-cms/backoffice/external/lit'; +import { css, customElement, html, ifDefined, property, repeat, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; +import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; +import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation'; import { UmbId } from '@umbraco-cms/backoffice/id'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UmbRepositoryItemsManager } from '@umbraco-cms/backoffice/repository'; import { UmbSorterController } from '@umbraco-cms/backoffice/sorter'; -import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; +import { UMB_DOCUMENT_ITEM_REPOSITORY_ALIAS } from '@umbraco-cms/backoffice/document'; +import { UMB_DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS } from '@umbraco-cms/backoffice/document-type'; import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; +import type { UmbDocumentItemModel } from '@umbraco-cms/backoffice/document'; +import type { UmbDocumentTypeItemModel } from '@umbraco-cms/backoffice/document-type'; import type { UmbModalContext } from '@umbraco-cms/backoffice/modal'; -import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation'; const elementName = 'umb-input-content-picker-document-root'; @customElement(elementName) @@ -20,6 +25,16 @@ export class UmbInputContentPickerDocumentRootElement extends UmbFormControlMixi string | undefined, typeof UmbLitElement >(UmbLitElement) { + readonly #documentItemManager = new UmbRepositoryItemsManager( + this, + UMB_DOCUMENT_ITEM_REPOSITORY_ALIAS, + ); + + readonly #documentTypeItemManager = new UmbRepositoryItemsManager( + this, + UMB_DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS, + ); + protected override getFormElement() { return undefined; } @@ -35,6 +50,10 @@ export class UmbInputContentPickerDocumentRootElement extends UmbFormControlMixi #dynamicRootOrigin?: { label: string; icon: string; description?: string }; + #documentLookup: Record = {}; + + #documentTypeLookup: Record = {}; + #modalContext?: typeof UMB_MODAL_MANAGER_CONTEXT.TYPE; #openModal?: UmbModalContext; @@ -59,9 +78,29 @@ export class UmbInputContentPickerDocumentRootElement extends UmbFormControlMixi this._queryStepManifests = queryStepManifests; }, ); + + this.observe(this.#documentItemManager.items, (documents) => { + if (!documents?.length) return; + + documents.forEach((document) => { + this.#documentLookup[document.unique] = document.name; + }); + + this.requestUpdate(); + }); + + this.observe(this.#documentTypeItemManager.items, (documentTypes) => { + if (!documentTypes?.length) return; + + documentTypes.forEach((documentType) => { + this.#documentTypeLookup[documentType.unique] = documentType.name; + }); + + this.requestUpdate(); + }); } - override connectedCallback(): void { + override connectedCallback() { super.connectedCallback(); this.#updateDynamicRootOrigin(this.data); @@ -116,6 +155,11 @@ export class UmbInputContentPickerDocumentRootElement extends UmbFormControlMixi #updateDynamicRootOrigin(data?: UmbContentPickerDynamicRoot) { if (!data) return; const origin = this._originManifests.find((item) => item.meta.originAlias === data.originAlias)?.meta; + + if (data.originKey) { + this.#documentItemManager.setUniques([data.originKey]); + } + this.#dynamicRootOrigin = { label: origin?.label ?? data.originAlias, icon: origin?.icon ?? 'icon-wand', @@ -131,7 +175,10 @@ export class UmbInputContentPickerDocumentRootElement extends UmbFormControlMixi querySteps = querySteps.map((item) => (item.unique ? item : { ...item, unique: UmbId.new() })); } + this.#documentTypeItemManager.setUniques((querySteps ?? []).map((x) => x.anyOfDocTypeKeys ?? []).flat()); + this.#sorter?.setModel(querySteps ?? []); + this.data = { ...this.data, ...{ querySteps } }; } @@ -142,8 +189,16 @@ export class UmbInputContentPickerDocumentRootElement extends UmbFormControlMixi description?: string; } { const step = this._queryStepManifests.find((step) => step.meta.queryStepAlias === item.alias)?.meta; - const docTypes = item.anyOfDocTypeKeys?.join(', '); - const description = docTypes ? this.localize.term('dynamicRoot_queryStepTypes') + docTypes : undefined; + + const docTypeNames = + item.anyOfDocTypeKeys + ?.map((docTypeKey) => this.#documentTypeLookup[docTypeKey] ?? docTypeKey) + .sort() + .join(', ') ?? ''; + + const description = item.anyOfDocTypeKeys + ? this.localize.term('dynamicRoot_queryStepTypes') + docTypeNames + : undefined; return { unique: item.unique, @@ -193,11 +248,11 @@ export class UmbInputContentPickerDocumentRootElement extends UmbFormControlMixi #renderOrigin() { if (!this.#dynamicRootOrigin) return; + const description = this.#dynamicRootOrigin.description + ? this.#documentLookup[this.#dynamicRootOrigin.description] + : ''; return html` - +