feat(web): add current view asset to album (#923)

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -6,9 +6,17 @@
 	import ChevronLeft from 'svelte-material-icons/ChevronLeft.svelte';
 	import PhotoViewer from './photo-viewer.svelte';
 	import DetailPanel from './detail-panel.svelte';
+	import { goto } from '$app/navigation';
 	import { downloadAssets } from '$lib/stores/download';
 	import VideoViewer from './video-viewer.svelte';
-	import { api, AssetResponseDto, AssetTypeEnum, AlbumResponseDto } from '@api';
+	import AlbumSelectionModal from './album-selection-modal.svelte';
+	import {
+		api,
+		AddAssetsResponseDto,
+		AssetResponseDto,
+		AssetTypeEnum,
+		AlbumResponseDto
+	} from '@api';
 	import {
 		notificationController,
 		NotificationType
@@ -29,6 +37,8 @@
 	let halfRightHover = false;
 	let isShowDetail = false;
 	let appearsInAlbums: AlbumResponseDto[] = [];
+	let isShowAlbumPicker = false;
+	let addToSharedAlbum = true;
 
 	const onKeyboardPress = (keyInfo: KeyboardEvent) => handleKeyboardPress(keyInfo.key);
 
@@ -167,6 +177,39 @@
 			console.error('Error deleteSelectedAssetHandler', e);
 		}
 	};
+
+	const openAlbumPicker = (shared: boolean) => {
+		isShowAlbumPicker = true;
+		addToSharedAlbum = shared;
+	};
+
+	const showAddNotification = (dto: AddAssetsResponseDto) => {
+		notificationController.show({
+			message: `Added ${dto.successfullyAdded} to ${dto.album?.albumName}`,
+			type: NotificationType.Info
+		});
+
+		if (dto.successfullyAdded === 1 && dto.album) {
+			appearsInAlbums = [...appearsInAlbums, dto.album];
+		}
+	};
+
+	const handleAddToNewAlbum = () => {
+		isShowAlbumPicker = false;
+		api.albumApi.createAlbum({ albumName: 'Untitled', assetIds: [asset.id] }).then((response) => {
+			const album = response.data;
+			goto('/albums/' + album.id);
+		});
+	};
+
+	const handleAddToAlbum = async (event: CustomEvent<{ album: AlbumResponseDto }>) => {
+		isShowAlbumPicker = false;
+		const album = event.detail.album;
+
+		api.albumApi
+			.addAssetsToAlbum(album.id, { assetIds: [asset.id] })
+			.then((response) => showAddNotification(response.data));
+	};
 </script>
 
 <section
@@ -179,6 +222,8 @@
 			on:showDetail={showDetailInfoHandler}
 			on:download={downloadFile}
 			on:delete={deleteAsset}
+			on:addToAlbum={() => openAlbumPicker(false)}
+			on:addToSharedAlbum={() => openAlbumPicker(true)}
 		/>
 	</div>
 
@@ -246,6 +291,17 @@
 			<DetailPanel {asset} albums={appearsInAlbums} on:close={() => (isShowDetail = false)} />
 		</div>
 	{/if}
+
+	{#if isShowAlbumPicker}
+		<AlbumSelectionModal
+			shared={addToSharedAlbum}
+			on:newAlbum={handleAddToNewAlbum}
+			on:newSharedAlbum={handleAddToNewAlbum}
+			on:album={handleAddToAlbum}
+			on:close={() => (isShowAlbumPicker = false)}
+		/>
+		<div class="w-full h-full">Hello</div>
+	{/if}
 </section>
 
 <style>