From 96d4534b3da210c8d75ddd0261a967634e121d58 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 17 Oct 2023 12:10:08 +0200 Subject: [PATCH] add property editor name and icon observables to context --- .../workspace/data-type-workspace.context.ts | 31 ++++- ...ata-type-details-workspace-view.element.ts | 122 +++++------------- 2 files changed, 55 insertions(+), 98 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/workspace/data-type-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/workspace/data-type-workspace.context.ts index 961ee4349a..c39690c9c4 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/workspace/data-type-workspace.context.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/workspace/data-type-workspace.context.ts @@ -6,7 +6,12 @@ import { UmbWorkspaceContextInterface, } from '@umbraco-cms/backoffice/workspace'; import type { DataTypeResponseModel } from '@umbraco-cms/backoffice/backend-api'; -import { appendToFrozenArray, UmbArrayState, UmbObjectState } from '@umbraco-cms/backoffice/observable-api'; +import { + appendToFrozenArray, + UmbArrayState, + UmbObjectState, + UmbStringState, +} from '@umbraco-cms/backoffice/observable-api'; import { UmbControllerHost, UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api'; import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; import { Observable, combineLatest, map } from '@umbraco-cms/backoffice/external/rxjs'; @@ -48,11 +53,22 @@ export class UmbDataTypeWorkspaceContext #defaults = new UmbArrayState([], (entry) => entry.alias); defaults = this.#defaults.asObservable(); + #propertyEditorUiIcon = new UmbStringState(null); + propertyEditorUiIcon = this.#propertyEditorUiIcon.asObservable(); + + #propertyEditorUiName = new UmbStringState(null); + propertyEditorUiName = this.#propertyEditorUiName.asObservable(); + constructor(host: UmbControllerHostElement) { super(host, 'Umb.Workspace.DataType', new UmbDataTypeRepository(host)); this.observe(this.propertyEditorSchemaAlias, async (propertyEditorSchemaAlias) => { - await this.#setPropertyEditorSchemaConfig(propertyEditorSchemaAlias || UMB_PROPERTY_EDITOR_SCHEMA_ALIAS_DEFAULT); + if (!propertyEditorSchemaAlias) { + this.setPropertyEditorSchemaAlias(UMB_PROPERTY_EDITOR_SCHEMA_ALIAS_DEFAULT); + return; + } + + await this.#setPropertyEditorSchemaConfig(propertyEditorSchemaAlias); this.#observePropertyEditorUIAlias(); }); } @@ -63,10 +79,12 @@ export class UmbDataTypeWorkspaceContext if (propertyEditorUiAlias === undefined || !this._propertyEditorSchemaConfigDefaultUIAlias) return; // if the property editor ui alias is not set, we use the default alias from the schema - const alias = - propertyEditorUiAlias === null ? this._propertyEditorSchemaConfigDefaultUIAlias : propertyEditorUiAlias; + if (propertyEditorUiAlias === null) { + this.setPropertyEditorUiAlias(this._propertyEditorSchemaConfigDefaultUIAlias); + return; + } - await this.#setPropertyEditorUIConfig(alias); + await this.#setPropertyEditorUIConfig(propertyEditorUiAlias); this._mergeConfigProperties(); this._mergeConfigDefaultData(); }); @@ -87,6 +105,9 @@ export class UmbDataTypeWorkspaceContext return this.observe( umbExtensionsRegistry.getByTypeAndAlias('propertyEditorUi', propertyEditorUIAlias), (manifest) => { + this.#propertyEditorUiIcon.next(manifest?.meta.icon || null); + this.#propertyEditorUiName.next(manifest?.name || null); + this._propertyEditorUISettingsProperties = manifest?.meta.settings?.properties || []; this._propertyEditorUISettingsDefaultData = manifest?.meta.settings?.defaultData || []; }, diff --git a/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/workspace/views/details/data-type-details-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/workspace/views/details/data-type-details-workspace-view.element.ts index 9ff081efdc..36f841c9f2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/workspace/views/details/data-type-details-workspace-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/settings/data-types/workspace/views/details/data-type-details-workspace-view.element.ts @@ -1,5 +1,5 @@ import { UMB_DATA_TYPE_WORKSPACE_CONTEXT } from '../../data-type-workspace.context.js'; -import { UmbTextStyles } from "@umbraco-cms/backoffice/style"; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; import { css, html, nothing, customElement, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbModalManagerContext, @@ -8,10 +8,7 @@ import { } from '@umbraco-cms/backoffice/modal'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import type { DataTypeResponseModel } from '@umbraco-cms/backoffice/backend-api'; -import { - UmbWorkspaceEditorViewExtensionElement, - umbExtensionsRegistry, -} from '@umbraco-cms/backoffice/extension-registry'; +import { UmbWorkspaceEditorViewExtensionElement } from '@umbraco-cms/backoffice/extension-registry'; @customElement('umb-data-type-details-workspace-view') export class UmbDataTypeDetailsWorkspaceViewEditElement @@ -22,19 +19,16 @@ export class UmbDataTypeDetailsWorkspaceViewEditElement _dataType?: DataTypeResponseModel; @state() - private _propertyEditorUiIcon?: string; + private _propertyEditorUiIcon?: string | null = null; @state() - private _propertyEditorUiName?: string; + private _propertyEditorUiName?: string | null = null; @state() - private _propertyEditorUiAlias?: string; + private _propertyEditorUiAlias?: string | null = null; @state() - private _propertyEditorSchemaAlias?: string; - - @state() - private _data: Array = []; + private _propertyEditorSchemaAlias?: string | null = null; private _workspaceContext?: typeof UMB_DATA_TYPE_WORKSPACE_CONTEXT.TYPE; private _modalContext?: UmbModalManagerContext; @@ -58,95 +52,45 @@ export class UmbDataTypeDetailsWorkspaceViewEditElement } this.observe(this._workspaceContext.data, (dataType) => { - if (!dataType) return; - - // TODO: handle if model is not of the type wanted. this._dataType = dataType; + }); - if (!this._dataType.propertyEditorUiAlias) { - if (this._dataType.propertyEditorAlias) { - // Get the property editor UI alias from the property editor alias: - this.observe( - umbExtensionsRegistry.getByTypeAndAlias('propertyEditorSchema', this._dataType.propertyEditorAlias), - (propertyEditorSchema) => { - // TODO: show error. We have stored a propertyEditorSchemaAlias and can't find the PropertyEditorSchema in the registry. - if (!propertyEditorSchema) return; - this._setPropertyEditorUiAlias(propertyEditorSchema.meta.defaultPropertyEditorUiAlias ?? undefined); - }, - '_observePropertyEditorSchemaForDefaultUI' - ); - } else { - this._setPropertyEditorUiAlias(undefined); - } - } else { - this._setPropertyEditorUiAlias(this._dataType.propertyEditorUiAlias); - } + this.observe(this._workspaceContext.propertyEditorUiAlias, (value) => { + this._propertyEditorUiAlias = value; + }); - if (this._dataType.values && this._dataType.values !== this._data) { - this._data = this._dataType.values; - } + this.observe(this._workspaceContext.propertyEditorSchemaAlias, (value) => { + this._propertyEditorSchemaAlias = value; + }); + + this.observe(this._workspaceContext.propertyEditorUiName, (value) => { + this._propertyEditorUiName = value; + }); + + this.observe(this._workspaceContext.propertyEditorUiIcon, (value) => { + this._propertyEditorUiIcon = value; }); } - private _setPropertyEditorUiAlias(value: string | undefined) { - const oldValue = this._propertyEditorUiAlias; - if (oldValue !== value) { - this._propertyEditorUiAlias = value; - this._observePropertyEditorUI(value || undefined); - } - } - - private _observePropertyEditorUI(propertyEditorUiAlias?: string) { - if (!propertyEditorUiAlias) { - this._propertyEditorUiName = this._propertyEditorUiIcon = this._propertyEditorUiAlias = undefined; - this.removeControllerByAlias('_observePropertyEditorUI'); - return; - } - - // remove the '_observePropertyEditorSchemaForDefaultUI' controller, as we do not want to observe for default value anymore: - this.removeControllerByAlias('_observePropertyEditorSchemaForDefaultUI'); - - this.observe( - umbExtensionsRegistry.getByTypeAndAlias('propertyEditorUi', propertyEditorUiAlias), - (propertyEditorUI) => { - // TODO: show error. We have stored a PropertyEditorUIAlias and can't find the PropertyEditorUI in the registry. - if (!propertyEditorUI) return; - - this._propertyEditorUiName = propertyEditorUI?.meta.label ?? propertyEditorUI?.name ?? ''; - this._propertyEditorUiAlias = propertyEditorUI?.alias ?? ''; - this._propertyEditorUiIcon = propertyEditorUI?.meta.icon ?? ''; - this._propertyEditorSchemaAlias = propertyEditorUI?.meta.propertyEditorSchemaAlias ?? ''; - - this._workspaceContext?.setPropertyEditorSchemaAlias(this._propertyEditorSchemaAlias); - }, - '_observePropertyEditorUI' - ); - } - private _openPropertyEditorUIPicker() { - if (!this._dataType) return; - const modalContext = this._modalContext?.open(UMB_PROPERTY_EDITOR_UI_PICKER_MODAL, { selection: this._propertyEditorUiAlias ? [this._propertyEditorUiAlias] : [], }); modalContext?.onSubmit().then(({ selection }) => { - this._selectPropertyEditorUI(selection[0]); + this._workspaceContext?.setPropertyEditorUiAlias(selection[0]); }); } - private _selectPropertyEditorUI(propertyEditorUiAlias: string | undefined) { - this._workspaceContext?.setPropertyEditorUiAlias(propertyEditorUiAlias); - } - render() { return html` - ${this._renderPropertyEditorUI()} - ${this._renderConfig()} + ${this.#renderPropertyEditorReference()} + ${this.#renderPropertyEditorConfig()} `; } - private _renderPropertyEditorUI() { + #renderPropertyEditorReference() { + console.log(this._dataType); return html` ${this._propertyEditorUiAlias && this._propertyEditorSchemaAlias @@ -178,18 +122,10 @@ export class UmbDataTypeDetailsWorkspaceViewEditElement `; } - private _renderConfig() { - return html` - ${this._propertyEditorSchemaAlias && this._propertyEditorUiAlias - ? html` - - - - ` - : nothing} - `; + #renderPropertyEditorConfig() { + return html` + + `; } static styles = [