feat(frontend): Leerkrachten kunnen indieningen van verschillende groepen bekijken

frontend/src/views/learning-paths/LearningPathGroupSelector.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+    import UsingQueryResult from "@/components/UsingQueryResult.vue";
+    import {useGroupsQuery} from "@/queries/groups.ts";
+    import type {GroupsResponse} from "@/controllers/groups.ts";
+    import {useI18n} from "vue-i18n";
+    import type {GroupDTO} from "@dwengo-1/common/interfaces/group";
+
+    const { t } = useI18n();
+
+    const props = defineProps<{
+        classId: string,
+        assignmentNumber: number
+    }>();
+
+    const model = defineModel<number | undefined>({default: undefined});
+
+    const groupsQuery = useGroupsQuery(props.classId, props.assignmentNumber, true);
+
+    interface GroupSelectorOption {
+        groupNumber: number | undefined,
+        label: string
+    }
+
+    function groupOptions(groups: GroupDTO[]): GroupSelectorOption[] {
+        return [...groups]
+            .sort((a, b) => a.groupNumber - b.groupNumber)
+            .map((group, index) => ({
+                groupNumber: group.groupNumber,
+                label: `${index + 1}`
+            }));
+    }
+</script>
+
+<template>
+    <using-query-result
+        :query-result="groupsQuery"
+        v-slot="{ data }: { data: GroupsResponse }"
+    >
+        <v-select
+            :label="t('viewAsGroup')"
+            :items="groupOptions(data.groups)"
+            v-model="model"
+            item-title="label"
+            class="group-selector-cb"
+            variant="outlined"
+            clearable
+        ></v-select>
+    </using-query-result>
+</template>
+
+<style scoped>
+    .group-selector-cb {
+        margin-top: 10px;
+    }
+</style>

frontend/src/views/learning-paths/LearningPathPage.vue

@@ -3,7 +3,7 @@
     import type { LearningPath } from "@/data-objects/learning-paths/learning-path.ts";
     import { computed, type ComputedRef, ref } from "vue";
     import type { LearningObject } from "@/data-objects/learning-objects/learning-object.ts";
-    import { useRoute } from "vue-router";
+    import {useRoute, useRouter} from "vue-router";
     import LearningObjectView from "@/views/learning-paths/learning-object/LearningObjectView.vue";
     import { useI18n } from "vue-i18n";
     import LearningPathSearchField from "@/components/LearningPathSearchField.vue";
@@ -12,7 +12,9 @@
     import UsingQueryResult from "@/components/UsingQueryResult.vue";
     import authService from "@/services/auth/auth-service.ts";
     import { LearningPathNode } from "@/data-objects/learning-paths/learning-path-node.ts";
+    import LearningPathGroupSelector from "@/views/learning-paths/LearningPathGroupSelector.vue";
 
+    const router = useRouter();
     const route = useRoute();
     const { t } = useI18n();
 
@@ -103,6 +105,15 @@
         }
         return "notCompleted";
     }
+
+    const forGroupQueryParam = computed<number | undefined>({
+        get: () => route.query.forGroup,
+        set: (value: number | undefined) => {
+            let query = structuredClone(route.query);
+            query.forGroup = value;
+            router.push({ query });
+        }
+    });
 </script>
 
 <template>
@@ -147,6 +158,15 @@
                     </p>
                 </template>
             </v-list-item>
+            <v-list-item v-if="query.classId && query.assignmentNo && authService.authState.activeRole === 'teacher'">
+                <template v-slot:default>
+                    <learning-path-group-selector
+                        :class-id="query.classId"
+                        :assignment-number="parseInt(query.assignmentNo)"
+                        v-model="forGroupQueryParam"
+                    />
+                </template>
+            </v-list-item>
             <v-divider></v-divider>
             <div v-if="props.learningObjectHruid">
                 <using-query-result