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

* wrapper * no more callback * refactor: wip * refactor: wip * refactor: wip * pr feedback * fix * pr feedback
immich-app · May 28, 2024 · bce916e · bce916e
1 parent f020d29
commit bce916e
Show file tree

Hide file tree

Showing 26 changed files with 281 additions and 317 deletions.
diff --git a/web/src/lib/components/admin-page/delete-confirm-dialogue.svelte b/web/src/lib/components/admin-page/delete-confirm-dialogue.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
+  import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { deleteUserAdmin, type UserResponseDto } from '@immich/sdk';
   import { serverConfig } from '$lib/stores/server-config.store';
@@ -42,12 +42,12 @@
   };
 </script>
 
-<ConfirmDialogue
+<ConfirmDialog
   id="delete-user-confirmation-modal"
   title="Delete user"
   confirmText={forceDelete ? 'Permanently Delete' : 'Delete'}
   onConfirm={handleDeleteUser}
-  onClose={() => dispatch('cancel')}
+  onCancel={() => dispatch('cancel')}
   disabled={deleteButtonDisabled}
 >
   <svelte:fragment slot="prompt">
@@ -96,4 +96,4 @@
       {/if}
     </div>
   </svelte:fragment>
-</ConfirmDialogue>
+</ConfirmDialog>
diff --git a/web/src/lib/components/admin-page/jobs/jobs-panel.svelte b/web/src/lib/components/admin-page/jobs/jobs-panel.svelte
@@ -20,9 +20,9 @@
     mdiVideo,
   } from '@mdi/js';
   import type { ComponentType } from 'svelte';
-  import ConfirmDialogue from '../../shared-components/confirm-dialogue.svelte';
   import JobTile from './job-tile.svelte';
   import StorageMigrationDescription from './storage-migration-description.svelte';
+  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
 
   export let jobs: AllJobStatusResponseDto;
 
@@ -38,23 +38,22 @@
     handleCommand?: (jobId: JobName, jobCommand: JobCommandDto) => Promise<void>;
   }
 
-  let confirmJob: JobName | null = null;
-
   const handleConfirmCommand = async (jobId: JobName, dto: JobCommandDto) => {
     if (dto.force) {
-      confirmJob = jobId;
-      return;
-    }
+      const isConfirmed = await dialogController.show({
+        id: 'confirm-reprocess-all-faces',
+        prompt: 'Are you sure you want to reprocess all faces? This will also clear named people.',
+      });
 
-    await handleCommand(jobId, dto);
-  };
+      if (isConfirmed) {
+        await handleCommand(jobId, { command: JobCommand.Start, force: true });
+        return;
+      }
 
-  const onConfirm = async () => {
-    if (!confirmJob) {
       return;
     }
-    await handleCommand(confirmJob, { command: JobCommand.Start, force: true });
-    confirmJob = null;
+
+    await handleCommand(jobId, dto);
   };
 
   $: jobDetails = <Partial<Record<JobName, JobDetails>>>{
@@ -152,15 +151,6 @@
   }
 </script>
 
-{#if confirmJob}
-  <ConfirmDialogue
-    id="reprocess-faces-modal"
-    prompt="Are you sure you want to reprocess all faces? This will also clear named people."
-    {onConfirm}
-    onClose={() => (confirmJob = null)}
-  />
-{/if}
-
 <div class="flex flex-col gap-7">
   {#each jobList as [jobName, { title, subtitle, disabled, allText, missingText, allowForceCommand, icon, component, handleCommand: handleCommandOverride }]}
     {@const { jobCounts, queueStatus } = jobs[jobName]}

diff --git a/web/src/lib/components/admin-page/restore-dialogue.svelte b/web/src/lib/components/admin-page/restore-dialogue.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
+  import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { restoreUserAdmin, type UserResponseDto } from '@immich/sdk';
   import { createEventDispatcher } from 'svelte';
@@ -27,15 +27,15 @@
   };
 </script>
 
-<ConfirmDialogue
+<ConfirmDialog
   id="restore-user-modal"
   title="Restore user"
   confirmText="Continue"
   confirmColor="green"
   onConfirm={handleRestoreUser}
-  onClose={() => dispatch('cancel')}
+  onCancel={() => dispatch('cancel')}
 >
   <svelte:fragment slot="prompt">
     <p><b>{user.name}</b>'s account will be restored.</p>
   </svelte:fragment>
-</ConfirmDialogue>
+</ConfirmDialog>
diff --git a/web/src/lib/components/admin-page/settings/auth/auth-settings.svelte b/web/src/lib/components/admin-page/settings/auth/auth-settings.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
+  import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
   import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';
   import SettingButtonsRow from '$lib/components/shared-components/settings/setting-buttons-row.svelte';
   import SettingInputField, {
@@ -42,10 +42,10 @@
 </script>
 
 {#if isConfirmOpen}
-  <ConfirmDialogue
+  <ConfirmDialog
     id="disable-login-modal"
     title="Disable login"
-    onClose={() => (isConfirmOpen = false)}
+    onCancel={() => (isConfirmOpen = false)}
     onConfirm={() => handleSave(true)}
   >
     <svelte:fragment slot="prompt">
@@ -64,7 +64,7 @@
         </p>
       </div>
     </svelte:fragment>
-  </ConfirmDialogue>
+  </ConfirmDialog>
 {/if}
 
 <div>

diff --git a/web/src/lib/components/album-page/albums-list.svelte b/web/src/lib/components/album-page/albums-list.svelte
@@ -5,7 +5,6 @@
   import { mdiDeleteOutline, mdiShareVariantOutline, mdiFolderDownloadOutline, mdiRenameOutline } from '@mdi/js';
   import Icon from '$lib/components/elements/icon.svelte';
   import EditAlbumForm from '$lib/components/forms/edit-album-form.svelte';
-  import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
   import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
   import {
     NotificationType,
@@ -33,6 +32,7 @@
   } from '$lib/stores/preferences.store';
   import { goto } from '$app/navigation';
   import { AppRoute } from '$lib/constants';
+  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
 
   export let ownedAlbums: AlbumResponseDto[] = [];
   export let sharedAlbums: AlbumResponseDto[] = [];
@@ -275,9 +275,10 @@
     sharedAlbums = sharedAlbums.filter(({ id }) => id !== albumToDelete.id);
   };
 
-  const setAlbumToDelete = () => {
+  const setAlbumToDelete = async () => {
     albumToDelete = contextMenuTargetAlbum ?? null;
     closeAlbumContextMenu();
+    await deleteSelectedAlbum();
   };
 
   const handleEdit = (album: AlbumResponseDto) => {
@@ -289,6 +290,16 @@
     if (!albumToDelete) {
       return;
     }
+
+    const isConfirmed = await dialogController.show({
+      id: 'delete-album',
+      prompt: `Are you sure you want to delete the album ${albumToDelete.albumName}?\nIf this album is shared, other users will not be able to access it anymore.`,
+    });
+
+    if (!isConfirmed) {
+      return;
+    }
+
     try {
       await handleDeleteAlbum(albumToDelete);
     } catch {
@@ -456,20 +467,4 @@
       />
     {/if}
   {/if}
-
-  <!-- Delete Modal -->
-  {#if albumToDelete}
-    <ConfirmDialogue
-      id="delete-album-dialogue-modal"
-      title="Delete album"
-      confirmText="Delete"
-      onConfirm={deleteSelectedAlbum}
-      onClose={() => (albumToDelete = null)}
-    >
-      <svelte:fragment slot="prompt">
-        <p>Are you sure you want to delete the album <b>{albumToDelete.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}
diff --git a/web/src/lib/components/album-page/share-info-modal.svelte b/web/src/lib/components/album-page/share-info-modal.svelte
@@ -12,7 +12,7 @@
   import { getContextMenuPosition } from '../../utils/context-menu';
   import { handleError } from '../../utils/handle-error';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
-  import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
+  import ConfirmDialog from '../shared-components/dialog/confirm-dialog.svelte';
   import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
   import MenuOption from '../shared-components/context-menu/menu-option.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
@@ -155,23 +155,23 @@
 {/if}
 
 {#if selectedRemoveUser && selectedRemoveUser?.id === currentUser?.id}
-  <ConfirmDialogue
+  <ConfirmDialog
     id="leave-album-modal"
     title="Leave album?"
     prompt="Are you sure you want to leave {album.albumName}?"
     confirmText="Leave"
     onConfirm={handleRemoveUser}
-    onClose={() => (selectedRemoveUser = null)}
+    onCancel={() => (selectedRemoveUser = null)}
   />
 {/if}
 
 {#if selectedRemoveUser && selectedRemoveUser?.id !== currentUser?.id}
-  <ConfirmDialogue
+  <ConfirmDialog
     id="remove-user-modal"
     title="Remove user?"
     prompt="Are you sure you want to remove {selectedRemoveUser.name}?"
     confirmText="Remove"
     onConfirm={handleRemoveUser}
-    onClose={() => (selectedRemoveUser = null)}
+    onCancel={() => (selectedRemoveUser = null)}
   />
 {/if}
diff --git a/web/src/lib/components/faces-page/merge-face-selector.svelte b/web/src/lib/components/faces-page/merge-face-selector.svelte
@@ -12,17 +12,16 @@
   import { fly } from 'svelte/transition';
   import Button from '../elements/buttons/button.svelte';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
-  import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
   import ControlAppBar from '../shared-components/control-app-bar.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
   import FaceThumbnail from './face-thumbnail.svelte';
   import PeopleList from './people-list.svelte';
+  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
 
   export let person: PersonResponseDto;
   let people: PersonResponseDto[] = [];
   let selectedPeople: PersonResponseDto[] = [];
   let screenHeight: number;
-  let isShowConfirmation = false;
 
   let dispatch = createEventDispatcher<{
     back: void;
@@ -65,6 +64,15 @@
   };
 
   const handleMerge = async () => {
+    const isConfirm = await dialogController.show({
+      id: 'merge-people',
+      prompt: 'Do you want to merge these people?',
+    });
+
+    if (!isConfirm) {
+      return;
+    }
+
     try {
       let results = await mergePerson({
         id: person.id,
@@ -79,8 +87,6 @@
       dispatch('merge', mergedPerson);
     } catch (error) {
       handleError(error, 'Cannot merge people');
-    } finally {
-      isShowConfirmation = false;
     }
   };
 </script>
@@ -101,13 +107,7 @@
       <div />
     </svelte:fragment>
     <svelte:fragment slot="trailing">
-      <Button
-        size={'sm'}
-        disabled={!hasSelection}
-        on:click={() => {
-          isShowConfirmation = true;
-        }}
-      >
+      <Button size={'sm'} disabled={!hasSelection} on:click={handleMerge}>
         <Icon path={mdiMerge} size={18} />
         <span class="ml-2"> Merge</span></Button
       >
@@ -150,19 +150,5 @@
 
       <PeopleList {people} {peopleToNotShow} {screenHeight} on:select={({ detail }) => onSelect(detail)} />
     </section>
-
-    {#if isShowConfirmation}
-      <ConfirmDialogue
-        id="merge-people-modal"
-        title="Merge people"
-        confirmText="Merge"
-        onConfirm={handleMerge}
-        onClose={() => (isShowConfirmation = false)}
-      >
-        <svelte:fragment slot="prompt">
-          <p>Are you sure you want merge these people ?</p></svelte:fragment
-        >
-      </ConfirmDialogue>
-    {/if}
   </section>
 </section>