From 8a80b0a9e0a687b49f4a08f2f2a3d19182ce52e2 Mon Sep 17 00:00:00 2001
From: bytedream <bytedream@protonmail.com>
Date: Sat, 30 Sep 2023 17:41:29 +0200
Subject: [PATCH] add custom invalid message on admin report create popup user
 input and fix search component validity check

---
 src/lib/components/Input/Search.svelte         | 16 +++++++++++-----
 src/routes/admin/reports/NewReportModal.svelte |  2 ++
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/Input/Search.svelte b/src/lib/components/Input/Search.svelte
index e0588d5..12d15c0 100644
--- a/src/lib/components/Input/Search.svelte
+++ b/src/lib/components/Input/Search.svelte
@@ -5,6 +5,7 @@
 	export let searchSuggestionFunc: (
 		input: string
 	) => Promise<{ name: string; value: string }[]> = () => Promise.resolve([]);
+	export let invalidMessage: string | null = null;
 	export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
 	export let label: string | null = null;
 	export let required = false;
@@ -32,21 +33,26 @@
 			class:input-xs={size === 'xs'}
 			class:input-sm={size === 'sm'}
 			class:input-md={size === 'md'}
-			class:input-lg={size === 'md'}
+			class:input-lg={size === 'lg'}
 			{id}
 			{required}
 			bind:value={inputValue}
-			on:input={() => {
+			on:input={(e) => {
 				value = '';
 				searchSuggestionFunc(inputValue).then((v) => {
 					searchSuggestions = v;
-					let searchSuggestionValue = v.find((v) => v.name === inputValue);
-					if (searchSuggestionValue !== undefined) {
-						value = searchSuggestionValue.value;
+					const searchSuggestion = v.find((v) => v.name === inputValue);
+					if (searchSuggestion !== undefined) {
+						inputValue = searchSuggestion.name;
+						value = searchSuggestion.value;
 						searchSuggestions = [];
+						e.target?.setCustomValidity('');
 					}
 				});
 			}}
+			on:invalid={(e) => {
+				if (invalidMessage != null) e.target?.setCustomValidity(invalidMessage);
+			}}
 			pattern={suggestionRequired ? `${value ? inputValue : 'a^'}` : null}
 		/>
 	</div>
diff --git a/src/routes/admin/reports/NewReportModal.svelte b/src/routes/admin/reports/NewReportModal.svelte
index 0c91750..8957c09 100644
--- a/src/routes/admin/reports/NewReportModal.svelte
+++ b/src/routes/admin/reports/NewReportModal.svelte
@@ -58,6 +58,7 @@
 				size="sm"
 				suggestionRequired={true}
 				searchSuggestionFunc={usernameSuggestions}
+				invalidMessage="Es können nur registrierte Spieler Report Autoren sein"
 				label="Reporter"
 				required={true}
 				bind:value={reporter}
@@ -66,6 +67,7 @@
 				size="sm"
 				suggestionRequired={true}
 				searchSuggestionFunc={usernameSuggestions}
+				invalidMessage="Es können nur registrierte Spieler reportet werden"
 				label="Reporteter User"
 				required={true}
 				bind:value={reported}