gitea-mirror/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-12-22 23:26:58 -08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: album edit modal (#24786)

Browse Source
This commit is contained in:
Jason Rasmussen
2025-12-22 13:33:49 -05:00
committed by GitHub
parent f6f9a3abb4
commit dd744f8ee3
4 changed files with 74 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
web/src/lib/modals/AlbumEditModal.svelte
View File

@@ -1,63 +1,41 @@
<script lang="ts">
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, Field, HStack, Input, Modal, ModalBody, ModalFooter, Textarea } from '@immich/ui';
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: (album?: AlbumResponseDto) => void;
onClose: () => void;
};
let { album = $bindable(), onClose }: Props = $props();
let { album, onClose }: Props = $props();
let albumName = $state(album.albumName);
let description = $state(album.description);
let isSubmitting = $state(false);
const handleSubmit = async (event: Event) => {
event.preventDefault();
isSubmitting = true;
try {
await updateAlbumInfo({ id: album.id, updateAlbumDto: { albumName, description } });
album.albumName = albumName;
album.description = description;
onClose(album);
} catch (error) {
handleError(error, $t('errors.unable_to_update_album_info'));
} finally {
isSubmitting = false;
const onSubmit = async () => {
const success = await handleUpdateAlbum(album, { albumName, description });
if (success) {
onClose();
}
};
</script>
<Modal icon={mdiRenameOutline} title={$t('edit_album')} size="medium" {onClose}>
<ModalBody>
<form onsubmit={handleSubmit} autocomplete="off" id="edit-album-form">
<div class="flex items-center gap-8 m-4">
<AlbumCover {album} class="h-50 w-50 shadow-lg hidden sm:flex" />
<FormModal icon={mdiRenameOutline} title={$t('edit_album')} size="medium" {onClose} {onSubmit} submitText={$t('save')}>
<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>
<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>
</ModalBody>
<ModalFooter>
<HStack fullWidth>
<Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>{$t('cancel')}</Button>
<Button shape="round" type="submit" fullWidth disabled={isSubmitting} form="edit-album-form">{$t('save')}</Button>
</HStack>
</ModalFooter>
</Modal>
<Field label={$t('description')}>
<Textarea bind:value={description} />
</Field>
</div>
</div>
</FormModal>