From 041baaa1298264ddd7df1de1298db80654203b94 Mon Sep 17 00:00:00 2001 From: leekelleher Date: Wed, 28 Feb 2024 11:05:16 +0000 Subject: [PATCH] Adds `umb-input-collection-configuration` component @nielslyngsoe may have comments on how I've reused `UMB_DATA_TYPE_PICKER_FLOW_DATA_TYPE_PICKER_MODAL`. --- .../src/packages/core/components/index.ts | 1 + .../input-collection-configuration/index.ts | 1 + .../input-collection-configuration.element.ts | 143 ++++++++++++++++++ .../packages/data-type/repository/index.ts | 2 + 4 files changed, 147 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/components/input-collection-configuration/index.ts create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/components/input-collection-configuration/input-collection-configuration.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts index ea96ecaaaa..c3dee2775c 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/index.ts @@ -11,6 +11,7 @@ export * from './field-dropdown-list/index.js'; export * from './footer-layout/index.js'; export * from './header-app/index.js'; export * from './history/index.js'; +export * from './input-collection-configuration/index.js'; export * from './input-color/index.js'; export * from './input-date/index.js'; export * from './input-dropdown/index.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-collection-configuration/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-collection-configuration/index.ts new file mode 100644 index 0000000000..08e8bcfe8f --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-collection-configuration/index.ts @@ -0,0 +1 @@ +export * from './input-collection-configuration.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/input-collection-configuration/input-collection-configuration.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-collection-configuration/input-collection-configuration.element.ts new file mode 100644 index 0000000000..3f73467245 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/input-collection-configuration/input-collection-configuration.element.ts @@ -0,0 +1,143 @@ +import { html, customElement, property, css, state, nothing } from '@umbraco-cms/backoffice/external/lit'; +import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui'; +import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UmbRepositoryItemsManager } from '@umbraco-cms/backoffice/repository'; +import { UMB_DATATYPE_WORKSPACE_MODAL, UMB_DATA_TYPE_ITEM_REPOSITORY_ALIAS } from '@umbraco-cms/backoffice/data-type'; +import { + UmbModalRouteRegistrationController, + UMB_DATA_TYPE_PICKER_FLOW_DATA_TYPE_PICKER_MODAL, +} from '@umbraco-cms/backoffice/modal'; +import type { UmbDataTypeItemModel } from '@umbraco-cms/backoffice/data-type'; + +@customElement('umb-input-collection-configuration') +export class UmbInputCollectionConfigurationElement extends FormControlMixin(UmbLitElement) { + protected getFormElement() { + return undefined; + } + + #itemManager = new UmbRepositoryItemsManager( + this, + UMB_DATA_TYPE_ITEM_REPOSITORY_ALIAS, + (x) => x.unique, + ); + + #createDataTypeModal: UmbModalRouteRegistrationController; + + #propertyEditorUiAlias = 'Umb.PropertyEditorUi.CollectionView'; + + @state() + private _dataTypePickerModalPath?: string; + + @state() + private _item?: UmbDataTypeItemModel; + + @property({ attribute: 'default-value' }) + defaultValue?: string; + + #setValue(value: string) { + this.value = value; + this.#itemManager.setUniques(value ? [value] : []); + this.dispatchEvent(new UmbChangeEvent()); + } + + constructor() { + super(); + + this.observe(this.#itemManager.items, (items) => { + this._item = items[0]; + }); + + new UmbModalRouteRegistrationController(this, UMB_DATA_TYPE_PICKER_FLOW_DATA_TYPE_PICKER_MODAL) + .addAdditionalPath(':uiAlias') + .onSetup((routingInfo) => { + return { + data: { + propertyEditorUiAlias: routingInfo.uiAlias, + }, + value: undefined, + }; + }) + .onSubmit((submitData) => { + if (submitData?.createNewWithPropertyEditorUiAlias) { + this.#createDataType(); + } else { + this.#setValue(submitData?.dataTypeId ?? this.defaultValue ?? ''); + } + }) + .observeRouteBuilder((routeBuilder) => { + this._dataTypePickerModalPath = routeBuilder({ uiAlias: this.#propertyEditorUiAlias }); + }); + + this.#createDataTypeModal = new UmbModalRouteRegistrationController(this, UMB_DATATYPE_WORKSPACE_MODAL) + .addAdditionalPath(':uiAlias') + .onSetup((params) => { + return { data: { entityType: 'data-type', preset: { editorUiAlias: params.uiAlias } } }; + }) + .onSubmit((value) => { + this.#setValue(value?.unique ?? this.defaultValue ?? ''); + }); + } + + connectedCallback() { + super.connectedCallback(); + + if (this.value) { + this.#itemManager.setUniques([this.value as string]); + } + } + + #clearDataType() { + this.#setValue(''); + } + + #createDataType() { + this.#createDataTypeModal.open({ uiAlias: this.#propertyEditorUiAlias }, 'create/null'); + } + + render() { + return !this.value ? this.#renderCreate() : this.#renderConfigured(); + } + + #renderCreate() { + if (!this._dataTypePickerModalPath) return nothing; + return html``; + } + + #renderConfigured() { + if (!this._item || !this._dataTypePickerModalPath) return nothing; + return html` + + + + + + + + + `; + } + + static styles = [ + css` + #create-button { + width: 100%; + } + `, + ]; +} + +export default UmbInputCollectionConfigurationElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-input-collection-configuration': UmbInputCollectionConfigurationElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/repository/index.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/repository/index.ts index 5acdb79db9..bb1cf117cd 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/data-type/repository/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/repository/index.ts @@ -2,3 +2,5 @@ export { UmbCopyDataTypeRepository, COPY_DATA_TYPE_REPOSITORY_ALIAS } from './co export { UmbDataTypeDetailRepository, UMB_DATA_TYPE_DETAIL_REPOSITORY_ALIAS } from './detail/index.js'; export { UmbDataTypeItemRepository, UMB_DATA_TYPE_ITEM_REPOSITORY_ALIAS } from './item/index.js'; export { UmbMoveDataTypeRepository, MOVE_DATA_TYPE_REPOSITORY_ALIAS } from './move/index.js'; + +export type { UmbDataTypeItemModel } from './item/index.js';