refactor(web): set birthdate (#25139)

web/src/lib/components/faces-page/people-card.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import { focusOutside } from '$lib/actions/focus-outside';
+  import ActionMenuItem from '$lib/components/ActionMenuItem.svelte';
   import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
   import { AppRoute, QueryParameter } from '$lib/constants';
+  import { getPersonActions } from '$lib/services/person.service';
   import { getPeopleThumbnailUrl } from '$lib/utils';
   import { type PersonResponseDto } from '@immich/sdk';
   import { Icon } from '@immich/ui';
   import {
     mdiAccountMultipleCheckOutline,
-    mdiCalendarEditOutline,
     mdiDotsVertical,
     mdiEyeOffOutline,
     mdiHeart,
@@ -18,17 +19,18 @@
   import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
   import MenuOption from '../shared-components/context-menu/menu-option.svelte';
 
-  interface Props {
+  type Props = {
     person: PersonResponseDto;
-    onSetBirthDate: () => void;
     onMergePeople: () => void;
     onHidePerson: () => void;
     onToggleFavorite: () => void;
-  }
+  };
 
-  let { person, onSetBirthDate, onMergePeople, onHidePerson, onToggleFavorite }: Props = $props();
+  let { person, onMergePeople, onHidePerson, onToggleFavorite }: Props = $props();
 
   let showVerticalDots = $state(false);
+
+  const { SetDateOfBirth } = $derived(getPersonActions($t, person));
 </script>
 
 <div
@@ -73,7 +75,7 @@
         title={$t('show_person_options')}
       >
         <MenuOption onClick={onHidePerson} icon={mdiEyeOffOutline} text={$t('hide_person')} />
-        <MenuOption onClick={onSetBirthDate} icon={mdiCalendarEditOutline} text={$t('set_date_of_birth')} />
+        <ActionMenuItem action={SetDateOfBirth} />
         <MenuOption onClick={onMergePeople} icon={mdiAccountMultipleCheckOutline} text={$t('merge_people')} />
         <MenuOption
           onClick={onToggleFavorite}

web/src/lib/managers/event-manager.svelte.ts

@@ -6,6 +6,7 @@ import type {
   AssetResponseDto,
   LibraryResponseDto,
   LoginResponseDto,
+  PersonResponseDto,
   QueueResponseDto,
   SharedLinkResponseDto,
   SystemConfigDto,
@@ -33,6 +34,8 @@ export type Events = {
   AlbumUpdate: [AlbumResponseDto];
   AlbumDelete: [AlbumResponseDto];
 
+  PersonUpdate: [PersonResponseDto];
+
   QueueUpdate: [QueueResponseDto];
 
   SharedLinkCreate: [SharedLinkResponseDto];

web/src/lib/modals/PersonEditBirthDateModal.svelte

@@ -1,73 +1,46 @@
 <script lang="ts">
   import DateInput from '$lib/elements/DateInput.svelte';
-  import { handleError } from '$lib/utils/handle-error';
-  import { updatePerson, type PersonResponseDto } from '@immich/sdk';
-  import { Button, HStack, Modal, ModalBody, ModalFooter, toastManager } from '@immich/ui';
+  import { handleUpdatePersonBirthDate } from '$lib/services/person.service';
+  import { type PersonResponseDto } from '@immich/sdk';
+  import { Button, FormModal, Text } from '@immich/ui';
   import { mdiCake } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
-  interface Props {
+  type Props = {
     person: PersonResponseDto;
-    onClose: (updatedPerson?: PersonResponseDto) => void;
-  }
+    onClose: () => void;
+  };
 
   let { person, onClose }: Props = $props();
-  let birthDate = $state(person.birthDate ?? '');
+  let birthDate = $derived(person.birthDate ?? '');
 
-  const todayFormatted = new Date().toISOString().split('T')[0];
-
-  const handleUpdateBirthDate = async () => {
-    try {
-      const updatedPerson = await updatePerson({
-        id: person.id,
-        personUpdateDto: { birthDate },
-      });
-
-      toastManager.success($t('date_of_birth_saved'));
-      onClose(updatedPerson);
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_save_date_of_birth'));
+  const onSubmit = async () => {
+    const success = await handleUpdatePersonBirthDate(person, birthDate);
+    if (success) {
+      onClose();
     }
   };
+
+  const todayFormatted = new Date().toISOString().split('T')[0];
 </script>
 
-<Modal title={$t('set_date_of_birth')} icon={mdiCake} {onClose} size="small">
-  <ModalBody>
-    <div class="text-primary">
-      <p class="text-sm dark:text-immich-dark-fg">
-        {$t('birthdate_set_description')}
-      </p>
-    </div>
-
-    <form onsubmit={() => handleUpdateBirthDate()} autocomplete="off" id="set-birth-date-form">
-      <div class="my-4 flex flex-col gap-2">
-        <DateInput
-          class="immich-form-input"
-          id="birthDate"
-          name="birthDate"
-          type="date"
-          bind:value={birthDate}
-          max={todayFormatted}
-        />
-        {#if person.birthDate}
-          <div class="flex justify-end">
-            <Button shape="round" color="secondary" size="small" onclick={() => (birthDate = '')}>
-              {$t('clear')}
-            </Button>
-          </div>
-        {/if}
+<FormModal title={$t('set_date_of_birth')} size="small" icon={mdiCake} {onClose} {onSubmit}>
+  <Text size="small">{$t('birthdate_set_description')}</Text>
+  <div class="my-4 flex flex-col gap-2">
+    <DateInput
+      class="immich-form-input"
+      id="birthDate"
+      name="birthDate"
+      type="date"
+      bind:value={birthDate}
+      max={todayFormatted}
+    />
+    {#if person.birthDate}
+      <div class="flex justify-end">
+        <Button shape="round" color="secondary" size="small" onclick={() => (birthDate = '')}>
+          {$t('clear')}
+        </Button>
       </div>
-    </form>
-  </ModalBody>
-
-  <ModalFooter>
-    <HStack fullWidth>
-      <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>
-        {$t('cancel')}
-      </Button>
-      <Button type="submit" shape="round" color="primary" fullWidth form="set-birth-date-form">
-        {$t('save')}
-      </Button>
-    </HStack>
-  </ModalFooter>
-</Modal>
+    {/if}
+  </div>
+</FormModal>

web/src/lib/services/person.service.ts

@@ -0,0 +1,31 @@
+import { eventManager } from '$lib/managers/event-manager.svelte';
+import PersonEditBirthDateModal from '$lib/modals/PersonEditBirthDateModal.svelte';
+import { handleError } from '$lib/utils/handle-error';
+import { getFormatter } from '$lib/utils/i18n';
+import { updatePerson, type PersonResponseDto } from '@immich/sdk';
+import { modalManager, toastManager, type ActionItem } from '@immich/ui';
+import { mdiCalendarEditOutline } from '@mdi/js';
+import type { MessageFormatter } from 'svelte-i18n';
+
+export const getPersonActions = ($t: MessageFormatter, person: PersonResponseDto) => {
+  const SetDateOfBirth: ActionItem = {
+    title: $t('set_date_of_birth'),
+    icon: mdiCalendarEditOutline,
+    onAction: () => modalManager.show(PersonEditBirthDateModal, { person }),
+  };
+
+  return { SetDateOfBirth };
+};
+
+export const handleUpdatePersonBirthDate = async (person: PersonResponseDto, birthDate: string) => {
+  const $t = await getFormatter();
+
+  try {
+    const response = await updatePerson({ id: person.id, personUpdateDto: { birthDate } });
+    toastManager.success($t('date_of_birth_saved'));
+    eventManager.emit('PersonUpdate', response);
+    return true;
+  } catch (error) {
+    handleError(error, $t('errors.unable_to_save_date_of_birth'));
+  }
+};