chore: Refactor external library modals (#18655)

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

@@ -1,77 +0,0 @@
-<script lang="ts">
-  import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
-  import { mdiFolderSync } from '@mdi/js';
-  import { onMount } from 'svelte';
-  import { t } from 'svelte-i18n';
-
-  interface Props {
-    importPath: string | null;
-    importPaths?: string[];
-    title?: string;
-    cancelText?: string;
-    submitText?: string;
-    isEditing?: boolean;
-    onCancel: () => void;
-    onSubmit: (importPath: string | null) => void;
-    onDelete?: () => void;
-  }
-
-  let {
-    importPath = $bindable(),
-    importPaths = $bindable([]),
-    title = $t('import_path'),
-    cancelText = $t('cancel'),
-    submitText = $t('save'),
-    isEditing = false,
-    onCancel,
-    onSubmit,
-    onDelete,
-  }: Props = $props();
-
-  onMount(() => {
-    if (isEditing) {
-      importPaths = importPaths.filter((path) => path !== importPath);
-    }
-  });
-
-  let isDuplicate = $derived(importPath !== null && importPaths.includes(importPath));
-  let canSubmit = $derived(importPath !== '' && importPath !== null && !importPaths.includes(importPath));
-
-  const onsubmit = (event: Event) => {
-    event.preventDefault();
-    if (canSubmit) {
-      onSubmit(importPath);
-    }
-  };
-</script>
-
-<Modal {title} icon={mdiFolderSync} onClose={onCancel} 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>
-
-      <div class="my-4 flex flex-col gap-2">
-        <label class="immich-form-label" for="path">{$t('path')}</label>
-        <input class="immich-form-input" id="path" name="path" type="text" bind:value={importPath} />
-      </div>
-
-      <div class="mt-8 flex w-full gap-4">
-        {#if isDuplicate}
-          <p class="text-red-500 text-sm">{$t('errors.import_path_already_exists')}</p>
-        {/if}
-      </div>
-    </form>
-  </ModalBody>
-
-  <ModalFooter>
-    <div class="flex gap-2 w-full">
-      <Button shape="round" color="secondary" fullWidth onclick={onCancel}>{cancelText}</Button>
-      {#if isEditing}
-        <Button shape="round" color="danger" fullWidth onclick={onDelete}>{$t('delete')}</Button>
-      {/if}
-      <Button shape="round" type="submit" disabled={!canSubmit} fullWidth form="library-import-path-form"
-        >{submitText}</Button
-      >
-    </div>
-  </ModalFooter>
-</Modal>

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/components/forms/library-rename-form.svelte

@@ -1,38 +0,0 @@
-<script lang="ts">
-  import type { LibraryResponseDto } from '@immich/sdk';
-  import { Button, Field, Input, Modal, ModalBody, ModalFooter } from '@immich/ui';
-  import { mdiRenameOutline } from '@mdi/js';
-  import { t } from 'svelte-i18n';
-
-  interface Props {
-    library: Partial<LibraryResponseDto>;
-    onCancel: () => void;
-    onSubmit: (library: Partial<LibraryResponseDto>) => void;
-  }
-
-  let { library, onCancel, onSubmit }: Props = $props();
-
-  let newName = $state(library.name);
-
-  const onsubmit = (event: Event) => {
-    event.preventDefault();
-    onSubmit({ ...library, name: newName });
-  };
-</script>
-
-<Modal icon={mdiRenameOutline} title={$t('rename')} onClose={onCancel} size="small">
-  <ModalBody>
-    <form {onsubmit} autocomplete="off" id="rename-library-form">
-      <Field label={$t('name')}>
-        <Input bind:value={newName} />
-      </Field>
-    </form>
-  </ModalBody>
-
-  <ModalFooter>
-    <div class="flex gap-2 w-full">
-      <Button shape="round" fullWidth color="secondary" onclick={onCancel}>{$t('cancel')}</Button>
-      <Button shape="round" fullWidth type="submit" form="rename-library-form">{$t('save')}</Button>
-    </div>
-  </ModalFooter>
-</Modal>

web/src/lib/components/forms/library-user-picker-form.svelte

@@ -1,47 +0,0 @@
-<script lang="ts">
-  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
-  import { user } from '$lib/stores/user.store';
-  import { searchUsersAdmin } from '@immich/sdk';
-  import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
-  import { mdiFolderSync } from '@mdi/js';
-  import { onMount } from 'svelte';
-  import { t } from 'svelte-i18n';
-
-  interface Props {
-    onCancel: () => void;
-    onSubmit: (ownerId: string) => void;
-  }
-
-  let { onCancel, onSubmit }: Props = $props();
-
-  let ownerId: string = $state($user.id);
-
-  let userOptions: { value: string; text: string }[] = $state([]);
-
-  onMount(async () => {
-    const users = await searchUsersAdmin({});
-    userOptions = users.map((user) => ({ value: user.id, text: user.name }));
-  });
-
-  const onsubmit = (event: Event) => {
-    event.preventDefault();
-    onSubmit(ownerId);
-  };
-</script>
-
-<Modal title={$t('select_library_owner')} icon={mdiFolderSync} onClose={onCancel} 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>
-
-      <SettingSelect bind:value={ownerId} options={userOptions} name="user" />
-    </form>
-  </ModalBody>
-
-  <ModalFooter>
-    <div class="flex gap-2 w-full">
-      <Button shape="round" color="secondary" fullWidth onclick={onCancel}>{$t('cancel')}</Button>
-      <Button shape="round" type="submit" fullWidth form="select-library-owner-form">{$t('create')}</Button>
-    </div>
-  </ModalFooter>
-</Modal>