KevinMidboe/immich
1
0
Fork 0
mirror of https://github.com/KevinMidboe/immich.git synced 2026-01-26 11:06:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: set person birth date (web only) (#3721)

Browse Source 
* Person birth date (data layer)

* Person birth date (data layer)

* Person birth date (service layer)

* Person birth date (service layer, API)

* Person birth date (service layer, API)

* Person birth date (UI) (wip)

* Person birth date (UI) (wip)

* Person birth date (UI) (wip)

* Person birth date (UI) (wip)

* UI: Use "date of birth" everywhere

* UI: better modal dialog

Similar to the API key modal.

* UI: set date of birth from people page

* Use typed events for modal dispatcher

* Date of birth tests (wip)

* Regenerate API

* Code formatting

* Fix Svelte typing

* Fix Svelte typing

* Fix person model [skip ci]

* Minor refactoring [skip ci]

* Typed event dispatcher [skip ci]

* Refactor typed event dispatcher [skip ci]

* Fix unchanged birthdate check [skip ci]

* Remove unnecessary custom transformer [skip ci]

* PersonUpdate: call search index update job only when needed

* Regenerate API

* Code formatting

* Fix tests

* Fix DTO

* Regenerate API

* chore: verbiage and view mode

* feat: show current age

* test: person e2e

* fix: show name for birth date selection

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
This commit is contained in:
Daniele Ricci
2023-08-18 22:10:29 +02:00
committed by GitHub
parent 5e901e4d21
commit 98b72fdb9b
24 changed files with 459 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
web/src/routes/(user)/people/+page.svelte
View File

@@ -20,6 +20,7 @@
import { onDestroy, onMount } from 'svelte';
import { browser } from '$app/environment';
import MergeSuggestionModal from '$lib/components/faces-page/merge-suggestion-modal.svelte';
import SetBirthDateModal from '$lib/components/faces-page/set-birth-date-modal.svelte';
export let data: PageData;
let selectHidden = false;
@@ -35,6 +36,7 @@
let toggleVisibility = false;
let showChangeNameModal = false;
let showSetBirthDateModal = false;
let showMergeModal = false;
let personName = '';
let personMerge1: PersonResponseDto;
@@ -194,17 +196,22 @@
}
};
const handleChangeName = ({ detail }: CustomEvent<PersonResponseDto>) => {
const handleChangeName = (detail: PersonResponseDto) => {
showChangeNameModal = true;
personName = detail.name;
personMerge1 = detail;
edittingPerson = detail;
};
const handleHideFace = async (event: CustomEvent<PersonResponseDto>) => {
const handleSetBirthDate = (detail: PersonResponseDto) => {
showSetBirthDateModal = true;
edittingPerson = detail;
};
const handleHideFace = async (detail: PersonResponseDto) => {
try {
const { data: updatedPerson } = await api.personApi.updatePerson({
id: event.detail.id,
id: detail.id,
personUpdateDto: { isHidden: true },
});
@@ -232,16 +239,13 @@
}
};
const handleMergeFaces = (event: CustomEvent<PersonResponseDto>) => {
goto(`${AppRoute.PEOPLE}/${event.detail.id}?action=merge`);
const handleMergeFaces = (detail: PersonResponseDto) => {
goto(`${AppRoute.PEOPLE}/${detail.id}?action=merge`);
};
const submitNameChange = async () => {
showChangeNameModal = false;
if (!edittingPerson) {
return;
}
if (personName === edittingPerson.name) {
if (!edittingPerson || personName === edittingPerson.name) {
return;
}
// We check if another person has the same name as the name entered by the user
@@ -261,6 +265,34 @@
changeName();
};
const submitBirthDateChange = async (value: string) => {
showSetBirthDateModal = false;
if (!edittingPerson || value === edittingPerson.birthDate) {
return;
}
try {
const { data: updatedPerson } = await api.personApi.updatePerson({
id: edittingPerson.id,
personUpdateDto: { birthDate: value.length > 0 ? value : null },
});
people = people.map((person: PersonResponseDto) => {
if (person.id === updatedPerson.id) {
return updatedPerson;
}
return person;
});
notificationController.show({
message: 'Date of birth saved succesfully',
type: NotificationType.Info,
});
} catch (error) {
handleError(error, 'Unable to save name');
}
};
const changeName = async () => {
showMergeModal = false;
showChangeNameModal = false;
@@ -323,9 +355,10 @@
{#if !person.isHidden}
<PeopleCard
{person}
on:change-name={handleChangeName}
on:merge-faces={handleMergeFaces}
on:hide-face={handleHideFace}
on:change-name={() => handleChangeName(person)}
on:set-birth-date={() => handleSetBirthDate(person)}
on:merge-faces={() => handleMergeFaces(person)}
on:hide-face={() => handleHideFace(person)}
/>
{/if}
{/each}
@@ -372,6 +405,14 @@
</div>
</FullScreenModal>
{/if}
{#if showSetBirthDateModal}
<SetBirthDateModal
birthDate={edittingPerson?.birthDate ?? ''}
on:close={() => (showSetBirthDateModal = false)}
on:updated={(event) => submitBirthDateChange(event.detail)}
/>
{/if}
</UserPageLayout>
{#if selectHidden}
<ShowHide

38
web/src/routes/(user)/people/[personId]/+page.svelte
View File

@@ -5,6 +5,7 @@
import EditNameInput from '$lib/components/faces-page/edit-name-input.svelte';
import MergeFaceSelector from '$lib/components/faces-page/merge-face-selector.svelte';
import MergeSuggestionModal from '$lib/components/faces-page/merge-suggestion-modal.svelte';
import SetBirthDateModal from '$lib/components/faces-page/set-birth-date-modal.svelte';
import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
import ArchiveAction from '$lib/components/photos-page/actions/archive-action.svelte';
import CreateSharedLink from '$lib/components/photos-page/actions/create-shared-link.svelte';
@@ -39,6 +40,7 @@
SELECT_FACE = 'select-face',
MERGE_FACES = 'merge-faces',
SUGGEST_MERGE = 'suggest-merge',
BIRTH_DATE = 'birth-date',
}
const assetStore = new AssetStore({
@@ -172,6 +174,29 @@
}
changeName();
};
const handleSetBirthDate = async (birthDate: string) => {
try {
viewMode = ViewMode.VIEW_ASSETS;
data.person.birthDate = birthDate;
const { data: updatedPerson } = await api.personApi.updatePerson({
id: data.person.id,
personUpdateDto: { birthDate: birthDate.length > 0 ? birthDate : null },
});
people = people.map((person: PersonResponseDto) => {
if (person.id === updatedPerson.id) {
return updatedPerson;
}
return person;
});
notificationController.show({ message: 'Date of birth saved successfully', type: NotificationType.Info });
} catch (error) {
handleError(error, 'Unable to save date of birth');
}
};
</script>
{#if viewMode === ViewMode.SUGGEST_MERGE}
@@ -185,6 +210,14 @@
/>
{/if}
{#if viewMode === ViewMode.BIRTH_DATE}
<SetBirthDateModal
birthDate={data.person.birthDate ?? ''}
on:close={() => (viewMode = ViewMode.VIEW_ASSETS)}
on:updated={(event) => handleSetBirthDate(event.detail)}
/>
{/if}
{#if viewMode === ViewMode.MERGE_FACES}
<MergeFaceSelector person={data.person} on:go-back={() => (viewMode = ViewMode.VIEW_ASSETS)} />
{/if}
@@ -206,11 +239,12 @@
</AssetSelectContextMenu>
</AssetSelectControlBar>
{:else}
{#if viewMode === ViewMode.VIEW_ASSETS || viewMode === ViewMode.SUGGEST_MERGE}
{#if viewMode === ViewMode.VIEW_ASSETS || viewMode === ViewMode.SUGGEST_MERGE || viewMode === ViewMode.BIRTH_DATE}
<ControlAppBar showBackButton backIcon={ArrowLeft} on:close-button-click={() => goto(previousRoute)}>
<svelte:fragment slot="trailing">
<AssetSelectContextMenu icon={DotsVertical} title="Menu">
<MenuOption text="Change feature photo" on:click={() => (viewMode = ViewMode.SELECT_FACE)} />
<MenuOption text="Set date of birth" on:click={() => (viewMode = ViewMode.BIRTH_DATE)} />
<MenuOption text="Merge face" on:click={() => (viewMode = ViewMode.MERGE_FACES)} />
</AssetSelectContextMenu>
</svelte:fragment>
@@ -233,7 +267,7 @@
singleSelect={viewMode === ViewMode.SELECT_FACE}
on:select={({ detail: asset }) => handleSelectFeaturePhoto(asset)}
>
{#if viewMode === ViewMode.VIEW_ASSETS || viewMode === ViewMode.SUGGEST_MERGE}
{#if viewMode === ViewMode.VIEW_ASSETS || viewMode === ViewMode.SUGGEST_MERGE || viewMode === ViewMode.BIRTH_DATE}
<!-- Face information block -->
<section class="flex place-items-center p-4 sm:px-6">
{#if isEditingName}