|
|
|
|
@ -2,32 +2,28 @@
|
|
|
|
|
import AlbumCover from '$lib/components/album-page/album-cover.svelte';
|
|
|
|
|
import { handleError } from '$lib/utils/handle-error';
|
|
|
|
|
import { updateAlbumInfo, type AlbumResponseDto } from '@immich/sdk';
|
|
|
|
|
import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
|
|
|
|
|
import { Button, Field, HStack, Input, Modal, ModalBody, ModalFooter, Textarea } from '@immich/ui';
|
|
|
|
|
import { mdiRenameOutline } from '@mdi/js';
|
|
|
|
|
import { t } from 'svelte-i18n';
|
|
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
|
type Props = {
|
|
|
|
|
album: AlbumResponseDto;
|
|
|
|
|
onClose: (album?: AlbumResponseDto) => void;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
let { album = $bindable(), onClose }: Props = $props();
|
|
|
|
|
|
|
|
|
|
let albumName = $state(album.albumName);
|
|
|
|
|
let description = $state(album.description);
|
|
|
|
|
|
|
|
|
|
let isSubmitting = $state(false);
|
|
|
|
|
|
|
|
|
|
const handleUpdateAlbumInfo = async () => {
|
|
|
|
|
const handleSubmit = async (event: Event) => {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
|
|
|
|
|
isSubmitting = true;
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
await updateAlbumInfo({
|
|
|
|
|
id: album.id,
|
|
|
|
|
updateAlbumDto: {
|
|
|
|
|
albumName,
|
|
|
|
|
description,
|
|
|
|
|
},
|
|
|
|
|
});
|
|
|
|
|
await updateAlbumInfo({ id: album.id, updateAlbumDto: { albumName, description } });
|
|
|
|
|
album.albumName = albumName;
|
|
|
|
|
album.description = description;
|
|
|
|
|
onClose(album);
|
|
|
|
|
@ -37,31 +33,22 @@
|
|
|
|
|
isSubmitting = false;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const onsubmit = async (event: Event) => {
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
await handleUpdateAlbumInfo();
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<Modal icon={mdiRenameOutline} title={$t('edit_album')} size="medium" {onClose}>
|
|
|
|
|
<ModalBody>
|
|
|
|
|
<form {onsubmit} autocomplete="off" id="edit-album-form">
|
|
|
|
|
<div class="flex items-center">
|
|
|
|
|
<div class="hidden sm:flex">
|
|
|
|
|
<AlbumCover {album} class="h-[200px] w-[200px] m-4 shadow-lg" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="grow">
|
|
|
|
|
<div class="m-4 flex flex-col gap-2">
|
|
|
|
|
<label class="immich-form-label" for="name">{$t('name')}</label>
|
|
|
|
|
<input class="immich-form-input" id="name" type="text" bind:value={albumName} />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="m-4 flex flex-col gap-2">
|
|
|
|
|
<label class="immich-form-label" for="description">{$t('description')}</label>
|
|
|
|
|
<textarea class="immich-form-input" id="description" bind:value={description}></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
<form onsubmit={handleSubmit} autocomplete="off" id="edit-album-form">
|
|
|
|
|
<div class="flex items-center gap-8 m-4">
|
|
|
|
|
<AlbumCover {album} class="h-[200px] w-[200px] 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>
|
|
|
|
|
</form>
|
|
|
|
|
|
Jason Rasmussen
GitHub