Files
immich/web/src/lib/components/faces-page/edit-name-input.svelte
martin 3e3598fd92 fix: suggest people (#4566)
* fix: suggest people

* feat: remove hidden people

* add hidden people when merging faces

* pr feedback

* fix: don't use reactive statement

* fixed section height

* improve merging

* fix: migration

* fix migration

* feat: add asset count

* fix: test

* rename endpoint

* add server test

* improve responsive design

* fix: remove videos from live photos in the asset count

* pr feedback

* fix: rename asset count endpoint

* fix: return firstname and lastname

* fix: reset people only on error

* fix: search

* fix: responsive design & div flickering

* fix: cleanup

* chore: open api

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
2023-10-24 15:53:49 +00:00

48 lines
1.3 KiB
Svelte

<script lang="ts">
import { PersonResponseDto, api } from '@api';
import { createEventDispatcher } from 'svelte';
import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
import Button from '../elements/buttons/button.svelte';
export let person: PersonResponseDto;
export let name: string;
export let suggestedPeople = false;
const dispatch = createEventDispatcher<{
change: string;
cancel: void;
input: void;
}>();
</script>
<div
class="flex w-full h-14 place-items-center {suggestedPeople
? 'rounded-t-lg dark:border-immich-dark-gray'
: 'rounded-lg'} bg-gray-100 p-2 dark:bg-gray-700"
>
<ImageThumbnail
circle
shadow
url={api.getPeopleThumbnailUrl(person.id)}
altText={person.name}
widthStyle="2rem"
heightStyle="2rem"
/>
<form
class="ml-4 flex w-full justify-between gap-16"
autocomplete="off"
on:submit|preventDefault={() => dispatch('change', name)}
>
<!-- svelte-ignore a11y-autofocus -->
<input
autofocus
class="w-full gap-2 bg-gray-100 dark:bg-gray-700 dark:text-white"
type="text"
placeholder="New name or nickname"
bind:value={name}
on:input={() => dispatch('input')}
/>
<Button size="sm" type="submit">Done</Button>
</form>
</div>