Compare commits

...

10 Commits

Author SHA1 Message Date
3709881176
wip 2025-05-20 01:35:19 +02:00
a00af08b3f
wip 2025-05-20 01:28:33 +02:00
9ef34359d8
wip 2025-05-20 01:24:42 +02:00
4d79589903
inputElementID param 2025-05-20 01:23:26 +02:00
1386b80d0c
wip 2025-05-20 01:18:56 +02:00
286bd61497
wip 2025-05-20 00:59:01 +02:00
50b5e4e455
wip 2025-05-20 00:55:05 +02:00
2c91f46375
wip 2025-05-20 00:47:04 +02:00
0cb1193269
wip 2025-05-20 00:44:20 +02:00
564a971c63
wip 2025-05-20 00:41:00 +02:00
2 changed files with 732 additions and 363 deletions

View File

@ -7,7 +7,7 @@
} from "@odit/lfk-client-js";
import Select from "svelte-select";
import toast from "svelte-french-toast";
import { onMount } from "svelte";
import VirtualSelect from "./VirtualSelect.svelte";
let runners = [];
let donors = [];
@ -52,8 +52,16 @@
}
loadDonors();
const getRunnerLabel = (option) =>
option.firstname + " " + (option.middlename || "") + " " + option.lastname+" [#"+option.id+"]";
const getRunnerLabel = (option) => {
return (
[option.firstname, option.middlename, option.lastname]
.join(" ")
.replace(" ", " ") +
" [#" +
option.id +
"]"
);
};
const filterRunners = (label, filterText, option) => {
if (filterText.startsWith("#")) {
@ -65,21 +73,28 @@
);
};
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;
address_checked = false;
donor_create_new = false;
const clears = document.querySelectorAll(".clearSelect");
clears.forEach(c => {
c.click();
});
// const clears = document.querySelectorAll(".clearSelect");
// clears.forEach((c) => {
// c.click();
// });
// resetComponent();
selectRef.reset();
document.querySelector("#jjqzqicxujrnnh1x3447x18x").focus();
}
onMount(() => {
document.querySelector("#wrapper_runner_select input").focus();
})
</script>
<div class="p-4">
@ -91,31 +106,41 @@
<div class="mt-4 p-3 bg-green-50 border border-green-200 rounded-md">
<p class="text-black">
{$_("last-created-donation")}: #{last_created.id}: {last_created.amountPerDistance /
100} € für {getRunnerLabel(last_created.runner)} von {getRunnerLabel(
100}€ für {getRunnerLabel(last_created.runner)} von {getRunnerLabel(
last_created.donor
)}
</p>
</div>
{/if}
<!-- Runner Selection -->
<div id="wrapper_runner_select">
<!-- -->
<h4 class="text-xl font-semibold">{$_("runner")}</h4>
<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={runners}
showChevron={true}
placeholder={$_("search-for-runner-by-name-or-id")}
noOptionsMessage={$_("no-runners-found")}
on:select={(selectedValue) => {
runnerinfo = selectedValue.detail.value;
<VirtualSelect
inputElementID="jjqzqicxujrnnh1x3447x18x"
bind:this={selectRef}
autofocus={true}
on:onClear={() => {
console.log("Cleared selection");
}}
options={runners}
filterFn={(item, searchTerm) => {
if (searchTerm.startsWith("#")) {
const id = parseInt(searchTerm.replace("#", ""));
return item.value.id === id;
}
return item.label.toLowerCase().includes(searchTerm.toLowerCase());
}}
bind:selected={runnerinfo}
inputAriaLabel={$_("search-for-runner-by-name-or-id")}
inputPlaceholder={$_("search-for-runner-by-name-or-id")}
noOptionsText={$_("no-runners-found")}
on:onSelected={() => {
document.querySelector("#donation_amount_eur").focus();
}}
on:clear={() => (runnerinfo = { id: 0, firstname: "", lastname: "" })}
/>
</div>
<!-- {#if runnerinfo}
<p class="mt-4 text-lg">Selected: {JSON.stringify(runnerinfo)}</p>
{/if} -->
<!-- Amount Input -->
<div>
@ -127,9 +152,8 @@
class:focus:border-red-500={!amount > 0}
class:focus:ring-red-500={!amount > 0}
bind:value={amount}
on:keydown={(e)=>
{
if(e.key==="Enter"){
on:keydown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
document.querySelector("#button_existing_donor").focus();
}
@ -156,9 +180,8 @@
<div class="mb-2">
<div class="flex border rounded-md overflow-hidden shadow-sm">
<button
on:keydown={(e)=>
{
if(e.key==="ArrowRight"){
on:keydown={(e) => {
if (e.key === "ArrowRight") {
e.preventDefault();
document.querySelector("#button_new_donor").focus();
document.querySelector("#button_new_donor").click();
@ -176,9 +199,8 @@
{$_("existing-donor")}
</button>
<button
on:keydown={(e)=>
{
if(e.key==="ArrowLeft"){
on:keydown={(e) => {
if (e.key === "ArrowLeft") {
e.preventDefault();
document.querySelector("#button_existing_donor").focus();
document.querySelector("#button_existing_donor").click();

View File

@ -0,0 +1,347 @@
<script>
import { createEventDispatcher, onMount, tick } from "svelte";
// Generate a default unique ID
function generateDefaultID() {
return "virtual-select-" + Math.random().toString(36).slice(2);
}
// Props
export let options = [];
export let selected = null;
export let inputPlaceholder = "Search options...";
export let noOptionsText = "No options found";
export let inputAriaLabel = "Search and select an option";
export let toggleAriaLabel = "Toggle dropdown";
export let clearAriaLabel = "Clear selection";
export let filterFn = null; // Custom filter function
export let autofocus = false; // Autofocus input
export let inputElementID = generateDefaultID(); // Input element ID
// Internal state
let searchTerm = "";
let filteredOptions = options;
let isOpen = false;
let container;
let visibleItems = [];
let startIndex = 0;
let itemHeight = 40; // Fixed height for each option (in pixels)
let visibleCount = 10; // Default number of items to render
let focusedIndex = -1; // Track the focused option index (-1 means no focus)
let inputElement; // Reference to input element
const dispatch = createEventDispatcher();
// Filter options based on search term
$: {
filteredOptions = searchTerm
? filterFn
? options.filter((option) => filterFn(option, searchTerm))
: options.filter((option) =>
option.label.toLowerCase().includes(searchTerm.toLowerCase())
)
: options;
// Reset scroll and focus when filtered options change
startIndex = 0;
focusedIndex = -1;
updateVisibleItems();
}
// Update visible items based on scroll position
function updateVisibleItems() {
if (!container) return;
const scrollTop = container.scrollTop;
startIndex = Math.floor(scrollTop / itemHeight);
const endIndex = Math.min(
startIndex + visibleCount,
filteredOptions.length
);
visibleItems = filteredOptions.slice(startIndex, endIndex);
}
// Handle scroll event
function handleScroll() {
updateVisibleItems();
}
// Calculate visible item count based on container height
async function updateVisibleCount() {
if (container) {
await tick(); // Wait for DOM to render
visibleCount = Math.ceil(container.clientHeight / itemHeight) + 2; // Buffer of 2 items
updateVisibleItems();
}
}
// Handle option selection
function selectOption(option) {
selected = option.value;
isOpen = false;
searchTerm = option.label; // Set searchTerm to the selected option's label
focusedIndex = -1;
dispatch("onSelected", option.value);
}
// Handle clear selection
function clearSelection() {
selected = null;
searchTerm = "";
focusedIndex = -1;
dispatch("onSelected", null);
dispatch("onClear");
}
// Reset component state
export function reset() {
selected = null;
searchTerm = "";
isOpen = false;
focusedIndex = -1;
startIndex = 0;
updateVisibleItems();
dispatch("onSelected", null);
dispatch("onClear");
}
// Toggle dropdown
async function toggleDropdown() {
isOpen = !isOpen;
if (isOpen) {
// Update visible count when dropdown opens
await updateVisibleCount(); // Ensure container is rendered
}
}
// Handle click outside to close dropdown
function handleClickOutside(event) {
if (!event.target.closest(".select-container")) {
isOpen = false;
focusedIndex = -1;
}
}
// Handle input focus to open dropdown
async function handleInputFocus() {
isOpen = true;
await updateVisibleCount(); // Ensure items render on focus
}
// 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;
if (event.key === "ArrowDown") {
event.preventDefault();
if (focusedIndex < filteredOptions.length - 1) {
focusedIndex += 1;
scrollToFocusedItem();
}
} else if (event.key === "ArrowUp") {
event.preventDefault();
if (focusedIndex > 0) {
focusedIndex -= 1;
scrollToFocusedItem();
} else if (focusedIndex === -1 && filteredOptions.length > 0) {
focusedIndex = 0;
scrollToFocusedItem();
}
} else if (event.key === "Enter" && index >= 0) {
event.preventDefault();
selectOption(filteredOptions[index]);
} else if (event.key === "Escape") {
event.preventDefault();
isOpen = false;
focusedIndex = -1;
}
}
// Scroll to the focused item
function scrollToFocusedItem() {
if (!container || focusedIndex < 0) return;
const itemTop = focusedIndex * itemHeight;
const itemBottom = itemTop + itemHeight;
const containerTop = container.scrollTop;
const containerBottom = containerTop + container.clientHeight;
if (itemTop < containerTop) {
container.scrollTop = itemTop;
} else if (itemBottom > containerBottom) {
container.scrollTop = itemBottom - container.clientHeight;
}
updateVisibleItems();
}
// Initialize container size observer and autofocus fallback
onMount(async () => {
if (container) {
const resizeObserver = new ResizeObserver(updateVisibleCount);
resizeObserver.observe(container);
return () => resizeObserver.disconnect();
}
// Fallback autofocus with tick to ensure inputElement is bound
if (autofocus && inputElement) {
await tick();
inputElement.focus();
}
});
// Get display text for the input
function getDisplayText() {
if (!selected) return inputPlaceholder;
const selectedOption = options.find((option) => option.value === selected);
return selectedOption ? selectedOption.label : inputPlaceholder;
}
</script>
<svelte:window on:click={handleClickOutside} />
<div class="select-container relative w-full">
<!-- Select element with inline search -->
<div
class="border rounded-md px-3 py-2 bg-white shadow-sm flex items-center gap-2"
role="combobox"
aria-expanded={isOpen}
>
<input
type="text"
id={inputElementID}
bind:value={searchTerm}
bind:this={inputElement}
placeholder={getDisplayText()}
class="w-full bg-transparent focus:outline-none {selected
? 'text-black'
: 'text-gray-700'}"
{autofocus}
on:focus={handleInputFocus}
on:input={handleInput}
on:keydown={(e) => {
if (e.key === "Enter" && !isOpen) {
toggleDropdown();
} else {
handleKeydown(e, focusedIndex);
}
}}
aria-label={inputAriaLabel}
/>
{#if selected}
<button
type="button"
class="w-5 h-5 flex items-center justify-center text-gray-500 hover:text-gray-700"
on:click={clearSelection}
on:keydown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
clearSelection();
} else if (e.key === "Escape") {
e.preventDefault();
isOpen = false;
focusedIndex = -1;
}
}}
role="button"
tabindex="0"
aria-label={clearAriaLabel}
>
<svg
class="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
{/if}
<svg
class="w-4 h-4 text-gray-500 transform {isOpen ? 'rotate-180' : ''}"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
on:click={toggleDropdown}
role="button"
tabindex="0"
on:keydown={(e) => {
if (e.key === "Enter") toggleDropdown();
else if (e.key === "Escape") {
e.preventDefault();
isOpen = false;
focusedIndex = -1;
}
}}
aria-label={toggleAriaLabel}
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke
Politeness="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</div>
<!-- Dropdown -->
{#if isOpen}
<div
class="absolute z-10 w-full mt-1 bg-white border rounded-md shadow-lg max-h-80 overflow-auto"
bind:this={container}
on:scroll={handleScroll}
role="listbox"
>
{#if filteredOptions.length > 0}
<!-- Virtualized list container -->
<div style="height: {filteredOptions.length * itemHeight}px;">
<div style="transform: translateY({startIndex * itemHeight}px);">
{#each visibleItems as item, i (item.label + "-" + (startIndex + i))}
<div
class="px-3 py-2 hover:bg-blue-100 cursor-pointer {selected ===
item.value
? 'bg-blue-50'
: ''} {focusedIndex === startIndex + i
? 'bg-blue-200 outline outline-2 outline-blue-500'
: ''}"
on:click={() => selectOption(item)}
on:keydown={(e) => handleKeydown(e, startIndex + i)}
role="option"
tabindex="0"
aria-selected={selected === item.value}
>
{item.label}
</div>
{/each}
</div>
</div>
{:else}
<div class="px-3 py-2 text-gray-500">{noOptionsText}</div>
{/if}
</div>
{/if}
</div>
<style>
/* Ensure Tailwind classes handle additional styling */
:global(.select-container input:focus) {
border-color: #3b82f6; /* Tailwind's blue-500 */
}
:global([role="option"]:focus) {
outline: 2px solid #3b82f6;
outline-offset: -2px;
}
:global([role="button"]:focus) {
outline: 2px solid #3b82f6;
outline-offset: -2px;
}
</style>