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 307f5af906e1c005a0e280ba290889fffb5a2e07..30923fcc00923fc1d746978f891831f47726dc57 100644 (file)
--- 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 (file)
index 0000000..11450ff
--- /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 ccbc16f10830c03eb1ca87a4d3ea24a8a3dbd2a9..f56f1cc5dc097d46af19802b5ebe9be67ea21c7c 100644 (file)
--- 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 (file)
index 0000000..1d3a50d
--- /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>