helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: album picker modal (#19383)

Browse source 
Co-authored-by: Jason Rasmussen <jason@rasm.me>
This commit is contained in:
Daniel Dietzler 2025-06-21 14:18:54 +02:00 • committed by GitHub
parent 798debfde3
commit fe4d6edbdc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 55 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

38
web/src/lib/components/asset-viewer/actions/add-to-album-action.svelte
View file

@ -1,13 +1,13 @@
<script lang="ts">
import { shortcut } from '$lib/actions/shortcut';
import type { OnAction } from '$lib/components/asset-viewer/actions/action';
import AlbumSelectionModal from '$lib/components/shared-components/album-selection/album-selection-modal.svelte';
import MenuOption from '$lib/components/shared-components/context-menu/menu-option.svelte';
import Portal from '$lib/components/shared-components/portal/portal.svelte';
import { AssetAction } from '$lib/constants';
import { addAssetsToAlbum, addAssetsToNewAlbum } from '$lib/utils/asset-utils';
import { modalManager } from '$lib/managers/modal-manager.svelte';
import AlbumPickerModal from '$lib/modals/AlbumPickerModal.svelte';
import { addAssetsToAlbum } from '$lib/utils/asset-utils';
import { toTimelineAsset } from '$lib/utils/timeline-util';
import type { AlbumResponseDto, AssetResponseDto } from '@immich/sdk';
import type { AssetResponseDto } from '@immich/sdk';
import { mdiImageAlbum, mdiShareVariantOutline } from '@mdi/js';
import { t } from 'svelte-i18n';
@ -19,40 +19,22 @@
let { asset, onAction, shared = false }: Props = $props();
let showSelectionModal = $state(false);
const onClick = async () => {
const album = await modalManager.show(AlbumPickerModal, { shared });
const handleAddToNewAlbum = async (albumName: string) => {
showSelectionModal = false;
const album = await addAssetsToNewAlbum(albumName, [asset.id]);
if (album) {
onAction({ type: AssetAction.ADD_TO_ALBUM, asset: toTimelineAsset(asset), album });
if (!album) {
return;
}
};
const handleAddToAlbum = async (album: AlbumResponseDto) => {
showSelectionModal = false;
await addAssetsToAlbum(album.id, [asset.id]);
onAction({ type: AssetAction.ADD_TO_ALBUM, asset: toTimelineAsset(asset), album });
};
</script>
<svelte:document
use:shortcut={{ shortcut: { key: 'l', shift: shared }, onShortcut: () => (showSelectionModal = true) }}
/>
<svelte:document use:shortcut={{ shortcut: { key: 'l', shift: shared }, onShortcut: onClick }} />
<MenuOption
icon={shared ? mdiShareVariantOutline : mdiImageAlbum}
text={shared ? $t('add_to_shared_album') : $t('add_to_album')}
onClick={() => (showSelectionModal = true)}
{onClick}
/>
{#if showSelectionModal}
<Portal target="body">
<AlbumSelectionModal
{shared}
onNewAlbum={handleAddToNewAlbum}
onAlbumClick={handleAddToAlbum}
onClose={() => (showSelectionModal = false)}
/>
</Portal>
{/if}