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

validate data-type

Browse Source
This commit is contained in:
Niels Lyngsø
2024-08-16 13:30:50 +02:00
parent b29b7095ea
commit bb0fc3bbb1
2 changed files with 38 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/Umbraco.Web.UI.Client/src/packages/data-type/workspace/data-type-workspace-editor.element.ts
View File

@@ -4,6 +4,7 @@ import { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement, umbFocus } from '@umbraco-cms/backoffice/lit-element';
import type { ManifestWorkspace } from '@umbraco-cms/backoffice/extension-registry';
import { umbBindToValidation } from '@umbraco-cms/backoffice/validation';
/**
* @element umb-data-type-workspace-editor
* @description - Element for displaying the Data Type Workspace edit route.
@@ -54,8 +55,10 @@ export class UmbDataTypeWorkspaceEditorElement extends UmbLitElement {
<uui-input
slot="header"
id="nameInput"
.value=${this._dataTypeName}
.value=${this._dataTypeName ?? ''}
@input="${this.#handleInput}"
required
${umbBindToValidation(this, `$.name`, this._dataTypeName)}
${umbFocus()}></uui-input>
</umb-workspace-editor>
`;

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

@@ -4,6 +4,7 @@ import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { UMB_MODAL_MANAGER_CONTEXT, UMB_PROPERTY_EDITOR_UI_PICKER_MODAL } from '@umbraco-cms/backoffice/modal';
import type { UmbWorkspaceViewElement } from '@umbraco-cms/backoffice/extension-registry';
import { umbBindToValidation } from '@umbraco-cms/backoffice/validation';
@customElement('umb-data-type-details-workspace-view')
export class UmbDataTypeDetailsWorkspaceViewEditElement extends UmbLitElement implements UmbWorkspaceViewElement {
@@ -71,11 +72,9 @@ export class UmbDataTypeDetailsWorkspaceViewEditElement extends UmbLitElement im
override render() {
return html`
<uui-box>
<umb-property-layout label="Property Editor" description=${this.localize.term('propertyEditorPicker_title')}>
${this._propertyEditorUiAlias && this._propertyEditorSchemaAlias
? this.#renderPropertyEditorReference()
: this.#renderChooseButton()}
</umb-property-layout>
${this._propertyEditorUiAlias && this._propertyEditorSchemaAlias
? this.#renderPropertyEditorReference()
: this.#renderChooseButton()}
</uui-box>
${this.#renderSettings()}
`;
@@ -90,37 +89,44 @@ export class UmbDataTypeDetailsWorkspaceViewEditElement extends UmbLitElement im
`;
}
// Notice, we have implemented a property-layout for each states of the property editor ui picker, in this way the validation message gets removed once the choose-button is gone. (As we are missing ability to detect if elements got removed from DOM)[NL]
#renderChooseButton() {
return html`
<uui-button
slot="editor"
id="btn-add"
label=${this.localize.term('propertyEditorPicker_title')}
look="placeholder"
color="default"
@click=${this.#openPropertyEditorUIPicker}></uui-button>
<umb-property-layout label="Property Editor" description=${this.localize.term('propertyEditorPicker_title')}>
<uui-button
slot="editor"
id="btn-add"
label=${this.localize.term('propertyEditorPicker_title')}
look="placeholder"
color="default"
required
${umbBindToValidation(this)}
@click=${this.#openPropertyEditorUIPicker}></uui-button>
</umb-property-layout>
`;
}
#renderPropertyEditorReference() {
if (!this._propertyEditorUiAlias || !this._propertyEditorSchemaAlias) return nothing;
return html`
<umb-ref-property-editor-ui
slot="editor"
name=${this._propertyEditorUiName ?? ''}
alias=${this._propertyEditorUiAlias}
property-editor-schema-alias=${this._propertyEditorSchemaAlias}
standalone
@open=${this.#openPropertyEditorUIPicker}>
${this._propertyEditorUiIcon
? html`<umb-icon name=${this._propertyEditorUiIcon} slot="icon"></umb-icon>`
: nothing}
<uui-action-bar slot="actions">
<uui-button
label=${this.localize.term('general_change')}
@click=${this.#openPropertyEditorUIPicker}></uui-button>
</uui-action-bar>
</umb-ref-property-editor-ui>
<umb-property-layout label="Property Editor" description=${this.localize.term('propertyEditorPicker_title')}>
<umb-ref-property-editor-ui
slot="editor"
name=${this._propertyEditorUiName ?? ''}
alias=${this._propertyEditorUiAlias}
property-editor-schema-alias=${this._propertyEditorSchemaAlias}
standalone
@open=${this.#openPropertyEditorUIPicker}>
${this._propertyEditorUiIcon
? html`<umb-icon name=${this._propertyEditorUiIcon} slot="icon"></umb-icon>`
: nothing}
<uui-action-bar slot="actions">
<uui-button
label=${this.localize.term('general_change')}
@click=${this.#openPropertyEditorUIPicker}></uui-button>
</uui-action-bar>
</umb-ref-property-editor-ui>
</umb-property-layout>
`;
}