feat(server,web): libraries (#3124)

* feat: libraries Co-authored-by: Jason Rasmussen <jrasm91@gmail.com> Co-authored-by: Alex <alex.tran1502@gmail.com>
2025-11-07 17:27:20 +00:00 · 2023-09-20 13:16:33 +02:00 · 2023-09-20 13:16:33 +02:00 · acdc66413c
commit acdc66413c
parent 816db700e1
143 changed files with 10941 additions and 386 deletions
--- a/web/src/lib/components/forms/library-scan-settings-form.svelte
+++ b/web/src/lib/components/forms/library-scan-settings-form.svelte
@ -0,0 +1,175 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import Button from '../elements/buttons/button.svelte';
+  import { LibraryType, type LibraryResponseDto } from '@api';
+  import { handleError } from '../../utils/handle-error';
+  import { onMount } from 'svelte';
+  import PencilOutline from 'svelte-material-icons/PencilOutline.svelte';
+  import LibraryExclusionPatternForm from './library-exclusion-pattern-form.svelte';
+
+  export let library: Partial<LibraryResponseDto>;
+
+  let addExclusionPattern = false;
+  let editExclusionPattern: number | null = null;
+
+  let exclusionPatternToAdd: string;
+  let editedExclusionPattern: string;
+
+  let exclusionPatterns: string[] = [];
+
+  onMount(() => {
+    if (library.exclusionPatterns) {
+      exclusionPatterns = library.exclusionPatterns;
+    } else {
+      library.exclusionPatterns = [];
+    }
+  });
+
+  const dispatch = createEventDispatcher();
+  const handleCancel = () => {
+    dispatch('cancel');
+  };
+
+  const handleSubmit = () => {
+    dispatch('submit', { ...library, libraryType: LibraryType.External });
+  };
+
+  const handleAddExclusionPattern = async () => {
+    if (!addExclusionPattern) {
+      return;
+    }
+
+    if (!library.exclusionPatterns) {
+      library.exclusionPatterns = [];
+    }
+
+    try {
+      library.exclusionPatterns.push(exclusionPatternToAdd);
+      exclusionPatternToAdd = '';
+
+      exclusionPatterns = library.exclusionPatterns;
+      addExclusionPattern = false;
+    } catch (error) {
+      handleError(error, 'Unable to add exclude pattern');
+    }
+  };
+
+  const handleEditExclusionPattern = async () => {
+    if (editExclusionPattern === null) {
+      return;
+    }
+
+    if (!library.exclusionPatterns) {
+      library.exclusionPatterns = [];
+    }
+
+    try {
+      library.exclusionPatterns[editExclusionPattern] = editedExclusionPattern;
+      exclusionPatterns = library.exclusionPatterns;
+    } catch (error) {
+      handleError(error, 'Unable to edit exclude pattern');
+    } finally {
+      editExclusionPattern = null;
+    }
+  };
+
+  const handleDeleteExclusionPattern = async () => {
+    if (editExclusionPattern === null) {
+      return;
+    }
+
+    try {
+      if (!library.exclusionPatterns) {
+        library.exclusionPatterns = [];
+      }
+
+      const pathToDelete = library.exclusionPatterns[editExclusionPattern];
+      library.exclusionPatterns = library.exclusionPatterns.filter((path) => path != pathToDelete);
+      exclusionPatterns = library.exclusionPatterns;
+    } catch (error) {
+      handleError(error, 'Unable to delete exclude pattern');
+    } finally {
+      editExclusionPattern = null;
+    }
+  };
+</script>
+
+{#if addExclusionPattern}
+  <LibraryExclusionPatternForm
+    submitText="Add"
+    bind:exclusionPattern={exclusionPatternToAdd}
+    on:submit={handleAddExclusionPattern}
+    on:cancel={() => {
+      addExclusionPattern = false;
+    }}
+  />
+{/if}
+
+{#if editExclusionPattern != null}
+  <LibraryExclusionPatternForm
+    submitText="Save"
+    canDelete={true}
+    bind:exclusionPattern={editedExclusionPattern}
+    on:submit={handleEditExclusionPattern}
+    on:delete={handleDeleteExclusionPattern}
+    on:cancel={() => {
+      editExclusionPattern = null;
+    }}
+  />
+{/if}
+
+<form on:submit|preventDefault={() => handleSubmit()} autocomplete="off" class="m-4 flex flex-col gap-4">
+  <table class="w-full text-left">
+    <tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
+      {#each exclusionPatterns as exclusionPattern, listIndex}
+        <tr
+          class={`flex h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg ${
+            listIndex % 2 == 0
+              ? 'bg-immich-gray dark:bg-immich-dark-gray/75'
+              : 'bg-immich-bg dark:bg-immich-dark-gray/50'
+          }`}
+        >
+          <td class="w-3/4 text-ellipsis px-4 text-sm">{exclusionPattern}</td>
+          <td class="w-1/4 text-ellipsis px-4 text-sm">
+            <button
+              type="button"
+              on:click={() => {
+                editExclusionPattern = listIndex;
+                editedExclusionPattern = exclusionPattern;
+              }}
+              class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
+            >
+              <PencilOutline size="16" />
+            </button>
+          </td>
+        </tr>
+      {/each}
+      <tr
+        class={`flex h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg ${
+          exclusionPatterns.length % 2 == 0
+            ? 'bg-immich-gray dark:bg-immich-dark-gray/75'
+            : 'bg-immich-bg dark:bg-immich-dark-gray/50'
+        }`}
+      >
+        <td class="w-3/4 text-ellipsis px-4 text-sm">
+          {#if exclusionPatterns.length === 0}
+            No pattern added
+          {/if}
+        </td>
+        <td class="w-1/4 text-ellipsis px-4 text-sm"
+          ><Button
+            size="sm"
+            on:click={() => {
+              addExclusionPattern = true;
+            }}>Add Exclusion Pattern</Button
+          ></td
+        ></tr
+      >
+    </tbody>
+  </table>
+
+  <div class="flex w-full justify-end gap-4">
+    <Button size="sm" color="gray" on:click={() => handleCancel()}>Cancel</Button>
+    <Button size="sm" type="submit">Save</Button>
+  </div>
+</form>