refactor: dialog callbacks (#18034)

2025-05-30 19:54:52 -04:00 · 2025-05-02 19:34:53 +02:00 · 2025-05-02 19:34:53 +02:00 · 15d431ba6a
commit 15d431ba6a
parent 5d21ba3166
13 changed files with 69 additions and 81 deletions
--- a/web/src/lib/components/admin-page/delete-confirm-dialogue.svelte
+++ b/web/src/lib/components/admin-page/delete-confirm-dialogue.svelte
@ -47,8 +47,7 @@
 <ConfirmDialog
  title={$t('delete_user')}
  confirmText={forceDelete ? $t('permanently_delete') : $t('delete')}
-  onConfirm={handleDeleteUser}
-  {onCancel}
+  onClose={(confirmed) => (confirmed ? handleDeleteUser() : onCancel())}
  disabled={deleteButtonDisabled}
 >
  {#snippet promptSnippet()}
--- a/web/src/lib/components/admin-page/restore-dialogue.svelte
+++ b/web/src/lib/components/admin-page/restore-dialogue.svelte
@ -33,8 +33,7 @@
  title={$t('restore_user')}
  confirmText={$t('continue')}
  confirmColor="success"
-  onConfirm={handleRestoreUser}
-  {onCancel}
+  onClose={(confirmed) => (confirmed ? handleRestoreUser() : onCancel())}
 >
  {#snippet promptSnippet()}
    <p>
--- a/web/src/lib/components/admin-page/settings/auth/auth-settings.svelte
+++ b/web/src/lib/components/admin-page/settings/auth/auth-settings.svelte
@ -49,8 +49,7 @@
 {#if isConfirmOpen}
  <ConfirmDialog
    title={$t('admin.disable_login')}
-    onCancel={() => (isConfirmOpen = false)}
-    onConfirm={() => handleSave(true)}
+    onClose={(confirmed) => (confirmed ? handleSave(true) : (isConfirmOpen = false))}
  >
    {#snippet promptSnippet()}
      <div class="flex flex-col gap-4">
--- a/web/src/lib/components/album-page/album-options.svelte
+++ b/web/src/lib/components/album-page/album-options.svelte
@ -1,27 +1,27 @@
 <script lang="ts">
  import Icon from '$lib/components/elements/icon.svelte';
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
+  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
+  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
+  import { handleError } from '$lib/utils/handle-error';
  import {
-    updateAlbumInfo,
+    AlbumUserRole,
+    AssetOrder,
    removeUserFromAlbum,
+    updateAlbumInfo,
+    updateAlbumUser,
    type AlbumResponseDto,
    type UserResponseDto,
-    AssetOrder,
-    AlbumUserRole,
-    updateAlbumUser,
  } from '@immich/sdk';
-  import { mdiArrowDownThin, mdiArrowUpThin, mdiPlus, mdiDotsVertical } from '@mdi/js';
-  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
-  import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
-  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
-  import SettingDropdown from '../shared-components/settings/setting-dropdown.svelte';
-  import type { RenderedOption } from '../elements/dropdown.svelte';
-  import { handleError } from '$lib/utils/handle-error';
+  import { mdiArrowDownThin, mdiArrowUpThin, mdiDotsVertical, mdiPlus } from '@mdi/js';
  import { findKey } from 'lodash-es';
  import { t } from 'svelte-i18n';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
-  import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
+  import type { RenderedOption } from '../elements/dropdown.svelte';
  import { notificationController, NotificationType } from '../shared-components/notification/notification';
-  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
+  import SettingDropdown from '../shared-components/settings/setting-dropdown.svelte';

  interface Props {
    album: AlbumResponseDto;
@ -195,7 +195,6 @@
    title={$t('album_remove_user')}
    prompt={$t('album_remove_user_confirmation', { values: { user: selectedRemoveUser.name } })}
    confirmText={$t('remove_user')}
-    onConfirm={handleRemoveUser}
-    onCancel={() => (selectedRemoveUser = null)}
+    onClose={(confirmed) => (confirmed ? handleRemoveUser() : (selectedRemoveUser = null))}
  />
 {/if}
--- a/web/src/lib/components/album-page/share-info-modal.svelte
+++ b/web/src/lib/components/album-page/share-info-modal.svelte
@ -1,22 +1,22 @@
 <script lang="ts">
+  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
+  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
  import {
+    AlbumUserRole,
    getMyUser,
    removeUserFromAlbum,
+    updateAlbumUser,
    type AlbumResponseDto,
    type UserResponseDto,
-    updateAlbumUser,
-    AlbumUserRole,
  } from '@immich/sdk';
  import { mdiDotsVertical } from '@mdi/js';
  import { onMount } from 'svelte';
+  import { t } from 'svelte-i18n';
  import { handleError } from '../../utils/handle-error';
-  import ConfirmDialog from '../shared-components/dialog/confirm-dialog.svelte';
  import MenuOption from '../shared-components/context-menu/menu-option.svelte';
+  import ConfirmDialog from '../shared-components/dialog/confirm-dialog.svelte';
  import { NotificationType, notificationController } from '../shared-components/notification/notification';
  import UserAvatar from '../shared-components/user-avatar.svelte';
-  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
-  import { t } from 'svelte-i18n';
-  import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';

  interface Props {
    album: AlbumResponseDto;
@ -144,8 +144,7 @@
    title={$t('album_leave')}
    prompt={$t('album_leave_confirmation', { values: { album: album.albumName } })}
    confirmText={$t('leave')}
-    onConfirm={handleRemoveUser}
-    onCancel={() => (selectedRemoveUser = null)}
+    onClose={(confirmed) => (confirmed ? handleRemoveUser() : (selectedRemoveUser = null))}
  />
 {/if}

@ -154,7 +153,6 @@
    title={$t('album_remove_user')}
    prompt={$t('album_remove_user_confirmation', { values: { user: selectedRemoveUser.name } })}
    confirmText={$t('remove_user')}
-    onConfirm={handleRemoveUser}
-    onCancel={() => (selectedRemoveUser = null)}
+    onClose={(confirmed) => (confirmed ? handleRemoveUser() : (selectedRemoveUser = null))}
  />
 {/if}
--- a/web/src/lib/components/asset-viewer/editor/editor-panel.svelte
+++ b/web/src/lib/components/asset-viewer/editor/editor-panel.svelte
@ -1,13 +1,13 @@
 <script lang="ts">
+  import { shortcut } from '$lib/actions/shortcut';
+  import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
+  import { editTypes, showCancelConfirmDialog } from '$lib/stores/asset-editor.store';
  import { websocketEvents } from '$lib/stores/websocket';
  import { type AssetResponseDto } from '@immich/sdk';
  import { mdiClose } from '@mdi/js';
  import { onMount } from 'svelte';
-  import CircleIconButton from '../../elements/buttons/circle-icon-button.svelte';
  import { t } from 'svelte-i18n';
-  import { editTypes, showCancelConfirmDialog } from '$lib/stores/asset-editor.store';
-  import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
-  import { shortcut } from '$lib/actions/shortcut';
+  import CircleIconButton from '../../elements/buttons/circle-icon-button.svelte';

  onMount(() => {
    return websocketEvents.on('on_asset_update', (assetUpdate) => {
@ -31,10 +31,13 @@
  setTimeout(() => {
    onUpdateSelectedType(selectedType);
  }, 1);
+
  function selectType(name: string) {
    selectedType = name;
    onUpdateSelectedType(selectedType);
  }
+
+  const onConfirm = () => (typeof $showCancelConfirmDialog === 'boolean' ? null : $showCancelConfirmDialog());
 </script>

 <svelte:window use:shortcut={{ shortcut: { key: 'Escape' }, onShortcut: onClose }} />
@ -71,9 +74,6 @@
    cancelColor="secondary"
    confirmColor="danger"
    confirmText={$t('close')}
-    onCancel={() => {
-      $showCancelConfirmDialog = false;
-    }}
-    onConfirm={() => (typeof $showCancelConfirmDialog === 'boolean' ? null : $showCancelConfirmDialog())}
+    onClose={(confirmed) => (confirmed ? onConfirm() : ($showCancelConfirmDialog = false))}
  />
 {/if}
--- a/web/src/lib/components/photos-page/delete-asset-dialog.svelte
+++ b/web/src/lib/components/photos-page/delete-asset-dialog.svelte
@ -1,9 +1,9 @@
 <script lang="ts">
-  import ConfirmDialog from '../shared-components/dialog/confirm-dialog.svelte';
-  import { showDeleteModal } from '$lib/stores/preferences.store';
  import Checkbox from '$lib/components/elements/checkbox.svelte';
-  import { t } from 'svelte-i18n';
  import FormatMessage from '$lib/components/i18n/format-message.svelte';
+  import { showDeleteModal } from '$lib/stores/preferences.store';
+  import { t } from 'svelte-i18n';
+  import ConfirmDialog from '../shared-components/dialog/confirm-dialog.svelte';

  interface Props {
    size: number;
@ -26,8 +26,7 @@
 <ConfirmDialog
  title={$t('permanently_delete_assets_count', { values: { count: size } })}
  confirmText={$t('delete')}
-  onConfirm={handleConfirm}
-  {onCancel}
+  onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}
 >
  {#snippet promptSnippet()}
    <p>
--- a/web/src/lib/components/shared-components/change-date.svelte
+++ b/web/src/lib/components/shared-components/change-date.svelte
@ -1,9 +1,9 @@
 <script lang="ts">
  import { DateTime } from 'luxon';
-  import ConfirmDialog from './dialog/confirm-dialog.svelte';
-  import Combobox, { type ComboBoxOption } from './combobox.svelte';
-  import DateInput from '../elements/date-input.svelte';
  import { t } from 'svelte-i18n';
+  import DateInput from '../elements/date-input.svelte';
+  import Combobox, { type ComboBoxOption } from './combobox.svelte';
+  import ConfirmDialog from './dialog/confirm-dialog.svelte';

  interface Props {
    initialDate?: DateTime;
@ -138,8 +138,7 @@
  title={$t('edit_date_and_time')}
  prompt="Please select a new date:"
  disabled={!date.isValid}
-  onConfirm={handleConfirm}
-  {onCancel}
+  onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}
 >
  <!-- @migration-task: migrate this slot by hand, `prompt` would shadow a prop on the parent component -->
  <!-- @migration-task: migrate this slot by hand, `prompt` would shadow a prop on the parent component -->
--- a/web/src/lib/components/shared-components/change-location.svelte
+++ b/web/src/lib/components/shared-components/change-location.svelte
@ -1,20 +1,20 @@
 <script lang="ts">
-  import ConfirmDialog from './dialog/confirm-dialog.svelte';
  import { timeDebounceOnSearch } from '$lib/constants';
-  import { handleError } from '$lib/utils/handle-error';
  import { lastChosenLocation } from '$lib/stores/asset-editor.store';
+  import { handleError } from '$lib/utils/handle-error';
+  import ConfirmDialog from './dialog/confirm-dialog.svelte';

  import { clickOutside } from '$lib/actions/click-outside';
-  import LoadingSpinner from './loading-spinner.svelte';
-  import { delay } from '$lib/utils/asset-utils';
-  import { timeToLoadTheMap } from '$lib/constants';
-  import { searchPlaces, type AssetResponseDto, type PlacesResponseDto } from '@immich/sdk';
-  import SearchBar from '../elements/search-bar.svelte';
  import { listNavigation } from '$lib/actions/list-navigation';
-  import { t } from 'svelte-i18n';
  import CoordinatesInput from '$lib/components/shared-components/coordinates-input.svelte';
  import type Map from '$lib/components/shared-components/map/map.svelte';
+  import { timeToLoadTheMap } from '$lib/constants';
+  import { delay } from '$lib/utils/asset-utils';
+  import { searchPlaces, type AssetResponseDto, type PlacesResponseDto } from '@immich/sdk';
+  import { t } from 'svelte-i18n';
  import { get } from 'svelte/store';
+  import SearchBar from '../elements/search-bar.svelte';
+  import LoadingSpinner from './loading-spinner.svelte';
  interface Point {
    lng: number;
    lat: number;
@ -112,7 +112,12 @@
  };
 </script>

-<ConfirmDialog confirmColor="primary" title={$t('change_location')} width="wide" onConfirm={handleConfirm} {onCancel}>
+<ConfirmDialog
+  confirmColor="primary"
+  title={$t('change_location')}
+  width="wide"
+  onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}
+>
  {#snippet promptSnippet()}
    <div class="flex flex-col w-full h-full gap-2">
      <div class="relative w-64 sm:w-96">
--- a/web/src/lib/components/shared-components/dialog/confirm-dialog.svelte
+++ b/web/src/lib/components/shared-components/dialog/confirm-dialog.svelte
@ -1,8 +1,8 @@
 <script lang="ts">
-  import FullScreenModal from '../full-screen-modal.svelte';
-  import { t } from 'svelte-i18n';
-  import type { Snippet } from 'svelte';
  import { Button, type Color } from '@immich/ui';
+  import type { Snippet } from 'svelte';
+  import { t } from 'svelte-i18n';
+  import FullScreenModal from '../full-screen-modal.svelte';

  interface Props {
    title?: string;
@ -14,8 +14,7 @@
    hideCancelButton?: boolean;
    disabled?: boolean;
    width?: 'wide' | 'narrow';
-    onCancel: () => void;
-    onConfirm: () => void;
+    onClose: (confirmed: boolean) => void;
    promptSnippet?: Snippet;
  }

@ -29,17 +28,16 @@
    hideCancelButton = false,
    disabled = false,
    width = 'narrow',
-    onCancel,
-    onConfirm,
+    onClose,
    promptSnippet,
  }: Props = $props();

  const handleConfirm = () => {
-    onConfirm();
+    onClose(true);
  };
 </script>

-<FullScreenModal {title} onClose={onCancel} {width}>
+<FullScreenModal {title} onClose={() => onClose(false)} {width}>
  <div class="text-md py-5 text-center">
    {#if promptSnippet}{@render promptSnippet()}{:else}
      <p>{prompt}</p>
@ -48,7 +46,7 @@

  {#snippet stickyBottom()}
    {#if !hideCancelButton}
-      <Button shape="round" color={cancelColor} fullWidth onclick={onCancel}>
+      <Button shape="round" color={cancelColor} fullWidth onclick={() => onClose(false)}>
        {cancelText}
      </Button>
    {/if}
--- a/web/src/lib/components/shared-components/dialog/dialog.ts
+++ b/web/src/lib/components/shared-components/dialog/dialog.ts
@ -1,8 +1,7 @@
 import { writable } from 'svelte/store';

 type DialogActions = {
-  onConfirm: () => void;
-  onCancel: () => void;
+  onClose: (confirmed: boolean) => void;
 };

 type DialogOptions = {
@ -24,13 +23,9 @@ function createDialogWrapper() {
    return new Promise<boolean>((resolve) => {
      const newDialog: Dialog = {
        ...options,
-        onConfirm: () => {
+        onClose: (confirmed) => {
          dialog.set(undefined);
-          resolve(true);
-        },
-        onCancel: () => {
-          dialog.set(undefined);
-          resolve(false);
+          resolve(confirmed);
        },
      };

--- a/web/src/routes/admin/jobs-status/+page.svelte
+++ b/web/src/routes/admin/jobs-status/+page.svelte
@ -102,8 +102,7 @@
    confirmColor="primary"
    title={$t('admin.create_job')}
    disabled={!selectedJob}
-    onConfirm={handleCreate}
-    onCancel={handleCancel}
+    onClose={(confirmed) => (confirmed ? handleCreate() : handleCancel())}
  >
    {#snippet promptSnippet()}
      <form {onsubmit} autocomplete="off" id="create-tag-form" class="w-full">
--- a/web/src/routes/admin/user-management/+page.svelte
+++ b/web/src/routes/admin/user-management/+page.svelte
@ -152,8 +152,7 @@
        <ConfirmDialog
          title={$t('password_reset_success')}
          confirmText={$t('done')}
-          onConfirm={() => (shouldShowPasswordResetSuccess = false)}
-          onCancel={() => (shouldShowPasswordResetSuccess = false)}
+          onClose={() => (shouldShowPasswordResetSuccess = false)}
          hideCancelButton={true}
          confirmColor="success"
        >