From 3548fce5345e55693bf890fe3d86d8cf4f2c38ce Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 17 Oct 2023 11:06:01 +0200 Subject: [PATCH] render property editor config --- .../workspace/data-type-workspace.context.ts | 104 +++++++++++------- 1 file changed, 63 insertions(+), 41 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 4df074b8e9..3b026d7ef3 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 @@ -1,12 +1,20 @@ import { UmbDataTypeRepository } from '../repository/data-type.repository.js'; import { UmbDataTypeVariantContext } from '../variant-context/data-type-variant-context.js'; -import { UmbInvariantableWorkspaceContextInterface, UmbWorkspaceContext, UmbWorkspaceContextInterface } from '@umbraco-cms/backoffice/workspace'; +import { + UmbInvariantableWorkspaceContextInterface, + UmbWorkspaceContext, + 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 { 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'; -import { PropertyEditorConfigDefaultData, PropertyEditorConfigProperty, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; +import { + PropertyEditorConfigDefaultData, + PropertyEditorConfigProperty, + umbExtensionsRegistry, +} from '@umbraco-cms/backoffice/extension-registry'; import { UMB_PROPERTY_EDITOR_SCHEMA_ALIAS_DEFAULT } from '@umbraco-cms/backoffice/property-editor'; export class UmbDataTypeWorkspaceContext @@ -30,8 +38,10 @@ export class UmbDataTypeWorkspaceContext private _propertyEditorSchemaConfigDefaultData: Array = []; private _propertyEditorUISettingsDefaultData: Array = []; - private _propertyEditorSchemaConfigProperties?: Array; - private _propertyEditorUISettingsProperties?: Array; + private _propertyEditorSchemaConfigProperties: Array = []; + private _propertyEditorUISettingsProperties: Array = []; + + private _propertyEditorSchemaConfigDefaultUIAlias: string | null = null; private _configDefaultData?: Array; @@ -41,53 +51,57 @@ export class UmbDataTypeWorkspaceContext constructor(host: UmbControllerHostElement) { super(host, 'Umb.Workspace.DataType', new UmbDataTypeRepository(host)); - this.observe(this.propertyEditorUiAlias, (propertyEditorUiAlias) => { - if (!propertyEditorUiAlias) { - // No property editor ui alias, so we clean up and reset the properties. - this.removeControllerByAlias('propertyEditorUiAlias'); - this._propertyEditorUISettingsProperties = []; - this._propertyEditorUISettingsDefaultData = []; + this.observe(this.propertyEditorSchemaAlias, async (propertyEditorSchemaAlias) => { + await this.#setPropertyEditorSchemaConfig(propertyEditorSchemaAlias || UMB_PROPERTY_EDITOR_SCHEMA_ALIAS_DEFAULT); + + this.observe(this.propertyEditorUiAlias, async (propertyEditorUiAlias) => { + if (propertyEditorUiAlias === undefined || !this._propertyEditorSchemaConfigDefaultUIAlias) return; + + const alias = + propertyEditorUiAlias === null ? this._propertyEditorSchemaConfigDefaultUIAlias : propertyEditorUiAlias; + + await this.#setPropertyEditorUIConfig(alias); this._mergeConfigProperties(); this._mergeConfigDefaultData(); - return; - } - - this.observe( - umbExtensionsRegistry.getByTypeAndAlias('propertyEditorUi', propertyEditorUiAlias), - (manifest) => { - this._observePropertyEditorSchemaConfig( - manifest?.meta.propertyEditorSchemaAlias || UMB_PROPERTY_EDITOR_SCHEMA_ALIAS_DEFAULT - ); - this._propertyEditorUISettingsProperties = manifest?.meta.settings?.properties || []; - this._propertyEditorUISettingsDefaultData = manifest?.meta.settings?.defaultData || []; - this._mergeConfigProperties(); - this._mergeConfigDefaultData(); - } - , 'observePropertyEditorUiAlias' - ); + }); }); } - private _observePropertyEditorSchemaConfig(propertyEditorSchemaAlias: string) { - this.observe( + #setPropertyEditorSchemaConfig(propertyEditorSchemaAlias: string) { + return this.observe( umbExtensionsRegistry.getByTypeAndAlias('propertyEditorSchema', propertyEditorSchemaAlias), (manifest) => { this._propertyEditorSchemaConfigProperties = manifest?.meta.settings?.properties || []; this._propertyEditorSchemaConfigDefaultData = manifest?.meta.settings?.defaultData || []; - this._mergeConfigProperties(); - this._mergeConfigDefaultData(); - } - ); + this._propertyEditorSchemaConfigDefaultUIAlias = manifest?.meta.defaultPropertyEditorUiAlias || null; + }, + ).asPromise(); + } + + #setPropertyEditorUIConfig(propertyEditorUIAlias: string) { + return this.observe( + umbExtensionsRegistry.getByTypeAndAlias('propertyEditorUi', propertyEditorUIAlias), + (manifest) => { + this._propertyEditorUISettingsProperties = manifest?.meta.settings?.properties || []; + this._propertyEditorUISettingsDefaultData = manifest?.meta.settings?.defaultData || []; + }, + ).asPromise(); } private _mergeConfigProperties() { - if(this._propertyEditorSchemaConfigProperties && this._propertyEditorUISettingsProperties) { - this.#properties.next([...this._propertyEditorSchemaConfigProperties, ...this._propertyEditorUISettingsProperties]); + console.log('schema properties', this._propertyEditorSchemaConfigProperties); + console.log('ui properties', this._propertyEditorUISettingsProperties); + + if (this._propertyEditorSchemaConfigProperties && this._propertyEditorUISettingsProperties) { + this.#properties.next([ + ...this._propertyEditorSchemaConfigProperties, + ...this._propertyEditorUISettingsProperties, + ]); } } private _mergeConfigDefaultData() { - if(!this._propertyEditorSchemaConfigDefaultData || !this._propertyEditorUISettingsDefaultData) return; + if (!this._propertyEditorSchemaConfigDefaultData || !this._propertyEditorUISettingsDefaultData) return; this._configDefaultData = [ ...this._propertyEditorSchemaConfigDefaultData, @@ -159,17 +173,22 @@ export class UmbDataTypeWorkspaceContext return combineLatest([ this.#data.asObservablePart((data) => data?.values?.find((x) => x.alias === propertyAlias)?.value as ReturnType), - this.#defaults.asObservablePart((defaults) => defaults?.find((x) => x.alias === propertyAlias)?.value as ReturnType), + this.#defaults.asObservablePart( + (defaults) => defaults?.find((x) => x.alias === propertyAlias)?.value as ReturnType, + ), ]).pipe( map(([value, defaultValue]) => { - return (value ?? defaultValue); - }) + return value ?? defaultValue; + }), ); //return this.#data.asObservablePart((data) => data?.values?.find((x) => x.alias === propertyAlias)?.value ?? this.getPropertyDefaultValue(propertyAlias) as ReturnType); } getPropertyValue(propertyAlias: string) { - return this.#data.getValue()?.values?.find((x) => x.alias === propertyAlias)?.value as ReturnType ?? this.getPropertyDefaultValue(propertyAlias) as ReturnType; + return ( + (this.#data.getValue()?.values?.find((x) => x.alias === propertyAlias)?.value as ReturnType) ?? + (this.getPropertyDefaultValue(propertyAlias) as ReturnType) + ); } // TODO: its not called a property in the model, but we do consider this way in our front-end @@ -207,7 +226,10 @@ export class UmbDataTypeWorkspaceContext } } -export const UMB_DATA_TYPE_WORKSPACE_CONTEXT = new UmbContextToken( +export const UMB_DATA_TYPE_WORKSPACE_CONTEXT = new UmbContextToken< + UmbWorkspaceContextInterface, + UmbDataTypeWorkspaceContext +>( 'UmbWorkspaceContext', - (context): context is UmbDataTypeWorkspaceContext => context.getEntityType?.() === 'data-type' + (context): context is UmbDataTypeWorkspaceContext => context.getEntityType?.() === 'data-type', );