fix(web): Handle duplicate library settings gracefully (#6950)

* don't add duplicate import paths * improve library import paths form * same for exclusion patterns * remove newline
immich-app · Feb 9, 2024 · b67fddf · b67fddf
1 parent 90a7f16
commit b67fddf
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 23 deletions.
diff --git a/web/src/lib/components/forms/library-exclusion-pattern-form.svelte b/web/src/lib/components/forms/library-exclusion-pattern-form.svelte
@@ -4,11 +4,22 @@
   import FullScreenModal from '../shared-components/full-screen-modal.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import { mdiFolderRemove } from '@mdi/js';
+  import { onMount } from 'svelte';
 
   export let exclusionPattern: string;
-  export let canDelete = false;
+  export let exclusionPatterns: string[] = [];
+  export let isEditing = false;
   export let submitText = 'Submit';
 
+  onMount(() => {
+    if (isEditing) {
+      exclusionPatterns = exclusionPatterns.filter((pattern) => pattern !== exclusionPattern);
+    }
+  });
+
+  $: isDuplicate = exclusionPattern !== null && exclusionPatterns.includes(exclusionPattern);
+  $: canSubmit = exclusionPattern !== '' && exclusionPattern !== null && !exclusionPatterns.includes(exclusionPattern);
+
   const dispatch = createEventDispatcher<{
     cancel: void;
     submit: { excludePattern: string };
@@ -49,11 +60,16 @@
       </div>
       <div class="mt-8 flex w-full gap-4 px-4">
         <Button color="gray" fullwidth on:click={() => handleCancel()}>Cancel</Button>
-        {#if canDelete}
+        {#if isEditing}
           <Button color="red" fullwidth on:click={() => dispatch('delete')}>Delete</Button>
         {/if}
 
-        <Button type="submit" fullwidth>{submitText}</Button>
+        <Button type="submit" disabled={!canSubmit} fullwidth>{submitText}</Button>
+      </div>
+      <div class="mt-8 flex w-full gap-4 px-4">
+        {#if isDuplicate}
+          <p class="text-red-500 text-sm">This exclusion pattern already exists.</p>
+        {/if}
       </div>
     </form>
   </div>

diff --git a/web/src/lib/components/forms/library-import-path-form.svelte b/web/src/lib/components/forms/library-import-path-form.svelte
@@ -4,16 +4,27 @@
   import Button from '../elements/buttons/button.svelte';
   import FullScreenModal from '../shared-components/full-screen-modal.svelte';
   import { mdiFolderSync } from '@mdi/js';
+  import { onMount } from 'svelte';
 
-  export let importPath: string;
+  export let importPath: string | null;
+  export let importPaths: string[] = [];
   export let title = 'Import path';
   export let cancelText = 'Cancel';
   export let submitText = 'Save';
-  export let canDelete = false;
+  export let isEditing = false;
+
+  onMount(() => {
+    if (isEditing) {
+      importPaths = importPaths.filter((path) => path !== importPath);
+    }
+  });
+
+  $: isDuplicate = importPath !== null && importPaths.includes(importPath);
+  $: canSubmit = importPath !== '' && importPath !== null && !importPaths.includes(importPath);
 
   const dispatch = createEventDispatcher<{
     cancel: void;
-    submit: { importPath: string };
+    submit: { importPath: string | null };
     delete: void;
   }>();
   const handleCancel = () => dispatch('cancel');
@@ -47,11 +58,17 @@
 
       <div class="mt-8 flex w-full gap-4 px-4">
         <Button color="gray" fullwidth on:click={() => handleCancel()}>{cancelText}</Button>
-        {#if canDelete}
+        {#if isEditing}
           <Button color="red" fullwidth on:click={() => dispatch('delete')}>Delete</Button>
         {/if}
 
-        <Button type="submit" fullwidth>{submitText}</Button>
+        <Button type="submit" disabled={!canSubmit} fullwidth>{submitText}</Button>
+      </div>
+
+      <div class="mt-8 flex w-full gap-4 px-4">
+        {#if isDuplicate}
+          <p class="text-red-500 text-sm">This import path already exists.</p>
+        {/if}
       </div>
     </form>
   </div>

diff --git a/web/src/lib/components/forms/library-import-paths-form.svelte b/web/src/lib/components/forms/library-import-paths-form.svelte
@@ -13,7 +13,7 @@
   let addImportPath = false;
   let editImportPath: number | null = null;
 
-  let importPathToAdd: string;
+  let importPathToAdd: string | null = null;
   let editedImportPath: string;
 
   let importPaths: string[] = [];
@@ -39,7 +39,7 @@
   };
 
   const handleAddImportPath = async () => {
-    if (!addImportPath) {
+    if (!addImportPath || !importPathToAdd) {
       return;
     }
 
@@ -48,12 +48,16 @@
     }
 
     try {
-      library.importPaths.push(importPathToAdd);
-      importPaths = library.importPaths;
+      // Check so that import path isn't duplicated
+      if (!library.importPaths.includes(importPathToAdd)) {
+        library.importPaths.push(importPathToAdd);
+        importPaths = library.importPaths;
+      }
     } catch (error) {
-      handleError(error, 'Unable to remove import path');
+      handleError(error, 'Unable to add import path');
     } finally {
       addImportPath = false;
+      importPathToAdd = null;
     }
   };
 
@@ -67,8 +71,13 @@
     }
 
     try {
-      library.importPaths[editImportPath] = editedImportPath;
-      importPaths = library.importPaths;
+      // Check so that import path isn't duplicated
+
+      if (!library.importPaths.includes(editedImportPath)) {
+        // Update import path
+        library.importPaths[editImportPath] = editedImportPath;
+        importPaths = library.importPaths;
+      }
     } catch (error) {
       editImportPath = null;
       handleError(error, 'Unable to edit import path');
@@ -103,9 +112,11 @@
     title="Add Import Path"
     submitText="Add"
     bind:importPath={importPathToAdd}
+    {importPaths}
     on:submit={handleAddImportPath}
     on:cancel={() => {
       addImportPath = false;
+      importPathToAdd = null;
     }}
   />
 {/if}
@@ -114,8 +125,9 @@
   <LibraryImportPathForm
     title="Edit Import Path"
     submitText="Save"
-    canDelete={true}
+    isEditing={true}
     bind:importPath={editedImportPath}
+    {importPaths}
     on:submit={handleEditImportPath}
     on:delete={handleDeleteImportPath}
     on:cancel={() => {
@@ -157,7 +169,11 @@
             : 'bg-immich-bg dark:bg-immich-dark-gray/50'
         }`}
       >
-        <td class="w-4/5 text-ellipsis px-4 text-sm" />
+        <td class="w-4/5 text-ellipsis px-4 text-sm">
+          {#if importPaths.length === 0}
+            No paths added
+          {/if}</td
+        >
         <td class="w-1/5 text-ellipsis px-4 text-sm"
           ><Button
             type="button"

diff --git a/web/src/lib/components/forms/library-scan-settings-form.svelte b/web/src/lib/components/forms/library-scan-settings-form.svelte
@@ -48,13 +48,16 @@
     }
 
     try {
-      library.exclusionPatterns.push(exclusionPatternToAdd);
+      // Check so that exclusion pattern isn't duplicated
+      if (!library.exclusionPatterns.includes(exclusionPatternToAdd)) {
+        library.exclusionPatterns.push(exclusionPatternToAdd);
+        exclusionPatterns = library.exclusionPatterns;
+      }
+    } catch (error) {
+      handleError(error, 'Unable to add exclusion pattern');
+    } finally {
       exclusionPatternToAdd = '';
-
-      exclusionPatterns = library.exclusionPatterns;
       addExclusionPattern = false;
-    } catch (error) {
-      handleError(error, 'Unable to add exclude pattern');
     }
   };
 
@@ -102,6 +105,7 @@
   <LibraryExclusionPatternForm
     submitText="Add"
     bind:exclusionPattern={exclusionPatternToAdd}
+    {exclusionPatterns}
     on:submit={handleAddExclusionPattern}
     on:cancel={() => {
       addExclusionPattern = false;
@@ -112,8 +116,9 @@
 {#if editExclusionPattern != undefined}
   <LibraryExclusionPatternForm
     submitText="Save"
-    canDelete={true}
+    isEditing={true}
     bind:exclusionPattern={editedExclusionPattern}
+    {exclusionPatterns}
     on:submit={handleEditExclusionPattern}
     on:delete={handleDeleteExclusionPattern}
     on:cancel={() => {