feat: leerkracht kan progress van groepen zien

frontend/src/components/GroupProgressRow.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+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";
+
+const props = defineProps<{
+    groupNumber: number;
+    learningPath: string;
+    language: Language;
+    assignmentId: number;
+    classId: string;
+}>();
+
+function calculateProgress(lp: LearningPath): number {
+    return ((lp.amountOfNodes - lp.amountOfNodesLeft) / lp.amountOfNodes) * 100;
+}
+
+const query = useGetLearningPathQuery(
+    () => props.learningPath,
+    () => props.language,
+    () => ({
+        forGroup: props.groupNumber,
+        assignmentNo: props.assignmentId,
+        classId: props.classId,
+    }),
+);
+
+const progress = computed(() => {
+    if (!query.data.value) return 0;
+    return calculateProgress(query.data.value);
+});
+</script>
+
+<template>
+    <v-progress-linear
+        :model-value="progress"
+        color="blue-grey"
+        height="25"
+    >
+        <template v-slot:default="{ value }">
+            <strong>{{ Math.ceil(value) }}%</strong>
+        </template>
+    </v-progress-linear>
+</template>

frontend/src/views/assignments/SingleAssignment.vue

@@ -19,35 +19,33 @@
     function useGroupsWithProgress(
         groups: Ref<GroupDTO[]>,
         hruid: Ref<string>,
-        language: Ref<string>,
+        language: Ref<Language>,
-    ): { groupProgressMap: Map<number, number> } {
+    ): { groupProgressMap: Map<number, number>; } {
-        const groupProgressMap: Map<number, number> = new Map<number, number>();
+        const groupProgressMap = ref(new Map<number, number>());
 
         watchEffect(() => {
             // Clear existing entries to avoid stale data
-            groupProgressMap.clear();
+            groupProgressMap.value.clear();
 
-            const lang = ref(language.value as Language);
+            groups?.value.forEach((group) => {
-
-            groups.value.forEach((group) => {
                 const groupKey = group.groupNumber;
-                const forGroup = ref({
+                const query = useGetLearningPathQuery(
-                    forGroup: groupKey,
+                    hruid,
-                    assignmentNo: assignmentId,
+                    language,
-                    classId: classId,
+                    () => ({
-                });
+                        forGroup: groupKey,
-
+                        assignmentNo: assignmentId.value,
-                const query = useGetLearningPathQuery(hruid.value, lang, forGroup);
+                        classId: classId.value,
+                    })
+                );
 
                 const data = query.data.value;
 
-                groupProgressMap.set(groupKey, data ? calculateProgress(data) : 0);
+                groupProgressMap.value.set(groupKey, data ? calculateProgress(data) : 0);
             });
         });
 
-        return {
+        return {  groupProgressMap: groupProgressMap.value };
-            groupProgressMap,
-        };
     }
 
     function calculateProgress(lp: LearningPath): number {
@@ -59,7 +57,6 @@
     <TeacherAssignment
         :class-id="classId"
         :assignment-id="assignmentId"
-        :use-groups-with-progress="useGroupsWithProgress"
         v-if="isTeacher"
     >
     </TeacherAssignment>

frontend/src/views/assignments/StudentAssignment.vue

@@ -22,8 +22,8 @@
         ) => { groupProgressMap: Map<number, number> };
     }>();
 
-    const { t, locale } = useI18n();
+    const { t } = useI18n();
-    const language = ref<Language>(locale.value as Language);
+    const lang = ref<Language>();
     const learningPath = ref();
     // Get the user's username/id
     const username = asyncComputed(async () => {
@@ -38,7 +38,7 @@
 
     const lpQueryResult = useGetLearningPathQuery(
         computed(() => assignmentQueryResult.data.value?.assignment?.learningPath ?? ""),
-        computed(() => language.value),
+        computed(() => assignmentQueryResult.data.value?.assignment?.language as Language),
     );
 
     const groupsQueryResult = useGroupsQuery(props.classId, props.assignmentId, true);
@@ -100,7 +100,7 @@ language
                     >
                         <v-btn
                             v-if="lpData"
-                            :to="`/learningPath/${lpData.hruid}/${language}/${lpData.startNode.learningobjectHruid}?forGroup=${group?.groupNumber}&assignmentNo=${assignmentId}&classId=${classId}`"
+                            :to="`/learningPath/${lpData.hruid}/${assignmentQueryResult.data.value?.assignment?.language}/${lpData.startNode.learningobjectHruid}?forGroup=${group?.groupNumber}&assignmentNo=${assignmentId}&classId=${classId}`"
                             variant="tonal"
                             color="primary"
                         >

frontend/src/views/assignments/TeacherAssignment.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-    import { computed, type Ref, ref } from "vue";
+import {computed, type Ref, ref, watchEffect} from "vue";
     import { useI18n } from "vue-i18n";
     import { useAssignmentQuery, useDeleteAssignmentMutation } from "@/queries/assignments.ts";
     import UsingQueryResult from "@/components/UsingQueryResult.vue";
@@ -7,54 +7,47 @@
     import { useGetLearningPathQuery } from "@/queries/learning-paths.ts";
     import type { Language } from "@/data-objects/language.ts";
     import type { AssignmentResponse } from "@/controllers/assignments.ts";
-    import type { GroupDTO } from "@dwengo-1/common/interfaces/group";
+    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";
 
     const props = defineProps<{
         classId: string;
         assignmentId: number;
-        useGroupsWithProgress: (
-            groups: Ref<GroupDTO[]>,
-            hruid: Ref<string>,
-            language: Ref<Language>,
-        ) => { groupProgressMap: Map<number, number> };
     }>();
 
-    const { t, locale } = useI18n();
+    const { t } = useI18n();
-    const language = computed(() => locale.value);
+    const lang = ref();
-    const groups = ref();
+    const groups = ref<GroupDTO[] | GroupDTOId[]>([]);
     const learningPath = ref();
 
     const assignmentQueryResult = useAssignmentQuery(() => props.classId, props.assignmentId);
-    learningPath.value = assignmentQueryResult.data.value?.assignment?.learningPath;
     // Get learning path object
     const lpQueryResult = useGetLearningPathQuery(
         computed(() => assignmentQueryResult.data.value?.assignment?.learningPath ?? ""),
-        computed(() => language.value as Language),
+        computed(() => assignmentQueryResult.data.value?.assignment?.language as Language),
     );
 
     // Get all the groups withing the assignment
     const groupsQueryResult = useGroupsQuery(props.classId, props.assignmentId, true);
-    groups.value = groupsQueryResult.data.value?.groups;
+    groups.value = groupsQueryResult.data.value?.groups ?? [];
+
+    watchEffect(() => {
+        learningPath.value = assignmentQueryResult.data.value?.assignment?.learningPath;
+        lang.value = assignmentQueryResult.data.value?.assignment?.language as Language;
+    });
 
-    /* Crashes right now cause api data has inexistent hruid TODO: uncomment later and use it in progress bar
-Const {groupProgressMap} = props.useGroupsWithProgress(
-    groups,
-    learningPath,
-    language
-);
-*/
 
     const allGroups = computed(() => {
-        const groups = groupsQueryResult.data.value?.groups;
+            const groups = groupsQueryResult.data.value?.groups;
-        if (!groups) return [];
 
-        return groups.map((group) => ({
+            return groups?.map((group) => ({
-            name: `${t("group")} ${group.groupNumber}`,
+                groupNo: group.groupNumber,
-            progress: 0, //GroupProgressMap[group.groupNumber],
+                name: `${t("group")} ${group.groupNumber}`,
-            members: group.members,
+                members: group.members,
-            submitted: false, //TODO: fetch from submission
+                submitted: false, //TODO: fetch from submission
-        }));
+            }));
-    });
+        });
 
     const dialog = ref(false);
     const selectedGroup = ref({});
@@ -121,7 +114,7 @@ Const {groupProgressMap} = props.useGroupsWithProgress(
                     >
                         <v-btn
                             v-if="lpData"
-                            :to="`/learningPath/${lpData.hruid}/${language}/${lpData.startNode.learningobjectHruid}?assignmentNo=${assignmentId}&classId=${classId}`"
+                            :to="`/learningPath/${lpData.hruid}/${assignmentQueryResult.data.value?.assignment?.language}/${lpData.startNode.learningobjectHruid}?assignmentNo=${assignmentId}&classId=${classId}`"
                             variant="tonal"
                             color="primary"
                         >
@@ -154,17 +147,16 @@ Const {groupProgressMap} = props.useGroupsWithProgress(
                             </template>
 
                             <template #[`item.progress`]="{ item }">
-                                <v-progress-linear
+                                <GroupProgressRow
-                                    :model-value="item.progress"
+                                    :group-number="item.groupNo"
-                                    color="blue-grey"
+                                    :learning-path="learningPath"
-                                    height="25"
+                                    :language="lang"
-                                >
+                                    :assignment-id="assignmentId"
-                                    <template v-slot:default="{ value }">
+                                    :class-id="classId"
-                                        <strong>{{ Math.ceil(value) }}%</strong>
+                                />
-                                    </template>
-                                </v-progress-linear>
                             </template>
 
+
                             <template #[`item.submission`]="{ item }">
                                 <v-btn
                                     :to="item.submitted ? `${props.assignmentId}/submissions/` : undefined"