From 0eba18c384083aedba6ed2efbc1a33af93b5bbeb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Tue, 13 Aug 2024 21:26:59 +0200
Subject: [PATCH] validation for property type workspace

---
 ...roperty-workspace-view-settings.element.ts | 60 +++++++++++--------
 .../data-type-flow-input.element.ts           | 22 ++++++-
 2 files changed, 55 insertions(+), 27 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-type/workspace/views/settings/property-workspace-view-settings.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-type/workspace/views/settings/property-workspace-view-settings.element.ts
index 8ca49fbda7..2315c179fc 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-type/workspace/views/settings/property-workspace-view-settings.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-type/workspace/views/settings/property-workspace-view-settings.element.ts
@@ -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>
diff --git a/src/Umbraco.Web.UI.Client/src/packages/data-type/components/data-type-flow-input/data-type-flow-input.element.ts b/src/Umbraco.Web.UI.Client/src/packages/data-type/components/data-type-flow-input/data-type-flow-input.element.ts
index 0b433b76ed..b0166029f4 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/data-type/components/data-type-flow-input/data-type-flow-input.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/data-type/components/data-type-flow-input/data-type-flow-input.element.ts
@@ -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);
+			}
 		`,
 	];
 }