feat: leerkracht krijgt link naar indiening

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>

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),
     });
 }

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,11 +33,24 @@ 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) =>
+    const group = computed(() => {
+        const groups = groupsQueryResult.data.value?.groups;
+
+        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;

frontend/src/views/assignments/TeacherAssignment.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {computed, type Ref, ref, watchEffect} from "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";
@@ -9,6 +9,7 @@ import {computed, type Ref, ref, watchEffect} from "vue";
 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;
@@ -40,14 +41,22 @@ import {computed, type Ref, ref, watchEffect} from "vue";
 const allGroups = computed(() => {
     const groups = groupsQueryResult.data.value?.groups;
 
-            return groups?.map((group) => ({
-                groupNo: group.groupNumber,
-                name: `${t("group")} ${group.groupNumber}`,
+    if (!groups) return [];
+
+    // Sort by original groupNumber
+    const sortedGroups = [...groups].sort((a, b) => a.groupNumber - b.groupNumber);
+
+    // 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 dialog = ref(false);
 const selectedGroup = ref({});
 
@@ -74,6 +83,23 @@ import {computed, type Ref, ref, watchEffect} from "vue";
         },
     );
 }
+
+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>
@@ -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>