fix: enter now submits the date modals (#25053)

* fix: enter now submits the date modals

* use FormModal

* apply prettier

* fix unit test

web/src/lib/modals/AssetChangeDateModal.svelte

@@ -5,7 +5,7 @@
   import { getPreferredTimeZone, getTimezones, toIsoDate } from '$lib/modals/timezone-utils';
   import { handleError } from '$lib/utils/handle-error';
   import { updateAsset } from '@immich/sdk';
-  import { Button, HStack, Label, Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { FormModal, Label } from '@immich/ui';
   import { mdiCalendarEdit } from '@mdi/js';
   import { DateTime } from 'luxon';
   import { t } from 'svelte-i18n';
@@ -28,7 +28,7 @@
   // the offsets (and validity) for time zones may change if the date is changed, which is why we recompute the list
   let selectedOption = $derived(getPreferredTimeZone(initialDate, initialTimeZone, timezones, lastSelectedTimezone));
 
-  const handleClose = async () => {
+  const onSubmit = async () => {
     if (!date.isValid || !selectedOption) {
       onClose(false);
       return;
@@ -49,25 +49,25 @@
   const date = $derived(DateTime.fromISO(selectedDate, { zone: selectedOption?.value, setZone: true }));
 </script>
 
-<Modal title={$t('edit_date_and_time')} icon={mdiCalendarEdit} onClose={() => onClose(false)} size="small">
-  <ModalBody>
-    <Label for="datetime" class="block mb-1">{$t('date_and_time')}</Label>
-    <DateInput
-      class="immich-form-input text-gray-700 w-full mb-2"
-      id="datetime"
-      type="datetime-local"
-      bind:value={selectedDate}
-    />
-    {#if timezoneInput}
-      <div class="w-full">
-        <Combobox bind:selectedOption label={$t('timezone')} options={timezones} placeholder={$t('search_timezone')} />
-      </div>
-    {/if}
-  </ModalBody>
-  <ModalFooter>
-    <HStack fullWidth>
-      <Button shape="round" color="secondary" fullWidth onclick={() => onClose(false)}>{$t('cancel')}</Button>
-      <Button shape="round" type="submit" fullWidth onclick={handleClose}>{$t('confirm')}</Button>
-    </HStack>
-  </ModalFooter>
-</Modal>
+<FormModal
+  title={$t('edit_date_and_time')}
+  icon={mdiCalendarEdit}
+  onClose={() => onClose(false)}
+  {onSubmit}
+  submitText={$t('confirm')}
+  disabled={!date.isValid || !selectedOption}
+  size="small"
+>
+  <Label for="datetime" class="block mb-1">{$t('date_and_time')}</Label>
+  <DateInput
+    class="immich-form-input text-gray-700 w-full mb-2"
+    id="datetime"
+    type="datetime-local"
+    bind:value={selectedDate}
+  />
+  {#if timezoneInput}
+    <div class="w-full">
+      <Combobox bind:selectedOption label={$t('timezone')} options={timezones} placeholder={$t('search_timezone')} />
+    </div>
+  {/if}
+</FormModal>

web/src/lib/modals/AssetSelectionChangeDateModal.spec.ts

@@ -17,8 +17,8 @@ describe('DateSelectionModal component', () => {
   const getRelativeInputToggle = () => screen.getByTestId('edit-by-offset-switch');
   const getDateInput = () => screen.getByLabelText('date_and_time') as HTMLInputElement;
   const getTimeZoneInput = () => screen.getByLabelText('timezone') as HTMLInputElement;
-  const getCancelButton = () => screen.getByText('cancel');
-  const getConfirmButton = () => screen.getByText('confirm');
+  const getCancelButton = () => screen.getByRole('button', { name: /cancel/i });
+  const getConfirmButton = () => screen.getByRole('button', { name: /confirm/i });
 
   beforeEach(() => {
     vi.stubGlobal('IntersectionObserver', getIntersectionObserverMock());

web/src/lib/modals/AssetSelectionChangeDateModal.svelte

@@ -8,7 +8,7 @@
   import { getOwnedAssetsWithWarning } from '$lib/utils/asset-utils';
   import { handleError } from '$lib/utils/handle-error';
   import { updateAssets } from '@immich/sdk';
-  import { Button, Field, HStack, Label, Modal, ModalBody, ModalFooter, Switch } from '@immich/ui';
+  import { Field, FormModal, Label, Switch } from '@immich/ui';
   import { mdiCalendarEdit } from '@mdi/js';
   import { DateTime } from 'luxon';
   import { t } from 'svelte-i18n';
@@ -30,7 +30,7 @@
   // the offsets (and validity) for time zones may change if the date is changed, which is why we recompute the list
   let selectedOption = $derived(getPreferredTimeZone(initialDate, initialTimeZone, timezones, lastSelectedTimezone));
 
-  const handleConfirm = async () => {
+  const onSubmit = async () => {
     const ids = getOwnedAssetsWithWarning(assets, $user);
     try {
       if (showRelative && (selectedDuration || selectedOption)) {
@@ -63,66 +63,62 @@
   const date = $derived(DateTime.fromISO(selectedDate, { zone: selectedOption?.value, setZone: true }));
 </script>
 
-<Modal title={$t('edit_date_and_time')} icon={mdiCalendarEdit} onClose={() => onClose(false)} size="small">
-  <ModalBody>
-    <Field label={$t('edit_date_and_time_by_offset')}>
-      <Switch data-testid="edit-by-offset-switch" bind:checked={showRelative} class="mb-2" />
-    </Field>
-    {#if showRelative}
-      <Label for="relativedatetime" class="block mb-1">{$t('offset')}</Label>
-      <DurationInput
-        class="immich-form-input w-full text-gray-700 mb-2"
-        id="relativedatetime"
-        bind:value={selectedDuration}
-      />
-    {:else}
-      <Label for="datetime" class="block mb-1">{$t('date_and_time')}</Label>
-      <DateInput class="immich-form-input w-full mb-2" id="datetime" type="datetime-local" bind:value={selectedDate} />
-    {/if}
-    <div class="w-full">
-      <Combobox
-        bind:selectedOption
-        label={$t('timezone')}
-        options={timezones}
-        placeholder={$t('search_timezone')}
-        onSelect={(option) => (lastSelectedTimezone = option as ZoneOption)}
-      ></Combobox>
-    </div>
-    <!-- <Card color="secondary" class={!showRelative || !currentInterval ? 'invisible' : ''}>
-        <CardBody class="p-2">
-          <div class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-3 items-center">
-            <div class="col-span-2 immich-form-label" data-testid="interval-preview">Preview</div>
-            <Text size="small" class="-mt-2 immich-form-label col-span-2"
-              >Showing changes for first selected asset only</Text
-            >
-            <label class="immich-form-label" for="from">Before</label>
-            <DateInput
-              class="dark:text-gray-300 text-gray-700 text-base"
-              id="from"
-              type="datetime-local"
-              readonly
-              bind:value={before}
-            />
-            <label class="immich-form-label" for="to">After</label>
-            <DateInput
-              class="dark:text-gray-300 text-gray-700 text-base"
-              id="to"
-              type="datetime-local"
-              readonly
-              bind:value={after}
-            />
-          </div>
-        </CardBody>
-      </Card> -->
-  </ModalBody>
-  <ModalFooter>
-    <HStack fullWidth>
-      <Button shape="round" color="secondary" fullWidth onclick={() => onClose(false)}>
-        {$t('cancel')}
-      </Button>
-      <Button shape="round" color="primary" fullWidth onclick={handleConfirm} disabled={!date.isValid}>
-        {$t('confirm')}
-      </Button>
-    </HStack>
-  </ModalFooter>
-</Modal>
+<FormModal
+  title={$t('edit_date_and_time')}
+  icon={mdiCalendarEdit}
+  onClose={() => onClose(false)}
+  {onSubmit}
+  submitText={$t('confirm')}
+  disabled={!date.isValid}
+  size="small"
+>
+  <Field label={$t('edit_date_and_time_by_offset')}>
+    <Switch data-testid="edit-by-offset-switch" bind:checked={showRelative} class="mb-2" />
+  </Field>
+  {#if showRelative}
+    <Label for="relativedatetime" class="block mb-1">{$t('offset')}</Label>
+    <DurationInput
+      class="immich-form-input w-full text-gray-700 mb-2"
+      id="relativedatetime"
+      bind:value={selectedDuration}
+    />
+  {:else}
+    <Label for="datetime" class="block mb-1">{$t('date_and_time')}</Label>
+    <DateInput class="immich-form-input w-full mb-2" id="datetime" type="datetime-local" bind:value={selectedDate} />
+  {/if}
+  <div class="w-full">
+    <Combobox
+      bind:selectedOption
+      label={$t('timezone')}
+      options={timezones}
+      placeholder={$t('search_timezone')}
+      onSelect={(option) => (lastSelectedTimezone = option as ZoneOption)}
+    ></Combobox>
+  </div>
+  <!-- <Card color="secondary" class={!showRelative || !currentInterval ? 'invisible' : ''}>
+      <CardBody class="p-2">
+        <div class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-3 items-center">
+          <div class="col-span-2 immich-form-label" data-testid="interval-preview">Preview</div>
+          <Text size="small" class="-mt-2 immich-form-label col-span-2"
+            >Showing changes for first selected asset only</Text
+          >
+          <label class="immich-form-label" for="from">Before</label>
+          <DateInput
+            class="dark:text-gray-300 text-gray-700 text-base"
+            id="from"
+            type="datetime-local"
+            readonly
+            bind:value={before}
+          />
+          <label class="immich-form-label" for="to">After</label>
+          <DateInput
+            class="dark:text-gray-300 text-gray-700 text-base"
+            id="to"
+            type="datetime-local"
+            readonly
+            bind:value={after}
+          />
+        </div>
+      </CardBody>
+    </Card> -->
+</FormModal>

web/src/lib/modals/NavigateToDateModal.svelte

@@ -3,10 +3,11 @@
   import { TimelineManager } from '$lib/managers/timeline-manager/timeline-manager.svelte';
   import type { TimelineAsset } from '$lib/managers/timeline-manager/types';
   import { getPreferredTimeZone, getTimezones, toDatetime, type ZoneOption } from '$lib/modals/timezone-utils';
-  import { Button, HStack, Modal, ModalBody, ModalFooter, VStack } from '@immich/ui';
+  import { FormModal, HStack, VStack } from '@immich/ui';
   import { mdiNavigationVariantOutline } from '@mdi/js';
   import { DateTime } from 'luxon';
   import { t } from 'svelte-i18n';
+
   interface Props {
     timelineManager: TimelineManager;
     onClose: (asset?: TimelineAsset) => void;
@@ -20,7 +21,7 @@
   // the offsets (and validity) for time zones may change if the date is changed, which is why we recompute the list
   let selectedOption: ZoneOption | undefined = $derived(getPreferredTimeZone(initialDate, undefined, timezones));
 
-  const handleClose = async () => {
+  const onSubmit = async () => {
     if (!date.isValid || !selectedOption) {
       onClose();
       return;
@@ -36,26 +37,26 @@
   const date = $derived(DateTime.fromISO(selectedDate, { zone: selectedOption?.value, setZone: true }));
 </script>
 
-<Modal title={$t('navigate_to_time')} icon={mdiNavigationVariantOutline} onClose={() => onClose()}>
-  <ModalBody>
-    <VStack fullWidth>
-      <HStack fullWidth>
-        <label class="immich-form-label" for="datetime">{$t('date_and_time')}</label>
-      </HStack>
-      <HStack fullWidth>
-        <DateInput
-          class="immich-form-input text-gray-700 w-full"
-          id="datetime"
-          type="datetime-local"
-          bind:value={selectedDate}
-        />
-      </HStack>
-    </VStack>
-  </ModalBody>
-  <ModalFooter>
+<FormModal
+  title={$t('navigate_to_time')}
+  icon={mdiNavigationVariantOutline}
+  onClose={() => onClose()}
+  {onSubmit}
+  submitText={$t('confirm')}
+  disabled={!date.isValid || !selectedOption}
+  size="medium"
+>
+  <VStack fullWidth>
     <HStack fullWidth>
-      <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
-      <Button shape="round" type="submit" fullWidth onclick={handleClose}>{$t('confirm')}</Button>
+      <label class="immich-form-label" for="datetime">{$t('date_and_time')}</label>
     </HStack>
-  </ModalFooter>
-</Modal>
+    <HStack fullWidth>
+      <DateInput
+        class="immich-form-input text-gray-700 w-full"
+        id="datetime"
+        type="datetime-local"
+        bind:value={selectedDate}
+      />
+    </HStack>
+  </VStack>
+</FormModal>