mirror of
https://github.com/immich-app/immich.git
synced 2025-07-07 09:12:56 +02:00
refactor(web): search people (#9082)
* refactor: search people * fix: test * fix: timeout * fix: callbacks * fix: simplify * remove unused var * refactor: rename file * fix: focus when deleting last character --------- Co-authored-by: Alex Tran <alex.tran1502@gmail.com> Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
This commit is contained in:
parent
72ce81f0c2
commit
5722c830ff
12 changed files with 207 additions and 267 deletions
web/src/lib/components/faces-page
|
@ -1,16 +1,9 @@
|
|||
<script lang="ts">
|
||||
import { maximumLengthSearchPeople, timeBeforeShowLoadingSpinner } from '$lib/constants';
|
||||
import { timeBeforeShowLoadingSpinner } from '$lib/constants';
|
||||
import { photoViewer } from '$lib/stores/assets.store';
|
||||
import { getAssetThumbnailUrl, getPeopleThumbnailUrl } from '$lib/utils';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { getPersonNameWithHiddenValue, searchNameLocal } from '$lib/utils/person';
|
||||
import {
|
||||
AssetTypeEnum,
|
||||
ThumbnailFormat,
|
||||
searchPerson,
|
||||
type AssetFaceResponseDto,
|
||||
type PersonResponseDto,
|
||||
} from '@immich/sdk';
|
||||
import { getPersonNameWithHiddenValue } from '$lib/utils/person';
|
||||
import { AssetTypeEnum, ThumbnailFormat, type AssetFaceResponseDto, type PersonResponseDto } from '@immich/sdk';
|
||||
import { mdiArrowLeftThin, mdiClose, mdiMagnify, mdiPlus } from '@mdi/js';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { linear } from 'svelte/easing';
|
||||
|
@ -18,6 +11,7 @@
|
|||
import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
|
||||
import Icon from '../elements/icon.svelte';
|
||||
import LoadingSpinner from '../shared-components/loading-spinner.svelte';
|
||||
import SearchPeople from '$lib/components/faces-page/people-search.svelte';
|
||||
|
||||
export let peopleWithFaces: AssetFaceResponseDto[];
|
||||
export let allPeople: PersonResponseDto[];
|
||||
|
@ -31,11 +25,11 @@
|
|||
|
||||
// search people
|
||||
let searchedPeople: PersonResponseDto[] = [];
|
||||
let searchedPeopleCopy: PersonResponseDto[] = [];
|
||||
let searchWord: string;
|
||||
let searchFaces = false;
|
||||
let searchName = '';
|
||||
|
||||
$: showPeople = searchName ? searchedPeople : allPeople.filter((person) => !person.isHidden);
|
||||
|
||||
const dispatch = createEventDispatcher<{
|
||||
close: void;
|
||||
createPerson: string | null;
|
||||
|
@ -116,33 +110,6 @@
|
|||
isShowLoadingNewPerson = false;
|
||||
dispatch('createPerson', newFeaturePhoto);
|
||||
};
|
||||
|
||||
const searchPeople = async () => {
|
||||
if ((searchedPeople.length < maximumLengthSearchPeople && searchName.startsWith(searchWord)) || searchName === '') {
|
||||
return;
|
||||
}
|
||||
const timeout = setTimeout(() => (isShowLoadingSearch = true), timeBeforeShowLoadingSpinner);
|
||||
try {
|
||||
const data = await searchPerson({ name: searchName });
|
||||
searchedPeople = data;
|
||||
searchedPeopleCopy = data;
|
||||
searchWord = searchName;
|
||||
} catch (error) {
|
||||
handleError(error, "Can't search people");
|
||||
} finally {
|
||||
clearTimeout(timeout);
|
||||
}
|
||||
|
||||
isShowLoadingSearch = false;
|
||||
};
|
||||
|
||||
$: {
|
||||
searchedPeople = searchNameLocal(searchName, searchedPeopleCopy, 20);
|
||||
}
|
||||
|
||||
const initInput = (element: HTMLInputElement) => {
|
||||
element.focus();
|
||||
};
|
||||
</script>
|
||||
|
||||
<section
|
||||
|
@ -200,13 +167,11 @@
|
|||
</div>
|
||||
</button>
|
||||
<div class="w-full flex">
|
||||
<input
|
||||
class="w-full gap-2 bg-immich-bg dark:bg-immich-dark-bg"
|
||||
type="text"
|
||||
placeholder="Name or nickname"
|
||||
bind:value={searchName}
|
||||
on:input={searchPeople}
|
||||
use:initInput
|
||||
<SearchPeople
|
||||
type="input"
|
||||
bind:searchName
|
||||
bind:showLoadingSpinner={isShowLoadingSearch}
|
||||
bind:searchedPeopleLocal={searchedPeople}
|
||||
/>
|
||||
{#if isShowLoadingSearch}
|
||||
<div>
|
||||
|
@ -227,56 +192,31 @@
|
|||
<div class="px-4 py-4 text-sm">
|
||||
<h2 class="mb-8 mt-4 uppercase">All people</h2>
|
||||
<div class="immich-scrollbar mt-4 flex flex-wrap gap-2 overflow-y-auto">
|
||||
{#if searchName == ''}
|
||||
{#each allPeople as person (person.id)}
|
||||
{#if person.id !== editedPerson.id}
|
||||
<div class="w-fit">
|
||||
<button class="w-[90px]" on:click={() => dispatch('reassign', person)}>
|
||||
<div class="relative">
|
||||
<ImageThumbnail
|
||||
curve
|
||||
shadow
|
||||
url={getPeopleThumbnailUrl(person.id)}
|
||||
altText={getPersonNameWithHiddenValue(person.name, person.isHidden)}
|
||||
title={getPersonNameWithHiddenValue(person.name, person.isHidden)}
|
||||
widthStyle="90px"
|
||||
heightStyle="90px"
|
||||
thumbhash={null}
|
||||
hidden={person.isHidden}
|
||||
/>
|
||||
</div>
|
||||
{#each showPeople as person (person.id)}
|
||||
{#if person.id !== editedPerson.id}
|
||||
<div class="w-fit">
|
||||
<button class="w-[90px]" on:click={() => dispatch('reassign', person)}>
|
||||
<div class="relative">
|
||||
<ImageThumbnail
|
||||
curve
|
||||
shadow
|
||||
url={getPeopleThumbnailUrl(person.id)}
|
||||
altText={getPersonNameWithHiddenValue(person.name, person.isHidden)}
|
||||
title={getPersonNameWithHiddenValue(person.name, person.isHidden)}
|
||||
widthStyle="90px"
|
||||
heightStyle="90px"
|
||||
thumbhash={null}
|
||||
hidden={person.isHidden}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p class="mt-1 truncate font-medium" title={getPersonNameWithHiddenValue(person.name, person.isHidden)}>
|
||||
{person.name}
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
{:else}
|
||||
{#each searchedPeople as person (person.id)}
|
||||
{#if person.id !== editedPerson.id}
|
||||
<div class="w-fit">
|
||||
<button class="w-[90px]" on:click={() => dispatch('reassign', person)}>
|
||||
<div class="relative">
|
||||
<ImageThumbnail
|
||||
curve
|
||||
shadow
|
||||
url={getPeopleThumbnailUrl(person.id)}
|
||||
altText={getPersonNameWithHiddenValue(person.name, person.isHidden)}
|
||||
title={getPersonNameWithHiddenValue(person.name, person.isHidden)}
|
||||
widthStyle="90px"
|
||||
heightStyle="90px"
|
||||
thumbhash={null}
|
||||
hidden={person.isHidden}
|
||||
/>
|
||||
</div>
|
||||
<p class="mt-1 truncate font-medium" title={person.name}>{person.name}</p>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
{/if}
|
||||
<p class="mt-1 truncate font-medium" title={getPersonNameWithHiddenValue(person.name, person.isHidden)}>
|
||||
{person.name}
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue