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
@@ -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">