yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add property editor name and icon observables to context

Browse Source
This commit is contained in:
Mads Rasmussen
2023-10-17 12:10:08 +02:00
parent af69f78513
commit 96d4534b3d
2 changed files with 55 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/Umbraco.Web.UI.Client/src/packages/settings/data-types/workspace/data-type-workspace.context.ts
View File

@@ -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<PropertyEditorConfigDefaultData>([], (entry) => entry.alias);
defaults = this.#defaults.asObservable();
#propertyEditorUiIcon = new UmbStringState<string | null>(null);
propertyEditorUiIcon = this.#propertyEditorUiIcon.asObservable();
#propertyEditorUiName = new UmbStringState<string | null>(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 || [];
},

122
src/Umbraco.Web.UI.Client/src/packages/settings/data-types/workspace/views/details/data-type-details-workspace-view.element.ts
View File

@@ -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<any> = [];
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`
<uui-box> ${this._renderPropertyEditorUI()} </uui-box>
${this._renderConfig()} </uui-box>
<uui-box> ${this.#renderPropertyEditorReference()} </uui-box>
${this.#renderPropertyEditorConfig()} </uui-box>
`;
}
private _renderPropertyEditorUI() {
#renderPropertyEditorReference() {
console.log(this._dataType);
return html`
<umb-workspace-property-layout label="Property Editor" description="Select a property editor">
${this._propertyEditorUiAlias && this._propertyEditorSchemaAlias
@@ -178,18 +122,10 @@ export class UmbDataTypeDetailsWorkspaceViewEditElement
`;
}
private _renderConfig() {
return html`
${this._propertyEditorSchemaAlias && this._propertyEditorUiAlias
? html`
<uui-box headline="Settings">
<umb-property-editor-config
property-editor-ui-alias="${this._propertyEditorUiAlias}"
.data="${this._data}"></umb-property-editor-config>
</uui-box>
`
: nothing}
`;
#renderPropertyEditorConfig() {
return html`<uui-box headline="Settings">
<umb-property-editor-config></umb-property-editor-config>
</uui-box> `;
}
static styles = [