wip

src/components/tools/DonationCreate.svelte

@@ -5,9 +5,9 @@
 		DonorService,
 		RunnerService,
 	} from "@odit/lfk-client-js";
-	import Select from "svelte-select";
 	import toast from "svelte-french-toast";
 	import VirtualSelect from "./VirtualSelect.svelte";
+	import { onMount } from "svelte";
 
 	let runners = [];
 	let donors = [];
@@ -63,23 +63,8 @@
 		);
 	};
 
-	const filterRunners = (label, filterText, option) => {
-		if (filterText.startsWith("#")) {
-			return option.value.id == parseInt(filterText.replace("#", ""));
-		}
-		return (
-			label.toLowerCase().includes(filterText.toLowerCase()) ||
-			option.value.toString().startsWith(filterText.toLowerCase())
-		);
-	};
-
-	let selectRef;
-	// function resetComponent() {
-	// 	if (selectRef) {
-	// 		selectRef.reset();
-	// 		console.log("Component state reset");
-	// 	}
-	// }
+	let selectRefRunner;
+	let selectRefDonor;
 
 	function resetAll() {
 		runnerinfo = { id: 0, firstname: "", lastname: "" };
@@ -87,14 +72,13 @@
 		amount = 0;
 		address_checked = false;
 		donor_create_new = false;
-		// const clears = document.querySelectorAll(".clearSelect");
-		// clears.forEach((c) => {
-		// 	c.click();
-		// });
-		// resetComponent();
-		selectRef.reset();
+		selectRefRunner.reset();
+		selectRefDonor.reset();
 		document.querySelector("#jjqzqicxujrnnh1x3447x18x").focus();
 	}
+	onMount(() => {
+		document.querySelector("#jjqzqicxujrnnh1x3447x18x").focus();
+	});
 </script>
 
 <div class="p-4">
@@ -117,8 +101,7 @@
 			<h4 class="text-xl font-semibold">{$_("runner")}</h4>
 			<VirtualSelect
 				inputElementID="jjqzqicxujrnnh1x3447x18x"
-				bind:this={selectRef}
-				autofocus={true}
+				bind:this={selectRefRunner}
 				on:onClear={() => {
 					console.log("Cleared selection");
 				}}
@@ -140,9 +123,6 @@
 					}
 				}}
 			/>
-			<!-- {#if runnerinfo}
-				<p class="mt-4 text-lg">Selected: {JSON.stringify(runnerinfo)}</p>
-			{/if} -->
 
 			<!-- Amount Input -->
 			<div>
@@ -221,19 +201,27 @@
 				</div>
 
 				{#if !donor_create_new}
-					<Select
-						containerClasses="rounded-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border-gray-300 border bg-gray-50 text-neutral-800 rounded-md p-2"
-						itemFilter={(label, filterText, option) =>
-							filterRunners(label, filterText, option)}
-						items={donors}
-						showChevron={true}
-						placeholder={$_("search-for-donor")}
-						noOptionsMessage={$_("no-donors-found")}
-						on:select={(selectedValue) => {
-							donorinfo = selectedValue.detail.value;
+					<VirtualSelect
+						inputElementID="zt12c3udy3bme5bqobmqcif1"
+						bind:this={selectRefDonor}
+						on:onClear={() => {
+							console.log("Cleared selection");
+						}}
+						options={donors}
+						filterFn={(item, searchTerm) => {
+							return item.label
+								.toLowerCase()
+								.includes(searchTerm.toLowerCase());
+						}}
+						bind:selected={donorinfo}
+						inputAriaLabel={$_("search-for-donor")}
+						inputPlaceholder={$_("search-for-donor")}
+						noOptionsText={$_("no-donors-found")}
+						on:onSelected={(data) => {
+							if (data.detail !== null) {
+								document.querySelector("#submit_button").focus();
+							}
 						}}
-						on:clear={() =>
-							(donorinfo = { id: 0, firstname: "", lastname: "" })}
 					/>
 				{:else}
 					<div class="space-y-3">

src/components/tools/VirtualSelect.svelte

@@ -107,8 +107,7 @@
 	async function toggleDropdown() {
 		isOpen = !isOpen;
 		if (isOpen) {
-			// Update visible count when dropdown opens
-			await updateVisibleCount(); // Ensure container is rendered
+			forceVisibleItems();
 		}
 	}
 
@@ -122,6 +121,15 @@
 
 	// Handle input focus to open dropdown
 	async function handleInputFocus() {
+		// forceVisibleItems();
+	}
+
+	// Handle input typing to open dropdown
+	async function handleInput() {
+		forceVisibleItems();
+	}
+
+	async function forceVisibleItems() {
 		isOpen = true;
 		await updateVisibleCount(); // Ensure items render on focus
 		// these 2 timeouts are a more or less tmp fix for rendering items when dropdown opens
@@ -133,12 +141,6 @@
 		}, 50);
 	}
 
-	// Handle input typing to open dropdown
-	async function handleInput() {
-		isOpen = true;
-		await updateVisibleCount(); // Ensure items render on typing
-	}
-
 	// Handle keyboard navigation
 	function handleKeydown(event, index) {
 		if (!isOpen) return;

src/locales/de.json

@@ -227,7 +227,7 @@
     "enabled_large": "Aktiviert",
     "english": "Englisch",
     "enter-payment": "Zahlung eingeben",
-    "error-creating-donation": "Fehler bei der Anlage",
+    "error-creating-donation": "Fehler beim Erstellen des Sponsorings",
     "error-during-import": "Fehler beim Importieren",
     "error-whyile-copying-to-clipboard": "Fehler beim Kopieren in die Zwischenablage",
     "error_on_login": "😢Fehler beim Login",

src/locales/en.json

@@ -227,6 +227,7 @@
     "enabled_large": "Enabled",
     "english": "English",
     "enter-payment": "Enter payment",
+    "error-creating-donation": "error creating the sponsoring",
     "error-during-import": "Error during import",
     "error-whyile-copying-to-clipboard": "Error while copying to clipboard",
     "error_on_login": "Error on login",