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>

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