mirror of
https://github.com/immich-app/immich.git
synced 2024-12-26 10:50:29 +02:00
feat(web): rework combobox and add clear button (#7317)
* feat(web): rework combobox * simplify statement and use transition-all
This commit is contained in:
parent
749b182f97
commit
46f85618db
@ -28,7 +28,7 @@
|
||||
|
||||
const initialOption = timezones.find((item) => item.value === 'UTC' + initialDate.toFormat('ZZ'));
|
||||
|
||||
let selectedOption = {
|
||||
let selectedOption = initialOption && {
|
||||
label: initialOption?.label || '',
|
||||
value: initialOption?.value || '',
|
||||
};
|
||||
@ -36,7 +36,7 @@
|
||||
let selectedDate = initialDate.toFormat("yyyy-MM-dd'T'HH:mm");
|
||||
|
||||
// Keep local time if not it's really confusing
|
||||
$: date = DateTime.fromISO(selectedDate).setZone(selectedOption.value, { keepLocalTime: true });
|
||||
$: date = DateTime.fromISO(selectedDate).setZone(selectedOption?.value, { keepLocalTime: true });
|
||||
|
||||
const dispatch = createEventDispatcher<{
|
||||
cancel: void;
|
||||
@ -82,7 +82,7 @@
|
||||
</div>
|
||||
<div class="flex flex-col w-full mt-2">
|
||||
<label for="timezone">Timezone</label>
|
||||
<Combobox bind:selectedOption options={timezones} placeholder="Search timezone..." />
|
||||
<Combobox bind:selectedOption id="timezone" options={timezones} placeholder="Search timezone..." />
|
||||
</div>
|
||||
</div>
|
||||
</ConfirmDialogue>
|
||||
|
@ -1,12 +1,7 @@
|
||||
<script lang="ts" context="module">
|
||||
// Necessary for eslint
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
type T = any;
|
||||
|
||||
export type Type = 'button' | 'submit' | 'reset';
|
||||
export type ComboBoxOption = {
|
||||
label: string;
|
||||
value: T;
|
||||
value: string;
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -15,34 +10,32 @@
|
||||
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
import { clickOutside } from '$lib/utils/click-outside';
|
||||
import { mdiMagnify, mdiUnfoldMoreHorizontal } from '@mdi/js';
|
||||
import { mdiMagnify, mdiUnfoldMoreHorizontal, mdiClose } from '@mdi/js';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import IconButton from '../elements/buttons/icon-button.svelte';
|
||||
|
||||
export let type: Type = 'button';
|
||||
export let id: string | undefined = undefined;
|
||||
export let options: ComboBoxOption[] = [];
|
||||
export let selectedOption: ComboBoxOption | undefined = undefined;
|
||||
export let selectedOption: ComboBoxOption | undefined;
|
||||
export let placeholder = '';
|
||||
export const label = '';
|
||||
export let noLabel = false;
|
||||
|
||||
let isOpen = false;
|
||||
let searchQuery = '';
|
||||
let searchQuery = selectedOption?.label || '';
|
||||
|
||||
$: filteredOptions = options.filter((option) => option.label.toLowerCase().includes(searchQuery.toLowerCase()));
|
||||
|
||||
const dispatch = createEventDispatcher<{
|
||||
select: ComboBoxOption;
|
||||
select: ComboBoxOption | undefined;
|
||||
click: void;
|
||||
}>();
|
||||
|
||||
let handleClick = () => {
|
||||
const handleClick = () => {
|
||||
searchQuery = '';
|
||||
isOpen = !isOpen;
|
||||
isOpen = true;
|
||||
dispatch('click');
|
||||
};
|
||||
|
||||
let handleOutClick = () => {
|
||||
searchQuery = '';
|
||||
isOpen = false;
|
||||
};
|
||||
|
||||
@ -51,49 +44,77 @@
|
||||
dispatch('select', option);
|
||||
isOpen = false;
|
||||
};
|
||||
|
||||
const onClear = () => {
|
||||
selectedOption = undefined;
|
||||
searchQuery = '';
|
||||
dispatch('select', selectedOption);
|
||||
};
|
||||
</script>
|
||||
|
||||
<div class="relative" use:clickOutside on:outclick={handleOutClick}>
|
||||
<button {type} class="immich-form-input text-sm text-left w-full min-h-[48px] transition-all" on:click={handleClick}
|
||||
>{#if !noLabel}
|
||||
{selectedOption?.label || ''}
|
||||
<div>
|
||||
{#if isOpen}
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
<div class="dark:text-immich-dark-fg/75">
|
||||
<Icon path={mdiMagnify} />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="absolute right-0 top-0 h-full flex px-4 justify-center items-center content-between">
|
||||
<Icon path={mdiUnfoldMoreHorizontal} />
|
||||
|
||||
<input
|
||||
{id}
|
||||
{placeholder}
|
||||
role="combobox"
|
||||
aria-expanded={isOpen}
|
||||
aria-controls={id}
|
||||
class="immich-form-input text-sm text-left w-full !pr-12 transition-all"
|
||||
class:!pl-8={isOpen}
|
||||
class:!rounded-b-none={isOpen}
|
||||
class:cursor-pointer={!isOpen}
|
||||
value={isOpen ? '' : selectedOption?.label || ''}
|
||||
on:input={(e) => (searchQuery = e.currentTarget.value)}
|
||||
on:focus={handleClick}
|
||||
/>
|
||||
|
||||
<div
|
||||
class="absolute right-0 top-0 h-full flex px-4 justify-center items-center content-between"
|
||||
class:pr-2={selectedOption}
|
||||
class:pointer-events-none={!selectedOption}
|
||||
>
|
||||
{#if selectedOption}
|
||||
<IconButton color="transparent-gray" on:click={onClear} title="Clear value">
|
||||
<Icon path={mdiClose} />
|
||||
</IconButton>
|
||||
{:else if !isOpen}
|
||||
<Icon path={mdiUnfoldMoreHorizontal} />
|
||||
{/if}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if isOpen}
|
||||
<div
|
||||
transition:fly={{ y: -25, duration: 250 }}
|
||||
class="absolute w-full top-full mt-2 bg-white dark:bg-gray-800 rounded-lg border border-gray-300 dark:border-gray-900 z-10"
|
||||
role="listbox"
|
||||
transition:fly={{ duration: 250 }}
|
||||
class="absolute text-left w-full max-h-64 overflow-y-auto bg-white dark:bg-gray-800 rounded-b-lg border border-t-0 border-gray-300 dark:border-gray-900 z-10"
|
||||
>
|
||||
<div class="relative border-b flex">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3">
|
||||
<div class="dark:text-immich-dark-fg/75">
|
||||
<button {type} class="flex items-center">
|
||||
<Icon path={mdiMagnify} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- svelte-ignore a11y-autofocus -->
|
||||
<input bind:value={searchQuery} autofocus {placeholder} class="ml-9 grow bg-transparent py-2" />
|
||||
</div>
|
||||
<div class="h-64 overflow-y-auto">
|
||||
{#each filteredOptions as option (option.label)}
|
||||
<button
|
||||
{type}
|
||||
class="block text-left w-full px-4 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-all
|
||||
${option.label === selectedOption?.label ? 'bg-gray-300 dark:bg-gray-600' : ''}
|
||||
"
|
||||
class:bg-gray-300={option.label === selectedOption?.label}
|
||||
on:click={() => handleSelect(option)}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{#if filteredOptions.length === 0}
|
||||
<div class="px-4 py-2 font-medium">No results</div>
|
||||
{/if}
|
||||
{#each filteredOptions as option (option.label)}
|
||||
{@const selected = option.label === selectedOption?.label}
|
||||
<button
|
||||
type="button"
|
||||
role="option"
|
||||
aria-selected={selected}
|
||||
class="text-left w-full px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all"
|
||||
class:bg-gray-300={selected}
|
||||
class:dark:bg-gray-600={selected}
|
||||
on:click={() => handleSelect(option)}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
@ -404,8 +404,9 @@
|
||||
|
||||
<div class="flex justify-between gap-5 mt-3">
|
||||
<div class="w-full">
|
||||
<p class="text-sm text-black dark:text-white">Country</p>
|
||||
<label class="text-sm text-black dark:text-white" for="search-place-country">Country</label>
|
||||
<Combobox
|
||||
id="search-place-country"
|
||||
options={suggestions.country}
|
||||
bind:selectedOption={filter.location.country}
|
||||
placeholder="Search country..."
|
||||
@ -414,8 +415,9 @@
|
||||
</div>
|
||||
|
||||
<div class="w-full">
|
||||
<p class="text-sm text-black dark:text-white">State</p>
|
||||
<label class="text-sm text-black dark:text-white" for="search-place-state">State</label>
|
||||
<Combobox
|
||||
id="search-place-state"
|
||||
options={suggestions.state}
|
||||
bind:selectedOption={filter.location.state}
|
||||
placeholder="Search state..."
|
||||
@ -424,8 +426,9 @@
|
||||
</div>
|
||||
|
||||
<div class="w-full">
|
||||
<p class="text-sm text-black dark:text-white">City</p>
|
||||
<label class="text-sm text-black dark:text-white" for="search-place-city">City</label>
|
||||
<Combobox
|
||||
id="search-place-city"
|
||||
options={suggestions.city}
|
||||
bind:selectedOption={filter.location.city}
|
||||
placeholder="Search city..."
|
||||
@ -446,8 +449,9 @@
|
||||
|
||||
<div class="flex justify-between gap-5 mt-3">
|
||||
<div class="w-full">
|
||||
<p class="text-sm text-black dark:text-white">Make</p>
|
||||
<label class="text-sm text-black dark:text-white" for="search-camera-make">Make</label>
|
||||
<Combobox
|
||||
id="search-camera-make"
|
||||
options={suggestions.make}
|
||||
bind:selectedOption={filter.camera.make}
|
||||
placeholder="Search camera make..."
|
||||
@ -457,8 +461,9 @@
|
||||
</div>
|
||||
|
||||
<div class="w-full">
|
||||
<p class="text-sm text-black dark:text-white">Model</p>
|
||||
<label class="text-sm text-black dark:text-white" for="search-camera-model">Model</label>
|
||||
<Combobox
|
||||
id="search-camera-model"
|
||||
options={suggestions.model}
|
||||
bind:selectedOption={filter.camera.model}
|
||||
placeholder="Search camera model..."
|
||||
|
Loading…
Reference in New Issue
Block a user