refactor(web): ConfirmDialog and dialogController (#9716)

* wrapper * no more callback * refactor: wip * refactor: wip * refactor: wip * pr feedback * fix * pr feedback
2024-05-28 09:10:43 +07:00
parent f020d29ab6
commit bce916e4c8
26 changed files with 281 additions and 317 deletions
@@ -24,7 +24,6 @@
  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
  import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
  import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
-  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
  import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
  import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
@@ -81,6 +80,7 @@
  } from '@mdi/js';
  import { fly } from 'svelte/transition';
  import type { PageData } from './$types';
+  import { dialogController } from '$lib/components/shared-components/dialog/dialog';

  export let data: PageData;

@@ -98,7 +98,6 @@
  }

  enum ViewMode {
-    CONFIRM_DELETE = 'confirm-delete',
    LINK_SHARING = 'link-sharing',
    SELECT_USERS = 'select-users',
    SELECT_THUMBNAIL = 'select-thumbnail',
@@ -248,10 +247,7 @@
      viewMode = ViewMode.VIEW;
      return;
    }
-    if (viewMode === ViewMode.CONFIRM_DELETE) {
-      viewMode = ViewMode.VIEW;
-      return;
-    }
+
    if (viewMode === ViewMode.SELECT_ASSETS) {
      handleCloseSelectAssets();
      return;
@@ -353,6 +349,16 @@
  };

  const handleRemoveAlbum = async () => {
+    const isConfirmed = await dialogController.show({
+      id: 'remove-album',
+      prompt: `Are you sure you want to delete the album ${album.albumName}?\nIf this album is shared, other users will not be able to access it anymore.`,
+    });
+
+    if (!isConfirmed) {
+      viewMode = ViewMode.VIEW;
+      return;
+    }
+
    try {
      await deleteAlbum({ id: album.id });
      await goto(backUrl);
@@ -471,11 +477,7 @@
                        on:click={() => (viewMode = ViewMode.SELECT_THUMBNAIL)}
                      />
                      <MenuOption icon={mdiCogOutline} text="Options" on:click={() => (viewMode = ViewMode.OPTIONS)} />
-                      <MenuOption
-                        icon={mdiDeleteOutline}
-                        text="Delete album"
-                        on:click={() => (viewMode = ViewMode.CONFIRM_DELETE)}
-                      />
+                      <MenuOption icon={mdiDeleteOutline} text="Delete album" on:click={() => handleRemoveAlbum()} />
                    </ContextMenu>
                  {/if}
                </div>
@@ -697,21 +699,6 @@
  />
 {/if}

-{#if viewMode === ViewMode.CONFIRM_DELETE}
-  <ConfirmDialogue
-    id="delete-album-modal"
-    title="Delete album"
-    confirmText="Delete"
-    onConfirm={handleRemoveAlbum}
-    onClose={() => (viewMode = ViewMode.VIEW)}
-  >
-    <svelte:fragment slot="prompt">
-      <p>Are you sure you want to delete the album <b>{album.albumName}</b>?</p>
-      <p>If this album is shared, other users will not be able to access it anymore.</p>
-    </svelte:fragment>
-  </ConfirmDialogue>
-{/if}
-
 {#if viewMode === ViewMode.OPTIONS && $user}
  <AlbumOptions
    {album}
@@ -1,6 +1,6 @@
 <script lang="ts">
  import { goto } from '$app/navigation';
-  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
+
  import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
  import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
  import {
@@ -15,12 +15,11 @@
  import { getAllSharedLinks, removeSharedLink, type SharedLinkResponseDto } from '@immich/sdk';
  import { mdiArrowLeft } from '@mdi/js';
  import { onMount } from 'svelte';
+  import { dialogController } from '$lib/components/shared-components/dialog/dialog';

  let sharedLinks: SharedLinkResponseDto[] = [];
  let editSharedLink: SharedLinkResponseDto | null = null;

-  let deleteLinkId: string | null = null;
-
  const refresh = async () => {
    sharedLinks = await getAllSharedLinks();
  };
@@ -29,15 +28,21 @@
    await refresh();
  });

-  const handleDeleteLink = async () => {
-    if (!deleteLinkId) {
+  const handleDeleteLink = async (id: string) => {
+    const isConfirmed = await dialogController.show({
+      id: 'delete-shared-link',
+      title: 'Delete shared link',
+      prompt: 'Are you sure you want to delete this shared link?',
+      confirmText: 'Delete',
+    });
+
+    if (!isConfirmed) {
      return;
    }

    try {
-      await removeSharedLink({ id: deleteLinkId });
+      await removeSharedLink({ id });
      notificationController.show({ message: 'Deleted shared link', type: NotificationType.Info });
-      deleteLinkId = null;
      await refresh();
    } catch (error) {
      handleError(error, 'Unable to delete shared link');
@@ -73,7 +78,7 @@
      {#each sharedLinks as link (link.id)}
        <SharedLinkCard
          {link}
-          on:delete={() => (deleteLinkId = link.id)}
+          on:delete={() => handleDeleteLink(link.id)}
          on:edit={() => (editSharedLink = link)}
          on:copy={() => handleCopyLink(link.key)}
        />
@@ -85,14 +90,3 @@
 {#if editSharedLink}
  <CreateSharedLinkModal editingLink={editSharedLink} onClose={handleEditDone} />
 {/if}
-
-{#if deleteLinkId}
-  <ConfirmDialogue
-    id="delete-shared-link-modal"
-    title="Delete shared link"
-    prompt="Are you sure you want to delete this shared link?"
-    confirmText="Delete"
-    onConfirm={() => handleDeleteLink()}
-    onClose={() => (deleteLinkId = null)}
-  />
-{/if}
@@ -9,7 +9,6 @@
  import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
  import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
  import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
-  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
  import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
  import {
    NotificationType,
@@ -24,6 +23,7 @@
  import { mdiDeleteOutline, mdiHistory } from '@mdi/js';
  import type { PageData } from './$types';
  import { handlePromiseError } from '$lib/utils';
+  import { dialogController } from '$lib/components/shared-components/dialog/dialog';

  export let data: PageData;

@@ -32,10 +32,18 @@
  const assetStore = new AssetStore({ isTrashed: true });
  const assetInteractionStore = createAssetInteractionStore();
  const { isMultiSelectState, selectedAssets } = assetInteractionStore;
-  let isShowEmptyConfirmation = false;

  const handleEmptyTrash = async () => {
-    isShowEmptyConfirmation = false;
+    const isConfirmed = await dialogController.show({
+      id: 'empty-trash',
+      prompt:
+        'Are you sure you want to empty the trash? This will remove all the assets in trash permanently from Immich.\nYou cannot undo this action!',
+    });
+
+    if (!isConfirmed) {
+      return;
+    }
+
    try {
      await emptyTrash();

@@ -87,7 +95,7 @@
          Restore all
        </div>
      </LinkButton>
-      <LinkButton on:click={() => (isShowEmptyConfirmation = true)}>
+      <LinkButton on:click={() => handleEmptyTrash()}>
        <div class="flex place-items-center gap-2 text-sm">
          <Icon path={mdiDeleteOutline} size="18" />
          Empty trash
@@ -103,18 +111,3 @@
    </AssetGrid>
  </UserPageLayout>
 {/if}
-
-{#if isShowEmptyConfirmation}
-  <ConfirmDialogue
-    id="empty-trash-modal"
-    title="Empty trash"
-    confirmText="Empty"
-    onConfirm={handleEmptyTrash}
-    onClose={() => (isShowEmptyConfirmation = false)}
-  >
-    <svelte:fragment slot="prompt">
-      <p>Are you sure you want to empty the trash? This will remove all the assets in trash permanently from Immich.</p>
-      <p><b>You cannot undo this action!</b></p>
-    </svelte:fragment>
-  </ConfirmDialogue>
-{/if}
@@ -18,6 +18,7 @@
  import { onDestroy, onMount } from 'svelte';
  import '../app.css';
  import { isAssetViewerRoute, isSharedLinkRoute } from '$lib/utils/navigation';
+  import DialogWrapper from '$lib/components/shared-components/dialog/dialog-wrapper.svelte';

  let showNavigationLoadingBar = false;

@@ -121,6 +122,7 @@
 <DownloadPanel />
 <UploadPanel />
 <NotificationList />
+<DialogWrapper />

 {#if $user?.isAdmin}
  <VersionAnnouncementBox />
@@ -6,7 +6,6 @@
  import LibraryScanSettingsForm from '$lib/components/forms/library-scan-settings-form.svelte';
  import LibraryUserPickerForm from '$lib/components/forms/library-user-picker-form.svelte';
  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
  import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
  import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
  import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
@@ -37,6 +36,7 @@
  import LinkButton from '../../../lib/components/elements/buttons/link-button.svelte';
  import type { PageData } from './$types';
  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { dialogController } from '$lib/components/shared-components/dialog/dialog';

  export let data: PageData;

@@ -282,29 +282,39 @@
  const onDeleteLibraryClicked = async () => {
    closeAll();

-    if (selectedLibrary && confirm(`Are you sure you want to delete ${selectedLibrary.name} library?`) == true) {
-      await refreshStats(selectedLibraryIndex);
-      if (totalCount[selectedLibraryIndex] > 0) {
-        deleteAssetCount = totalCount[selectedLibraryIndex];
-        confirmDeleteLibrary = selectedLibrary;
-      } else {
-        deletedLibrary = selectedLibrary;
-        await handleDelete();
+    if (!selectedLibrary) {
+      return;
+    }
+
+    const isConfirmedLibrary = await dialogController.show({
+      id: 'delete-library',
+      prompt: `Are you sure you want to delete ${selectedLibrary.name} library?`,
+    });
+
+    if (!isConfirmedLibrary) {
+      return;
+    }
+
+    await refreshStats(selectedLibraryIndex);
+    if (totalCount[selectedLibraryIndex] > 0) {
+      deleteAssetCount = totalCount[selectedLibraryIndex];
+
+      const isConfirmedLibraryAssetCount = await dialogController.show({
+        id: 'delete-library-assets',
+        prompt: `Are you sure you want to delete this library? This will delete all ${deleteAssetCount} contained assets from Immich and cannot be undone. Files will remain on disk.`,
+      });
+
+      if (!isConfirmedLibraryAssetCount) {
+        return;
      }
+      await handleDelete();
+    } else {
+      deletedLibrary = selectedLibrary;
+      await handleDelete();
    }
  };
 </script>

-{#if confirmDeleteLibrary}
-  <ConfirmDialogue
-    id="warning-modal"
-    title="Warning!"
-    prompt="Are you sure you want to delete this library? This will delete all {deleteAssetCount} contained assets from Immich and cannot be undone. Files will remain on disk."
-    onConfirm={handleDelete}
-    onClose={() => (confirmDeleteLibrary = null)}
-  />
-{/if}
-
 {#if toCreateLibrary}
  <LibraryUserPickerForm
    on:submit={({ detail }) => handleCreate(detail.ownerId)}
@@ -1,5 +1,6 @@
 <script lang="ts">
  import { page } from '$app/stores';
+  import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
  import DeleteConfirmDialog from '$lib/components/admin-page/delete-confirm-dialogue.svelte';
  import RestoreDialogue from '$lib/components/admin-page/restore-dialogue.svelte';
  import Button from '$lib/components/elements/buttons/button.svelte';
@@ -9,7 +10,6 @@
  import CreateUserForm from '$lib/components/forms/create-user-form.svelte';
  import EditUserForm from '$lib/components/forms/edit-user-form.svelte';
  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
  import {
    NotificationType,
    notificationController,
@@ -153,12 +153,12 @@
      {/if}

      {#if shouldShowPasswordResetSuccess}
-        <ConfirmDialogue
+        <ConfirmDialog
          id="password-reset-success-modal"
          title="Password reset success"
          confirmText="Done"
          onConfirm={() => (shouldShowPasswordResetSuccess = false)}
-          onClose={() => (shouldShowPasswordResetSuccess = false)}
+          onCancel={() => (shouldShowPasswordResetSuccess = false)}
          hideCancelButton={true}
          confirmColor="green"
        >
@@ -185,7 +185,7 @@
              </p>
            </div>
          </svelte:fragment>
-        </ConfirmDialogue>
+        </ConfirmDialog>
      {/if}

      <table class="my-5 w-full text-left">