helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore(web): migration svelte 5 syntax (#13883)

Browse source
This commit is contained in:
Alex 2024-11-14 08:43:25 -06:00 • committed by GitHub
parent 9203a61709
commit 0b3742cf13
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
310 changed files with 6435 additions and 4176 deletions
Download patch file Download diff file Expand all files Collapse all files

89
web/src/lib/components/shared-components/search-bar/search-bar.svelte
View file

@ -15,35 +15,38 @@
import { generateId } from '$lib/utils/generate-id';
import { tick } from 'svelte';
export let value = '';
export let grayTheme: boolean;
export let searchQuery: MetadataSearchDto | SmartSearchDto = {};
interface Props {
value?: string;
grayTheme: boolean;
searchQuery?: MetadataSearchDto | SmartSearchDto;
onSearch?: () => void;
}
$: showClearIcon = value.length > 0;
let { value = $bindable(''), grayTheme, searchQuery = {}, onSearch }: Props = $props();
let input: HTMLInputElement;
let showClearIcon = $derived(value.length > 0);
let showSuggestions = false;
let showFilter = false;
let isSearchSuggestions = false;
let selectedId: string | undefined;
let moveSelection: (direction: 1 | -1) => void;
let clearSelection: () => void;
let selectActiveOption: () => void;
let input = $state<HTMLInputElement>();
let searchHistoryBox = $state<ReturnType<typeof SearchHistoryBox>>();
let showSuggestions = $state(false);
let showFilter = $state(false);
let isSearchSuggestions = $state(false);
let selectedId: string | undefined = $state();
const listboxId = generateId();
const onSearch = async (payload: SmartSearchDto | MetadataSearchDto) => {
const handleSearch = async (payload: SmartSearchDto | MetadataSearchDto) => {
const params = getMetadataSearchQuery(payload);
closeDropdown();
showFilter = false;
$isSearchEnabled = false;
await goto(`${AppRoute.SEARCH}?${params}`);
onSearch?.();
};
const clearSearchTerm = (searchTerm: string) => {
input.focus();
input?.focus();
$savedSearchTerms = $savedSearchTerms.filter((item) => item !== searchTerm);
};
@ -57,7 +60,7 @@
};
const clearAllSearchTerms = () => {
input.focus();
input?.focus();
$savedSearchTerms = [];
};
@ -82,7 +85,7 @@
const onHistoryTermClick = async (searchTerm: string) => {
value = searchTerm;
const searchPayload = { query: searchTerm };
await onSearch(searchPayload);
await handleSearch(searchPayload);
};
const onFilterClick = () => {
@ -95,13 +98,13 @@
};
const onSubmit = () => {
handlePromiseError(onSearch({ query: value }));
handlePromiseError(handleSearch({ query: value }));
saveSearchTerm(value);
};
const onClear = () => {
value = '';
input.focus();
input?.focus();
};
const onEscape = () => {
@ -112,19 +115,19 @@
const onArrow = async (direction: 1 | -1) => {
openDropdown();
await tick();
moveSelection(direction);
searchHistoryBox?.moveSelection(direction);
};
const onEnter = (event: KeyboardEvent) => {
if (selectedId) {
event.preventDefault();
selectActiveOption();
searchHistoryBox?.selectActiveOption();
}
};
const onInput = () => {
openDropdown();
clearSelection();
searchHistoryBox?.clearSelection();
};
const openDropdown = () => {
@ -133,14 +136,19 @@
const closeDropdown = () => {
showSuggestions = false;
clearSelection();
searchHistoryBox?.clearSelection();
};
const onsubmit = (event: Event) => {
event.preventDefault();
onSubmit();
};
</script>
<svelte:window
use:shortcuts={[
{ shortcut: { key: 'Escape' }, onShortcut: onEscape },
{ shortcut: { ctrl: true, key: 'k' }, onShortcut: () => input.select() },
{ shortcut: { ctrl: true, key: 'k' }, onShortcut: () => input?.select() },
{ shortcut: { ctrl: true, shift: true, key: 'k' }, onShortcut: onFilterClick },
]}
/>
@ -151,9 +159,9 @@
autocomplete="off"
class="select-text text-sm"
action={AppRoute.SEARCH}
on:reset={() => (value = '')}
on:submit|preventDefault={onSubmit}
on:focusin={onFocusIn}
onreset={() => (value = '')}
{onsubmit}
onfocusin={onFocusIn}
role="search"
>
<div use:focusOutside={{ onFocusOut: closeDropdown }} tabindex="-1">
@ -171,8 +179,8 @@
pattern="^(?!m:$).*$"
bind:value
bind:this={input}
on:focus={openDropdown}
on:input={onInput}
onfocus={openDropdown}
oninput={onInput}
disabled={showFilter}
role="combobox"
aria-controls={listboxId}
@ -191,13 +199,11 @@
<!-- SEARCH HISTORY BOX -->
<SearchHistoryBox
bind:this={searchHistoryBox}
bind:isSearchSuggestions
id={listboxId}
searchQuery={value}
isOpen={showSuggestions}
bind:isSearchSuggestions
bind:moveSelection
bind:clearSelection
bind:selectActiveOption
onClearAllSearchTerms={clearAllSearchTerms}
onClearSearchTerm={(searchTerm) => clearSearchTerm(searchTerm)}
onSelectSearchTerm={(searchTerm) => handlePromiseError(onHistoryTermClick(searchTerm))}
@ -206,19 +212,30 @@
</div>
<div class="absolute inset-y-0 {showClearIcon ? 'right-14' : 'right-2'} flex items-center pl-6 transition-all">
<CircleIconButton title={$t('show_search_options')} icon={mdiTune} on:click={onFilterClick} size="20" />
<CircleIconButton title={$t('show_search_options')} icon={mdiTune} onclick={onFilterClick} size="20" />
</div>
{#if showClearIcon}
<div class="absolute inset-y-0 right-0 flex items-center pr-2">
<CircleIconButton on:click={onClear} icon={mdiClose} title={$t('clear')} size="20" />
<CircleIconButton onclick={onClear} icon={mdiClose} title={$t('clear')} size="20" />
</div>
{/if}
<div class="absolute inset-y-0 left-0 flex items-center pl-2">
<CircleIconButton type="submit" disabled={showFilter} title={$t('search')} icon={mdiMagnify} size="20" />
<CircleIconButton
type="submit"
disabled={showFilter}
title={$t('search')}
icon={mdiMagnify}
size="20"
onclick={() => {}}
/>
</div>
</form>
{#if showFilter}
<SearchFilterModal {searchQuery} onSearch={(payload) => onSearch(payload)} onClose={() => (showFilter = false)} />
<SearchFilterModal
{searchQuery}
onSearch={(payload) => handleSearch(payload)}
onClose={() => (showFilter = false)}
/>
{/if}
</div>