feat(web): add delete button to asset viewer (#896)

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher, onMount, onDestroy } from 'svelte';
 	import { fly } from 'svelte/transition';
-	import AsserViewerNavBar from './asser-viewer-nav-bar.svelte';
+	import AsserViewerNavBar from './asset-viewer-nav-bar.svelte';
 	import ChevronRight from 'svelte-material-icons/ChevronRight.svelte';
 	import ChevronLeft from 'svelte-material-icons/ChevronLeft.svelte';
 	import PhotoViewer from './photo-viewer.svelte';
@@ -13,6 +13,7 @@
 		notificationController,
 		NotificationType
 	} from '../shared-components/notification/notification';
+	import { assetStore } from '$lib/stores/assets.store';
 
 	export let asset: AssetResponseDto;
 	$: {
@@ -44,6 +45,9 @@
 			case 'Escape':
 				closeViewer();
 				return;
+			case 'Delete':
+				deleteAsset();
+				return;
 			case 'i':
 				isShowDetail = !isShowDetail;
 				return;
@@ -135,6 +139,34 @@
 			});
 		}
 	};
+
+	const deleteAsset = async () => {
+		try {
+			if (
+				window.confirm(
+					`Caution! Are you sure you want to delete this asset? This step also deletes this asset in the album(s) to which it belongs. You can not undo this action!`
+				)
+			) {
+				const { data: deletedAssets } = await api.assetApi.deleteAsset({
+					ids: [asset.id]
+				});
+
+				navigateAssetForward();
+
+				for (const asset of deletedAssets) {
+					if (asset.status == 'SUCCESS') {
+						assetStore.removeAsset(asset.id);
+					}
+				}
+			}
+		} catch (e) {
+			notificationController.show({
+				type: NotificationType.Error,
+				message: 'Error deleting this asset, check console for more details'
+			});
+			console.error('Error deleteSelectedAssetHandler', e);
+		}
+	};
 </script>
 
 <section
@@ -146,6 +178,7 @@
 			on:goBack={closeViewer}
 			on:showDetail={showDetailInfoHandler}
 			on:download={downloadFile}
+			on:delete={deleteAsset}
 		/>
 	</div>