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 12d64ad22247c9b0b967f228830946b613db4b11..8b93e50a62d8d0c4f2985b47deb544d718c6f3f9 100644 (file)
--- 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 2f63685e22444cc31dad5844b5cddfc4eb68f027..690afda43ba2fefc683fe65fed960342b38843fd 100644 (file)
--- 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 (file)
index 0000000..f307cc5
--- /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 ed1748964d4c07d24738374cb6208512c22342fb..50a240b0537147410a6eba8d447beb698c814be1 100644 (file)
--- 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,
        };
 }