From 5c0b70d54fa6e09e00857405d0fa5cf39d916ca3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Wed, 11 Jan 2023 19:23:34 +0100
Subject: [PATCH] implemented native validation

---
 .../input-document-picker.element.ts          | 24 +++++++++----------
 .../workspace-property-layout.element.ts      |  4 +++-
 ...perty-editor-ui-document-picker.element.ts | 24 +++++++++++++++----
 3 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts
index 4832ac6a1e..f421aa62f8 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-document-picker/input-document-picker.element.ts
@@ -63,7 +63,6 @@ export class UmbInputDocumentPickerElement extends FormControlMixin(UmbLitElemen
 		return this._selectedKeys;
 	}
 	public set selectedKeys(keys: Array<string>) {
-		console.log("selectedKeys", keys);
 		this._selectedKeys = keys;
 		super.value = keys.join(',');
 		this._observePickedDocuments();
@@ -86,16 +85,17 @@ export class UmbInputDocumentPickerElement extends FormControlMixin(UmbLitElemen
 	constructor() {
 		super();
 
-    this.addValidator(
-      'rangeUnderflow',
-      () => this.minMessage,
-      () => !!this.min && (this._value as string).length < this.min
-    );
-    this.addValidator(
-      'rangeOverflow',
-      () => this.maxMessage,
-      () => !!this.max && (this._value as string).length > this.max
-    );
+		// TODO: Figure out why validator does not work. + Look into implementing the Validation message UUI part.
+		this.addValidator(
+			'rangeUnderflow',
+			() => this.minMessage,
+			() => !!this.min && this._selectedKeys.length < this.min
+		);
+		this.addValidator(
+			'rangeOverflow',
+			() => this.maxMessage,
+			() => !!this.max && this._selectedKeys.length > this.max
+		);
 
 		this.consumeContext('umbDocumentStore', (instance) => {
 			this._documentStore = instance
@@ -108,7 +108,7 @@ export class UmbInputDocumentPickerElement extends FormControlMixin(UmbLitElemen
 	}
 
   protected getFormElement() {
-    return this;
+    return undefined;
   }
 
 	private _observePickedDocuments() {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-property-layout/workspace-property-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-property-layout/workspace-property-layout.element.ts
index f8365e1797..c0142b6ef4 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-property-layout/workspace-property-layout.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-property-layout/workspace-property-layout.element.ts
@@ -59,7 +59,9 @@ export class UmbWorkspacePropertyLayoutElement extends LitElement {
 				<p>${this.description}</p>
 			</div>
 			<div>
-				<slot name="editor"></slot>
+				<uui-form-validation-message>
+					<slot name="editor"></slot>
+				</uui-form-validation-message>
 			</div>
 		`;
 	}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/content-picker/property-editor-ui-document-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/content-picker/property-editor-ui-document-picker.element.ts
index 70c3a15de7..9d155daff5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/content-picker/property-editor-ui-document-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/content-picker/property-editor-ui-document-picker.element.ts
@@ -1,11 +1,10 @@
 import { html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { UmbLitElement } from '@umbraco-cms/element';
-// eslint-disable-next-line import/no-named-as-default
 import type { UmbInputDocumentPickerElement } from 'src/backoffice/shared/components/input-document-picker/input-document-picker.element';
 import 'src/backoffice/shared/components/input-document-picker/input-document-picker.element';
+import type { DataTypePropertyData } from '@umbraco-cms/models';
 
-// TODO: rename to Document Picker
 @customElement('umb-property-editor-ui-document-picker')
 export class UmbPropertyEditorUIContentPickerElement extends UmbLitElement {
 	/*
@@ -30,7 +29,19 @@ export class UmbPropertyEditorUIContentPickerElement extends UmbLitElement {
 
 	// TODO: Use config for something.
 	@property({ type: Array, attribute: false })
-	public config = [];
+
+	public set config(config: Array<DataTypePropertyData>) {
+		const validationLimit = config.find(x => x.alias === 'validationLimit');
+
+		console.log("got config", validationLimit)
+		this._limitMin = (validationLimit?.value as any).min;
+		this._limitMax = (validationLimit?.value as any).max;
+	}
+
+	@state()
+	private _limitMin?:number;
+	@state()
+	private _limitMax?:number;
 
 
 	private _onChange(event: CustomEvent) {
@@ -45,7 +56,12 @@ export class UmbPropertyEditorUIContentPickerElement extends UmbLitElement {
 
 	render() {
 		return html`
-			<umb-input-document-picker @change=${this._onChange} .selectedKeys=${this._value}>Add</umb-input-document-picker>
+			<umb-input-document-picker
+				@change=${this._onChange}
+				.selectedKeys=${this._value}
+				.min=${this._limitMin}
+				.max=${this._limitMax}
+			>Add</umb-input-document-picker>
 		`;
 	}