mirror of
https://github.com/immich-app/immich
synced 2025-11-14 17:36:12 +00:00
refactor: album edit modal (#22151)
This commit is contained in:
Jason Rasmussen
GitHub
parent
0e987352bb
commit
edc0698e2a
3 changed files with 36 additions and 42 deletions
27
pnpm-lock.yaml
generated
27
pnpm-lock.yaml
generated
|
|
@ -684,8 +684,8 @@ importers:
|
|||
specifier: file:../open-api/typescript-sdk
|
||||
version: link:../open-api/typescript-sdk
|
||||
'@immich/ui':
|
||||
specifier: ^0.28.1
|
||||
version: 0.28.1(@internationalized/date@3.8.2)(svelte@5.35.5)
|
||||
specifier: ^0.29.0
|
||||
version: 0.29.0(@internationalized/date@3.8.2)(svelte@5.35.5)
|
||||
'@mapbox/mapbox-gl-rtl-text':
|
||||
specifier: 0.2.3
|
||||
version: 0.2.3(mapbox-gl@1.13.3)
|
||||
|
|
@ -2717,8 +2717,8 @@ packages:
|
|||
cpu: [x64]
|
||||
os: [win32]
|
||||
|
||||
'@immich/ui@0.28.1':
|
||||
resolution: {integrity: sha512-FAQBPsbPaLtTYsEH+/wQxPbUI19ZPuOEScSHgSqteI601qVZNQcfU7YuinKqK94iva2RNhvUgrNGHweIBentZg==}
|
||||
'@immich/ui@0.29.0':
|
||||
resolution: {integrity: sha512-An9cf1L4nMO6+C1Tkktd+qjGmZvyGz/Un33cGsKQa2I7IdZHd67KbbC2v3wN3bQMiTjxtFJ8YR9EONohJ8jDtQ==}
|
||||
peerDependencies:
|
||||
svelte: ^5.0.0
|
||||
|
||||
|
|
@ -4570,6 +4570,9 @@ packages:
|
|||
'@types/node@22.18.4':
|
||||
resolution: {integrity: sha512-UJdblFqXymSBhmZf96BnbisoFIr8ooiiBRMolQgg77Ea+VM37jXw76C2LQr9n8wm9+i/OvlUlW6xSvqwzwqznw==}
|
||||
|
||||
'@types/node@22.18.5':
|
||||
resolution: {integrity: sha512-g9BpPfJvxYBXUWI9bV37j6d6LTMNQ88hPwdWWUeYZnMhlo66FIg9gCc1/DZb15QylJSKwOZjwrckvOTWpOiChg==}
|
||||
|
||||
'@types/node@24.3.0':
|
||||
resolution: {integrity: sha512-aPTXCrfwnDLj4VvXrm+UUCQjNEvJgNA8s5F1cvwQU+3KNltTOkBm1j30uNLyqqPNe7gE3KFzImYoZEfLhp4Yow==}
|
||||
|
||||
|
|
@ -5225,8 +5228,8 @@ packages:
|
|||
resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
|
||||
engines: {node: '>=8'}
|
||||
|
||||
bits-ui@2.9.8:
|
||||
resolution: {integrity: sha512-oVAqdhLSuGIgEiT0yu3ShSI7AxncCxX26Gv6Lul94BuKHV2uzHoKfIodtnMQSq+udJ54svuCIRqA58whsv7vaA==}
|
||||
bits-ui@2.9.9:
|
||||
resolution: {integrity: sha512-U8qsCQ/5rwXAzUBn8lCLFUeHBoXsA54Lb4uFuurXu6VEszVXLCedZRnhHOQsTc1I+2Js5l4iLiBtPUG7WjNbOA==}
|
||||
engines: {node: '>=20'}
|
||||
peerDependencies:
|
||||
'@internationalized/date': ^3.8.1
|
||||
|
|
@ -14395,10 +14398,10 @@ snapshots:
|
|||
'@img/sharp-win32-x64@0.34.3':
|
||||
optional: true
|
||||
|
||||
'@immich/ui@0.28.1(@internationalized/date@3.8.2)(svelte@5.35.5)':
|
||||
'@immich/ui@0.29.0(@internationalized/date@3.8.2)(svelte@5.35.5)':
|
||||
dependencies:
|
||||
'@mdi/js': 7.4.47
|
||||
bits-ui: 2.9.8(@internationalized/date@3.8.2)(svelte@5.35.5)
|
||||
bits-ui: 2.9.9(@internationalized/date@3.8.2)(svelte@5.35.5)
|
||||
simple-icons: 15.15.0
|
||||
svelte: 5.35.5
|
||||
tailwind-merge: 3.3.1
|
||||
|
|
@ -16524,6 +16527,10 @@ snapshots:
|
|||
dependencies:
|
||||
undici-types: 6.21.0
|
||||
|
||||
'@types/node@22.18.5':
|
||||
dependencies:
|
||||
undici-types: 6.21.0
|
||||
|
||||
'@types/node@24.3.0':
|
||||
dependencies:
|
||||
undici-types: 7.10.0
|
||||
|
|
@ -16670,7 +16677,7 @@ snapshots:
|
|||
|
||||
'@types/through@0.0.33':
|
||||
dependencies:
|
||||
'@types/node': 22.18.4
|
||||
'@types/node': 22.18.5
|
||||
|
||||
'@types/ua-parser-js@0.7.39': {}
|
||||
|
||||
|
|
@ -17339,7 +17346,7 @@ snapshots:
|
|||
|
||||
binary-extensions@2.3.0: {}
|
||||
|
||||
bits-ui@2.9.8(@internationalized/date@3.8.2)(svelte@5.35.5):
|
||||
bits-ui@2.9.9(@internationalized/date@3.8.2)(svelte@5.35.5):
|
||||
dependencies:
|
||||
'@floating-ui/core': 1.7.3
|
||||
'@floating-ui/dom': 1.7.4
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
"dependencies": {
|
||||
"@formatjs/icu-messageformat-parser": "^2.9.8",
|
||||
"@immich/sdk": "file:../open-api/typescript-sdk",
|
||||
"@immich/ui": "^0.28.1",
|
||||
"@immich/ui": "^0.29.0",
|
||||
"@mapbox/mapbox-gl-rtl-text": "0.2.3",
|
||||
"@mdi/js": "^7.4.47",
|
||||
"@photo-sphere-viewer/core": "^5.11.5",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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">
|
||||
<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="grow flex flex-col gap-4">
|
||||
<Field label={$t('name')}>
|
||||
<Input bind:value={albumName} />
|
||||
</Field>
|
||||
|
||||
<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>
|
||||
<Field label={$t('description')}>
|
||||
<Textarea bind:value={description} />
|
||||
</Field>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue