From 5facb542904f9842610e39338731ac9052ff2b44 Mon Sep 17 00:00:00 2001
From: Joyelle Ndagijimana <njoyelle2@gmail.com>
Date: Sun, 4 May 2025 16:32:12 +0200
Subject: [PATCH] feat: leerkracht krijgt link naar indiening

---
 .../src/components/GroupSubmissionStatus.vue  |  40 ++++
 frontend/src/queries/assignments.ts           |   2 +-
 .../views/assignments/StudentAssignment.vue   |  30 +--
 .../views/assignments/TeacherAssignment.vue   | 184 ++++++++++--------
 4 files changed, 165 insertions(+), 91 deletions(-)
 create mode 100644 frontend/src/components/GroupSubmissionStatus.vue

diff --git a/frontend/src/components/GroupSubmissionStatus.vue b/frontend/src/components/GroupSubmissionStatus.vue
new file mode 100644
index 00000000..5641da58
--- /dev/null
+++ b/frontend/src/components/GroupSubmissionStatus.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type {Language} from "@/data-objects/language.ts";
+import {useI18n} from "vue-i18n";
+import UsingQueryResult from "@/components/UsingQueryResult.vue";
+import {useAssignmentSubmissionsQuery} from "@/queries/assignments.ts";
+import type {SubmissionsResponse} from "@/controllers/submissions.ts";
+
+const props = defineProps<{
+    lpHruid: string,
+    group: object;
+    assignmentId: number;
+    classId: string;
+    language: Language;
+    goToGroupSubmissionLink: (groupNo: number) => void;
+}>();
+
+const {t} = useI18n();
+// Call the submissions query
+const submissionsQuery = useAssignmentSubmissionsQuery(
+    () => props.classId,
+    () => props.assignmentId,
+    () => props.group.originalGroupNo,  // Using the classId for both class and group-related data
+    () => true
+);
+</script>
+
+<template>
+    <using-query-result
+        :query-result="submissionsQuery"
+        v-slot="{ data }: { data: SubmissionsResponse }"
+    >
+        <v-btn
+            :color="(data.submissions.length > 0) ? 'green' : 'red'"
+            variant="text"
+            :to="(data.submissions.length > 0) ? goToGroupSubmissionLink(props.group.groupNo) : undefined"
+        >
+            {{ (data.submissions.length > 0) ? t("see-submission") :  t("no-submission")}}
+        </v-btn>
+    </using-query-result>
+</template>
diff --git a/frontend/src/queries/assignments.ts b/frontend/src/queries/assignments.ts
index 2bb0a929..fb99c5b9 100644
--- a/frontend/src/queries/assignments.ts
+++ b/frontend/src/queries/assignments.ts
@@ -181,7 +181,7 @@ export function useAssignmentSubmissionsQuery(
 
     return useQuery({
         queryKey: computed(() => assignmentSubmissionsQueryKey(cid!, an!, f)),
-        queryFn: async () => new AssignmentController(cid!).getSubmissions(gn!, f),
+        queryFn: async () => new AssignmentController(cid!).getSubmissions(an!, f),
         enabled: () => checkEnabled(cid, an, gn),
     });
 }
diff --git a/frontend/src/views/assignments/StudentAssignment.vue b/frontend/src/views/assignments/StudentAssignment.vue
index defb8d71..077540a5 100644
--- a/frontend/src/views/assignments/StudentAssignment.vue
+++ b/frontend/src/views/assignments/StudentAssignment.vue
@@ -16,11 +16,6 @@ import {calculateProgress} from "@/utils/assignment-utils.ts";
     const props = defineProps<{
         classId: string;
         assignmentId: number;
-        useGroupsWithProgress: (
-            groups: Ref<GroupDTO[]>,
-            hruid: Ref<string>,
-            language: Ref<Language>,
-        ) => { groupProgressMap: Map<number, number> };
     }>();
 
     const { t } = useI18n();
@@ -38,13 +33,26 @@ import {calculateProgress} from "@/utils/assignment-utils.ts";
     const submitted = ref(false); //TODO: update by fetching submissions and check if group submitted
 
     const groupsQueryResult = useGroupsQuery(props.classId, props.assignmentId, true);
-    const group = computed(() =>
-        groupsQueryResult?.data.value?.groups.find((group) =>
-            group.members?.some((m) => m.username === username.value),
-        ),
-    );
+    const group = computed(() => {
+        const groups = groupsQueryResult.data.value?.groups;
 
-    watchEffect(() => {
+        if (!groups) return undefined;
+
+        // Sort by original groupNumber
+        const sortedGroups = [...groups].sort((a, b) => a.groupNumber - b.groupNumber);
+
+        return sortedGroups
+            .map((group, index) => ({
+                ...group,
+                groupNo: index + 1, // Renumbered index
+            }))
+            .find((group) =>
+                group.members?.some((m) => m.username === username.value),
+            );
+    });
+
+
+watchEffect(() => {
         learningPath.value = assignmentQueryResult.data.value?.assignment?.learningPath;
         lang.value = assignmentQueryResult.data.value?.assignment?.language as Language;
     });
diff --git a/frontend/src/views/assignments/TeacherAssignment.vue b/frontend/src/views/assignments/TeacherAssignment.vue
index c4942e0f..79b9a228 100644
--- a/frontend/src/views/assignments/TeacherAssignment.vue
+++ b/frontend/src/views/assignments/TeacherAssignment.vue
@@ -1,79 +1,105 @@
 <script setup lang="ts">
-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";
-    import { useGroupsQuery } from "@/queries/groups.ts";
-    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, GroupDTOId} from "@dwengo-1/common/interfaces/group";
-    import GroupProgressRow from "@/components/GroupProgressRow.vue";
+import {computed, ref, watchEffect} from "vue";
+import {useI18n} from "vue-i18n";
+import {useAssignmentQuery, useDeleteAssignmentMutation} from "@/queries/assignments.ts";
+import UsingQueryResult from "@/components/UsingQueryResult.vue";
+import {useGroupsQuery} from "@/queries/groups.ts";
+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, GroupDTOId} from "@dwengo-1/common/interfaces/group";
+import GroupProgressRow from "@/components/GroupProgressRow.vue";
+import GroupSubmissionStatus from "@/components/GroupSubmissionStatus.vue";
 
-    const props = defineProps<{
-        classId: string;
-        assignmentId: number;
-    }>();
+const props = defineProps<{
+    classId: string;
+    assignmentId: number;
+}>();
 
-    const { t } = useI18n();
-    const lang = ref();
-    const groups = ref<GroupDTO[] | GroupDTOId[]>([]);
-    const learningPath = ref();
+const {t} = useI18n();
+const lang = ref();
+const groups = ref<GroupDTO[] | GroupDTOId[]>([]);
+const learningPath = ref();
 
-    const assignmentQueryResult = useAssignmentQuery(() => props.classId, props.assignmentId);
-    // Get learning path object
-    const lpQueryResult = useGetLearningPathQuery(
-        computed(() => assignmentQueryResult.data.value?.assignment?.learningPath ?? ""),
-        computed(() => assignmentQueryResult.data.value?.assignment?.language as Language),
-    );
+const assignmentQueryResult = useAssignmentQuery(() => props.classId, props.assignmentId);
+// Get learning path object
+const lpQueryResult = useGetLearningPathQuery(
+    computed(() => assignmentQueryResult.data.value?.assignment?.learningPath ?? ""),
+    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 ?? [];
+// Get all the groups withing the assignment
+const groupsQueryResult = useGroupsQuery(props.classId, props.assignmentId, true);
+groups.value = groupsQueryResult.data.value?.groups ?? [];
 
-    watchEffect(() => {
-        learningPath.value = assignmentQueryResult.data.value?.assignment?.learningPath;
-        lang.value = assignmentQueryResult.data.value?.assignment?.language as Language;
-    });
+watchEffect(() => {
+    learningPath.value = assignmentQueryResult.data.value?.assignment?.learningPath;
+    lang.value = assignmentQueryResult.data.value?.assignment?.language as Language;
+});
 
 
-    const allGroups = computed(() => {
-            const groups = groupsQueryResult.data.value?.groups;
+const allGroups = computed(() => {
+    const groups = groupsQueryResult.data.value?.groups;
 
-            return groups?.map((group) => ({
-                groupNo: group.groupNumber,
-                name: `${t("group")} ${group.groupNumber}`,
-                members: group.members,
-                submitted: false, //TODO: fetch from submission
-            }));
-        });
+    if (!groups) return [];
 
-    const dialog = ref(false);
-    const selectedGroup = ref({});
+    // Sort by original groupNumber
+    const sortedGroups = [...groups].sort((a, b) => a.groupNumber - b.groupNumber);
 
-    function openGroupDetails(group): void {
-        selectedGroup.value = group;
-        dialog.value = true;
-    }
+    // Assign new sequential numbers starting from 1
+    return sortedGroups.map((group, index) => ({
+        groupNo: index + 1, // New group number that will be used
+        name: `${t("group")} ${index + 1}`,
+        members: group.members,
+        submitted: false, // TODO: fetch from submission
+        originalGroupNo: group.groupNumber, // Keep original number if needed
+    }));
+});
 
-    const headers = computed(() => [
-        { title: t("group"), align: "start", key: "name" },
-        { title: t("progress"), align: "center", key: "progress" },
-        { title: t("submission"), align: "center", key: "submission" },
-    ]);
 
-    const { mutate } = useDeleteAssignmentMutation();
+const dialog = ref(false);
+const selectedGroup = ref({});
 
-    async function deleteAssignment(num: number, clsId: string): Promise<void> {
-        mutate(
-            { cid: clsId, an: num },
-            {
-                onSuccess: () => {
-                    window.location.href = "/user/assignment";
-                },
+function openGroupDetails(group): void {
+    selectedGroup.value = group;
+    dialog.value = true;
+}
+
+const headers = computed(() => [
+    {title: t("group"), align: "start", key: "name"},
+    {title: t("progress"), align: "center", key: "progress"},
+    {title: t("submission"), align: "center", key: "submission"},
+]);
+
+const {mutate} = useDeleteAssignmentMutation();
+
+async function deleteAssignment(num: number, clsId: string): Promise<void> {
+    mutate(
+        {cid: clsId, an: num},
+        {
+            onSuccess: () => {
+                window.location.href = "/user/assignment";
             },
-        );
-    }
+        },
+    );
+}
+
+function goToLearningPathLink(): string | undefined {
+    const assignment = assignmentQueryResult.data.value?.assignment;
+    const lp = lpQueryResult.data.value;
+
+    if (!assignment || !lp) return undefined;
+
+    return `/learningPath/${lp.hruid}/${assignment.language}/${lp.startNode.learningobjectHruid}?assignmentNo=${props.assignmentId}&classId=${props.classId}`;
+}
+
+function goToGroupSubmissionLink(groupNo: number): string | undefined {
+    const lp = lpQueryResult.data.value;
+    if (!lp) return undefined;
+
+    return `/learningPath/${lp.hruid}/${lp.language}/${lp.startNode.learningobjectHruid}?forGroup=${groupNo}&assignmentNo=${props.assignmentId}&classId=${props.classId}`;
+}
+
 </script>
 
 <template>
@@ -113,7 +139,7 @@ import {computed, type Ref, ref, watchEffect} from "vue";
                     >
                         <v-btn
                             v-if="lpData"
-                            :to="`/learningPath/${lpData.hruid}/${assignmentQueryResult.data.value?.assignment?.language}/${lpData.startNode.learningobjectHruid}?assignmentNo=${assignmentId}&classId=${classId}`"
+                            :to="goToLearningPathLink()"
                             variant="tonal"
                             color="primary"
                         >
@@ -147,7 +173,7 @@ import {computed, type Ref, ref, watchEffect} from "vue";
 
                             <template #[`item.progress`]="{ item }">
                                 <GroupProgressRow
-                                    :group-number="item.groupNo"
+                                    :group-number="item.originalGroupNo"
                                     :learning-path="learningPath"
                                     :language="lang"
                                     :assignment-id="assignmentId"
@@ -155,16 +181,15 @@ import {computed, type Ref, ref, watchEffect} from "vue";
                                 />
                             </template>
 
-
                             <template #[`item.submission`]="{ item }">
-                                <v-btn
-                                    :to="item.submitted ? `${props.assignmentId}/submissions/` : undefined"
-                                    :color="item.submitted ? 'green' : 'red'"
-                                    variant="text"
-                                    class="text-capitalize"
-                                >
-                                    {{ item.submitted ? t("see-submission") : t("no-submission") }}
-                                </v-btn>
+                                <GroupSubmissionStatus
+                                    :lp-hruid="learningPath"
+                                    :group="item"
+                                    :assignmentId="assignmentId"
+                                    :class-id="classId"
+                                    :language="lang"
+                                    :go-to-group-submission-link="goToGroupSubmissionLink"
+                                />
                             </template>
                         </v-data-table>
                     </div>
@@ -184,7 +209,7 @@ import {computed, type Ref, ref, watchEffect} from "vue";
                                 >
                                     <v-list-item-content>
                                         <v-list-item-title
-                                            >{{ member.firstName + " " + member.lastName }}
+                                        >{{ member.firstName + " " + member.lastName }}
                                         </v-list-item-title>
                                     </v-list-item-content>
                                 </v-list-item>
@@ -194,7 +219,8 @@ import {computed, type Ref, ref, watchEffect} from "vue";
                             <v-btn
                                 color="primary"
                                 @click="dialog = false"
-                                >Close</v-btn
+                            >Close
+                            </v-btn
                             >
                         </v-card-actions>
                     </v-card>
@@ -216,10 +242,10 @@ import {computed, type Ref, ref, watchEffect} from "vue";
 </template>
 
 <style scoped>
-    @import "@/assets/assignment.css";
+@import "@/assets/assignment.css";
 
-    .table-scroll {
-        overflow-x: auto;
-        -webkit-overflow-scrolling: touch;
-    }
+.table-scroll {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+}
 </style>