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

* 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>
2025-10-29 17:40:28 +00:00 · 2023-08-18 22:10:29 +02:00
parent 5e901e4d21
commit 98b72fdb9b
24 changed files with 459 additions and 39 deletions
--- a/web/src/api/open-api/api.ts
+++ b/web/src/api/open-api/api.ts
@@ -1840,6 +1840,12 @@ export interface PeopleUpdateDto {
 * @interface PeopleUpdateItem
 */
 export interface PeopleUpdateItem {
+    /**
+     * Person date of birth.
+     * @type {string}
+     * @memberof PeopleUpdateItem
+     */
+    'birthDate'?: string | null;
    /**
     * Asset is used to get the feature face thumbnail.
     * @type {string}
@@ -1871,6 +1877,12 @@ export interface PeopleUpdateItem {
 * @interface PersonResponseDto
 */
 export interface PersonResponseDto {
+    /**
+     * 
+     * @type {string}
+     * @memberof PersonResponseDto
+     */
+    'birthDate': string | null;
    /**
     * 
     * @type {string}
@@ -1902,6 +1914,12 @@ export interface PersonResponseDto {
 * @interface PersonUpdateDto
 */
 export interface PersonUpdateDto {
+    /**
+     * Person date of birth.
+     * @type {string}
+     * @memberof PersonUpdateDto
+     */
+    'birthDate'?: string | null;
    /**
     * Asset is used to get the feature face thumbnail.
     * @type {string}
--- a/web/src/lib/components/asset-viewer/detail-panel.svelte
+++ b/web/src/lib/components/asset-viewer/detail-panel.svelte
@@ -121,6 +121,13 @@
              thumbhash={null}
            />
            <p class="mt-1 truncate font-medium">{person.name}</p>
+            <p class="font-light">
+              {#if person.birthDate}
+                Age {Math.floor(
+                  DateTime.fromISO(asset.fileCreatedAt).diff(DateTime.fromISO(person.birthDate), 'years').years,
+                )}
+              {/if}
+            </p>
          </a>
        {/each}
      </div>
--- a/web/src/lib/components/faces-page/people-card.svelte
+++ b/web/src/lib/components/faces-page/people-card.svelte
@@ -11,19 +11,12 @@
  export let person: PersonResponseDto;

  let showContextMenu = false;
-  let dispatch = createEventDispatcher();
-
-  const onChangeNameClicked = () => {
-    dispatch('change-name', person);
-  };
-
-  const onMergeFacesClicked = () => {
-    dispatch('merge-faces', person);
-  };
-
-  const onHideFaceClicked = () => {
-    dispatch('hide-face', person);
-  };
+  let dispatch = createEventDispatcher<{
+    'change-name': void;
+    'set-birth-date': void;
+    'merge-faces': void;
+    'hide-face': void;
+  }>();
 </script>

 <div id="people-card" class="relative">
@@ -52,9 +45,10 @@

    {#if showContextMenu}
      <ContextMenu on:outclick={() => (showContextMenu = false)}>
-        <MenuOption on:click={() => onHideFaceClicked()} text="Hide face" />
-        <MenuOption on:click={() => onChangeNameClicked()} text="Change name" />
-        <MenuOption on:click={() => onMergeFacesClicked()} text="Merge faces" />
+        <MenuOption on:click={() => dispatch('hide-face')} text="Hide face" />
+        <MenuOption on:click={() => dispatch('change-name')} text="Change name" />
+        <MenuOption on:click={() => dispatch('set-birth-date')} text="Set date of birth" />
+        <MenuOption on:click={() => dispatch('merge-faces')} text="Merge faces" />
      </ContextMenu>
    {/if}
  </button>
--- a/web/src/lib/components/faces-page/set-birth-date-modal.svelte
+++ b/web/src/lib/components/faces-page/set-birth-date-modal.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import Cake from 'svelte-material-icons/Cake.svelte';
+  import Button from '../elements/buttons/button.svelte';
+  import FullScreenModal from '../shared-components/full-screen-modal.svelte';
+
+  export let birthDate: string;
+
+  const dispatch = createEventDispatcher<{
+    close: void;
+    updated: string;
+  }>();
+
+  const handleCancel = () => dispatch('close');
+  const handleSubmit = () => dispatch('updated', birthDate);
+</script>
+
+<FullScreenModal on:clickOutside={() => handleCancel()}>
+  <div
+    class="w-[500px] max-w-[95vw] rounded-3xl border bg-immich-bg p-4 py-8 shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg"
+  >
+    <div
+      class="flex flex-col place-content-center place-items-center gap-4 px-4 text-immich-primary dark:text-immich-dark-primary"
+    >
+      <Cake size="4em" />
+      <h1 class="text-2xl font-medium text-immich-primary dark:text-immich-dark-primary">Set date of birth</h1>
+
+      <p class="text-sm dark:text-immich-dark-fg">
+        Date of birth is used to calculate the age of this person at the time of a photo.
+      </p>
+    </div>
+
+    <form on:submit|preventDefault={() => handleSubmit()} autocomplete="off">
+      <div class="m-4 flex flex-col gap-2">
+        <input class="immich-form-input" id="birthDate" name="birthDate" type="date" bind:value={birthDate} />
+      </div>
+      <div class="mt-8 flex w-full gap-4 px-4">
+        <Button color="gray" fullwidth on:click={() => handleCancel()}>Cancel</Button>
+        <Button type="submit" fullwidth>Set</Button>
+      </div>
+    </form>
+  </div>
+</FullScreenModal>
--- a/web/src/routes/(user)/people/+page.svelte
+++ b/web/src/routes/(user)/people/+page.svelte
@@ -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
--- a/web/src/routes/(user)/people/[personId]/+page.svelte
+++ b/web/src/routes/(user)/people/[personId]/+page.svelte
@@ -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}