Merge pull request #2330 from umbraco/v15/feature/template-insert-modal-validation

Implement validation in 'insert field' modal

src/Umbraco.Web.UI.Client/src/packages/templating/modals/templating-page-field-builder/components/template-field-dropdown-list/template-field-dropdown-list.element.ts

@@ -16,6 +16,11 @@ import type { UUIComboboxEvent, UUIComboboxElement } from '@umbraco-cms/backoffi
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import { UmbMediaTypeDetailRepository, UMB_MEDIA_TYPE_PICKER_MODAL } from '@umbraco-cms/backoffice/media-type';
 import { UMB_MODAL_MANAGER_CONTEXT, type UmbModalManagerContext } from '@umbraco-cms/backoffice/modal';
+import {
+	UMB_VALIDATION_EMPTY_LOCALIZATION_KEY,
+	UmbFormControlMixin,
+	type UmbFormControlValidatorConfig,
+} from '@umbraco-cms/backoffice/validation';
 
 interface FieldPickerValue {
 	alias: string;
@@ -29,19 +34,44 @@ enum FieldType {
 }
 
 @customElement('umb-template-field-dropdown-list')
-export class UmbTemplateFieldDropdownListElement extends UmbLitElement {
+export class UmbTemplateFieldDropdownListElement extends UmbFormControlMixin<
+	FieldPickerValue | undefined,
+	typeof UmbLitElement,
+	undefined
+>(UmbLitElement) {
+	//
+	#requiredValidation?: UmbFormControlValidatorConfig;
+	@property({ type: Boolean })
+	public get required(): boolean | undefined {
+		return undefined;
+	}
+	public set required(value: boolean | undefined) {
+		if (value === true) {
+			this.#requiredValidation ??= this.addValidator(
+				'valueMissing',
+				() => this.requiredMessage,
+				() => !this._value,
+			);
+		} else if (this.#requiredValidation) {
+			this.removeValidator(this.#requiredValidation);
+		}
+	}
+
+	@property({ type: String })
+	requiredMessage = UMB_VALIDATION_EMPTY_LOCALIZATION_KEY;
+
 	@property({ type: Boolean, attribute: 'exclude-media-type', reflect: true })
 	public excludeMediaType = false;
 
 	private _value: FieldPickerValue | undefined;
 	@property({ type: Object })
-	public set value(val: FieldPickerValue | undefined) {
+	public override set value(val: FieldPickerValue | undefined) {
 		const oldVal = this._value;
 		this._value = val;
 		this.requestUpdate('value', oldVal);
 		this.dispatchEvent(new UmbChangeEvent());
 	}
-	public get value(): FieldPickerValue | undefined {
+	public override get value(): FieldPickerValue | undefined {
 		return this._value;
 	}
 
@@ -176,8 +206,8 @@ export class UmbTemplateFieldDropdownListElement extends UmbLitElement {
 		if (this._type !== FieldType.SYSTEM && !this._unique) return;
 		return html`
 			<strong>${this.localize.string(this._uniqueName ?? '')}</strong>
-			<uui-combobox id="value" value=${ifDefined(this.value?.alias)}>
-				<uui-combobox-list @change=${this.#onChangeValue}>
+			<uui-combobox id="value" value=${ifDefined(this.value?.alias)} @change=${this.#onChangeValue}>
+				<uui-combobox-list>
 					${repeat(
 						this._customFields,
 						(field) => field.alias,

src/Umbraco.Web.UI.Client/src/packages/templating/modals/templating-page-field-builder/templating-page-field-builder-modal.element.ts

@@ -7,24 +7,35 @@ import type { UmbTemplateFieldDropdownListElement } from './components/template-
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
-import type { UUIBooleanInputEvent, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
+import type { UUIBooleanInputEvent, UUIButtonState, UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
 
 // import of local components
 import './components/template-field-dropdown-list/index.js';
+import { UmbValidationContext, umbBindToValidation } from '@umbraco-cms/backoffice/validation';
 
 @customElement('umb-templating-page-field-builder-modal')
 export class UmbTemplatingPageFieldBuilderModalElement extends UmbModalBaseElement<
 	UmbTemplatingPageFieldBuilderModalData,
 	UmbTemplatingPageFieldBuilderModalValue
 > {
-	private _close() {
+	#validation = new UmbValidationContext(this);
+
+	#close() {
 		this.modalContext?.reject();
 	}
 
-	private _submit() {
-		if (!this._field) return;
-		this.value = { output: getUmbracoFieldSnippet(this._field, this._default, this._recursive) };
-		this.modalContext?.submit();
+	async #submit() {
+		this._submitButtonState = 'waiting';
+
+		try {
+			await this.#validation.validate();
+			this._submitButtonState = 'success';
+
+			this.value = { output: getUmbracoFieldSnippet(this._field!, this._default, this._recursive) };
+			this.modalContext?.submit();
+		} catch {
+			this._submitButtonState = 'failed';
+		}
 	}
 
 	@state()
@@ -39,6 +50,9 @@ export class UmbTemplatingPageFieldBuilderModalElement extends UmbModalBaseEleme
 	@state()
 	private _recursive: boolean = false;
 
+	@state()
+	private _submitButtonState: UUIButtonState;
+
 	/** TODO: Implement "Choose field" */
 
 	#onChangeFieldValue(e: Event) {
@@ -50,12 +64,14 @@ export class UmbTemplatingPageFieldBuilderModalElement extends UmbModalBaseEleme
 			<umb-body-layout headline=${this.localize.term('template_insert')}>
 				<uui-box>
 					<div>
-						<uui-label for="page-field-value">
-							<umb-localize key="templateEditor_chooseField">Choose field</umb-localize>
-						</uui-label>
-						<umb-template-field-dropdown-list
-							@change=${this.#onChangeFieldValue}
-							exclude-media-type></umb-template-field-dropdown-list>
+						<umb-property-layout orientation="vertical" label=${this.localize.term('templateEditor_chooseField')}>
+							<umb-template-field-dropdown-list
+								slot="editor"
+								required
+								${umbBindToValidation(this)}
+								@change=${this.#onChangeFieldValue}
+								exclude-media-type></umb-template-field-dropdown-list>
+						</umb-property-layout>
 
 						<uui-label for="page-field-default-value">
 							<umb-localize key="templateEditor_defaultValue">Default value</umb-localize>
@@ -85,14 +101,15 @@ export class UmbTemplatingPageFieldBuilderModalElement extends UmbModalBaseEleme
 				</uui-box>
 				<uui-button
 					slot="actions"
-					@click=${this._close}
+					@click=${this.#close}
 					look="secondary"
 					label=${this.localize.term('general_close')}></uui-button>
 				<uui-button
 					slot="actions"
-					@click=${this._submit}
+					@click=${this.#submit}
 					color="positive"
 					look="primary"
+					.state=${this._submitButtonState}
 					label=${this.localize.term('general_submit')}></uui-button>
 			</umb-body-layout>
 		`;