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,38 +63,22 @@
 		);
 	};
 
-	const filterRunners = (label, filterText, option) => {
+	let selectRefRunner;
-		if (filterText.startsWith("#")) {
+	let selectRefDonor;
-			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");
-	// 	}
-	// }
 
 	function resetAll() {
 		runnerinfo = { id: 0, firstname: "", lastname: "" };
 		donorinfo = { id: 0, firstname: "", lastname: "" };
-		amount = 0;
+		amount = null;
 		address_checked = false;
 		donor_create_new = false;
-		// const clears = document.querySelectorAll(".clearSelect");
+		selectRefRunner?.reset();
-		// clears.forEach((c) => {
+		selectRefDonor?.reset();
-		// 	c.click();
-		// });
-		// resetComponent();
-		selectRef.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}
+				bind:this={selectRefRunner}
-				autofocus={true}
 				on:onClear={() => {
 					console.log("Cleared selection");
 				}}
@@ -134,13 +117,12 @@
 				inputAriaLabel={$_("search-for-runner-by-name-or-id")}
 				inputPlaceholder={$_("search-for-runner-by-name-or-id")}
 				noOptionsText={$_("no-runners-found")}
-				on:onSelected={() => {
+				on:onSelected={(data) => {
-					document.querySelector("#donation_amount_eur").focus();
+					if (data.detail !== null) {
+						document.querySelector("#donation_amount_eur").focus();
+					}
 				}}
 			/>
-			<!-- {#if runnerinfo}
-				<p class="mt-4 text-lg">Selected: {JSON.stringify(runnerinfo)}</p>
-			{/if} -->
 
 			<!-- Amount Input -->
 			<div>
@@ -186,6 +168,10 @@
 									document.querySelector("#button_new_donor").focus();
 									document.querySelector("#button_new_donor").click();
 								}
+								if (e.key === "Enter") {
+									e.preventDefault();
+									document.querySelector("#zt12c3udy3bme5bqobmqcif1").focus();
+								}
 							}}
 							id="button_existing_donor"
 							class:bg-indigo-600={!donor_create_new}
@@ -205,12 +191,19 @@
 									document.querySelector("#button_existing_donor").focus();
 									document.querySelector("#button_existing_donor").click();
 								}
+								if (e.key === "Enter") {
+									e.preventDefault();
+									document.querySelector("#button_new_donor").click();
+								}
 							}}
 							id="button_new_donor"
 							class={`py-2 px-4 w-1/2 transition-colors ${donor_create_new ? "bg-indigo-600 text-white" : "bg-gray-100 text-gray-700"}`}
 							on:click={() => {
 								donor_create_new = true;
 								donorinfo = { id: 0, firstname: "", lastname: "" };
+								setTimeout(() => {
+									document.querySelector("#firstname").focus();
+								}, 50);
 							}}
 						>
 							{$_("new-donor")}
@@ -219,19 +212,31 @@
 				</div>
 
 				{#if !donor_create_new}
-					<Select
+					<VirtualSelect
-						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"
+						inputElementID="zt12c3udy3bme5bqobmqcif1"
-						itemFilter={(label, filterText, option) =>
+						bind:this={selectRefDonor}
-							filterRunners(label, filterText, option)}
+						on:onClear={() => {
-						items={donors}
+							console.log("Cleared selection");
-						showChevron={true}
+						}}
-						placeholder={$_("search-for-donor")}
+						options={donors}
-						noOptionsMessage={$_("no-donors-found")}
+						filterFn={(item, searchTerm) => {
-						on:select={(selectedValue) => {
+							return item.label
-							donorinfo = selectedValue.detail.value;
+								.toLowerCase()
+								.includes(searchTerm.toLowerCase());
+						}}
+						bind:selected={donorinfo}
+						inputAriaLabel={$_("search-for-donor")}
+						inputPlaceholder={$_("search-for-donor")}
+						noOptionsText={$_("no-donors-found")}
+						on:onSelected={(data) => {
+							console.log(data.detail);
+							if (data.detail !== null) {
+								document.querySelector("#submit_button").focus();
+								setTimeout(() => {
+									document.querySelector("#submit_button").focus();
+								}, 100);
+							}
 						}}
-						on:clear={() =>
-							(donorinfo = { id: 0, firstname: "", lastname: "" })}
 					/>
 				{:else}
 					<div class="space-y-3">
@@ -246,6 +251,11 @@
 							<input
 								type="text"
 								id="firstname"
+								on:keydown={(e) => {
+									if (e.key === "Enter") {
+										document.querySelector("#lastname").focus();
+									}
+								}}
 								bind:value={donorinfo.firstname}
 								class="focus:ring-indigo-500 focus:border-indigo-500 flex-1 block w-full rounded-none rounded-l-md sm:text-sm border-neutral-300 border bg-neutral-50 text-neutral-800 p-2"
 								placeholder={$_("first-name")}

src/components/tools/VirtualSelect.svelte

@@ -107,8 +107,7 @@
 	async function toggleDropdown() {
 		isOpen = !isOpen;
 		if (isOpen) {
-			// Update visible count when dropdown opens
+			forceVisibleItems();
-			await updateVisibleCount(); // Ensure container is rendered
 		}
 	}
 
@@ -122,14 +121,24 @@
 
 	// Handle input focus to open dropdown
 	async function handleInputFocus() {
-		isOpen = true;
+		// forceVisibleItems();
-		await updateVisibleCount(); // Ensure items render on focus
 	}
 
 	// Handle input typing to open dropdown
 	async function handleInput() {
+		forceVisibleItems();
+	}
+
+	async function forceVisibleItems() {
 		isOpen = true;
-		await updateVisibleCount(); // Ensure items render on typing
+		await updateVisibleCount(); // Ensure items render on focus
+		// these 2 timeouts are a more or less tmp fix for rendering items when dropdown opens
+		setTimeout(async () => {
+			await updateVisibleCount(); // Ensure items render on focus
+		}, 25);
+		setTimeout(async () => {
+			await updateVisibleCount(); // Ensure items render on focus
+		}, 50);
 	}
 
 	// Handle keyboard navigation
@@ -210,6 +219,7 @@
 		aria-expanded={isOpen}
 	>
 		<input
+			autocomplete="off"
 			type="text"
 			id={inputElementID}
 			bind:value={searchTerm}

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",