chore: Refactor external library modals (#18655)

2025-05-31 15:30:08 +02:00
parent d00c872dc1
commit 9c18fef9b2
5 changed files with 114 additions and 144 deletions
@@ -0,0 +1,75 @@
+<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;
+    onClose: (data?: { action: 'delete' } | { action: 'submit'; importPath: string | null }) => void;
+  }
+
+  let {
+    importPath = $bindable(),
+    importPaths = $bindable([]),
+    title = $t('import_path'),
+    cancelText = $t('cancel'),
+    submitText = $t('save'),
+    isEditing = false,
+    onClose,
+  }: 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) {
+      onClose({ action: 'submit', importPath });
+    }
+  };
+</script>
+
+<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>
+
+      <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={() => onClose()}>{cancelText}</Button>
+      {#if isEditing}
+        <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>
+    </div>
+  </ModalFooter>
+</Modal>