44 lines
1.3 KiB
Svelte
44 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import AlbumCover from '$lib/components/album-page/AlbumCover.svelte';
|
|
import { updateAlbumInfoMutation } from '$lib/queries/album.query';
|
|
import { executeMutation } from '$lib/queries/client';
|
|
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 () => {
|
|
await executeMutation(
|
|
updateAlbumInfoMutation,
|
|
[{ id: album.id, updateAlbumDto: { albumName, description: description || null } }],
|
|
{ onSuccess: onClose },
|
|
);
|
|
};
|
|
</script>
|
|
|
|
<FormModal icon={mdiRenameOutline} title={$t('edit_album')} size="medium" {onClose} {onSubmit}>
|
|
<div class="m-4 flex items-center gap-8">
|
|
<AlbumCover {album} class="hidden size-50 shadow-lg sm:flex" />
|
|
|
|
<div class="flex grow 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>
|