diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/components/ref-property-editor-ui/ref-property-editor-ui.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/components/ref-property-editor-ui/ref-property-editor-ui.element.ts index fcbe9b0f3b..c1ee46f8bc 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/components/ref-property-editor-ui/ref-property-editor-ui.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/components/ref-property-editor-ui/ref-property-editor-ui.element.ts @@ -12,12 +12,23 @@ export class UmbRefPropertyEditorUIElement extends UUIRefNodeElement { @property({ type: String }) alias = ''; + @property({ type: String, attribute: 'property-editor-alias' }) + propertyEditorAlias = ''; + protected renderDetail() { const details: string[] = []; if (this.alias !== '') { details.push(this.alias); } + + // TODO: show message when there is no property editor data model + if (this.propertyEditorAlias !== '') { + details.push(this.propertyEditorAlias); + } else { + details.push('Property Editor Missing'); + } + if (this.detail !== '') { details.push(this.detail); } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/shared/property-editor-config.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/shared/property-editor-config.element.ts index 53bb7c820e..de289b2fa2 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/shared/property-editor-config.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/shared/property-editor-config.element.ts @@ -101,22 +101,20 @@ export class UmbPropertyEditorConfigElement extends UmbContextConsumerMixin(LitE render() { return html` - - ${this._properties.length > 0 - ? html` - ${this._properties?.map( - (property) => html` - data.alias === property.alias)?.value}> - ` - )} - ` - : html`
No configuration
`} - + ${this._properties.length > 0 + ? html` + ${this._properties?.map( + (property) => html` + data.alias === property.alias)?.value}> + ` + )} + ` + : html`
No configuration
`} `; } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/views/edit/editor-view-data-type-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/views/edit/editor-view-data-type-edit.element.ts index 05c133dbc1..0b308e8ab8 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/views/edit/editor-view-data-type-edit.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/views/edit/editor-view-data-type-edit.element.ts @@ -1,8 +1,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib'; import { css, html, LitElement, nothing } from 'lit'; import { customElement, state } from 'lit/decorators.js'; -import { when } from 'lit-html/directives/when.js'; -import { Subscription, map } from 'rxjs'; +import { Subscription } from 'rxjs'; import { UmbModalService } from '../../../../../core/services/modal'; import { UmbContextConsumerMixin } from '../../../../../core/context'; @@ -22,15 +21,6 @@ export class UmbEditorViewDataTypeEditElement extends UmbContextConsumerMixin(Li @state() _dataType?: DataTypeDetails; - @state() - private _propertyEditorIcon = ''; - - @state() - private _propertyEditorName = ''; - - @state() - private _propertyEditorAlias = ''; - @state() private _propertyEditorUIIcon = ''; @@ -41,7 +31,7 @@ export class UmbEditorViewDataTypeEditElement extends UmbContextConsumerMixin(Li private _propertyEditorUIAlias = ''; @state() - private _availablePropertyEditorUIsCount = 0; + private _propertyEditorAlias = ''; @state() private _data: Array = []; @@ -53,7 +43,6 @@ export class UmbEditorViewDataTypeEditElement extends UmbContextConsumerMixin(Li private _dataTypeSubscription?: Subscription; private _propertyEditorSubscription?: Subscription; private _propertyEditorUISubscription?: Subscription; - private _availablePropertyEditorUIsSubscription?: Subscription; private _modalService?: UmbModalService; @@ -93,7 +82,6 @@ export class UmbEditorViewDataTypeEditElement extends UmbContextConsumerMixin(Li if (this._dataType.propertyEditorAlias !== this._propertyEditorAlias) { this._observePropertyEditor(this._dataType.propertyEditorAlias); - this._observeAvailablePropertyEditorUIs(this._dataType.propertyEditorAlias); } if (this._dataType.propertyEditorUIAlias !== this._propertyEditorUIAlias) { @@ -106,6 +94,22 @@ export class UmbEditorViewDataTypeEditElement extends UmbContextConsumerMixin(Li }); } + private _observePropertyEditorUI(propertyEditorUIAlias: string | null) { + if (!propertyEditorUIAlias) return; + + this._propertyEditorUISubscription?.unsubscribe(); + + this._propertyEditorUISubscription = this._extensionRegistry + ?.getByAlias(propertyEditorUIAlias) + .subscribe((propertyEditorUI) => { + this._propertyEditorUIName = propertyEditorUI?.name ?? ''; + this._propertyEditorUIAlias = propertyEditorUI?.alias ?? ''; + this._propertyEditorUIIcon = propertyEditorUI?.meta?.icon ?? ''; + + this._observePropertyEditor(propertyEditorUI?.meta?.propertyEditor ?? ''); + }); + } + private _observePropertyEditor(propertyEditorAlias: string | null) { if (!propertyEditorAlias) return; @@ -114,74 +118,14 @@ export class UmbEditorViewDataTypeEditElement extends UmbContextConsumerMixin(Li this._propertyEditorSubscription = this._propertyEditorStore ?.getByAlias(propertyEditorAlias) .subscribe((propertyEditor) => { - this._propertyEditorName = propertyEditor?.name ?? ''; this._propertyEditorAlias = propertyEditor?.alias ?? ''; - this._propertyEditorIcon = propertyEditor?.icon ?? ''; }); } - private _observeAvailablePropertyEditorUIs(propertyEditorAlias: string | null) { - if (!propertyEditorAlias) return; - - this._availablePropertyEditorUIsSubscription?.unsubscribe(); - - this._availablePropertyEditorUIsSubscription = this._extensionRegistry - ?.extensionsOfType('propertyEditorUI') - .pipe( - map((propertyEditorUIs) => - propertyEditorUIs.filter((propertyEditorUI) => propertyEditorUI.meta.propertyEditor === propertyEditorAlias) - ) - ) - .subscribe((availablePropertyEditorUIs) => { - // Select the Property Editor UI if there is only one available - this._availablePropertyEditorUIsCount = availablePropertyEditorUIs.length; - if (availablePropertyEditorUIs?.length === 1) { - this._selectPropertyEditorUI(availablePropertyEditorUIs[0].alias); - } - }); - } - - private _observePropertyEditorUI(propertyEditorUIAlias: string | null) { - if (!propertyEditorUIAlias) return; - - this._propertyEditorUISubscription?.unsubscribe(); - - this._propertyEditorSubscription = this._extensionRegistry - ?.getByAlias(propertyEditorUIAlias) - .subscribe((propertyEditorUI) => { - this._propertyEditorUIName = propertyEditorUI?.name ?? ''; - this._propertyEditorUIAlias = propertyEditorUI?.alias ?? ''; - this._propertyEditorUIIcon = propertyEditorUI?.meta?.icon ?? ''; - }); - } - - private _openPropertyEditorPicker() { - if (!this._dataType) return; - - const selection = this._dataType.propertyEditorAlias ? [this._dataType.propertyEditorAlias] : []; - const modalHandler = this._modalService?.propertyEditorPicker({ selection }); - - modalHandler?.onClose().then(({ selection } = {}) => { - if (!selection) return; - - const propertyEditorAlias = selection[0]; - this._selectPropertyEditor(propertyEditorAlias); - }); - } - - private _selectPropertyEditor(propertyEditorAlias: string) { - if (!this._dataType || this._dataType.propertyEditorUIAlias === propertyEditorAlias) return; - - this._selectPropertyEditorUI(null); - this._dataType.propertyEditorAlias = propertyEditorAlias; - this._dataTypeContext?.update({ propertyEditorAlias }); - } - private _openPropertyEditorUIPicker() { - if (!this._dataType || !this._dataType.propertyEditorAlias) return; + if (!this._dataType) return; const modalHandler = this._modalService?.propertyEditorUIPicker({ - propertyEditorAlias: this._dataType.propertyEditorAlias, selection: this._dataType.propertyEditorUIAlias ? [this._dataType.propertyEditorUIAlias] : [], }); @@ -205,39 +149,12 @@ export class UmbEditorViewDataTypeEditElement extends UmbContextConsumerMixin(Li this._dataTypeSubscription?.unsubscribe(); this._propertyEditorSubscription?.unsubscribe(); this._propertyEditorUISubscription?.unsubscribe(); - this._availablePropertyEditorUIsSubscription?.unsubscribe(); } render() { return html` - - ${this._renderPropertyEditor()} - ${when(this._dataType?.propertyEditorAlias, () => html` ${this._renderPropertyEditorUI()} `)} - - ${this._renderPropertyEditorConfig()} - `; - } - - private _renderPropertyEditor() { - return html` -

Property Editor Model

- - ${this._dataType?.propertyEditorAlias - ? html` - - - - - - - - ` - : html``} + ${this._renderPropertyEditorUI()} + ${this._renderConfig()} `; } @@ -249,40 +166,36 @@ export class UmbEditorViewDataTypeEditElement extends UmbContextConsumerMixin(Li ? html` - - ${this._availablePropertyEditorUIsCount > 1 - ? html` - - - - ` - : nothing} + + + ` : html` - ${this._availablePropertyEditorUIsCount > 0 - ? html`` - : html`No Property Editor UIs registered for this Property Editor`} + `} `; } - private _renderPropertyEditorConfig() { + private _renderConfig() { return html` - ${this._propertyEditorAlias + ${this._propertyEditorAlias && this._propertyEditorUIAlias ? html` - + + + ` : nothing} `; diff --git a/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element.ts b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element.ts index d140798648..7aae0e24c1 100644 --- a/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element.ts @@ -11,7 +11,6 @@ import type { UmbExtensionRegistry } from '../../../../extension'; import type { ManifestPropertyEditorUI } from '../../../../models'; export interface UmbModalPropertyEditorUIPickerData { - propertyEditorAlias: string; selection?: Array; } @@ -54,13 +53,6 @@ export class UmbModalLayoutPropertyEditorUIPickerElement extends UmbContextConsu this._propertyEditorUIsSubscription = this._extensionRegistry ?.extensionsOfType('propertyEditorUI') - .pipe( - map((propertyEditorUIs) => - propertyEditorUIs.filter( - (propertyEditorUI) => propertyEditorUI.meta.propertyEditor === this.data?.propertyEditorAlias - ) - ) - ) .subscribe((propertyEditorUIs) => { this._propertyEditorUIs = propertyEditorUIs; }); @@ -83,7 +75,6 @@ export class UmbModalLayoutPropertyEditorUIPickerElement extends UmbContextConsu disconnectedCallback(): void { super.disconnectedCallback(); - this._propertyEditorUIsSubscription?.unsubscribe(); } diff --git a/src/Umbraco.Web.UI.Client/src/mocks/data/property-editor.data.ts b/src/Umbraco.Web.UI.Client/src/mocks/data/property-editor.data.ts index 5d2357b2a4..ce20226609 100644 --- a/src/Umbraco.Web.UI.Client/src/mocks/data/property-editor.data.ts +++ b/src/Umbraco.Web.UI.Client/src/mocks/data/property-editor.data.ts @@ -318,6 +318,30 @@ export const data: Array = [ icon: 'umb:autofill', alias: 'Umbraco.Custom', }, + { + isSystem: false, + group: 'Custom', + hasConfig: true, + name: 'String', + icon: 'umb:autofill', + alias: 'Umbraco.String', + config: { + properties: [ + { + alias: 'minChars', + label: 'Minimum allowed characters', + description: 'If empty, no min characters limit', + propertyEditorUI: 'Umb.PropertyEditorUI.Number', + }, + { + alias: 'maxChars', + label: 'Maximum allowed characters', + description: 'If empty, 512 character limit', + propertyEditorUI: 'Umb.PropertyEditorUI.Number', + }, + ], + }, + }, ]; // Temp mocked database diff --git a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts index ae4161603f..d7faea865d 100644 --- a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts @@ -537,4 +537,38 @@ export const internalManifests: Array Promise import('./backoffice/property-editors/textarea/property-editor-textarea.element'), + meta: { + icon: 'edit', + group: 'common', + propertyEditor: 'Umbraco.Unknown', + config: { + properties: [ + { + alias: 'rows', + label: 'Number of rows', + description: 'If empty - 10 rows would be set as the default value', + propertyEditorUI: 'Umb.PropertyEditorUI.Number', + }, + ], + }, + }, + }, + { + type: 'propertyEditorUI', + alias: 'Umb.PropertyEditorUI.TextField', + name: 'Text Field', + elementName: 'umb-property-editor-text', + loader: () => import('./backoffice/property-editors/text/property-editor-text.element'), + meta: { + icon: 'edit', + group: 'common', + propertyEditor: 'Umbraco.Unknown', + }, + }, ];