knechtandreas
6bf2e8dbcb
* 15712: Added keyboard shortcuts for opening add to album modal and highlighting/selecting an album to add to. * 15712: Re-factored logic from template code into script. Extracted new album button into separate cmponent. * 15712: Document new keyboard shortucts now that they work everywhere. * 15712: Extract some constants/helper functions. * 15712: Missing comma. * 15712: Pulled logic out into separate unit testable class. * 15712: Added a unit test. * 15712: Move the modal back up to keep the github PR happy. * 15712: PR feedback - renamed typescript files and switch to class bind directive. * 15712:Move selection modal into correct package. * 15712: Better naming of module and files.
58 lines
1.9 KiB
Svelte
58 lines
1.9 KiB
Svelte
<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 type { AlbumResponseDto, AssetResponseDto } from '@immich/sdk';
|
|
import { mdiImageAlbum, mdiShareVariantOutline } from '@mdi/js';
|
|
import { t } from 'svelte-i18n';
|
|
|
|
interface Props {
|
|
asset: AssetResponseDto;
|
|
onAction: OnAction;
|
|
shared?: boolean;
|
|
}
|
|
|
|
let { asset, onAction, shared = false }: Props = $props();
|
|
|
|
let showSelectionModal = $state(false);
|
|
|
|
const handleAddToNewAlbum = async (albumName: string) => {
|
|
showSelectionModal = false;
|
|
const album = await addAssetsToNewAlbum(albumName, [asset.id]);
|
|
if (album) {
|
|
onAction({ type: AssetAction.ADD_TO_ALBUM, asset, album });
|
|
}
|
|
};
|
|
|
|
const handleAddToAlbum = async (album: AlbumResponseDto) => {
|
|
showSelectionModal = false;
|
|
await addAssetsToAlbum(album.id, [asset.id]);
|
|
onAction({ type: AssetAction.ADD_TO_ALBUM, asset, album });
|
|
};
|
|
</script>
|
|
|
|
<svelte:window
|
|
use:shortcut={{ shortcut: { key: 'l', shift: shared }, onShortcut: () => (showSelectionModal = true) }}
|
|
/>
|
|
|
|
<MenuOption
|
|
icon={shared ? mdiShareVariantOutline : mdiImageAlbum}
|
|
text={shared ? $t('add_to_shared_album') : $t('add_to_album')}
|
|
onClick={() => (showSelectionModal = true)}
|
|
/>
|
|
|
|
{#if showSelectionModal}
|
|
<Portal target="body">
|
|
<AlbumSelectionModal
|
|
{shared}
|
|
onNewAlbum={handleAddToNewAlbum}
|
|
onAlbumClick={handleAddToAlbum}
|
|
onClose={() => (showSelectionModal = false)}
|
|
/>
|
|
</Portal>
|
|
{/if}
|