feat(web): suggest people when typing a name (#4126)

* feat(web): suggest people when entering a name

* fix: border size from 2 to 1 pixel

* pr feedback

* fix: web unit test

* pr feedback

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
martin 2023-09-23 06:58:51 +02:00 committed by GitHub
parent 9a7e48eaa6
commit fc64be6603
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 117 additions and 48 deletions

View file

@ -3,10 +3,10 @@
import { createEventDispatcher } from 'svelte';
import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
import Button from '../elements/buttons/button.svelte';
import { clickOutside } from '$lib/utils/click-outside';
export let person: PersonResponseDto;
let name = person.name;
export let name: string;
export let suggestedPeople = false;
const dispatch = createEventDispatcher<{
change: string;
@ -15,9 +15,9 @@
</script>
<div
class="flex max-w-lg place-items-center rounded-lg border bg-gray-100 p-2 dark:border-transparent dark:bg-gray-700"
use:clickOutside
on:outclick={() => dispatch('cancel')}
class="flex w-full place-items-center {suggestedPeople
? 'rounded-t-lg border-b dark:border-immich-dark-gray'
: 'rounded-lg'} bg-gray-100 p-2 dark:bg-gray-700"
>
<ImageThumbnail
circle

View file

@ -17,16 +17,7 @@
export let personMerge1: PersonResponseDto;
export let personMerge2: PersonResponseDto;
export let people: PersonResponseDto[];
let potentialMergePeople: PersonResponseDto[] = people
.filter(
(person: PersonResponseDto) =>
personMerge2.name.toLowerCase() === person.name.toLowerCase() &&
person.id !== personMerge2.id &&
person.id !== personMerge1.id &&
!person.isHidden,
)
.slice(0, 3);
export let potentialMergePeople: PersonResponseDto[];
let choosePersonToMerge = false;
@ -48,7 +39,9 @@
<h1 class="truncate px-4 py-4 font-medium text-immich-primary dark:text-immich-dark-primary">
Merge faces - {title}
</h1>
<CircleIconButton logo={Close} on:click={() => dispatch('close')} />
<div class="p-2">
<CircleIconButton logo={Close} on:click={() => dispatch('close')} />
</div>
</div>
<div class="flex items-center justify-center px-2 py-4 md:h-36 md:px-4 md:py-4">