mirror of
https://github.com/immich-app/immich.git
synced 2024-12-25 10:43:13 +02:00
feat(web): search names when merging faces (#5209)
* feat: search names when merging faces * fix: reactive * styling * small stlying * remove unused variable * fix: reactive * feat: reset --------- Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
parent
3aa2927dae
commit
034b308ddc
@ -12,15 +12,21 @@
|
|||||||
import { handleError } from '$lib/utils/handle-error';
|
import { handleError } from '$lib/utils/handle-error';
|
||||||
import { goto } from '$app/navigation';
|
import { goto } from '$app/navigation';
|
||||||
import { AppRoute } from '$lib/constants';
|
import { AppRoute } from '$lib/constants';
|
||||||
import { mdiCallMerge, mdiMerge, mdiSwapHorizontal } from '@mdi/js';
|
import { mdiCallMerge, mdiClose, mdiMagnify, mdiMerge, mdiSwapHorizontal } from '@mdi/js';
|
||||||
import Icon from '$lib/components/elements/icon.svelte';
|
import Icon from '$lib/components/elements/icon.svelte';
|
||||||
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
|
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
|
||||||
|
import { cloneDeep } from 'lodash-es';
|
||||||
|
import LoadingSpinner from '../shared-components/loading-spinner.svelte';
|
||||||
|
|
||||||
export let person: PersonResponseDto;
|
export let person: PersonResponseDto;
|
||||||
let people: PersonResponseDto[] = [];
|
let people: PersonResponseDto[] = [];
|
||||||
|
let peopleCopy: PersonResponseDto[] = [];
|
||||||
let selectedPeople: PersonResponseDto[] = [];
|
let selectedPeople: PersonResponseDto[] = [];
|
||||||
let screenHeight: number;
|
let screenHeight: number;
|
||||||
let isShowConfirmation = false;
|
let isShowConfirmation = false;
|
||||||
|
let name = '';
|
||||||
|
let searchWord: string;
|
||||||
|
let isSearchingPeople = false;
|
||||||
let dispatch = createEventDispatcher();
|
let dispatch = createEventDispatcher();
|
||||||
|
|
||||||
$: hasSelection = selectedPeople.length > 0;
|
$: hasSelection = selectedPeople.length > 0;
|
||||||
@ -31,12 +37,49 @@
|
|||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
const { data } = await api.personApi.getAllPeople({ withHidden: false });
|
const { data } = await api.personApi.getAllPeople({ withHidden: false });
|
||||||
people = data.people;
|
people = data.people;
|
||||||
|
peopleCopy = cloneDeep(people);
|
||||||
});
|
});
|
||||||
|
|
||||||
const onClose = () => {
|
const onClose = () => {
|
||||||
dispatch('go-back');
|
dispatch('go-back');
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const resetSearch = () => {
|
||||||
|
name = '';
|
||||||
|
people = peopleCopy;
|
||||||
|
};
|
||||||
|
|
||||||
|
const searchPeople = async (force: boolean) => {
|
||||||
|
if (name === '') {
|
||||||
|
people = peopleCopy;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!force) {
|
||||||
|
if (people.length < 20 && name.startsWith(searchWord)) {
|
||||||
|
people = peopleCopy
|
||||||
|
.filter((person: PersonResponseDto) => {
|
||||||
|
const nameParts = person.name.split(' ');
|
||||||
|
return nameParts.some((splitName) => splitName.toLowerCase().startsWith(name.toLowerCase()));
|
||||||
|
})
|
||||||
|
.slice(0, 10);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const timeout = setTimeout(() => (isSearchingPeople = true), 100);
|
||||||
|
try {
|
||||||
|
const { data } = await api.searchApi.searchPerson({ name });
|
||||||
|
people = data;
|
||||||
|
searchWord = name;
|
||||||
|
} catch (error) {
|
||||||
|
handleError(error, "Can't search people");
|
||||||
|
} finally {
|
||||||
|
clearTimeout(timeout);
|
||||||
|
}
|
||||||
|
|
||||||
|
isSearchingPeople = false;
|
||||||
|
};
|
||||||
|
|
||||||
const handleSwapPeople = () => {
|
const handleSwapPeople = () => {
|
||||||
[person, selectedPeople[0]] = [selectedPeople[0], person];
|
[person, selectedPeople[0]] = [selectedPeople[0], person];
|
||||||
goto(`${AppRoute.PEOPLE}/${person.id}?action=merge`);
|
goto(`${AppRoute.PEOPLE}/${person.id}?action=merge`);
|
||||||
@ -136,9 +179,39 @@
|
|||||||
<FaceThumbnail {person} border circle selectable={false} thumbnailSize={180} />
|
<FaceThumbnail {person} border circle selectable={false} thumbnailSize={180} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="immich-scrollbar overflow-y-auto rounded-3xl bg-gray-200 p-10 dark:bg-immich-dark-gray"
|
class="flex w-40 sm:w-48 md:w-96 h-14 rounded-lg bg-gray-100 p-2 dark:bg-gray-700 mb-8 gap-2 place-items-center"
|
||||||
style:max-height={screenHeight - 200 - 200 + 'px'}
|
>
|
||||||
|
<button on:click={() => searchPeople(true)}>
|
||||||
|
<div class="w-fit">
|
||||||
|
<Icon path={mdiMagnify} size="24" />
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
<!-- svelte-ignore a11y-autofocus -->
|
||||||
|
<input
|
||||||
|
autofocus
|
||||||
|
class="w-full gap-2 bg-gray-100 dark:bg-gray-700 dark:text-white"
|
||||||
|
type="text"
|
||||||
|
placeholder="Search names"
|
||||||
|
bind:value={name}
|
||||||
|
on:input={() => searchPeople(false)}
|
||||||
|
/>
|
||||||
|
{#if name}
|
||||||
|
<button on:click={resetSearch}>
|
||||||
|
<Icon path={mdiClose} />
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
{#if isSearchingPeople}
|
||||||
|
<div class="flex place-items-center">
|
||||||
|
<LoadingSpinner />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="immich-scrollbar overflow-y-auto rounded-3xl bg-gray-200 pt-8 px-8 pb-10 dark:bg-immich-dark-gray"
|
||||||
|
style:max-height={screenHeight - 250 - 250 + 'px'}
|
||||||
>
|
>
|
||||||
<div class="grid-col-2 grid gap-8 md:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10">
|
<div class="grid-col-2 grid gap-8 md:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10">
|
||||||
{#each unselectedPeople as person (person.id)}
|
{#each unselectedPeople as person (person.id)}
|
||||||
|
Loading…
Reference in New Issue
Block a user