From acd4523d160824399115ac5e4cab16a2d55fedd1 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 26 Apr 2024 07:45:55 +0200 Subject: [PATCH] wip generic input-dynamic-root-element --- .../documents/documents/components/index.ts | 1 - .../input-dynamic-root.element.ts} | 33 +++++++++---------- .../src/packages/dynamic-root/types.ts | 2 +- 3 files changed, 17 insertions(+), 19 deletions(-) rename src/Umbraco.Web.UI.Client/src/packages/{documents/documents/components/input-document-root-picker/input-document-root-picker.element.ts => dynamic-root/input-dynamic-root/input-dynamic-root.element.ts} (87%) diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/index.ts index 361ab007ce..339d030d1d 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/index.ts @@ -1,2 +1 @@ export * from './input-document/input-document.element.js'; -export * from './input-document-root-picker/input-document-root-picker.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-root-picker/input-document-root-picker.element.ts b/src/Umbraco.Web.UI.Client/src/packages/dynamic-root/input-dynamic-root/input-dynamic-root.element.ts similarity index 87% rename from src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-root-picker/input-document-root-picker.element.ts rename to src/Umbraco.Web.UI.Client/src/packages/dynamic-root/input-dynamic-root/input-dynamic-root.element.ts index 3de09d24ce..1d31b531c3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/documents/documents/components/input-document-root-picker/input-document-root-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/dynamic-root/input-dynamic-root/input-dynamic-root.element.ts @@ -1,3 +1,5 @@ +import type { UmbDynamicRoot, UmbDynamicRootQueryStep } from '../types.js'; +import { UMB_DYNAMIC_ROOT_ORIGIN_PICKER_MODAL, UMB_DYNAMIC_ROOT_QUERY_STEP_PICKER_MODAL } from '../modals/index.js'; import { html, css, customElement, property, ifDefined, state, repeat } from '@umbraco-cms/backoffice/external/lit'; import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui'; import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; @@ -6,18 +8,15 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbSorterController } from '@umbraco-cms/backoffice/sorter'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; -import { - UMB_DYNAMIC_ROOT_ORIGIN_PICKER_MODAL, - UMB_DYNAMIC_ROOT_QUERY_STEP_PICKER_MODAL, -} from '@umbraco-cms/backoffice/dynamic-root'; import type { ManifestDynamicRootOrigin, ManifestDynamicRootQueryStep, } from '@umbraco-cms/backoffice/extension-registry'; import type { UmbModalContext } from '@umbraco-cms/backoffice/modal'; -@customElement('umb-input-document-root-picker') -export class UmbInputDocumentRootPickerElement extends UUIFormControlMixin(UmbLitElement, '') { +const elementName = 'umb-input-dynamic-root'; +@customElement(elementName) +export class UmbInputDynamicRootElement extends UUIFormControlMixin(UmbLitElement, '') { protected getFormElement() { return undefined; } @@ -29,7 +28,7 @@ export class UmbInputDocumentRootPickerElement extends UUIFormControlMixin(UmbLi private _queryStepManifests: Array = []; @property({ attribute: false }) - data?: UmbTreePickerDynamicRoot | undefined; + data?: UmbDynamicRoot | undefined; #dynamicRootOrigin?: { label: string; icon: string; description?: string }; @@ -66,14 +65,14 @@ export class UmbInputDocumentRootPickerElement extends UUIFormControlMixin(UmbLi this.#updateDynamicRootQuerySteps(this.data?.querySteps); } - #sorter = new UmbSorterController(this, { + #sorter = new UmbSorterController(this, { getUniqueOfElement: (element) => { return element.id; }, getUniqueOfModel: (modelEntry) => { return modelEntry.unique; }, - identifier: 'Umb.SorterIdentifier.InputDocumentPickerRoot', + identifier: 'Umb.SorterIdentifier.InputDynamicRoot', itemSelector: 'uui-ref-node', containerSelector: '#query-steps', onChange: ({ model }) => { @@ -89,7 +88,7 @@ export class UmbInputDocumentRootPickerElement extends UUIFormControlMixin(UmbLi this.#openModal = this.#modalContext?.open(this, UMB_DYNAMIC_ROOT_ORIGIN_PICKER_MODAL, { data: { items: this._originManifests }, }); - this.#openModal?.onSubmit().then((data: UmbTreePickerDynamicRoot) => { + this.#openModal?.onSubmit().then((data: UmbDynamicRoot) => { const existingData = { ...this.data }; existingData.originKey = undefined; this.data = { ...existingData, ...data }; @@ -111,7 +110,7 @@ export class UmbInputDocumentRootPickerElement extends UUIFormControlMixin(UmbLi }); } - #updateDynamicRootOrigin(data?: UmbTreePickerDynamicRoot) { + #updateDynamicRootOrigin(data?: UmbDynamicRoot) { if (!data) return; const origin = this._originManifests.find((item) => item.meta.originAlias === data.originAlias)?.meta; this.#dynamicRootOrigin = { @@ -121,7 +120,7 @@ export class UmbInputDocumentRootPickerElement extends UUIFormControlMixin(UmbLi }; } - #updateDynamicRootQuerySteps(querySteps?: Array) { + #updateDynamicRootQuerySteps(querySteps?: Array) { if (!this.data) return; if (querySteps) { @@ -133,7 +132,7 @@ export class UmbInputDocumentRootPickerElement extends UUIFormControlMixin(UmbLi this.data = { ...this.data, ...{ querySteps } }; } - #getQueryStepMeta(item: UmbTreePickerDynamicRootQueryStep): { + #getQueryStepMeta(item: UmbDynamicRootQueryStep): { unique: string; label: string; icon: string; @@ -151,7 +150,7 @@ export class UmbInputDocumentRootPickerElement extends UUIFormControlMixin(UmbLi }; } - #removeDynamicRootQueryStep(item: UmbTreePickerDynamicRootQueryStep) { + #removeDynamicRootQueryStep(item: UmbDynamicRootQueryStep) { if (this.data?.querySteps) { const index = this.data.querySteps.indexOf(item); if (index !== -1) { @@ -222,7 +221,7 @@ export class UmbInputDocumentRootPickerElement extends UUIFormControlMixin(UmbLi ); } - #renderQueryStep(item: UmbTreePickerDynamicRootQueryStep) { + #renderQueryStep(item: UmbDynamicRootQueryStep) { if (!item.alias) return; const step = this.#getQueryStepMeta(item); return html` @@ -259,10 +258,10 @@ export class UmbInputDocumentRootPickerElement extends UUIFormControlMixin(UmbLi ]; } -export default UmbInputDocumentRootPickerElement; +export default UmbInputDynamicRootElement; declare global { interface HTMLElementTagNameMap { - 'umb-input-document-root-picker': UmbInputDocumentRootPickerElement; + [elementName]: UmbInputDynamicRootElement; } } diff --git a/src/Umbraco.Web.UI.Client/src/packages/dynamic-root/types.ts b/src/Umbraco.Web.UI.Client/src/packages/dynamic-root/types.ts index f4fc928a16..b8ef3c857c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/dynamic-root/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/dynamic-root/types.ts @@ -1,4 +1,4 @@ -export type UmbDynamicRoot = { +export type UmbDynamicRoot = { originAlias: string; originKey?: string; querySteps?: Array;