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

only have one picker for property editor UI

Browse Source
This commit is contained in:
Mads Rasmussen
2022-09-26 15:33:07 +02:00
parent b9a221ecd5
commit b22407f0f6
6 changed files with 123 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/Umbraco.Web.UI.Client/src/backoffice/components/ref-property-editor-ui/ref-property-editor-ui.element.ts
View File

@@ -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);
}

30
src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/shared/property-editor-config.element.ts
View File

@@ -101,22 +101,20 @@ export class UmbPropertyEditorConfigElement extends UmbContextConsumerMixin(LitE
render() {
return html`
<uui-box headline="Config">
${this._properties.length > 0
? html`
${this._properties?.map(
(property) => html`
<umb-entity-property
label="${property.label}"
description="${ifDefined(property.description)}"
alias="${property.alias}"
property-editor-ui-alias="${property.propertyEditorUI}"
.value=${this.data.find((data) => data.alias === property.alias)?.value}></umb-entity-property>
`
)}
`
: html`<div>No configuration</div>`}
</uui-box>
${this._properties.length > 0
? html`
${this._properties?.map(
(property) => html`
<umb-entity-property
label="${property.label}"
description="${ifDefined(property.description)}"
alias="${property.alias}"
property-editor-ui-alias="${property.propertyEditorUI}"
.value=${this.data.find((data) => data.alias === property.alias)?.value}></umb-entity-property>
`
)}
`
: html`<div>No configuration</div>`}
`;
}
}

167
src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/views/edit/editor-view-data-type-edit.element.ts
View File

@@ -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<any> = [];
@@ -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<ManifestPropertyEditorUI>(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<ManifestPropertyEditorUI>(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`
<uui-box headline="Property Editor" style="margin-bottom: 20px;">
${this._renderPropertyEditor()}
${when(this._dataType?.propertyEditorAlias, () => html` ${this._renderPropertyEditorUI()} `)}</uui-box
>
${this._renderPropertyEditorConfig()}
`;
}
private _renderPropertyEditor() {
return html`
<h4>Property Editor Model</h4>
${this._dataType?.propertyEditorAlias
? html`
<!-- TODO: border is a bit weird attribute name. Maybe single or standalone would be better? -->
<umb-ref-property-editor .name=${this._propertyEditorName} .alias=${this._propertyEditorAlias} border>
<uui-icon name="${this._propertyEditorIcon}" slot="icon"></uui-icon>
<uui-action-bar slot="actions">
<uui-button label="Change" @click=${this._openPropertyEditorPicker}></uui-button>
</uui-action-bar>
</umb-ref-property-editor>
`
: html`<uui-button
label="Select Property Editor"
look="placeholder"
color="default"
@click=${this._openPropertyEditorPicker}></uui-button>`}
<uui-box headline="Property Editor" style="margin-bottom: 20px;"> ${this._renderPropertyEditorUI()} </uui-box>
${this._renderConfig()} </uui-box>
`;
}
@@ -249,40 +166,36 @@ export class UmbEditorViewDataTypeEditElement extends UmbContextConsumerMixin(Li
? html`
<!-- TODO: border is a bit weird attribute name. Maybe single or standalone would be better? -->
<umb-ref-property-editor-ui
.name=${this._propertyEditorUIName}
.alias=${this._propertyEditorUIAlias}
name=${this._propertyEditorUIName}
alias=${this._propertyEditorUIAlias}
property-editor-alias=${this._propertyEditorAlias}
border>
<uui-icon name="${this._propertyEditorUIIcon}" slot="icon"></uui-icon>
${this._availablePropertyEditorUIsCount > 1
? html`
<uui-action-bar slot="actions">
<uui-button label="Change" @click=${this._openPropertyEditorUIPicker}></uui-button>
</uui-action-bar>
`
: nothing}
<uui-action-bar slot="actions">
<uui-button label="Change" @click=${this._openPropertyEditorUIPicker}></uui-button>
</uui-action-bar>
</umb-ref-property-editor-ui>
`
: html`
${this._availablePropertyEditorUIsCount > 0
? html`<uui-button
label="Select Property Editor UI"
look="placeholder"
color="default"
@click=${this._openPropertyEditorUIPicker}></uui-button>`
: html`No Property Editor UIs registered for this Property Editor`}
<uui-button
label="Select Property Editor UI"
look="placeholder"
color="default"
@click=${this._openPropertyEditorUIPicker}></uui-button>
`}
`;
}
private _renderPropertyEditorConfig() {
private _renderConfig() {
return html`
${this._propertyEditorAlias
${this._propertyEditorAlias && this._propertyEditorUIAlias
? html`
<umb-property-editor-config
property-editor-alias="${this._propertyEditorAlias}"
property-editor-ui-alias="${this._propertyEditorUIAlias}"
.data="${this._data}"></umb-property-editor-config>
<uui-box headline="Config">
<umb-property-editor-config
property-editor-alias="${this._propertyEditorAlias}"
property-editor-ui-alias="${this._propertyEditorUIAlias}"
.data="${this._data}"></umb-property-editor-config>
</uui-box>
`
: nothing}
`;

9
src/Umbraco.Web.UI.Client/src/core/services/modal/layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element.ts
View File

@@ -11,7 +11,6 @@ import type { UmbExtensionRegistry } from '../../../../extension';
import type { ManifestPropertyEditorUI } from '../../../../models';
export interface UmbModalPropertyEditorUIPickerData {
propertyEditorAlias: string;
selection?: Array<string>;
}
@@ -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();
}

24
src/Umbraco.Web.UI.Client/src/mocks/data/property-editor.data.ts
View File

@@ -318,6 +318,30 @@ export const data: Array<PropertyEditor> = [
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

34
src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts
View File

@@ -537,4 +537,38 @@ export const internalManifests: Array<ManifestTypes & { loader: () => Promise<ob
weight: 100,
},
},
{
type: 'propertyEditorUI',
alias: 'Umb.PropertyEditorUI.TextArea',
name: 'Textarea',
elementName: 'umb-property-editor-textarea',
loader: () => 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',
},
},
];