mirror of
https://github.com/immich-app/immich.git
synced 2025-12-19 01:11:07 +03:00
feat: library details page (#23908)
* feat: library details page * chore: clean up --------- Co-authored-by: Jason Rasmussen <jason@rasm.me>
This commit is contained in:
Daniel Dietzler
@@ -1,207 +0,0 @@
|
||||
<script lang="ts">
|
||||
import LibraryImportPathModal from '$lib/modals/LibraryImportPathModal.svelte';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import type { ValidateLibraryImportPathResponseDto } from '@immich/sdk';
|
||||
import { validate, type LibraryResponseDto } from '@immich/sdk';
|
||||
import { Button, Icon, IconButton, modalManager, toastManager } from '@immich/ui';
|
||||
import { mdiAlertOutline, mdiCheckCircleOutline, mdiPencilOutline, mdiRefresh } from '@mdi/js';
|
||||
import { onMount } from 'svelte';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
interface Props {
|
||||
library: LibraryResponseDto;
|
||||
onCancel: () => void;
|
||||
onSubmit: (library: LibraryResponseDto) => void;
|
||||
}
|
||||
|
||||
let { library = $bindable(), onCancel, onSubmit }: Props = $props();
|
||||
|
||||
let validatedPaths: ValidateLibraryImportPathResponseDto[] = $state([]);
|
||||
|
||||
let importPaths = $derived(validatedPaths.map((validatedPath) => validatedPath.importPath));
|
||||
|
||||
onMount(async () => {
|
||||
if (library.importPaths) {
|
||||
await handleValidation();
|
||||
} else {
|
||||
library.importPaths = [];
|
||||
}
|
||||
});
|
||||
|
||||
const handleValidation = async () => {
|
||||
if (library.importPaths) {
|
||||
const validation = await validate({
|
||||
id: library.id,
|
||||
validateLibraryDto: { importPaths: library.importPaths },
|
||||
});
|
||||
|
||||
validatedPaths = validation.importPaths ?? [];
|
||||
}
|
||||
};
|
||||
|
||||
const revalidate = async (notifyIfSuccessful = true) => {
|
||||
await handleValidation();
|
||||
let failedPaths = 0;
|
||||
for (const validatedPath of validatedPaths) {
|
||||
if (!validatedPath.isValid) {
|
||||
failedPaths++;
|
||||
}
|
||||
}
|
||||
if (failedPaths === 0) {
|
||||
if (notifyIfSuccessful) {
|
||||
toastManager.success($t('admin.paths_validated_successfully'));
|
||||
}
|
||||
} else {
|
||||
toastManager.warning($t('errors.paths_validation_failed', { values: { paths: failedPaths } }));
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddImportPath = async (importPathToAdd: string | null) => {
|
||||
if (!importPathToAdd) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!library.importPaths) {
|
||||
library.importPaths = [];
|
||||
}
|
||||
|
||||
try {
|
||||
// Check so that import path isn't duplicated
|
||||
if (!library.importPaths.includes(importPathToAdd)) {
|
||||
library.importPaths.push(importPathToAdd);
|
||||
await revalidate(false);
|
||||
}
|
||||
} catch (error) {
|
||||
handleError(error, $t('errors.unable_to_add_import_path'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditImportPath = async (editedImportPath: string | null, pathIndexToEdit: number) => {
|
||||
if (editedImportPath === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!library.importPaths) {
|
||||
library.importPaths = [];
|
||||
}
|
||||
|
||||
try {
|
||||
// Check so that import path isn't duplicated
|
||||
if (!library.importPaths.includes(editedImportPath)) {
|
||||
// Update import path
|
||||
library.importPaths[pathIndexToEdit] = editedImportPath;
|
||||
await revalidate(false);
|
||||
}
|
||||
} catch (error) {
|
||||
handleError(error, $t('errors.unable_to_edit_import_path'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteImportPath = async (pathIndexToDelete?: number) => {
|
||||
if (pathIndexToDelete === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
if (!library.importPaths) {
|
||||
library.importPaths = [];
|
||||
}
|
||||
|
||||
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'));
|
||||
}
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const onsubmit = (event: Event) => {
|
||||
event.preventDefault();
|
||||
onSubmit({ ...library });
|
||||
};
|
||||
</script>
|
||||
|
||||
<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">
|
||||
{#each validatedPaths as validatedPath, listIndex (validatedPath.importPath)}
|
||||
<tr
|
||||
class="flex h-20 w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
|
||||
>
|
||||
<td class="w-1/8 text-ellipsis ps-8 text-sm">
|
||||
{#if validatedPath.isValid}
|
||||
<Icon icon={mdiCheckCircleOutline} size="24" title={validatedPath.message} class="text-success" />
|
||||
{:else}
|
||||
<Icon icon={mdiAlertOutline} size="24" title={validatedPath.message} class="text-warning" />
|
||||
{/if}
|
||||
</td>
|
||||
|
||||
<td class="w-4/5 text-ellipsis px-4 text-sm">{validatedPath.importPath}</td>
|
||||
<td class="w-1/5 text-ellipsis flex justify-center">
|
||||
<IconButton
|
||||
shape="round"
|
||||
color="primary"
|
||||
icon={mdiPencilOutline}
|
||||
aria-label={$t('edit_import_path')}
|
||||
onclick={() => onEditImportPath(listIndex)}
|
||||
size="small"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
<tr
|
||||
class="flex h-20 w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
|
||||
>
|
||||
<td class="w-4/5 text-ellipsis px-4 text-sm">
|
||||
{#if importPaths.length === 0}
|
||||
{$t('admin.no_paths_added')}
|
||||
{/if}</td
|
||||
>
|
||||
<td class="w-1/5 text-ellipsis px-4 text-sm">
|
||||
<Button shape="round" size="small" onclick={() => onEditImportPath()}>{$t('add_path')}</Button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="flex justify-between w-full">
|
||||
<div class="justify-end gap-2">
|
||||
<Button shape="round" leadingIcon={mdiRefresh} size="small" color="secondary" onclick={() => revalidate()}
|
||||
>{$t('validate')}</Button
|
||||
>
|
||||
</div>
|
||||
<div class="flex justify-end gap-2">
|
||||
<Button shape="round" size="small" color="secondary" onclick={onCancel}>{$t('cancel')}</Button>
|
||||
<Button shape="round" size="small" type="submit">{$t('save')}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@@ -1,151 +0,0 @@
|
||||
<script lang="ts">
|
||||
import LibraryExclusionPatternModal from '$lib/modals/LibraryExclusionPatternModal.svelte';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { type LibraryResponseDto } from '@immich/sdk';
|
||||
import { Button, IconButton, modalManager } from '@immich/ui';
|
||||
import { mdiPencilOutline } from '@mdi/js';
|
||||
import { onMount } from 'svelte';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
interface Props {
|
||||
library: Partial<LibraryResponseDto>;
|
||||
onCancel: () => void;
|
||||
onSubmit: (library: Partial<LibraryResponseDto>) => void;
|
||||
}
|
||||
|
||||
let { library = $bindable(), onCancel, onSubmit }: Props = $props();
|
||||
|
||||
let exclusionPatterns: string[] = $state([]);
|
||||
|
||||
onMount(() => {
|
||||
if (library.exclusionPatterns) {
|
||||
exclusionPatterns = library.exclusionPatterns;
|
||||
} else {
|
||||
library.exclusionPatterns = [];
|
||||
}
|
||||
});
|
||||
|
||||
const handleAddExclusionPattern = (exclusionPatternToAdd: string) => {
|
||||
if (!library.exclusionPatterns) {
|
||||
library.exclusionPatterns = [];
|
||||
}
|
||||
|
||||
try {
|
||||
// Check so that exclusion pattern isn't duplicated
|
||||
if (!library.exclusionPatterns.includes(exclusionPatternToAdd)) {
|
||||
library.exclusionPatterns.push(exclusionPatternToAdd);
|
||||
exclusionPatterns = library.exclusionPatterns;
|
||||
}
|
||||
} catch (error) {
|
||||
handleError(error, $t('errors.unable_to_add_exclusion_pattern'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditExclusionPattern = (editedExclusionPattern: string, patternIndex: number) => {
|
||||
if (!library.exclusionPatterns) {
|
||||
library.exclusionPatterns = [];
|
||||
}
|
||||
|
||||
try {
|
||||
library.exclusionPatterns[patternIndex] = editedExclusionPattern;
|
||||
exclusionPatterns = library.exclusionPatterns;
|
||||
} catch (error) {
|
||||
handleError(error, $t('errors.unable_to_edit_exclusion_pattern'));
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteExclusionPattern = (patternIndexToDelete?: number) => {
|
||||
if (patternIndexToDelete === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
if (!library.exclusionPatterns) {
|
||||
library.exclusionPatterns = [];
|
||||
}
|
||||
|
||||
const patternToDelete = library.exclusionPatterns[patternIndexToDelete];
|
||||
library.exclusionPatterns = library.exclusionPatterns.filter((path) => path != patternToDelete);
|
||||
exclusionPatterns = library.exclusionPatterns;
|
||||
} catch (error) {
|
||||
handleError(error, $t('errors.unable_to_delete_exclusion_pattern'));
|
||||
}
|
||||
};
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const onsubmit = (event: Event) => {
|
||||
event.preventDefault();
|
||||
onSubmit(library);
|
||||
};
|
||||
</script>
|
||||
|
||||
<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">
|
||||
{#each exclusionPatterns as exclusionPattern, listIndex (exclusionPattern)}
|
||||
<tr
|
||||
class="flex h-20 w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
|
||||
>
|
||||
<td class="w-3/4 text-ellipsis px-4 text-sm">{exclusionPattern}</td>
|
||||
<td class="w-1/4 text-ellipsis flex justify-center">
|
||||
<IconButton
|
||||
shape="round"
|
||||
color="primary"
|
||||
icon={mdiPencilOutline}
|
||||
title={$t('edit_exclusion_pattern')}
|
||||
onclick={() => onEditExclusionPattern(listIndex)}
|
||||
aria-label={$t('edit_exclusion_pattern')}
|
||||
size="small"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
<tr
|
||||
class="flex h-20 w-full place-items-center text-center dark:text-immich-dark-fg even:bg-subtle/20 odd:bg-subtle/80"
|
||||
>
|
||||
<td class="w-3/4 text-ellipsis px-4 text-sm">
|
||||
{#if exclusionPatterns.length === 0}
|
||||
{$t('admin.no_pattern_added')}
|
||||
{/if}
|
||||
</td>
|
||||
<td class="w-1/4 text-ellipsis px-4 text-sm flex justify-center">
|
||||
<Button size="small" shape="round" onclick={() => onEditExclusionPattern()}>
|
||||
{$t('add_exclusion_pattern')}
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="flex w-full justify-end gap-2">
|
||||
<Button size="small" shape="round" color="secondary" onclick={onCancel}>{$t('cancel')}</Button>
|
||||
<Button size="small" shape="round" type="submit">{$t('save')}</Button>
|
||||
</div>
|
||||
</form>
|
||||
@@ -7,9 +7,10 @@
|
||||
fullWidth?: boolean;
|
||||
src?: string;
|
||||
title?: string;
|
||||
class?: string;
|
||||
}
|
||||
|
||||
let { onClick = undefined, text, fullWidth = false, src = empty1Url, title }: Props = $props();
|
||||
let { onClick = undefined, text, fullWidth = false, src = empty1Url, title, class: className }: Props = $props();
|
||||
|
||||
let width = $derived(fullWidth ? 'w-full' : 'w-1/2');
|
||||
|
||||
@@ -22,7 +23,7 @@
|
||||
<svelte:element
|
||||
this={onClick ? 'button' : 'div'}
|
||||
onclick={onClick}
|
||||
class="{width} m-auto mt-10 flex flex-col place-content-center place-items-center rounded-3xl bg-gray-50 p-5 dark:bg-immich-dark-gray {hoverClasses}"
|
||||
class="{width} {className} flex flex-col place-content-center place-items-center rounded-3xl bg-gray-50 p-5 dark:bg-immich-dark-gray {hoverClasses}"
|
||||
>
|
||||
<img {src} alt="" width="500" draggable="false" />
|
||||
|
||||
|
||||
Reference in New Issue
Block a user