refactor: library-exclusion-pattern-form modal (#18654)

Co-authored-by: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>

web/src/lib/components/forms/library-scan-settings-form.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
+  import { modalManager } from '$lib/managers/modal-manager.svelte';
+  import LibraryExclusionPatternModal from '$lib/modals/LibraryExclusionPatternModal.svelte';
   import { type LibraryResponseDto } from '@immich/sdk';
   import { Button } from '@immich/ui';
   import { mdiPencilOutline } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import { handleError } from '../../utils/handle-error';
-  import LibraryExclusionPatternForm from './library-exclusion-pattern-form.svelte';
 
   interface Props {
     library: Partial<LibraryResponseDto>;
@@ -16,12 +17,6 @@
 
   let { library = $bindable(), onCancel, onSubmit }: Props = $props();
 
-  let addExclusionPattern = $state(false);
-  let editExclusionPattern: number | null = $state(null);
-
-  let exclusionPatternToAdd: string = $state('');
-  let editedExclusionPattern: string = $state('');
-
   let exclusionPatterns: string[] = $state([]);
 
   onMount(() => {
@@ -32,11 +27,7 @@
     }
   });
 
-  const handleAddExclusionPattern = () => {
+  const handleAddExclusionPattern = (exclusionPatternToAdd: string) => {
-    if (!addExclusionPattern) {
-      return;
-    }
-
     if (!library.exclusionPatterns) {
       library.exclusionPatterns = [];
     }
@@ -49,33 +40,24 @@
       }
     } catch (error) {
       handleError(error, $t('errors.unable_to_add_exclusion_pattern'));
-    } finally {
-      exclusionPatternToAdd = '';
-      addExclusionPattern = false;
     }
   };
 
-  const handleEditExclusionPattern = () => {
+  const handleEditExclusionPattern = (editedExclusionPattern: string, patternIndex: number) => {
-    if (editExclusionPattern === null) {
-      return;
-    }
-
     if (!library.exclusionPatterns) {
       library.exclusionPatterns = [];
     }
 
     try {
-      library.exclusionPatterns[editExclusionPattern] = editedExclusionPattern;
+      library.exclusionPatterns[patternIndex] = editedExclusionPattern;
       exclusionPatterns = library.exclusionPatterns;
     } catch (error) {
       handleError(error, $t('errors.unable_to_edit_exclusion_pattern'));
-    } finally {
-      editExclusionPattern = null;
     }
   };
 
-  const handleDeleteExclusionPattern = () => {
+  const handleDeleteExclusionPattern = (patternIndexToDelete?: number) => {
-    if (editExclusionPattern === null) {
+    if (patternIndexToDelete === undefined) {
       return;
     }
 
@@ -84,13 +66,39 @@
         library.exclusionPatterns = [];
       }
 
-      const pathToDelete = library.exclusionPatterns[editExclusionPattern];
+      const patternToDelete = library.exclusionPatterns[patternIndexToDelete];
-      library.exclusionPatterns = library.exclusionPatterns.filter((path) => path != pathToDelete);
+      library.exclusionPatterns = library.exclusionPatterns.filter((path) => path != patternToDelete);
       exclusionPatterns = library.exclusionPatterns;
     } catch (error) {
       handleError(error, $t('errors.unable_to_delete_exclusion_pattern'));
-    } finally {
+    }
-      editExclusionPattern = null;
+  };
+
+  const onEditExclusionPattern = async (patternIndexToEdit?: number) => {
+    const result = await modalManager.show(LibraryExclusionPatternModal, {
+      submitText: patternIndexToEdit === undefined ? $t('add') : $t('save'),
+      isEditing: patternIndexToEdit !== undefined,
+      exclusionPattern: patternIndexToEdit === undefined ? '' : exclusionPatterns[patternIndexToEdit],
+      exclusionPatterns,
+    });
+
+    if (!result) {
+      return;
+    }
+
+    switch (result.action) {
+      case 'submit': {
+        if (patternIndexToEdit === undefined) {
+          handleAddExclusionPattern(result.exclusionPattern);
+        } else {
+          handleEditExclusionPattern(result.exclusionPattern, patternIndexToEdit);
+        }
+        break;
+      }
+      case 'delete': {
+        handleDeleteExclusionPattern(patternIndexToEdit);
+        break;
+      }
     }
   };
 
@@ -100,28 +108,6 @@
   };
 </script>
 
-{#if addExclusionPattern}
-  <LibraryExclusionPatternForm
-    submitText={$t('add')}
-    bind:exclusionPattern={exclusionPatternToAdd}
-    {exclusionPatterns}
-    onSubmit={handleAddExclusionPattern}
-    onCancel={() => (addExclusionPattern = false)}
-  />
-{/if}
-
-{#if editExclusionPattern != undefined}
-  <LibraryExclusionPatternForm
-    submitText={$t('save')}
-    isEditing={true}
-    bind:exclusionPattern={editedExclusionPattern}
-    {exclusionPatterns}
-    onSubmit={handleEditExclusionPattern}
-    onDelete={handleDeleteExclusionPattern}
-    onCancel={() => (editExclusionPattern = null)}
-  />
-{/if}
-
 <form {onsubmit} autocomplete="off" class="m-4 flex flex-col gap-4">
   <table class="w-full text-start">
     <tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
@@ -136,10 +122,7 @@
               icon={mdiPencilOutline}
               title={$t('edit_exclusion_pattern')}
               size="16"
-              onclick={() => {
+              onclick={() => onEditExclusionPattern(listIndex)}
-                editExclusionPattern = listIndex;
-                editedExclusionPattern = exclusionPattern;
-              }}
             />
           </td>
         </tr>
@@ -153,13 +136,9 @@
           {/if}
         </td>
         <td class="w-1/4 text-ellipsis px-4 text-sm flex justify-center">
-          <Button
+          <Button size="small" shape="round" onclick={() => onEditExclusionPattern()}>
-            size="small"
+            {$t('add_exclusion_pattern')}
-            shape="round"
+          </Button>
-            onclick={() => {
-              addExclusionPattern = true;
-            }}>{$t('add_exclusion_pattern')}</Button
-          >
         </td>
       </tr>
     </tbody>

web/src/lib/modals/LibraryExclusionPatternModal.svelte

@@ -9,9 +9,7 @@
     exclusionPatterns?: string[];
     isEditing?: boolean;
     submitText?: string;
-    onCancel: () => void;
+    onClose: (data?: { action: 'delete' } | { action: 'submit'; exclusionPattern: string }) => void;
-    onSubmit: (exclusionPattern: string) => void;
-    onDelete?: () => void;
   }
 
   let {
@@ -19,9 +17,7 @@
     exclusionPatterns = $bindable([]),
     isEditing = false,
     submitText = $t('submit'),
-    onCancel,
+    onClose,
-    onSubmit,
-    onDelete,
   }: Props = $props();
 
   onMount(() => {
@@ -36,12 +32,12 @@
   const onsubmit = (event: Event) => {
     event.preventDefault();
     if (canSubmit) {
-      onSubmit(exclusionPattern);
+      onClose({ action: 'submit', exclusionPattern });
     }
   };
 </script>
 
-<Modal size="small" title={$t('add_exclusion_pattern')} icon={mdiFolderRemove} onClose={onCancel}>
+<Modal size="small" title={$t('add_exclusion_pattern')} icon={mdiFolderRemove} {onClose}>
   <ModalBody>
     <form {onsubmit} autocomplete="off" id="add-exclusion-pattern-form">
       <p class="py-5 text-sm">
@@ -68,13 +64,15 @@
   </ModalBody>
   <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>
       {#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="add-exclusion-pattern-form"
+      <Button shape="round" type="submit" disabled={!canSubmit} fullWidth form="add-exclusion-pattern-form">
-        >{submitText}</Button
+        {submitText}
-      >
+      </Button>
     </div>
   </ModalFooter>
 </Modal>