From: Michael Tremer <michael.tremer@ipfire.org>
Date: Fri, 18 Jul 2025 15:00:01 +0000 (+0000)
Subject: frontend: Show build watchers
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=1449608df5f0d3afaeba99e72ace2881d6ec960d;p=pbs.git

frontend: Show build watchers

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

diff --git a/frontend/src/api/builds.ts b/frontend/src/api/builds.ts
index 12d64ad2..8b93e50a 100644
--- a/frontend/src/api/builds.ts
+++ b/frontend/src/api/builds.ts
@@ -1,5 +1,7 @@
 import api from "@/api";
 import type { Bug } from "@/api/bugs";
+import type { User } from "@/api/users";
+import { fetchUser } from "@/api/users";
 
 export interface Build {
 	// Name
@@ -29,3 +31,16 @@ export async function fetchBuildBugs(uuid: string): Promise<Bug[]> {
 	const response = await api.get(`/v1/builds/${uuid}/bugs`);
 	return response.data as Bug[];
 }
+
+// Fetch all watchers by the build UUID
+export async function fetchBuildWatchers(uuid: string): Promise<User[]> {
+	const response = await api.get(`/v1/builds/${uuid}/watchers`);
+
+	// Fetch all users by their name
+	const users = response.data.map(
+		({ username }: { username: string }) => fetchUser(username)
+	);
+
+	// Fetch all users concurrently
+	return await Promise.all(users);
+}
diff --git a/frontend/src/components/BuildHeader.vue b/frontend/src/components/BuildHeader.vue
index 2f63685e..690afda4 100644
--- a/frontend/src/components/BuildHeader.vue
+++ b/frontend/src/components/BuildHeader.vue
@@ -1,6 +1,10 @@
 <script setup lang="ts">
-	// Import type
+	// Import types
 	import type { Build } from "@/api/builds";
+	import type { User } from "@/api/users";
+
+	// Import components
+	import BuildWatchers from "@/components/BuildWatchers.vue";
 
 	// Fetch the build
 	defineProps<{
@@ -25,6 +29,8 @@
 						</h5>
 					</div>
 				</div>
+
+				<BuildWatchers :uuid="build.uuid" />
 			</Container>
 		</div>
 	</div>
diff --git a/frontend/src/components/BuildWatchers.vue b/frontend/src/components/BuildWatchers.vue
new file mode 100644
index 00000000..f307cc54
--- /dev/null
+++ b/frontend/src/components/BuildWatchers.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+	import { ref, onMounted } from "vue";
+
+	// Composables
+	import type { User } from "@/api/users";
+	import { useBuild } from "@/composables/builds";
+
+	// Fetch the build UUID
+	const props = defineProps<{
+		uuid: string,
+	}>();
+
+	const loading = ref(true);
+	const error = ref<Error | null>(null);
+	const watchers = ref<User[] | null>(null);
+
+	// Fetch the build
+	const { getWatchers } = useBuild(props.uuid);
+
+	onMounted(async () => {
+		try {
+			watchers.value = await getWatchers();
+		} catch (err) {
+			error.value = err as Error;
+		} finally {
+			loading.value = false;
+		}
+	});
+</script>
+
+<template>
+	<Loader :loading="loading" :error="error">
+		<div v-if="watchers" class="level">
+			<div class="level-left">
+				<RouterLink :to="{ name: 'UserView', params: { name: watcher.name }}"
+						class="level-item" v-for="watcher in watchers" :key="watcher.name">
+					<Avatar :user="watcher" size="32" is-rounded />
+				</RouterLink>
+			</div>
+		</div>
+	</Loader>
+</template>
diff --git a/frontend/src/composables/builds.ts b/frontend/src/composables/builds.ts
index ed174896..50a240b0 100644
--- a/frontend/src/composables/builds.ts
+++ b/frontend/src/composables/builds.ts
@@ -6,7 +6,9 @@ import type { Build } from "@/api/builds";
 import {
 	fetchBuild,
 	fetchBuildBugs,
+	fetchBuildWatchers,
 } from "@/api/builds";
+import type { User } from "@/api/users";
 
 export function useBuild(uuid: string) {
 	const build = ref<Build>();
@@ -21,9 +23,15 @@ export function useBuild(uuid: string) {
 		return await fetchBuildBugs(uuid);
 	}
 
+	// Fetch all watchers
+	async function getWatchers(): Promise<User[]> {
+		return await fetchBuildWatchers(uuid);
+	}
+
 	return {
 		build,
 		loadBuild,
 		getBugs,
+		getWatchers,
 	};
 }