immich/web/src/lib/components/faces-page/people-search.svelte
waclaw66 dd2c7400a6
chore(web): another missing translations ()
* chore(web): another missing translations

* unused removed

* more keys

* lint fix

* test fixed

* dynamic translation fix

* fixes

* people search translation

* params fixed

* keep filter setting fix

* lint fix

* $t fixes

* Update web/src/lib/i18n/en.json

Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>

* another missing

* activity translation

* link sharing translations

* expiration dropdown fix - didn't work localized

* notification title

* device logout

* search results

* reset to default

* unsaved change

* select from computer

* selected

* select-2

* select-3

* unmerge

* pluralize, force icu message

* Update web/src/lib/components/asset-viewer/asset-viewer.svelte

Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>

* review fixes

* remove user

* plural fixes

* ffmpeg settings

* fixes

* error title

* plural fixes

* onboarding

* change password

* more more

* console log fix

* another

* api key desc

* map marker

* format fix

* key fix

* asset-utils

* utils

* misc

---------

Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
2024-06-24 09:50:01 -04:00

98 lines
2.8 KiB
Svelte

<script lang="ts">
import { initInput } from '$lib/actions/focus';
import SearchBar from '$lib/components/elements/search-bar.svelte';
import { maximumLengthSearchPeople, timeBeforeShowLoadingSpinner } from '$lib/constants';
import { handleError } from '$lib/utils/handle-error';
import { searchNameLocal } from '$lib/utils/person';
import { searchPerson, type PersonResponseDto } from '@immich/sdk';
import { t } from 'svelte-i18n';
export let searchName: string;
export let searchedPeopleLocal: PersonResponseDto[];
export let type: 'searchBar' | 'input';
export let numberPeopleToSearch: number = maximumLengthSearchPeople;
export let inputClass: string = 'w-full gap-2 bg-immich-bg dark:bg-immich-dark-bg';
export let showLoadingSpinner: boolean = false;
export let placeholder: string = $t('name_or_nickname');
export let onReset = () => {};
export let onSearch = () => {};
let searchedPeople: PersonResponseDto[] = [];
let searchWord: string;
let abortController: AbortController | null = null;
let timeout: NodeJS.Timeout | null = null;
const search = () => {
searchedPeopleLocal = searchNameLocal(searchName, searchedPeople, numberPeopleToSearch);
};
const reset = () => {
searchedPeopleLocal = [];
cancelPreviousRequest();
onReset();
};
const cancelPreviousRequest = () => {
if (abortController) {
abortController.abort();
abortController = null;
}
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
};
export let handleSearch = async (force?: boolean, name?: string) => {
searchName = name ?? searchName;
onSearch();
if (searchName === '') {
reset();
return;
}
if (!force && searchedPeople.length < maximumLengthSearchPeople && searchName.startsWith(searchWord)) {
search();
return;
}
cancelPreviousRequest();
abortController = new AbortController();
timeout = setTimeout(() => (showLoadingSpinner = true), timeBeforeShowLoadingSpinner);
try {
const data = await searchPerson({ name: searchName }, { signal: abortController?.signal });
searchedPeople = data;
searchWord = searchName;
} catch (error) {
handleError(error, $t('errors.cant_search_people'));
} finally {
clearTimeout(timeout);
timeout = null;
abortController = null;
showLoadingSpinner = false;
search();
}
};
const handleReset = () => {
reset();
onReset();
};
</script>
{#if type === 'searchBar'}
<SearchBar
bind:name={searchName}
{showLoadingSpinner}
{placeholder}
on:reset={handleReset}
on:search={({ detail }) => handleSearch(detail.force ?? false)}
/>
{:else}
<input
class={inputClass}
type="text"
{placeholder}
bind:value={searchName}
on:input={() => handleSearch(false)}
use:initInput
/>
{/if}