From: Michael Tremer <michael.tremer@ipfire.org>
Date: Fri, 18 Jul 2025 16:59:28 +0000 (+0000)
Subject: frontend: Implement watching/unwatching builds
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=1b92559eebe5e6767cfae05a4d7da0c6e9151fca;p=pbs.git

frontend: Implement watching/unwatching builds

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

diff --git a/frontend/src/api/builds.ts b/frontend/src/api/builds.ts
index 8b93e50a..e7d5f794 100644
--- a/frontend/src/api/builds.ts
+++ b/frontend/src/api/builds.ts
@@ -44,3 +44,11 @@ export async function fetchBuildWatchers(uuid: string): Promise<User[]> {
 	// Fetch all users concurrently
 	return await Promise.all(users);
 }
+
+export async function startWatchingBuild(uuid: string): Promise<undefined> {
+	await api.post(`/v1/builds/${uuid}/watchers`);
+}
+
+export async function stopWatchingBuild(uuid: string): Promise<undefined> {
+	await api.delete(`/v1/builds/${uuid}/watchers`);
+}
diff --git a/frontend/src/components/BuildWatchers.vue b/frontend/src/components/BuildWatchers.vue
index 330023b6..51e2fd04 100644
--- a/frontend/src/components/BuildWatchers.vue
+++ b/frontend/src/components/BuildWatchers.vue
@@ -2,6 +2,7 @@
 	import { ref, onMounted } from "vue";
 
 	// Composables
+	import { useAuth } from "@/composables/auth";
 	import { useBuild } from "@/composables/builds";
 
 	// Fetch the build UUID
@@ -11,9 +12,19 @@
 
 	const loading = ref(true);
 	const error = ref<Error | null>(null);
+	const watching = ref(false);
 
 	// Fetch the build
-	const { watchers, getWatchers } = useBuild(props.uuid);
+	const {
+		watchers,
+		getWatchers,
+		isWatching,
+		startWatching,
+		stopWatching
+	} = useBuild(props.uuid);
+
+	// Fetch authentication
+	const { user, isLoggedIn } = useAuth();
 
 	onMounted(async () => {
 		try {
@@ -23,7 +34,39 @@
 		} finally {
 			loading.value = false;
 		}
+
+		// Is the current user watching?
+		if (user.value)
+			watching.value = await isWatching(user.value);
 	});
+
+	const loadingAction = ref(false);
+
+	async function watchBuild() {
+		loadingAction.value = true;
+
+		try {
+			await startWatching();
+		} finally {
+			loadingAction.value = false;
+		}
+
+		// We are now watching
+		watching.value = true;
+	}
+
+	async function unwatchBuild() {
+		loadingAction.value = true;
+
+		try {
+			await stopWatching();
+		} finally {
+			loadingAction.value = false;
+		}
+
+		// We are no longer watching
+		watching.value = false;
+	}
 </script>
 
 <template>
@@ -34,6 +77,19 @@
 						class="level-item" v-for="watcher in watchers" :key="watcher.name">
 					<Avatar :user="watcher" size="32" is-rounded />
 				</RouterLink>
+
+				<!-- Show controls if the user is logged in -->
+				<div class="level-item" v-if="isLoggedIn">
+					<Button v-if="watching" :loading="loadingAction" is-small is-danger
+							@click="unwatchBuild">
+						Unwatch this build
+					</Button>
+
+					<Button v-else is-small :loading="loadingAction" is-success
+							@click="watchBuild">
+						Watch this build
+					</Button>
+				</div>
 			</div>
 		</div>
 	</Loader>
diff --git a/frontend/src/composables/builds.ts b/frontend/src/composables/builds.ts
index 06064fd7..84a307c6 100644
--- a/frontend/src/composables/builds.ts
+++ b/frontend/src/composables/builds.ts
@@ -7,15 +7,23 @@ import {
 	fetchBuild,
 	fetchBuildBugs,
 	fetchBuildWatchers,
+	startWatchingBuild,
+	stopWatchingBuild,
 } from "@/api/builds";
 import type { User } from "@/api/users";
 
+// Composables
+import { useAuth } from "@/composables/auth";
+
 export function useBuild(uuid: string) {
 	const build = ref<Build>();
 
 	// Cache all watchers
 	const watchers = ref<User[]>();
 
+	// Fetch authentication
+	const { user, isLoggedIn } = useAuth();
+
 	// Fetch the build
 	async function loadBuild() {
 		build.value = await fetchBuild(uuid);
@@ -34,11 +42,43 @@ export function useBuild(uuid: string) {
 		return watchers.value;
 	}
 
+	// Returns true if the given user is watching this build
+	async function isWatching(user: User): Promise<boolean> {
+		// Fetch all watchers
+		const watchers = await getWatchers();
+
+		// Check if the user is on the list
+		return watchers.find(
+			(watcher) => watcher.name === user.name
+		) ? true : false;
+	}
+
+	async function startWatching(): Promise<undefined> {
+		// Start watching the build
+		await startWatchingBuild(uuid);
+
+		// Add the user to the list of watchers
+		if (user.value)
+			watchers.value?.push(user.value);
+	}
+
+	async function stopWatching(): Promise<undefined> {
+		await stopWatchingBuild(uuid);
+
+		// Remove the watcher
+		watchers.value = watchers.value?.filter(
+			(watcher) => watcher.name !== user.value?.name
+		);
+	}
+
 	return {
 		build,
 		watchers,
 		loadBuild,
 		getBugs,
 		getWatchers,
+		isWatching,
+		startWatching,
+		stopWatching,
 	};
 }