From 4a54f8b2a237023800e59e9a674958b5d645fdf2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20T=C3=A4kker?= <lucastakker@gmail.com>
Date: Tue, 3 Feb 2026 20:53:08 +0100
Subject: [PATCH] Add Album and Song management pages; implement AlbumSlider
 component and update Card component for genre handling

---
 app/components/Album/Card.vue   |   3 +-
 app/components/Album/Slider.vue |  42 ++++++++
 app/pages/admin/artists.vue     | 131 +++++++++++++++++++++++
 app/pages/admin/songs.vue       | 182 ++++++++++++++++++++++++++++++++
 app/pages/index.vue             |  15 +--
 app/utils/file.ts               |   1 +
 6 files changed, 359 insertions(+), 15 deletions(-)
 create mode 100644 app/components/Album/Slider.vue
 create mode 100644 app/pages/admin/artists.vue
 create mode 100644 app/pages/admin/songs.vue
 create mode 100644 app/utils/file.ts

diff --git a/app/components/Album/Card.vue b/app/components/Album/Card.vue
index 956b71c..9738f23 100644
--- a/app/components/Album/Card.vue
+++ b/app/components/Album/Card.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import type { Album } from "@/utils/types"
 
-type AlbumProps = Omit<Album, "artists"> & {
+type AlbumProps = Omit<Omit<Album, "genre">, "artists"> & {
 	artists: Array<Omit<Artist, "file">>
+	genre?: Genre
 }
 
 const props = defineProps<AlbumProps>()
diff --git a/app/components/Album/Slider.vue b/app/components/Album/Slider.vue
new file mode 100644
index 0000000..bb92bba
--- /dev/null
+++ b/app/components/Album/Slider.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const { data, pending, refresh } = useAsyncData("random-albums", async () => {
+	const { data: genres } = await cfetch("/genres/random")
+
+	const results = await Promise.allSettled(
+		genres.map(async (genre: Genre) => {
+			const res = await cfetch(`/genres/albums/${genre._id}`)
+
+			return {
+				genre,
+				albums: res.data,
+			}
+		}),
+	)
+
+	return results
+		.filter(
+			(
+				r,
+			): r is PromiseFulfilledResult<{
+				genre: any
+				albums: any[]
+			}> => r.status === "fulfilled",
+		)
+		.map((r) => r.value)
+})
+</script>
+
+<template>
+	<template v-for="item in data" :key="item.genre._id">
+		<Slider v-if="item.albums.length" :title="item.genre.name">
+			<AlbumCard
+				v-for="album in item.albums"
+				:key="album._id"
+				:name="album.name"
+				:file="`${BACKEND_SERVE}${album.file}`"
+				:artists="album.artists"
+				:_id="album._id"
+			/>
+		</Slider>
+	</template>
+</template>
diff --git a/app/pages/admin/artists.vue b/app/pages/admin/artists.vue
new file mode 100644
index 0000000..7cd0497
--- /dev/null
+++ b/app/pages/admin/artists.vue
@@ -0,0 +1,131 @@
+<script setup lang="ts">
+import type { Field } from "~/components/Admin/ModalForm.vue"
+import type { Row } from "~/ui/Table.vue"
+
+const { data, refresh } = useApiFetch<Track[]>("/all/artists")
+const toast = useToast()
+
+const tableRows: Row[] = [
+	{
+		name: "_id",
+		displayName: "ID",
+	},
+	{
+		name: "file",
+		displayName: "Cover",
+		type: "image",
+		prefix: `${BACKEND_SERVE}`,
+	},
+	{
+		name: "name",
+		displayName: "Name",
+	},
+	{
+		name: "action",
+	},
+]
+
+const modalFields: Field[] = [
+	{ key: "name", label: "Name" },
+	{ key: "file", label: "Cover file", type: "file" },
+]
+
+const showModal = ref<boolean>(false)
+const item = ref<Track | undefined>(undefined)
+
+const save = async (value: any) => {
+	if (value._id) {
+		try {
+			await cfetch("/admin/artist", {
+				method: "PATCH",
+				data: value,
+				params: { id: value._id },
+				forceFormData: true,
+			})
+
+			toast.show("Artist updated successfully", "success")
+		} catch {
+			toast.show("Failed to update artist", "error")
+
+			return false
+		}
+	} else {
+		try {
+			await cfetch("/admin/artist", {
+				method: "POST",
+				data: value,
+			})
+
+			toast.show("Artist added successfully", "success")
+		} catch {
+			toast.show("Failed to add artist", "error")
+
+			return false
+		}
+	}
+
+	refresh()
+
+	return true
+}
+
+/**
+ * @param id Set it to a value to make it edit instead of creating a new one
+ */
+const show = (id?: string) => {
+	if (!id) {
+		item.value = undefined
+		showModal.value = true
+
+		return
+	}
+
+	const curItem: any = data.value.filter((i) => i._id == id)[0]
+
+	if (!curItem) return
+
+	item.value = curItem
+
+	showModal.value = true
+}
+</script>
+
+<template>
+	<h1 class="title">Manage artists</h1>
+
+	<Table :rows="tableRows" :data="data" class="table">
+		<template #action="{ item, index }">
+			<div class="action">
+				<Button @click="show(item._id)">Edit</Button>
+				<Button @click="">Delete</Button>
+			</div>
+		</template>
+	</Table>
+	<Button @click="show()">Add a new artist</Button>
+
+	<AdminModalForm
+		v-model:open="showModal"
+		@save="save"
+		:fields="modalFields"
+		:item="item"
+		:title="item ? 'Edit artist' : 'Add new artist'"
+	/>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/util" as *;
+
+.title {
+	@include fontSize(24px);
+	margin-bottom: 0.4rem;
+}
+
+.action {
+	display: flex;
+	gap: 0.2rem;
+}
+
+.table {
+	margin-bottom: 0.4rem;
+}
+</style>
diff --git a/app/pages/admin/songs.vue b/app/pages/admin/songs.vue
new file mode 100644
index 0000000..d7a7ebc
--- /dev/null
+++ b/app/pages/admin/songs.vue
@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import type { Field } from "~/components/Admin/ModalForm.vue"
+import type { Row } from "~/ui/Table.vue"
+
+const { data, refresh } = useApiFetch<Album[]>("/all/tracks")
+const toast = useToast()
+
+const tableRows: Row[] = [
+	{
+		name: "_id",
+		displayName: "ID",
+	},
+	{
+		name: "fileDir",
+		displayName: "Audio File",
+		type: "audio",
+		prefix: `${BACKEND_SERVE}`,
+		suffix: "/original.m4a",
+	},
+	{
+		name: "name",
+		displayName: "Name",
+	},
+	{
+		name: "album.name",
+		displayName: "Album",
+	},
+	{
+		name: "action",
+	},
+]
+
+import { type Option } from "~/ui/SearchSelect.vue"
+
+const { data: artistData } = useApiFetch<Genre[]>("/all/artists")
+const artistFetchOptions = async (q?: string): Promise<Option[]> => {
+	return artistData.value.map<Option>((g) => ({
+		label: g.name,
+		value: g._id,
+	}))
+}
+
+const { data: albumData } = useApiFetch<Genre[]>("/all/albums")
+const albumFetchOptions = async (q?: string): Promise<Option[]> => {
+	return albumData.value.map<Option>((g) => ({
+		label: g.name,
+		value: g._id,
+	}))
+}
+
+const modalFields: Field[] = [
+	{ key: "name", label: "Name" },
+	{ key: "file", label: "Audio file", type: "file" },
+	{
+		key: "artists",
+		label: "Artists",
+		type: "search-select-array",
+		fetchOptions: artistFetchOptions,
+	},
+	{
+		key: "album",
+		label: "Album",
+		type: "search-select",
+		fetchOptions: albumFetchOptions,
+	},
+]
+
+const showModal = ref<boolean>(false)
+const item = ref<Track | undefined>(undefined)
+
+const save = async (value: any) => {
+	if (value._id) {
+		try {
+			await cfetch("/admin/track", {
+				method: "PATCH",
+				data: value,
+				params: { id: value._id },
+				forceFormData: true,
+			})
+
+			toast.show("Song updated successfully", "success")
+		} catch {
+			toast.show("Failed to update song", "error")
+
+			return false
+		}
+	} else {
+		try {
+			await cfetch("/admin/track", {
+				method: "POST",
+				data: value,
+			})
+
+			toast.show("Song added successfully", "success")
+		} catch {
+			toast.show("Failed to add song", "error")
+
+			return false
+		}
+	}
+
+	refresh()
+
+	return true
+}
+
+/**
+ * @param id Set it to a value to make it edit instead of creating a new one
+ */
+const show = (id?: string) => {
+	if (!id) {
+		item.value = undefined
+		showModal.value = true
+
+		return
+	}
+
+	const curItem: any = data.value.filter((i) => i._id == id)[0]
+
+	if (!curItem) return
+
+	const transformed = { ...curItem }
+
+	if (transformed.album)
+		transformed.album = {
+			value: curItem.album._id,
+			label: curItem.album.name,
+		}
+
+	if (transformed.artists)
+		transformed.artists = transformed.artists.map((a: Artist) => ({
+			value: a._id,
+			label: a.name,
+		}))
+
+	item.value = transformed
+
+	showModal.value = true
+}
+
+watch(data, () => console.log(data))
+</script>
+
+<template>
+	<h1 class="title">Manage songs</h1>
+
+	<Table :rows="tableRows" :data="data" class="table">
+		<template #action="{ item, index }">
+			<div class="action">
+				<Button @click="show(item._id)">Edit</Button>
+				<Button @click="">Delete</Button>
+			</div>
+		</template>
+	</Table>
+	<Button @click="show()">Add a new song</Button>
+
+	<AdminModalForm
+		v-model:open="showModal"
+		@save="save"
+		:fields="modalFields"
+		:item="item"
+		:title="item ? 'Edit song' : 'Add new song'"
+	/>
+</template>
+
+<style lang="scss" scoped>
+@use "@/styles/util" as *;
+
+.title {
+	@include fontSize(24px);
+	margin-bottom: 0.4rem;
+}
+
+.action {
+	display: flex;
+	gap: 0.2rem;
+}
+
+.table {
+	margin-bottom: 0.4rem;
+}
+</style>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index c162f35..9263154 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,18 +1,5 @@
 <script setup lang="ts"></script>
 
 <template>
-	<Slider title="Folk">
-		<AlbumCard
-			v-for="index in 10"
-			:key="index"
-			name="I Know You'll Forget Me"
-			file="https://t2.genius.com/unsafe/344x344/https%3A%2F%2Fimages.genius.com%2F837160aed59b6cb52acc489d89e99fa6.1000x998x1.jpg"
-			:artists="[
-				{ name: 'Kado', _id: '1' },
-				{ name: 'Kado', _id: '1' },
-			]"
-			:genre="{ name: 'Folk', _id: '1' }"
-			_id="1"
-		/>
-	</Slider>
+	<AlbumSlider />
 </template>
diff --git a/app/utils/file.ts b/app/utils/file.ts
new file mode 100644
index 0000000..f77ccd5
--- /dev/null
+++ b/app/utils/file.ts
@@ -0,0 +1 @@
+export const BACKEND_SERVE = `${import.meta.env.VITE_PUBLIC_BACKEND}/static/`