feat: leerling kan progress van groep zien

frontend/src/components/GroupProgressRow.vue

@@ -2,7 +2,7 @@
 import { useGetLearningPathQuery } from "@/queries/learning-paths.ts";
 import { computed } from "vue";
 import type { Language } from "@/data-objects/language.ts";
-import type { LearningPath } from "@/data-objects/learning-paths/learning-path.ts";
+import {calculateProgress} from "@/utils/assignment-utils.ts";
 
 const props = defineProps<{
     groupNumber: number;
@@ -12,10 +12,6 @@ const props = defineProps<{
     classId: string;
 }>();
 
-function calculateProgress(lp: LearningPath): number {
-    return ((lp.amountOfNodes - lp.amountOfNodesLeft) / lp.amountOfNodes) * 100;
-}
-
 const query = useGetLearningPathQuery(
     () => props.learningPath,
     () => props.language,
@@ -30,12 +26,18 @@ const progress = computed(() => {
     if (!query.data.value) return 0;
     return calculateProgress(query.data.value);
 });
+
+const progressColor = computed(() => {
+    if (progress.value < 50) return "error";
+    if (progress.value < 80) return "warning";
+    return "success";
+});
 </script>
 
 <template>
     <v-progress-linear
         :model-value="progress"
-        color="blue-grey"
+        :color="progressColor"
         height="25"
     >
         <template v-slot:default="{ value }">

frontend/src/utils/assignment-utils.ts

@@ -0,0 +1,5 @@
+import type {LearningPath} from "@/data-objects/learning-paths/learning-path.ts";
+
+export function calculateProgress(lp: LearningPath): number {
+    return ((lp.amountOfNodes - lp.amountOfNodesLeft) / lp.amountOfNodes) * 100;
+}

frontend/src/views/assignments/SingleAssignment.vue

@@ -1,13 +1,9 @@
 <script setup lang="ts">
     import auth from "@/services/auth/auth-service.ts";
-    import { computed, type Ref, ref, watchEffect } from "vue";
+    import { computed, ref } from "vue";
     import StudentAssignment from "@/views/assignments/StudentAssignment.vue";
     import TeacherAssignment from "@/views/assignments/TeacherAssignment.vue";
     import { useRoute } from "vue-router";
-    import type { Language } from "@/data-objects/language.ts";
-    import { useGetLearningPathQuery } from "@/queries/learning-paths.ts";
-    import type { LearningPath } from "@/data-objects/learning-paths/learning-path.ts";
-    import type { GroupDTO } from "@dwengo-1/common/interfaces/group";
 
     const role = auth.authState.activeRole;
     const isTeacher = computed(() => role === "teacher");
@@ -16,41 +12,6 @@
     const classId = ref<string>(route.params.classId as string);
     const assignmentId = ref(Number(route.params.id));
 
-    function useGroupsWithProgress(
-        groups: Ref<GroupDTO[]>,
-        hruid: Ref<string>,
-        language: Ref<Language>,
-    ): { groupProgressMap: Map<number, number>; } {
-        const groupProgressMap = ref(new Map<number, number>());
-
-        watchEffect(() => {
-            // Clear existing entries to avoid stale data
-            groupProgressMap.value.clear();
-
-            groups?.value.forEach((group) => {
-                const groupKey = group.groupNumber;
-                const query = useGetLearningPathQuery(
-                    hruid,
-                    language,
-                    () => ({
-                        forGroup: groupKey,
-                        assignmentNo: assignmentId.value,
-                        classId: classId.value,
-                    })
-                );
-
-                const data = query.data.value;
-
-                groupProgressMap.value.set(groupKey, data ? calculateProgress(data) : 0);
-            });
-        });
-
-        return {  groupProgressMap: groupProgressMap.value };
-    }
-
-    function calculateProgress(lp: LearningPath): number {
-        return ((lp.amountOfNodes - lp.amountOfNodesLeft) / lp.amountOfNodes) * 100;
-    }
 </script>
 
 <template>
@@ -63,7 +24,6 @@
     <StudentAssignment
         :class-id="classId"
         :assignment-id="assignmentId"
-        :use-groups-with-progress="useGroupsWithProgress"
         v-else
     >
     </StudentAssignment>

frontend/src/views/assignments/StudentAssignment.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-    import { ref, computed, type Ref } from "vue";
+import {ref, computed, type Ref, watchEffect} from "vue";
     import auth from "@/services/auth/auth-service.ts";
     import { useI18n } from "vue-i18n";
     import { useAssignmentQuery } from "@/queries/assignments.ts";
@@ -11,6 +11,7 @@
     import { useGetLearningPathQuery } from "@/queries/learning-paths.ts";
     import type { Language } from "@/data-objects/language.ts";
     import type { GroupDTO } from "@dwengo-1/common/interfaces/group";
+import {calculateProgress} from "@/utils/assignment-utils.ts";
 
     const props = defineProps<{
         classId: string;
@@ -23,7 +24,7 @@
     }>();
 
     const { t } = useI18n();
-    const lang = ref<Language>();
+    const lang = ref();
     const learningPath = ref();
     // Get the user's username/id
     const username = asyncComputed(async () => {
@@ -36,11 +37,6 @@
 
     const submitted = ref(false); //TODO: update by fetching submissions and check if group submitted
 
-    const lpQueryResult = useGetLearningPathQuery(
-        computed(() => assignmentQueryResult.data.value?.assignment?.learningPath ?? ""),
-        computed(() => assignmentQueryResult.data.value?.assignment?.language as Language),
-    );
-
     const groupsQueryResult = useGroupsQuery(props.classId, props.assignmentId, true);
     const group = computed(() =>
         groupsQueryResult?.data.value?.groups.find((group) =>
@@ -48,15 +44,27 @@
         ),
     );
 
-    const _groupArray = computed(() => (group.value ? [group.value] : []));
-    const progressValue = ref(0);
-    /* Crashes right now cause api data has inexistent hruid TODO: uncomment later and use it in progress bar
-Const {groupProgressMap} = props.useGroupsWithProgress(
-groupArray,
-learningPath,
-language
-);
-*/
+    watchEffect(() => {
+        learningPath.value = assignmentQueryResult.data.value?.assignment?.learningPath;
+        lang.value = assignmentQueryResult.data.value?.assignment?.language as Language;
+    });
+
+    const lpQueryResult = useGetLearningPathQuery(
+        () => learningPath.value,
+        () => lang.value,
+        () => ({
+            forGroup: group.value?.groupNumber ?? Number.NaN,
+            assignmentNo: props.assignmentId,
+            classId: props.classId,
+        }),
+    );
+
+    const progressColor = computed(() => {
+        const progress = calculateProgress(lpQueryResult.data.value);
+        if (progress >= 100) return "success";
+        if (progress >= 50) return "warning";
+        return "error";
+    });
 
     // Assuming group.value.members is a list of usernames TODO: case when it's StudentDTO's
     const studentQueries = useStudentsByUsernamesQuery(() => group.value?.members as string[]);
@@ -113,17 +121,15 @@ language
                     {{ data.assignment.description }}
                 </v-card-text>
                 <v-card-text>
-                    <v-row
-                        align="center"
-                        no-gutters
+                    <v-card-text>
+                        <h3 class="mb-2">{{ t("progress") }}</h3>
+                        <using-query-result
+                            :query-result="lpQueryResult"
+                            v-slot="{ data: learningPData }"
                         >
-                        <v-col cols="auto">
-                            <span class="progress-label">{{ t("progress") + ": " }}</span>
-                        </v-col>
-                        <v-col>
                             <v-progress-linear
-                                :model-value="progressValue"
-                                color="primary"
+                                :model-value="calculateProgress(learningPData)"
+                                :color="progressColor"
                                 height="20"
                                 class="progress-bar"
                             >
@@ -131,8 +137,9 @@ language
                                     <strong>{{ Math.ceil(value) }}%</strong>
                                 </template>
                             </v-progress-linear>
-                        </v-col>
-                    </v-row>
+                        </using-query-result>
+                    </v-card-text>
+
                 </v-card-text>
 
                 <v-card-text class="group-section">

frontend/src/views/assignments/TeacherAssignment.vue

@@ -8,8 +8,7 @@ import {computed, type Ref, ref, watchEffect} from "vue";
     import type { Language } from "@/data-objects/language.ts";
     import type { AssignmentResponse } from "@/controllers/assignments.ts";
     import type {GroupDTO, GroupDTOId} from "@dwengo-1/common/interfaces/group";
-import type {LearningPath} from "@/data-objects/learning-paths/learning-path.ts";
-import GroupProgressRow from "@/components/GroupProgressRow.vue";
+    import GroupProgressRow from "@/components/GroupProgressRow.vue";
 
     const props = defineProps<{
         classId: string;