mirror of
https://github.com/immich-app/immich
synced 2025-06-09 22:05:33 +00:00
chore: Refactor external library modals (#18655)
This commit is contained in:
Arno
GitHub
parent
d00c872dc1
commit
9c18fef9b2
@ -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>
|
||||
|
||||
@ -11,9 +11,7 @@
|
||||
cancelText?: string;
|
||||
submitText?: string;
|
||||
isEditing?: boolean;
|
||||
onCancel: () => void;
|
||||
onSubmit: (importPath: string | null) => void;
|
||||
onDelete?: () => void;
|
||||
onClose: (data?: { action: 'delete' } | { action: 'submit'; importPath: string | null }) => void;
|
||||
}
|
||||
|
||||
let {
|
||||
@ -23,9 +21,7 @@
|
||||
cancelText = $t('cancel'),
|
||||
submitText = $t('save'),
|
||||
isEditing = false,
|
||||
onCancel,
|
||||
onSubmit,
|
||||
onDelete,
|
||||
onClose,
|
||||
}: Props = $props();
|
||||
|
||||
onMount(() => {
|
||||
@ -40,12 +36,12 @@
|
||||
const onsubmit = (event: Event) => {
|
||||
event.preventDefault();
|
||||
if (canSubmit) {
|
||||
onSubmit(importPath);
|
||||
onClose({ action: 'submit', importPath });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<Modal {title} icon={mdiFolderSync} onClose={onCancel} size="small">
|
||||
<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>
|
||||
@ -65,13 +61,15 @@
|
||||
|
||||
<ModalFooter>
|
||||
<div class="flex gap-2 w-full">
|
||||
<Button shape="round" color="secondary" fullWidth onclick={onCancel}>{cancelText}</Button>
|
||||
<Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{cancelText}</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="library-import-path-form"
|
||||
>{submitText}</Button
|
||||
>
|
||||
<Button shape="round" type="submit" disabled={!canSubmit} fullWidth form="library-import-path-form">
|
||||
{submitText}
|
||||
</Button>
|
||||
</div>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
@ -6,21 +6,20 @@
|
||||
|
||||
interface Props {
|
||||
library: Partial<LibraryResponseDto>;
|
||||
onCancel: () => void;
|
||||
onSubmit: (library: Partial<LibraryResponseDto>) => void;
|
||||
onClose: (library?: Partial<LibraryResponseDto>) => void;
|
||||
}
|
||||
|
||||
let { library, onCancel, onSubmit }: Props = $props();
|
||||
let { library, onClose }: Props = $props();
|
||||
|
||||
let newName = $state(library.name);
|
||||
|
||||
const onsubmit = (event: Event) => {
|
||||
event.preventDefault();
|
||||
onSubmit({ ...library, name: newName });
|
||||
onClose({ ...library, name: newName });
|
||||
};
|
||||
</script>
|
||||
|
||||
<Modal icon={mdiRenameOutline} title={$t('rename')} onClose={onCancel} size="small">
|
||||
<Modal icon={mdiRenameOutline} title={$t('rename')} {onClose} size="small">
|
||||
<ModalBody>
|
||||
<form {onsubmit} autocomplete="off" id="rename-library-form">
|
||||
<Field label={$t('name')}>
|
||||
@ -31,7 +30,7 @@
|
||||
|
||||
<ModalFooter>
|
||||
<div class="flex gap-2 w-full">
|
||||
<Button shape="round" fullWidth color="secondary" onclick={onCancel}>{$t('cancel')}</Button>
|
||||
<Button shape="round" fullWidth color="secondary" onclick={() => onClose()}>{$t('cancel')}</Button>
|
||||
<Button shape="round" fullWidth type="submit" form="rename-library-form">{$t('save')}</Button>
|
||||
</div>
|
||||
</ModalFooter>
|
||||
@ -8,11 +8,10 @@
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
interface Props {
|
||||
onCancel: () => void;
|
||||
onSubmit: (ownerId: string) => void;
|
||||
onClose: (ownerId?: string) => void;
|
||||
}
|
||||
|
||||
let { onCancel, onSubmit }: Props = $props();
|
||||
let { onClose }: Props = $props();
|
||||
|
||||
let ownerId: string = $state($user.id);
|
||||
|
||||
@ -25,11 +24,11 @@
|
||||
|
||||
const onsubmit = (event: Event) => {
|
||||
event.preventDefault();
|
||||
onSubmit(ownerId);
|
||||
onClose(ownerId);
|
||||
};
|
||||
</script>
|
||||
|
||||
<Modal title={$t('select_library_owner')} icon={mdiFolderSync} onClose={onCancel} size="small">
|
||||
<Modal title={$t('select_library_owner')} icon={mdiFolderSync} {onClose} 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>
|
||||
@ -40,7 +39,7 @@
|
||||
|
||||
<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>
|
||||
<Button shape="round" type="submit" fullWidth form="select-library-owner-form">{$t('create')}</Button>
|
||||
</div>
|
||||
</ModalFooter>
|
||||
@ -1,9 +1,6 @@
|
||||
<script lang="ts">
|
||||
import LibraryImportPathForm from '$lib/components/forms/library-import-path-form.svelte';
|
||||
import LibraryImportPathsForm from '$lib/components/forms/library-import-paths-form.svelte';
|
||||
import LibraryRenameForm from '$lib/components/forms/library-rename-form.svelte';
|
||||
import LibraryScanSettingsForm from '$lib/components/forms/library-scan-settings-form.svelte';
|
||||
import LibraryUserPickerForm from '$lib/components/forms/library-user-picker-form.svelte';
|
||||
import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
|
||||
import ButtonContextMenu from '$lib/components/shared-components/context-menu/button-context-menu.svelte';
|
||||
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
|
||||
@ -14,6 +11,9 @@
|
||||
NotificationType,
|
||||
} from '$lib/components/shared-components/notification/notification';
|
||||
import { modalManager } from '$lib/managers/modal-manager.svelte';
|
||||
import LibraryImportPathModal from '$lib/modals/LibraryImportPathModal.svelte';
|
||||
import LibraryRenameModal from '$lib/modals/LibraryRenameModal.svelte';
|
||||
import LibraryUserPickerModal from '$lib/modals/LibraryUserPickerModal.svelte';
|
||||
import { locale } from '$lib/stores/preferences.store';
|
||||
import { ByteUnit, getBytesWithUnit } from '$lib/utils/byte-units';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
@ -56,12 +56,7 @@
|
||||
let diskUsageUnit: ByteUnit[] = $state([]);
|
||||
let editImportPaths: number | undefined = $state();
|
||||
let editScanSettings: number | undefined = $state();
|
||||
let renameLibrary: number | undefined = $state();
|
||||
let updateLibraryIndex: number | null;
|
||||
let dropdownOpen: boolean[] = [];
|
||||
let toCreateLibrary = $state(false);
|
||||
let toAddImportPath = $state(false);
|
||||
let importPathToAdd: string | null = $state(null);
|
||||
|
||||
onMount(async () => {
|
||||
await readLibraryList();
|
||||
@ -70,9 +65,6 @@
|
||||
const closeAll = () => {
|
||||
editImportPaths = undefined;
|
||||
editScanSettings = undefined;
|
||||
renameLibrary = undefined;
|
||||
updateLibraryIndex = null;
|
||||
toAddImportPath = false;
|
||||
|
||||
for (let index = 0; index < dropdownOpen.length; index++) {
|
||||
dropdownOpen[index] = false;
|
||||
@ -109,41 +101,55 @@
|
||||
} catch (error) {
|
||||
handleError(error, $t('errors.unable_to_create_library'));
|
||||
} finally {
|
||||
toCreateLibrary = false;
|
||||
await readLibraryList();
|
||||
}
|
||||
|
||||
if (createdLibrary) {
|
||||
// Open the import paths form for the newly created library
|
||||
updateLibraryIndex = libraries.findIndex((library) => library.id === createdLibrary.id);
|
||||
toAddImportPath = true;
|
||||
const createdLibraryIndex = libraries.findIndex((library) => library.id === createdLibrary.id);
|
||||
const result = await modalManager.show(LibraryImportPathModal, {
|
||||
title: $t('add_import_path'),
|
||||
submitText: $t('add'),
|
||||
importPath: null,
|
||||
});
|
||||
|
||||
if (!result) {
|
||||
if (createdLibraryIndex !== null) {
|
||||
onEditImportPathClicked(createdLibraryIndex);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
switch (result.action) {
|
||||
case 'submit': {
|
||||
handleAddImportPath(result.importPath, createdLibraryIndex);
|
||||
break;
|
||||
}
|
||||
case 'delete': {
|
||||
await handleDelete(libraries[createdLibraryIndex], createdLibraryIndex);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddImportPath = () => {
|
||||
if ((updateLibraryIndex !== 0 && !updateLibraryIndex) || !importPathToAdd) {
|
||||
const handleAddImportPath = (newImportPath: string | null, libraryIndex: number) => {
|
||||
if ((libraryIndex !== 0 && !libraryIndex) || !newImportPath) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
onEditImportPathClicked(updateLibraryIndex);
|
||||
onEditImportPathClicked(libraryIndex);
|
||||
|
||||
libraries[updateLibraryIndex].importPaths.push(importPathToAdd);
|
||||
libraries[libraryIndex].importPaths.push(newImportPath);
|
||||
} catch (error) {
|
||||
handleError(error, $t('errors.unable_to_add_import_path'));
|
||||
} finally {
|
||||
importPathToAdd = null;
|
||||
toAddImportPath = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpdate = async (library: Partial<LibraryResponseDto>) => {
|
||||
if (updateLibraryIndex === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
const handleUpdate = async (library: Partial<LibraryResponseDto>, libraryIndex: number) => {
|
||||
try {
|
||||
const libraryId = libraries[updateLibraryIndex].id;
|
||||
const libraryId = libraries[libraryIndex].id;
|
||||
await updateLibrary({ id: libraryId, updateLibraryDto: library });
|
||||
closeAll();
|
||||
await readLibraryList();
|
||||
@ -177,16 +183,19 @@
|
||||
}
|
||||
};
|
||||
|
||||
const onRenameClicked = (index: number) => {
|
||||
const onRenameClicked = async (index: number) => {
|
||||
closeAll();
|
||||
renameLibrary = index;
|
||||
updateLibraryIndex = index;
|
||||
const result = await modalManager.show(LibraryRenameModal, {
|
||||
library: libraries[index],
|
||||
});
|
||||
if (result) {
|
||||
await handleUpdate(result, index);
|
||||
}
|
||||
};
|
||||
|
||||
const onEditImportPathClicked = (index: number) => {
|
||||
closeAll();
|
||||
editImportPaths = index;
|
||||
updateLibraryIndex = index;
|
||||
};
|
||||
|
||||
const onScanClicked = async (library: LibraryResponseDto) => {
|
||||
@ -197,10 +206,16 @@
|
||||
}
|
||||
};
|
||||
|
||||
const onCreateNewLibraryClicked = async () => {
|
||||
const result = await modalManager.show(LibraryUserPickerModal, {});
|
||||
if (result) {
|
||||
await handleCreate(result);
|
||||
}
|
||||
};
|
||||
|
||||
const onScanSettingClicked = (index: number) => {
|
||||
closeAll();
|
||||
editScanSettings = index;
|
||||
updateLibraryIndex = index;
|
||||
};
|
||||
|
||||
const handleDelete = async (library: LibraryResponseDto, index: number) => {
|
||||
@ -250,7 +265,7 @@
|
||||
{/if}
|
||||
<Button
|
||||
leadingIcon={mdiPlusBoxOutline}
|
||||
onclick={() => (toCreateLibrary = true)}
|
||||
onclick={onCreateNewLibraryClicked}
|
||||
size="small"
|
||||
variant="ghost"
|
||||
color="secondary"
|
||||
@ -338,7 +353,7 @@
|
||||
<div transition:slide={{ duration: 250 }}>
|
||||
<LibraryImportPathsForm
|
||||
{library}
|
||||
onSubmit={handleUpdate}
|
||||
onSubmit={(lib) => handleUpdate(lib, index)}
|
||||
onCancel={() => (editImportPaths = undefined)}
|
||||
/>
|
||||
</div>
|
||||
@ -348,7 +363,7 @@
|
||||
<div transition:slide={{ duration: 250 }} class="mb-4 ms-4 me-4">
|
||||
<LibraryScanSettingsForm
|
||||
{library}
|
||||
onSubmit={handleUpdate}
|
||||
onSubmit={(lib) => handleUpdate(lib, index)}
|
||||
onCancel={() => (editScanSettings = undefined)}
|
||||
/>
|
||||
</div>
|
||||
@ -359,35 +374,8 @@
|
||||
|
||||
<!-- Empty message -->
|
||||
{:else}
|
||||
<EmptyPlaceholder text={$t('no_libraries_message')} onClick={() => (toCreateLibrary = true)} />
|
||||
<EmptyPlaceholder text={$t('no_libraries_message')} onClick={onCreateNewLibraryClicked} />
|
||||
{/if}
|
||||
</div>
|
||||
</section>
|
||||
</AdminPageLayout>
|
||||
|
||||
{#if renameLibrary !== undefined}
|
||||
<LibraryRenameForm
|
||||
library={libraries[renameLibrary]}
|
||||
onSubmit={handleUpdate}
|
||||
onCancel={() => (renameLibrary = undefined)}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if toCreateLibrary}
|
||||
<LibraryUserPickerForm onSubmit={handleCreate} onCancel={() => (toCreateLibrary = false)} />
|
||||
{/if}
|
||||
|
||||
{#if toAddImportPath}
|
||||
<LibraryImportPathForm
|
||||
title={$t('add_import_path')}
|
||||
submitText={$t('add')}
|
||||
bind:importPath={importPathToAdd}
|
||||
onSubmit={handleAddImportPath}
|
||||
onCancel={() => {
|
||||
toAddImportPath = false;
|
||||
if (updateLibraryIndex) {
|
||||
onEditImportPathClicked(updateLibraryIndex);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user