wip
This commit is contained in:
parent
3842d8b104
commit
564a971c63
GPG Key ID:
3BB9ADD52DCA4314
@ -8,6 +8,17 @@
|
||||
import Select from "svelte-select";
|
||||
import toast from "svelte-french-toast";
|
||||
import { onMount } from "svelte";
|
||||
import VirtualSelect from "./VirtualSelect.svelte";
|
||||
|
||||
//
|
||||
let options = ["Bulbasaur","Ivysaur","Venusaur","Charmander","Charmeleon","Charizard","Squirtle","Wartortle","Blastoise","Caterpie","Metapod","Butterfree","Weedle","Kakuna","Beedrill","Pidgey","Pidgeotto","Pidgeot","Rattata","Raticate","Spearow","Fearow","Ekans","Arbok","Pikachu","Raichu","Sandshrew","Sandslash","Nidoran♀","Nidorina","Nidoqueen","Nidoran♂","Nidorino","Nidoking","Clefairy","Clefable","Vulpix","Ninetales","Jigglypuff","Wigglytuff","Zubat","Golbat","Oddish","Gloom","Vileplume","Paras","Parasect","Venonat","Venomoth","Diglett","Dugtrio","Meowth","Persian","Psyduck","Golduck","Mankey","Primeape","Growlithe","Arcanine","Poliwag","Poliwhirl","Poliwrath","Abra","Kadabra","Alakazam","Machop","Machoke","Machamp","Bellsprout","Weepinbell","Victreebel","Tentacool","Tentacruel","Geodude","Graveler","Golem","Ponyta","Rapidash","Slowpoke","Slowbro","Magnemite","Magneton","Farfetch'd","Doduo","Dodrio","Seel","Dewgong","Grimer","Muk","Shellder","Cloyster","Gastly","Haunter","Gengar","Onix","Drowzee","Hypno","Krabby","Kingler","Voltorb","Electrode","Exeggcute","Exeggutor","Cubone","Marowak","Hitmonlee","Hitmonchan","Lickitung","Koffing","Weezing","Rhyhorn","Rhydon","Chansey","Tangela","Kangaskhan","Horsea","Seadra","Goldeen","Seaking","Staryu","Starmie","Mr. Mime","Scyther","Jynx","Electabuzz","Magmar","Pinsir","Tauros","Magikarp","Gyarados","Lapras","Ditto","Eevee","Vaporeon","Jolteon","Flareon","Porygon","Omanyte","Omastar","Kabuto","Kabutops","Aerodactyl","Snorlax","Articuno","Zapdos","Moltres","Dratini","Dragonair","Dragonite","Mewtwo","Mew","Chikorita","Bayleef","Meganium","Cyndaquil","Quilava","Typhlosion","Totodile","Croconaw","Feraligatr","Sentret","Furret","Hoothoot","Noctowl","Ledyba","Ledian","Spinarak","Ariados","Crobat","Chinchou","Lanturn","Pichu","Cleffa","Igglybuff","Togepi","Togetic","Natu","Xatu","Mareep","Flaaffy","Ampharos","Bellossom","Marill","Azumarill","Sudowoodo","Politoed","Hoppip","Skiploom","Jumpluff","Aipom","Sunkern","Sunflora","Yanma","Wooper","Quagsire","Espeon","Umbreon","Murkrow","Slowking","Misdreavus","Unown","Wobbuffet","Girafarig","Pineco","Forretress","Dunsparce","Gligar","Steelix","Snubbull","Granbull","Qwilfish","Scizor","Shuckle","Heracross","Sneasel","Teddiursa","Ursaring","Slugma","Magcargo","Swinub","Piloswine","Corsola","Remoraid","Octillery","Delibird","Mantine","Skarmory","Houndour","Houndoom"];
|
||||
let selectedOption;
|
||||
|
||||
function handleSelect(event) {
|
||||
selectedOption = event.detail;
|
||||
console.log('Selected:', selectedOption);
|
||||
}
|
||||
//
|
||||
|
||||
let runners = [];
|
||||
let donors = [];
|
||||
@ -53,7 +64,14 @@
|
||||
loadDonors();
|
||||
|
||||
const getRunnerLabel = (option) =>
|
||||
option.firstname + " " + (option.middlename || "") + " " + option.lastname+" [#"+option.id+"]";
|
||||
option.firstname +
|
||||
" " +
|
||||
(option.middlename || "") +
|
||||
" " +
|
||||
option.lastname +
|
||||
" [#" +
|
||||
option.id +
|
||||
"]";
|
||||
|
||||
const filterRunners = (label, filterText, option) => {
|
||||
if (filterText.startsWith("#")) {
|
||||
@ -72,14 +90,14 @@
|
||||
address_checked = false;
|
||||
donor_create_new = false;
|
||||
const clears = document.querySelectorAll(".clearSelect");
|
||||
clears.forEach(c => {
|
||||
clears.forEach((c) => {
|
||||
c.click();
|
||||
});
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
document.querySelector("#wrapper_runner_select input").focus();
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="p-4">
|
||||
@ -98,6 +116,18 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- -->
|
||||
<VirtualSelect
|
||||
{options}
|
||||
bind:selected={selectedOption}
|
||||
placeholder="Search fruits..."
|
||||
on:select={handleSelect}
|
||||
/>
|
||||
{#if selectedOption}
|
||||
<p class="mt-4 text-lg">Selected: {selectedOption}</p>
|
||||
{/if}
|
||||
<!-- -->
|
||||
|
||||
<!-- Runner Selection -->
|
||||
<div id="wrapper_runner_select">
|
||||
<h4 class="text-xl font-semibold">{$_("runner")}</h4>
|
||||
@ -127,9 +157,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 +185,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 +204,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();
|
||||
|
||||
235
src/components/tools/VirtualSelect.svelte
Normal file
235
src/components/tools/VirtualSelect.svelte
Normal file
@ -0,0 +1,235 @@
|
||||
<script>
|
||||
import { createEventDispatcher, onMount } from "svelte";
|
||||
|
||||
// Props
|
||||
export let options = [];
|
||||
export let selected = null;
|
||||
export let placeholder = "Search options...";
|
||||
|
||||
// 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; // Number of items to render (adjusted based on container height)
|
||||
let focusedIndex = -1; // Track the focused option index (-1 means no focus)
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
// Filter options based on search term
|
||||
$: {
|
||||
filteredOptions = searchTerm
|
||||
? options.filter((option) =>
|
||||
option.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
|
||||
function updateVisibleCount() {
|
||||
if (container) {
|
||||
visibleCount = Math.ceil(container.clientHeight / itemHeight) + 2; // Buffer of 2 items
|
||||
updateVisibleItems();
|
||||
}
|
||||
}
|
||||
|
||||
// Handle option selection
|
||||
function selectOption(option) {
|
||||
selected = option;
|
||||
isOpen = false;
|
||||
searchTerm = "";
|
||||
focusedIndex = -1;
|
||||
dispatch("onSelected", option);
|
||||
}
|
||||
|
||||
// Toggle dropdown
|
||||
function toggleDropdown() {
|
||||
isOpen = !isOpen;
|
||||
if (isOpen) {
|
||||
// Update visible count when dropdown opens
|
||||
setTimeout(updateVisibleCount, 0); // Ensure container is rendered
|
||||
focusedIndex = -1; // Reset focus when opening
|
||||
}
|
||||
}
|
||||
|
||||
// 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
|
||||
function handleInputFocus() {
|
||||
isOpen = true;
|
||||
}
|
||||
|
||||
// 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]);
|
||||
}
|
||||
}
|
||||
|
||||
// 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
|
||||
onMount(() => {
|
||||
if (container) {
|
||||
const resizeObserver = new ResizeObserver(updateVisibleCount);
|
||||
resizeObserver.observe(container);
|
||||
return () => resizeObserver.disconnect();
|
||||
}
|
||||
});
|
||||
</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"
|
||||
role="combobox"
|
||||
aria-expanded={isOpen}
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
bind:value={searchTerm}
|
||||
placeholder={selected || placeholder}
|
||||
class="w-full bg-transparent focus:outline-none text-gray-700"
|
||||
on:focus={handleInputFocus}
|
||||
on:keydown={(e) => {
|
||||
if (e.key === "Enter" && !isOpen) {
|
||||
toggleDropdown();
|
||||
} else {
|
||||
handleKeydown(e, focusedIndex);
|
||||
}
|
||||
}}
|
||||
aria-label="Search and select an option"
|
||||
/>
|
||||
<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) => e.key === "Enter" && toggleDropdown()}
|
||||
aria-label="Toggle dropdown"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="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 + "-" + (startIndex + i))}
|
||||
<div
|
||||
class="px-3 py-2 hover:bg-blue-100 cursor-pointer {selected ===
|
||||
item
|
||||
? '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}
|
||||
>
|
||||
{item}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="px-3 py-2 text-gray-500">No options found</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;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user