From: Michael Tremer <michael.tremer@ipfire.org>
Date: Mon, 7 Jul 2025 11:18:56 +0000 (+0000)
Subject: frontend: Create a view to list all available packages
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=e81cf646b22257f80fae20e9eb6491872594756c;p=pbs.git

frontend: Create a view to list all available packages

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 307f5af9..30923fcc 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -29,6 +29,10 @@
 
 			<div class="navbar-menu">
 				<div class="navbar-start">
+					<RouterLink to="/packages" class="navbar-item">
+						{{ $t("Packages") }}
+					</RouterLink>
+
 					<RouterLink to="/builders" class="navbar-item">
 						{{ $t("Builders") }}
 					</RouterLink>
diff --git a/frontend/src/api/packages.ts b/frontend/src/api/packages.ts
new file mode 100644
index 00000000..11450ff8
--- /dev/null
+++ b/frontend/src/api/packages.ts
@@ -0,0 +1,15 @@
+import api from "@/api"
+
+export interface Package {
+	// Name
+	name: string;
+
+	// Summary
+	summary: string;
+}
+
+// Fetch all packages
+export async function fetchPackages(): Promise<Package[]> {
+	const response = await api.get("/v1/packages")
+	return response.data;
+}
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index ccbc16f1..f56f1cc5 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -5,6 +5,7 @@ import LoginView from "../views/LoginView.vue"
 import BuildersView from "../views/BuildersView.vue"
 import MirrorsView from "../views/MirrorsView.vue"
 import NotFoundView from "../views/NotFoundView.vue"
+import PackagesView from "../views/PackagesView.vue"
 
 const router = createRouter({
 	history: createWebHistory(import.meta.env.BASE_URL),
@@ -36,6 +37,13 @@ const router = createRouter({
 			component: MirrorsView,
 		},
 
+		// Packages
+		{
+			path: "/packages",
+			name: "packages",
+			component: PackagesView,
+		},
+
 		// 404 - Not Found
 		{
 			path: "/:pathMatch(.*)*",
diff --git a/frontend/src/views/PackagesView.vue b/frontend/src/views/PackagesView.vue
new file mode 100644
index 00000000..1d3a50d3
--- /dev/null
+++ b/frontend/src/views/PackagesView.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+	import { onMounted, ref } from "vue";
+
+	// API
+	import type { Package } from "@/api/packages";
+	import { fetchPackages } from "@/api/packages";
+
+	// Components
+	import Section from "@/components/Section.vue";
+
+	// Create a list with all packages
+	const packages = ref<Package[]>([]);
+
+	// Fetch all packages on load
+	onMounted(async () => {
+		packages.value = await fetchPackages();
+	});
+</script>
+
+<template>
+	<Section :title="$t('Packages')">
+		<table class="table is-fullwidth">
+			<tbody>
+				<tr v-for="pkg in packages">
+					<th scope="row">
+						<a href="/packages/{{ pkg.name }}">
+							{{ pkg.name }}
+						</a>
+					</th>
+
+					<td>
+						{{ pkg.summary }}
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</Section>
+</template>