feat(frontend): groups in assignments ophalen

frontend/src/views/assignments/SingleAssignment.vue

@@ -1,18 +1,48 @@
 <script setup lang="ts">
 
 import auth from "@/services/auth/auth-service.ts";
-import {computed} from "vue";
+import {computed, ref} from "vue";
 import StudentAssignment from "@/views/assignments/StudentAssignment.vue";
 import TeacherAssignment from "@/views/assignments/TeacherAssignment.vue";
+import {asyncComputed} from "@vueuse/core";
+import {GroupController} from "@/controllers/groups.ts";
+import {useRoute} from "vue-router";
 
 const role = auth.authState.activeRole;
 const isTeacher = computed(() => role === 'teacher');
 
+// Get the user's username/id
+const username = asyncComputed(async () => {
+    const user = await auth.loadUser();
+    return user?.profile?.preferred_username ?? undefined
+});
+
+const route = useRoute();
+const assignmentId = ref(Number(route.params.id));
+const classId = window.history.state?.class_id;
+
+const groupController = new GroupController(classId, assignmentId.value);
+
+const groupDTOs = asyncComputed(async () => await groupController.getAll(true));
+console.log(groupDTOs.value);
+
 </script>
 
 <template>
-    <StudentAssignment v-if="!isTeacher"></StudentAssignment>
-    <TeacherAssignment v-else></TeacherAssignment>
+    <TeacherAssignment
+        :class-id="classId"
+        :assignment-id="assignmentId"
+        :groups="groupDTOs"
+        v-if="isTeacher"
+    >
+    </TeacherAssignment>
+    <StudentAssignment
+        :class-id="classId"
+        :assignment-id="assignmentId"
+        :groups="groupDTOs"
+        v-else
+    >
+    </StudentAssignment>
 </template>
 
 <style scoped>

frontend/src/views/assignments/StudentAssignment.vue

@@ -1,21 +1,29 @@
 <script setup lang="ts">
-import { useRoute } from "vue-router";
-import {ref, computed} from "vue";
+import {ref, computed, defineProps} from "vue";
+import auth from "@/services/auth/auth-service.ts";
 import {useI18n} from "vue-i18n";
-import {AssignmentController} from "@/controllers/assignments.ts";
+import {useAssignmentQuery} from "@/queries/assignments.ts";
+import UsingQueryResult from "@/components/UsingQueryResult.vue";
+import type {AssignmentResponse} from "@/controllers/assignments.ts";
+import type {GroupDTO} from "@dwengo-1/common/interfaces/group";
 import {asyncComputed} from "@vueuse/core";
+import {useStudentsByUsernamesQuery} from "@/queries/students.ts";
 
+const props = defineProps<{
+    classId: string
+    assignmentId: number
+    groups: GroupDTO[] | undefined
+}>();
 
 const {t, locale} = useI18n();
 const language = computed(() => locale.value);
-const route = useRoute();
-const assignmentId = ref(Number(route.params.id));
-const classId = window.history.state?.class_id;
-const controller = new AssignmentController(classId);
+// Get the user's username/id
+const username = asyncComputed(async () => {
+    const user = await auth.loadUser();
+    return user?.profile?.preferred_username ?? undefined
+});
 
-const assignment = asyncComputed(async () => {
-    return await controller.getByNumber(assignmentId.value)
-}, null);
+const assignmentQueryResult = useAssignmentQuery(() => props.classId, props.assignmentId);
 
 const submitted = ref(true);//TODO: update by fetching submissions and check group
 
@@ -23,83 +31,83 @@ const submitAssignment = async () => {
     //TODO
 };
 
+const group = computed(() => {
+    return props?.groups?.find(group =>
+        group.members.some(m => m.username === username.value)
+    );
+});
 
-/***
- // Display group members
- const myGroup = computed(() => {
- if (!assignment.value || !assignment.value.groups) return null;
- console.log(assignment.value.groups)
- return assignment.value.groups.find(group =>
- group.members.some(m => m.username === myUsername)
- );
- });
- */
+// Assuming group.value.members is a list of usernames
+const studentQueries = useStudentsByUsernamesQuery(() => group.value?.members as string[]);
 
 </script>
 
 <template>
     <div class="container">
-        <v-card v-if="assignment" class="assignment-card">
-            <div class="top-buttons">
-                <v-btn
-                    icon
-                    variant="text"
-                    class="back-btn"
-                    to="/user/assignment"
-                >
-                    <v-icon>mdi-arrow-left</v-icon>
-                </v-btn>
+        <using-query-result
+            :query-result="assignmentQueryResult"
+            v-slot="{ data }: {data: AssignmentResponse}"
+        >
+            <v-card v-if="data" class="assignment-card">
+                <div class="top-buttons">
+                    <v-btn
+                        icon
+                        variant="text"
+                        class="back-btn"
+                        to="/user/assignment"
+                    >
+                        <v-icon>mdi-arrow-left</v-icon>
+                    </v-btn>
 
-                <v-chip
-                    class="ma-2 top-right-btn"
-                    label
-                    color="success"
-                >
-                    {{ t("submitted") }}
-                </v-chip>
-            </div>
-            <v-card-title class="text-h4">{{ assignment.title }}</v-card-title>
-            <v-card-subtitle class="subtitle-section">
-                <v-btn
-                    :to="`/learningPath/${language}/${assignment.learningPath}`"
-                    variant="tonal"
-                    color="primary"
-                >
-                    {{ t("learning-path") }}
-                </v-btn>
-            </v-card-subtitle>
+                    <v-chip
+                        v-if="submitted"
+                        class="ma-2 top-right-btn"
+                        label
+                        color="success"
+                    >
+                        {{ t("submitted") }}
+                    </v-chip>
+                </div>
+                <v-card-title class="text-h4">{{ data.title }}</v-card-title>
+                <v-card-subtitle class="subtitle-section">
+                    <v-btn
+                        :to="`/learningPath/${language}/${data.learningPath}`"
+                        variant="tonal"
+                        color="primary"
+                    >
+                        {{ t("learning-path") }}
+                    </v-btn>
+                </v-card-subtitle>
 
-            <v-card-text class="description">
-                {{ assignment.description }}
-            </v-card-text>
+                <v-card-text class="description">
+                    {{ data.description }}
+                </v-card-text>
 
-            <v-card-text class="group-section">
-                <h3>{{ t("group") }}</h3>
-
-                <!-- Student view
-                <div v-if="!isTeacher">
-                    <div v-if="myGroup">
+                <v-card-text class="group-section">
+                    <h3>{{ t("group") }}</h3>
+                    <pre>{{ props.groups }}</pre>
+                    <div v-if="studentQueries">
                         <ul>
-                            <li v-for="student in myGroup.members" :key="student.username">
-                                {{ student.firstName + ' ' + student.lastName}}
+                            <li v-for="student in studentQueries" :key="student.data?.student.id">
+                                {{ student.data?.student.firstName + ' ' + student.data?.student.lastName }}
                             </li>
                         </ul>
                     </div>
-                </div>-->
 
-            </v-card-text >
-            <v-card-actions class="justify-end">
-                <v-btn
-                    size="large"
-                    color="success"
-                    variant="flat"
-                    @click="submitAssignment"
-                >
-                    {{ t("submit") }}
-                </v-btn>
-            </v-card-actions>
+                </v-card-text>
+                <v-card-actions class="justify-end">
+                    <v-btn
+                        size="large"
+                        color="success"
+                        variant="flat"
+                        @click="submitAssignment"
+                    >
+                        {{ t("submit") }}
+                    </v-btn>
+                </v-card-actions>
 
-        </v-card>
+            </v-card>
+        </using-query-result>
     </div>
 </template>
 

frontend/src/views/assignments/TeacherAssignment.vue

@@ -1,20 +1,22 @@
 <script setup lang="ts">
-import {useRoute} from "vue-router";
-import {ref, computed} from "vue";
+import {computed, defineProps} from "vue";
 import {useI18n} from "vue-i18n";
 import {AssignmentController, type AssignmentResponse} from "@/controllers/assignments.ts";
 import {useAssignmentQuery} from "@/queries/assignments.ts";
 import UsingQueryResult from "@/components/UsingQueryResult.vue";
+import type {GroupDTO} from "@dwengo-1/common/interfaces/group";
 
+const props = defineProps<{
+    classId: string
+    assignmentId: number
+    groups: GroupDTO[] | undefined
+}>();
 
 const {t, locale} = useI18n();
 const language = computed(() => locale.value);
-const route = useRoute();
-const assignmentId = ref(Number(route.params.id));
-const classId = window.history.state?.class_id;
-const controller = new AssignmentController(classId);
+const controller = new AssignmentController(props.classId);
 
-const assignmentQueryResult = useAssignmentQuery(() => classId, assignmentId);
+const assignmentQueryResult = useAssignmentQuery(() => props.classId, props.assignmentId);
 
 /***
  // Display group members
@@ -28,7 +30,7 @@ const assignmentQueryResult = useAssignmentQuery(() => classId, assignmentId);
  */
 
 const deleteAssignment = async () => {
-    await controller.deleteAssignment(assignmentId.value);
+    await controller.deleteAssignment(props.assignmentId.value);
 };
 
 </script>

frontend/src/views/assignments/UserAssignments.vue

@@ -30,6 +30,7 @@ if (isTeacher.value) {
 //TODO: replace with query from classes
 const classController = new ClassController();
 
+//TODO: replace by query that fetches all user's assignment
 const assignments = asyncComputed(async () => {
     const classes = classesQueryResults?.data?.value?.classes;
     if (!classes) return [];