Show all albums an asset appears in on the asset viewer page (#575)

* Add route to query albums for a specific asset

* Update API and add to detail-panel

* Fix tests

* Refactor API endpoint

* Added alt attribute to img tag

Co-authored-by: Alex <alex.tran1502@gmail.com>

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

@@ -7,7 +7,7 @@
 	import moment from 'moment';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import { browser } from '$app/env';
-	import { AssetResponseDto } from '@api';
+	import { AssetResponseDto, AlbumResponseDto } from '@api';
 
 	// Map Property
 	let map: any;
@@ -19,6 +19,8 @@
 		drawMap(asset.exifInfo.latitude, asset.exifInfo.longitude);
 	}
 
+	export let albums: AlbumResponseDto[];
+
 	onMount(async () => {
 		if (browser) {
 			if (asset.exifInfo?.latitude != null && asset.exifInfo?.longitude != null) {
@@ -201,6 +203,37 @@
 	<div class="h-[360px] w-full" id="map" />
 </div>
 
+<section class="p-2">
+	<div class="px-4 py-4">
+		{#if albums.length > 0}
+			<p class="text-sm pb-4">APPEARS IN</p>
+		{/if}
+		{#each albums as album}
+			<a sveltekit:prefetch href={`/albums/${album.id}`}>
+				<div class="flex gap-4 py-2 hover:cursor-pointer" on:click={() => dispatch('click', album)}>
+					<div>
+						<img
+							alt={album.albumName}
+							class="w-[50px] h-[50px] object-cover rounded"
+							src={`/api/asset/thumbnail/${album.albumThumbnailAssetId}?format=JPEG`}
+						/>
+					</div>
+
+					<div class="mt-auto mb-auto">
+						<p>{album.albumName}</p>
+						<div class="flex gap-2 text-sm">
+							<p>{album.assetCount} items</p>
+							{#if album.shared}
+								<p>· Shared</p>
+							{/if}
+						</div>
+					</div>
+				</div>
+			</a>
+		{/each}
+	</div>
+</section>
+
 <style>
 	@import 'https://unpkg.com/leaflet@1.7.1/dist/leaflet.css';
 </style>