chore: Refactor external library modals (#18655)

web/src/lib/components/forms/library-import-paths-form.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
+  import { modalManager } from '$lib/managers/modal-manager.svelte';
+  import LibraryImportPathModal from '$lib/modals/LibraryImportPathModal.svelte';
   import type { ValidateLibraryImportPathResponseDto } from '@immich/sdk';
   import { validate, type LibraryResponseDto } from '@immich/sdk';
   import { Button } from '@immich/ui';
@@ -9,7 +11,6 @@
   import { t } from 'svelte-i18n';
   import { handleError } from '../../utils/handle-error';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
-  import LibraryImportPathForm from './library-import-path-form.svelte';
 
   interface Props {
     library: LibraryResponseDto;
@@ -19,12 +20,6 @@
 
   let { library = $bindable(), onCancel, onSubmit }: Props = $props();
 
-  let addImportPath = $state(false);
-  let editImportPath: number | null = $state(null);
-
-  let importPathToAdd: string | null = $state(null);
-  let editedImportPath: string = $state('');
-
   let validatedPaths: ValidateLibraryImportPathResponseDto[] = $state([]);
 
   let importPaths = $derived(validatedPaths.map((validatedPath) => validatedPath.importPath));
@@ -71,8 +66,8 @@
     }
   };
 
-  const handleAddImportPath = async () => {
-    if (!addImportPath || !importPathToAdd) {
+  const handleAddImportPath = async (importPathToAdd: string | null) => {
+    if (!importPathToAdd) {
       return;
     }
 
@@ -88,14 +83,11 @@
       }
     } catch (error) {
       handleError(error, $t('errors.unable_to_add_import_path'));
-    } finally {
-      addImportPath = false;
-      importPathToAdd = null;
     }
   };
 
-  const handleEditImportPath = async () => {
-    if (editImportPath === null) {
+  const handleEditImportPath = async (editedImportPath: string | null, pathIndexToEdit: number) => {
+    if (editedImportPath === null) {
       return;
     }
 
@@ -105,22 +97,18 @@
 
     try {
       // Check so that import path isn't duplicated
-
       if (!library.importPaths.includes(editedImportPath)) {
         // Update import path
-        library.importPaths[editImportPath] = editedImportPath;
+        library.importPaths[pathIndexToEdit] = editedImportPath;
         await revalidate(false);
       }
     } catch (error) {
-      editImportPath = null;
       handleError(error, $t('errors.unable_to_edit_import_path'));
-    } finally {
-      editImportPath = null;
     }
   };
 
-  const handleDeleteImportPath = async () => {
-    if (editImportPath === null) {
+  const handleDeleteImportPath = async (pathIndexToDelete?: number) => {
+    if (pathIndexToDelete === undefined) {
       return;
     }
 
@@ -129,13 +117,41 @@
         library.importPaths = [];
       }
 
-      const pathToDelete = library.importPaths[editImportPath];
+      const pathToDelete = library.importPaths[pathIndexToDelete];
       library.importPaths = library.importPaths.filter((path) => path != pathToDelete);
       await handleValidation();
     } catch (error) {
       handleError(error, $t('errors.unable_to_delete_import_path'));
-    } finally {
-      editImportPath = null;
+    }
+  };
+
+  const onEditImportPath = async (pathIndexToEdit?: number) => {
+    const result = await modalManager.show(LibraryImportPathModal, {
+      title: pathIndexToEdit === undefined ? $t('add_import_path') : $t('edit_import_path'),
+      submitText: pathIndexToEdit === undefined ? $t('add') : $t('save'),
+      isEditing: pathIndexToEdit !== undefined,
+      importPath: pathIndexToEdit === undefined ? null : library.importPaths[pathIndexToEdit],
+      importPaths: library.importPaths,
+    });
+
+    if (!result) {
+      return;
+    }
+
+    switch (result.action) {
+      case 'submit': {
+        // eslint-disable-next-line unicorn/prefer-ternary
+        if (pathIndexToEdit === undefined) {
+          await handleAddImportPath(result.importPath);
+        } else {
+          await handleEditImportPath(result.importPath, pathIndexToEdit);
+        }
+        break;
+      }
+      case 'delete': {
+        await handleDeleteImportPath(pathIndexToEdit);
+        break;
+      }
     }
   };
 
@@ -145,33 +161,6 @@
   };
 </script>
 
-{#if addImportPath}
-  <LibraryImportPathForm
-    title={$t('add_import_path')}
-    submitText={$t('add')}
-    bind:importPath={importPathToAdd}
-    {importPaths}
-    onSubmit={handleAddImportPath}
-    onCancel={() => {
-      addImportPath = false;
-      importPathToAdd = null;
-    }}
-  />
-{/if}
-
-{#if editImportPath != undefined}
-  <LibraryImportPathForm
-    title={$t('edit_import_path')}
-    submitText={$t('save')}
-    isEditing={true}
-    bind:importPath={editedImportPath}
-    {importPaths}
-    onSubmit={handleEditImportPath}
-    onDelete={handleDeleteImportPath}
-    onCancel={() => (editImportPath = null)}
-  />
-{/if}
-
 <form {onsubmit} autocomplete="off" class="m-4 flex flex-col gap-4">
   <table class="text-start">
     <tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
@@ -204,10 +193,7 @@
               icon={mdiPencilOutline}
               title={$t('edit_import_path')}
               size="16"
-              onclick={() => {
-                editImportPath = listIndex;
-                editedImportPath = validatedPath.importPath;
-              }}
+              onclick={() => onEditImportPath(listIndex)}
             />
           </td>
         </tr>
@@ -221,7 +207,7 @@
           {/if}</td
         >
         <td class="w-1/5 text-ellipsis px-4 text-sm">
-          <Button shape="round" size="small" onclick={() => (addImportPath = true)}>{$t('add_path')}</Button>
+          <Button shape="round" size="small" onclick={() => onEditImportPath()}>{$t('add_path')}</Button>
         </td>
       </tr>
     </tbody>

web/src/lib/modals/LibraryImportPathModal.svelte

@@ -11,9 +11,7 @@
     cancelText?: string;
     submitText?: string;
     isEditing?: boolean;
-    onCancel: () => void;
-    onSubmit: (importPath: string | null) => void;
-    onDelete?: () => void;
+    onClose: (data?: { action: 'delete' } | { action: 'submit'; importPath: string | null }) => void;
   }
 
   let {
@@ -23,9 +21,7 @@
     cancelText = $t('cancel'),
     submitText = $t('save'),
     isEditing = false,
-    onCancel,
-    onSubmit,
-    onDelete,
+    onClose,
   }: Props = $props();
 
   onMount(() => {
@@ -40,12 +36,12 @@
   const onsubmit = (event: Event) => {
     event.preventDefault();
     if (canSubmit) {
-      onSubmit(importPath);
+      onClose({ action: 'submit', importPath });
     }
   };
 </script>
 
-<Modal {title} icon={mdiFolderSync} onClose={onCancel} size="small">
+<Modal {title} icon={mdiFolderSync} {onClose} size="small">
   <ModalBody>
     <form {onsubmit} autocomplete="off" id="library-import-path-form">
       <p class="py-5 text-sm">{$t('admin.library_import_path_description')}</p>
@@ -65,13 +61,15 @@
 
   <ModalFooter>
     <div class="flex gap-2 w-full">
-      <Button shape="round" color="secondary" fullWidth onclick={onCancel}>{cancelText}</Button>
+      <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{cancelText}</Button>
       {#if isEditing}
-        <Button shape="round" color="danger" fullWidth onclick={onDelete}>{$t('delete')}</Button>
+        <Button shape="round" color="danger" fullWidth onclick={() => onClose({ action: 'delete' })}>
+          {$t('delete')}
+        </Button>
       {/if}
-      <Button shape="round" type="submit" disabled={!canSubmit} fullWidth form="library-import-path-form"
-        >{submitText}</Button
-      >
+      <Button shape="round" type="submit" disabled={!canSubmit} fullWidth form="library-import-path-form">
+        {submitText}
+      </Button>
     </div>
   </ModalFooter>
 </Modal>

web/src/lib/modals/LibraryRenameModal.svelte

@@ -6,21 +6,20 @@
 
   interface Props {
     library: Partial<LibraryResponseDto>;
-    onCancel: () => void;
-    onSubmit: (library: Partial<LibraryResponseDto>) => void;
+    onClose: (library?: Partial<LibraryResponseDto>) => void;
   }
 
-  let { library, onCancel, onSubmit }: Props = $props();
+  let { library, onClose }: Props = $props();
 
   let newName = $state(library.name);
 
   const onsubmit = (event: Event) => {
     event.preventDefault();
-    onSubmit({ ...library, name: newName });
+    onClose({ ...library, name: newName });
   };
 </script>
 
-<Modal icon={mdiRenameOutline} title={$t('rename')} onClose={onCancel} size="small">
+<Modal icon={mdiRenameOutline} title={$t('rename')} {onClose} size="small">
   <ModalBody>
     <form {onsubmit} autocomplete="off" id="rename-library-form">
       <Field label={$t('name')}>
@@ -31,7 +30,7 @@
 
   <ModalFooter>
     <div class="flex gap-2 w-full">
-      <Button shape="round" fullWidth color="secondary" onclick={onCancel}>{$t('cancel')}</Button>
+      <Button shape="round" fullWidth color="secondary" onclick={() => onClose()}>{$t('cancel')}</Button>
       <Button shape="round" fullWidth type="submit" form="rename-library-form">{$t('save')}</Button>
     </div>
   </ModalFooter>

web/src/lib/modals/LibraryUserPickerModal.svelte

@@ -8,11 +8,10 @@
   import { t } from 'svelte-i18n';
 
   interface Props {
-    onCancel: () => void;
-    onSubmit: (ownerId: string) => void;
+    onClose: (ownerId?: string) => void;
   }
 
-  let { onCancel, onSubmit }: Props = $props();
+  let { onClose }: Props = $props();
 
   let ownerId: string = $state($user.id);
 
@@ -25,11 +24,11 @@
 
   const onsubmit = (event: Event) => {
     event.preventDefault();
-    onSubmit(ownerId);
+    onClose(ownerId);
   };
 </script>
 
-<Modal title={$t('select_library_owner')} icon={mdiFolderSync} onClose={onCancel} size="small">
+<Modal title={$t('select_library_owner')} icon={mdiFolderSync} {onClose} size="small">
   <ModalBody>
     <form {onsubmit} autocomplete="off" id="select-library-owner-form">
       <p class="p-5 text-sm">{$t('admin.note_cannot_be_changed_later')}</p>
@@ -40,7 +39,7 @@
 
   <ModalFooter>
     <div class="flex gap-2 w-full">
-      <Button shape="round" color="secondary" fullWidth onclick={onCancel}>{$t('cancel')}</Button>
+      <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
       <Button shape="round" type="submit" fullWidth form="select-library-owner-form">{$t('create')}</Button>
     </div>
   </ModalFooter>