immich/web/src/lib/modals/AlbumEditModal.svelte
2025-12-22 14:15:23 -05:00

42 lines
1.2 KiB
Svelte

<script lang="ts">
import AlbumCover from '$lib/components/album-page/album-cover.svelte';
import { handleUpdateAlbum } from '$lib/services/album.service';
import { type AlbumResponseDto } from '@immich/sdk';
import { Field, FormModal, Input, Textarea } from '@immich/ui';
import { mdiRenameOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
type Props = {
album: AlbumResponseDto;
onClose: () => void;
};
let { album, onClose }: Props = $props();
let albumName = $state(album.albumName);
let description = $state(album.description);
const onSubmit = async () => {
const success = await handleUpdateAlbum(album, { albumName, description });
if (success) {
onClose();
}
};
</script>
<FormModal icon={mdiRenameOutline} title={$t('edit_album')} size="medium" {onClose} {onSubmit}>
<div class="flex items-center gap-8 m-4">
<AlbumCover {album} class="h-50 w-50 shadow-lg hidden sm:flex" />
<div class="grow flex flex-col gap-4">
<Field label={$t('name')}>
<Input bind:value={albumName} />
</Field>
<Field label={$t('description')}>
<Textarea bind:value={description} />
</Field>
</div>
</div>
</FormModal>