From: Michael Tremer <michael.tremer@ipfire.org>
Date: Fri, 11 Jul 2025 07:01:41 +0000 (+0000)
Subject: frontend: Add a view to show files in packages
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=1f824b17ddfb9ddb0d2bd8fe29ed9328e8c8c627;p=pbs.git

frontend: Add a view to show files in packages

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

diff --git a/frontend/src/api/packages.ts b/frontend/src/api/packages.ts
index 0c8f9b88..d4b87cd7 100644
--- a/frontend/src/api/packages.ts
+++ b/frontend/src/api/packages.ts
@@ -117,3 +117,9 @@ export async function fetchPackageFilelist(uuid: string): Promise<File[]> {
 	const response = await api.get(`/v1/packages/${uuid}/filelist`);
 	return response.data;
 }
+
+export async function fetchPackageFilePayload(pkg: Package, path: string): Promise<string> {
+	const response = await fetch(`/packages/${pkg.uuid}/download${path}`);
+
+	return await response.text();
+}
diff --git a/frontend/src/components/PackageFilelist.vue b/frontend/src/components/PackageFilelist.vue
index db7d69ea..36168944 100644
--- a/frontend/src/components/PackageFilelist.vue
+++ b/frontend/src/components/PackageFilelist.vue
@@ -92,9 +92,16 @@
 					<!-- Actions -->
 					<td class="has-text-right">
 						<div class="buttons are-small is-justify-content-end">
-							<a class="button" v-if="fileIsViewable(file)" href="#">
+							<RouterLink class="button" v-if="fileIsViewable(file)"
+									:to="{
+										name   : 'package-file',
+										params : {
+											uuid : pkg.uuid,
+											path : file.path,
+										}
+									}">
 								<Icon icon="magnifying-glass" :title="$t('View')" />
-							</a>
+							</RouterLink>
 
 							<a class="button" v-if="fileIsDownloadable(file)"
 									download :href="`/packages/${pkg.uuid}/download${file.path}`">
diff --git a/frontend/src/composables/packages.ts b/frontend/src/composables/packages.ts
index 25f0a546..50958200 100644
--- a/frontend/src/composables/packages.ts
+++ b/frontend/src/composables/packages.ts
@@ -1,8 +1,12 @@
 import { onMounted, ref } from "vue";
 
 // API
-import type { Package } from "@/api/packages";
-import { fetchPackage } from "@/api/packages";
+import type { Package, File } from "@/api/packages";
+import {
+	fetchPackage,
+	fetchPackageFilelist,
+	fetchPackageFilePayload
+} from "@/api/packages";
 
 export function usePackage(uuid: string) {
 	const pkg = ref<Package>();
@@ -12,8 +16,23 @@ export function usePackage(uuid: string) {
 		pkg.value = await fetchPackage(uuid);
 	}
 
+	// Fetch the filelist
+	async function getPackageFilelist(): Promise<File[]> {
+		return fetchPackageFilelist(uuid);
+	}
+
+	// Fetch the payload of a single file
+	async function getPackageFilePayload(path: string): Promise<string> {
+		if (!pkg.value)
+			throw new Error("Package ${uuid} not loaded");
+
+		return fetchPackageFilePayload(pkg.value, path);
+	}
+
 	return {
 		pkg,
 		loadPackage,
+		getPackageFilelist,
+		getPackageFilePayload,
 	};
 }
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 1126ff0b..b30b27cd 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -6,6 +6,7 @@ import BuildersView from "../views/BuildersView.vue"
 import MirrorsView from "../views/MirrorsView.vue"
 import NotFoundView from "../views/NotFoundView.vue"
 import PackageByUUIDView from "../views/PackageByUUIDView.vue"
+import PackageFileView from "../views/PackageFileView.vue"
 import PackagesView from "../views/PackagesView.vue"
 
 const router = createRouter({
@@ -52,6 +53,14 @@ const router = createRouter({
 			component: PackageByUUIDView,
 		},
 
+		// Package File
+		{
+			path: "/packages/:uuid/files/:path(.*)*",
+			name: "package-file",
+			component: PackageFileView,
+			props: true,
+		},
+
 		// 404 - Not Found
 		{
 			path: "/:pathMatch(.*)*",
diff --git a/frontend/src/views/PackageFileView.vue b/frontend/src/views/PackageFileView.vue
new file mode 100644
index 00000000..6f8a5d90
--- /dev/null
+++ b/frontend/src/views/PackageFileView.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+	import { ref, onMounted } from "vue";
+
+	// Fetch the package UUID and path from the URL
+	const { uuid, path } = defineProps<{
+		uuid: string,
+		path: string,
+	}>();
+
+	// Fetch the package
+	import { usePackage } from "@/composables/packages";
+	const { pkg, loadPackage, getPackageFilePayload } = usePackage(uuid);
+
+	const content = ref("");
+	const loading = ref(true);
+	const error = ref<Error | null>(null);
+
+	onMounted(async () => {
+		await loadPackage();
+
+		// Fetch the payload
+		try {
+			content.value = await getPackageFilePayload(path);
+		} catch (e) {
+			error.value = e as Error;
+		} finally {
+			loading.value = false;
+		}
+	});
+</script>
+
+<template>
+	<Section :title="path">
+		<Container>
+			<Loader v-if="loading" />
+
+			<Notification v-else-if="error" is-danger>
+				{{ error }}
+			</Notification>
+
+			<div v-else>
+				<pre v-text="content" />
+			</div>
+		</Container>
+	</Section>
+</template>