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

validation for property type workspace

Browse Source
This commit is contained in:
Niels Lyngsø
2024-08-13 21:26:59 +02:00
parent 6bfbc719bc
commit 0eba18c384
2 changed files with 55 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/Umbraco.Web.UI.Client/src/packages/core/property-type/workspace/views/settings/property-workspace-view-settings.element.ts
View File

@@ -182,28 +182,34 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i
<uui-box class="uui-text">
<div class="container">
<!-- TODO: Align styling across this and the property of document type workspace editor, or consider if this can go away for a different UX flow -->
<uui-input
id="name-input"
name="name"
required
label=${this.localize.term('placeholders_entername')}
placeholder=${this.localize.term('placeholders_entername')}
.value=${this._data?.name}
@input=${this.#onNameChange}
${umbBindToValidation(this, '$.headline')}
${umbFocus()}>
<!-- TODO: validation for bad characters -->
</uui-input>
<uui-input-lock
id="alias-input"
name="alias"
label=${this.localize.term('placeholders_enterAlias')}
placeholder=${this.localize.term('placeholders_enterAlias')}
.value=${this._data?.alias}
?locked=${this._aliasLocked}
@input=${this.#onAliasChange}
@lock-change=${this.#onToggleAliasLock}>
</uui-input-lock>
<uui-form-validation-message>
<uui-input
id="name-input"
name="name"
label=${this.localize.term('placeholders_entername')}
placeholder=${this.localize.term('placeholders_entername')}
.value=${this._data?.name}
@input=${this.#onNameChange}
required
${umbBindToValidation(this, '$.name')}
${umbFocus()}>
<!-- TODO: validation for bad characters -->
</uui-input>
</uui-form-validation-message>
<uui-form-validation-message>
<uui-input-lock
id="alias-input"
name="alias"
label=${this.localize.term('placeholders_enterAlias')}
placeholder=${this.localize.term('placeholders_enterAlias')}
.value=${this._data?.alias}
?locked=${this._aliasLocked}
required
${umbBindToValidation(this, '$.alias')}
@input=${this.#onAliasChange}
@lock-change=${this.#onToggleAliasLock}>
</uui-input-lock>
</uui-form-validation-message>
<uui-textarea
id="description-input"
name="description"
@@ -212,9 +218,13 @@ export class UmbPropertyTypeWorkspaceViewSettingsElement extends UmbLitElement i
placeholder=${this.localize.term('placeholders_enterDescription')}
.value=${this._data?.description}></uui-textarea>
</div>
<umb-data-type-flow-input
.value=${this._data?.dataType?.unique ?? ''}
@change=${this.#onDataTypeIdChange}></umb-data-type-flow-input>
<uui-form-validation-message>
<umb-data-type-flow-input
.value=${this._data?.dataType?.unique ?? ''}
@change=${this.#onDataTypeIdChange}
required
${umbBindToValidation(this, '$.dataType.unique')}></umb-data-type-flow-input>
</uui-form-validation-message>
<hr />
<div class="container">
<b><umb-localize key="validation_validation">Validation</umb-localize></b>

22
src/Umbraco.Web.UI.Client/src/packages/data-type/components/data-type-flow-input/data-type-flow-input.element.ts
View File

@@ -1,10 +1,10 @@
import { UMB_DATA_TYPE_PICKER_FLOW_MODAL } from '../../modals/index.js';
import { UMB_DATATYPE_WORKSPACE_MODAL } from '../../workspace/index.js';
import { css, html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UUIFormControlMixin } from '@umbraco-cms/backoffice/external/uui';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
import { UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
// Note: Does only support picking a single data type. But this could be developed later into this same component. To follow other picker input components.
/**
@@ -15,7 +15,7 @@ import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
* @fires focus - when the input gains focus
*/
@customElement('umb-data-type-flow-input')
export class UmbInputDataTypeElement extends UUIFormControlMixin(UmbLitElement, '') {
export class UmbInputDataTypeElement extends UmbFormControlMixin(UmbLitElement, '') {
protected override getFormElement() {
return undefined;
}
@@ -47,6 +47,12 @@ export class UmbInputDataTypeElement extends UUIFormControlMixin(UmbLitElement,
constructor() {
super();
this.addValidator(
'valueMissing',
() => UMB_VALIDATION_EMPTY_LOCALIZATION_KEY,
() => this.hasAttribute('required') && this.value === '',
);
this.#editDataTypeModal = new UmbModalRouteRegistrationController(this, UMB_DATATYPE_WORKSPACE_MODAL);
new UmbModalRouteRegistrationController(this, UMB_DATA_TYPE_PICKER_FLOW_MODAL)
@@ -66,6 +72,10 @@ export class UmbInputDataTypeElement extends UUIFormControlMixin(UmbLitElement,
});
}
override focus() {
this.shadowRoot?.querySelector('umb-ref-data-type')?.focus();
}
override render() {
return this._ids && this._ids.length > 0
? html`
@@ -87,6 +97,9 @@ export class UmbInputDataTypeElement extends UUIFormControlMixin(UmbLitElement,
label="Select Property Editor"
look="placeholder"
color="default"
@focus=${() => {
this.pristine = false;
}}
.href=${this._createRoute}></uui-button>
`;
}
@@ -98,6 +111,11 @@ export class UmbInputDataTypeElement extends UUIFormControlMixin(UmbLitElement,
--uui-button-padding-top-factor: 4;
--uui-button-padding-bottom-factor: 4;
}
:host(:invalid:not([pristine])) #empty-state-button {
--uui-button-border-color: var(--uui-color-danger);
--uui-button-border-width: 2px;
--uui-button-contrast: var(--uui-color-danger);
}
`,
];
}