chore: rename edit album form modal (#19375)

This commit is contained in:
Daniel Dietzler 2025-06-20 19:51:14 +02:00 committed by GitHub
parent 0426699f13
commit 1dc8fa2979
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 2 additions and 2 deletions

View file

@ -2,7 +2,6 @@
import { goto } from '$app/navigation';
import AlbumCardGroup from '$lib/components/album-page/album-card-group.svelte';
import AlbumsTable from '$lib/components/album-page/albums-table.svelte';
import EditAlbumForm from '$lib/components/forms/edit-album-form.svelte';
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
import RightClickContextMenu from '$lib/components/shared-components/context-menu/right-click-context-menu.svelte';
import {
@ -11,6 +10,7 @@
} from '$lib/components/shared-components/notification/notification';
import { AppRoute } from '$lib/constants';
import { modalManager } from '$lib/managers/modal-manager.svelte';
import AlbumEditModal from '$lib/modals/AlbumEditModal.svelte';
import AlbumShareModal from '$lib/modals/AlbumShareModal.svelte';
import QrCodeModal from '$lib/modals/QrCodeModal.svelte';
import SharedLinkCreateModal from '$lib/modals/SharedLinkCreateModal.svelte';
@ -258,7 +258,7 @@
const handleEdit = async (album: AlbumResponseDto) => {
closeAlbumContextMenu();
const editedAlbum = await modalManager.show(EditAlbumForm, {
const editedAlbum = await modalManager.show(AlbumEditModal, {
album,
});
if (editedAlbum) {

View file

@ -1,76 +0,0 @@
<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, Modal, ModalBody, ModalFooter } from '@immich/ui';
import { mdiRenameOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
interface 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 () => {
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 (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>
</div>
</div>
</form>
</ModalBody>
<ModalFooter>
<div class="flex gap-2 w-full">
<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>
</div>
</ModalFooter>
</Modal>