From 149e4e80fc14fa10c63d1c97515872ea1febabc0 Mon Sep 17 00:00:00 2001
From: Joyelle Ndagijimana <njoyelle2@gmail.com>
Date: Sun, 18 May 2025 09:24:02 +0200
Subject: [PATCH] fix: 403 error bij het opvragen van een opdracht

---
 .../views/assignments/StudentAssignment.vue   | 169 ++++----
 .../src/views/assignments/UserAssignments.vue | 377 +++++++++---------
 2 files changed, 277 insertions(+), 269 deletions(-)

diff --git a/frontend/src/views/assignments/StudentAssignment.vue b/frontend/src/views/assignments/StudentAssignment.vue
index 15b99939..e9b90573 100644
--- a/frontend/src/views/assignments/StudentAssignment.vue
+++ b/frontend/src/views/assignments/StudentAssignment.vue
@@ -1,90 +1,103 @@
 <script setup lang="ts">
-    import { ref, computed, watchEffect } from "vue";
-    import auth from "@/services/auth/auth-service.ts";
-    import { useI18n } from "vue-i18n";
-    import { useAssignmentQuery } from "@/queries/assignments.ts";
-    import UsingQueryResult from "@/components/UsingQueryResult.vue";
-    import type { AssignmentResponse } from "@/controllers/assignments.ts";
-    import { asyncComputed } from "@vueuse/core";
-    import { useStudentGroupsQuery, useStudentsByUsernamesQuery } from "@/queries/students.ts";
-    import { useGetLearningPathQuery } from "@/queries/learning-paths.ts";
-    import type { Language } from "@/data-objects/language.ts";
-    import { calculateProgress } from "@/utils/assignment-utils.ts";
-    import type { LearningPath } from "@/data-objects/learning-paths/learning-path.ts";
+import {ref, computed, watchEffect} from "vue";
+import auth from "@/services/auth/auth-service.ts";
+import {useI18n} from "vue-i18n";
+import UsingQueryResult from "@/components/UsingQueryResult.vue";
+import type {AssignmentsResponse} from "@/controllers/assignments.ts";
+import {asyncComputed} from "@vueuse/core";
+import {
+    useStudentAssignmentsQuery,
+    useStudentGroupsQuery,
+    useStudentsByUsernamesQuery
+} from "@/queries/students.ts";
+import {useGetLearningPathQuery} from "@/queries/learning-paths.ts";
+import type {Language} from "@/data-objects/language.ts";
+import {calculateProgress} from "@/utils/assignment-utils.ts";
+import type {LearningPath} from "@/data-objects/learning-paths/learning-path.ts";
 
-    const props = defineProps<{
-        classId: string;
-        assignmentId: number;
-    }>();
+const props = defineProps<{
+    classId: string;
+    assignmentId: number;
+}>();
 
-    const { t } = useI18n();
-    const lang = ref();
-    const learningPath = ref();
-    // Get the user's username/id
-    const username = asyncComputed(async () => {
-        const user = await auth.loadUser();
-        return user?.profile?.preferred_username ?? undefined;
-    });
+const {t} = useI18n();
+const lang = ref();
+const learningPath = ref();
+// Get the user's username/id
+const username = asyncComputed(async () => {
+    const user = await auth.loadUser();
+    return user?.profile?.preferred_username ?? undefined;
+});
 
-    const assignmentQueryResult = useAssignmentQuery(() => props.classId, props.assignmentId);
-    learningPath.value = assignmentQueryResult.data.value?.assignment?.learningPath;
+const assignmentsQueryResult = useStudentAssignmentsQuery(username, true);
 
-    const groupsQueryResult = useStudentGroupsQuery(username, true);
-    const group = computed(() => {
-        const groups = groupsQueryResult.data.value?.groups;
+const assignment = computed(() => {
+    const assignments = assignmentsQueryResult.data.value?.assignments;
+    if (!assignments) return undefined;
 
-        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;
-    });
-
-    const learningPathParams = computed(() => {
-        if (!group.value || !learningPath.value || !lang.value) return undefined;
-
-        return {
-            forGroup: group.value.groupNumber,
-            assignmentNo: props.assignmentId,
-            classId: props.classId,
-        };
-    });
-
-    const lpQueryResult = useGetLearningPathQuery(
-        () => learningPath.value,
-        () => lang.value,
-        () => learningPathParams.value,
+    return assignments.find(
+        (a) => a.id === props.assignmentId && a.within === props.classId
     );
+});
 
-    const progressColor = computed(() => {
-        const progress = calculateProgress(lpQueryResult.data.value as LearningPath);
-        if (progress >= 100) return "success";
-        if (progress >= 50) return "warning";
-        return "error";
-    });
 
-    const studentQueries = useStudentsByUsernamesQuery(() => (group.value?.members as string[]) ?? undefined);
+learningPath.value = assignment.value?.learningPath;
+
+const groupsQueryResult = useStudentGroupsQuery(username, true);
+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 = assignment.value?.learningPath;
+    lang.value = assignment.value?.language as Language;
+});
+
+const learningPathParams = computed(() => {
+    if (!group.value || !learningPath.value || !lang.value) return undefined;
+
+    return {
+        forGroup: group.value.groupNumber,
+        assignmentNo: props.assignmentId,
+        classId: props.classId,
+    };
+});
+
+const lpQueryResult = useGetLearningPathQuery(
+    () => learningPath.value,
+    () => lang.value,
+    () => learningPathParams.value,
+);
+
+const progressColor = computed(() => {
+    const progress = calculateProgress(lpQueryResult.data.value as LearningPath);
+    if (progress >= 100) return "success";
+    if (progress >= 50) return "warning";
+    return "error";
+});
+
+const studentQueries = useStudentsByUsernamesQuery(() => (group.value?.members as string[]) ?? undefined);
 </script>
 
 <template>
     <div class="container">
         <using-query-result
-            :query-result="assignmentQueryResult"
-            v-slot="assignmentResponse: { data: AssignmentResponse }"
+            :query-result="assignmentsQueryResult"
         >
             <v-card
-                v-if="assignmentResponse"
+                v-if="assignment"
                 class="assignment-card"
             >
                 <div class="top-buttons">
@@ -98,7 +111,7 @@
                     </v-btn>
                 </div>
                 <v-card-title class="text-h4 assignmentTopTitle"
-                    >{{ assignmentResponse.data.assignment.title }}
+                >{{ assignment.title }}
                 </v-card-title>
 
                 <v-card-subtitle class="subtitle-section">
@@ -110,7 +123,7 @@
                             v-if="lpData"
                             :to="
                                 group
-                                    ? `/learningPath/${lpData.hruid}/${assignmentResponse.data.assignment?.language}/${lpData.startNode.learningobjectHruid}?forGroup=${0}&assignmentNo=${assignmentId}&classId=${classId}`
+                                    ? `/learningPath/${lpData.hruid}/${assignment.language}/${lpData.startNode.learningobjectHruid}?forGroup=${group.groupNo}&assignmentNo=${assignment.id}&classId=${assignment.within}`
                                     : undefined
                             "
                             :disabled="!group"
@@ -123,7 +136,7 @@
                 </v-card-subtitle>
 
                 <v-card-text class="description">
-                    {{ assignmentResponse.data.assignment.description }}
+                    {{ assignment.description }}
                 </v-card-text>
                 <v-card-text>
                     <v-card-text>
@@ -177,9 +190,9 @@
 </template>
 
 <style scoped>
-    @import "@/assets/assignment.css";
+@import "@/assets/assignment.css";
 
-    .progress-bar {
-        width: 40%;
-    }
+.progress-bar {
+    width: 40%;
+}
 </style>
diff --git a/frontend/src/views/assignments/UserAssignments.vue b/frontend/src/views/assignments/UserAssignments.vue
index a5ca6f6f..d8765ab0 100644
--- a/frontend/src/views/assignments/UserAssignments.vue
+++ b/frontend/src/views/assignments/UserAssignments.vue
@@ -1,143 +1,139 @@
 <script setup lang="ts">
-    import { ref, computed, onMounted, watch } from "vue";
-    import { useI18n } from "vue-i18n";
-    import { useRouter } from "vue-router";
-    import authState from "@/services/auth/auth-service.ts";
-    import auth from "@/services/auth/auth-service.ts";
-    import { useTeacherAssignmentsQuery, useTeacherClassesQuery } from "@/queries/teachers.ts";
-    import { useStudentAssignmentsQuery, useStudentClassesQuery } from "@/queries/students.ts";
-    import { useDeleteAssignmentMutation } from "@/queries/assignments.ts";
-    import UsingQueryResult from "@/components/UsingQueryResult.vue";
-    import { asyncComputed } from "@vueuse/core";
+import {ref, computed, onMounted, watch} from "vue";
+import {useI18n} from "vue-i18n";
+import {useRouter} from "vue-router";
+import authState from "@/services/auth/auth-service.ts";
+import auth from "@/services/auth/auth-service.ts";
+import {useTeacherAssignmentsQuery, useTeacherClassesQuery} from "@/queries/teachers.ts";
+import {useStudentAssignmentsQuery, useStudentClassesQuery} from "@/queries/students.ts";
+import {useDeleteAssignmentMutation} from "@/queries/assignments.ts";
+import UsingQueryResult from "@/components/UsingQueryResult.vue";
 
-    const { t, locale } = useI18n();
-    const router = useRouter();
+const {t, locale} = useI18n();
+const router = useRouter();
 
-    const role = ref(auth.authState.activeRole);
-    const username = ref<string | undefined>(undefined);
-    const isLoading = ref(false);
-    const isError = ref(false);
-    const errorMessage = ref<string>("");
+const role = ref(auth.authState.activeRole);
+const isTeacher = computed(() => role.value === "teacher");
+const username = ref<string | undefined>(undefined);
+const isLoading = ref(false);
+const isError = ref(false);
+const errorMessage = ref<string>("");
 
-    // Load current user before rendering the page
-    onMounted(async () => {
-        isLoading.value = true;
-        try {
-            const userObject = await authState.loadUser();
-            username.value = userObject!.profile.preferred_username;
-        } catch (error) {
-            isError.value = true;
-            errorMessage.value = error instanceof Error ? error.message : String(error);
-        } finally {
-            isLoading.value = false;
-        }
+// Load current user before rendering the page
+onMounted(async () => {
+    isLoading.value = true;
+    try {
+        const userObject = await authState.loadUser();
+        username.value = userObject!.profile.preferred_username;
+    } catch (error) {
+        isError.value = true;
+        errorMessage.value = error instanceof Error ? error.message : String(error);
+    } finally {
+        isLoading.value = false;
+    }
+});
+
+const classesQueryResult = isTeacher.value
+    ? useTeacherClassesQuery(username, true)
+    : useStudentClassesQuery(username, true);
+
+const assignmentsQueryResult = isTeacher.value
+    ? useTeacherAssignmentsQuery(username, true)
+    : useStudentAssignmentsQuery(username, true);
+
+const allAssignments = computed(() => {
+    const assignments = assignmentsQueryResult.data.value?.assignments;
+    if (!assignments) return [];
+
+    const classes = classesQueryResult.data.value?.classes;
+    if (!classes) return [];
+
+    const result = assignments.map((a) => ({
+        id: a.id,
+        class: classes.find((cls) => cls?.id === a.within) ?? undefined,
+        title: a.title,
+        description: a.description,
+        learningPath: a.learningPath,
+        language: a.language,
+        deadline: a.deadline,
+        groups: a.groups,
+    }));
+
+    // Order the assignments by deadline
+    return result.flat().sort((a, b) => {
+        const now = Date.now();
+        const aTime = new Date(a.deadline).getTime();
+        const bTime = new Date(b.deadline).getTime();
+
+        const aIsPast = aTime < now;
+        const bIsPast = bTime < now;
+
+        if (aIsPast && !bIsPast) return 1;
+        if (!aIsPast && bIsPast) return -1;
+
+        return aTime - bTime;
     });
+});
 
-    const isTeacher = computed(() => role.value === "teacher");
-    const classesQueryResult = isTeacher.value
-        ? useTeacherClassesQuery(username, true)
-        : useStudentClassesQuery(username, true);
 
-    const assignmentsQueryResult = isTeacher.value
-        ? useTeacherAssignmentsQuery(username, true)
-        : useStudentAssignmentsQuery(username, true);
+async function goToCreateAssignment(): Promise<void> {
+    await router.push("/assignment/create");
+}
 
-    const allAssignments = asyncComputed(
-        async () => {
-            const assignments = assignmentsQueryResult.data.value?.assignments;
-            if (!assignments) return [];
+async function goToAssignmentDetails(id: number, clsId: string): Promise<void> {
+    await router.push(`/assignment/${clsId}/${id}`);
+}
 
-            const classes = classesQueryResult.data.value?.classes;
-            if (!classes) return [];
+const {mutate, data, isSuccess} = useDeleteAssignmentMutation();
 
-            const result = assignments.map((a) => ({
-                id: a.id,
-                class: classes.find((cls) => cls?.id === a.within) ?? undefined,
-                title: a.title,
-                description: a.description,
-                learningPath: a.learningPath,
-                language: a.language,
-                deadline: a.deadline,
-                groups: a.groups,
-            }));
-
-            // Order the assignments by deadline
-            return result.flat().sort((a, b) => {
-                const now = Date.now();
-                const aTime = new Date(a.deadline).getTime();
-                const bTime = new Date(b.deadline).getTime();
-
-                const aIsPast = aTime < now;
-                const bIsPast = bTime < now;
-
-                if (aIsPast && !bIsPast) return 1;
-                if (!aIsPast && bIsPast) return -1;
-
-                return aTime - bTime;
-            });
-        },
-        [],
-        { evaluating: true },
-    );
-
-    async function goToCreateAssignment(): Promise<void> {
-        await router.push("/assignment/create");
+watch([isSuccess, data], async ([success, oldData]) => {
+    if (success && oldData?.assignment) {
+        window.location.reload();
     }
+});
 
-    async function goToAssignmentDetails(id: number, clsId: string): Promise<void> {
-        await router.push(`/assignment/${clsId}/${id}`);
-    }
+async function goToDeleteAssignment(num: number, clsId: string): Promise<void> {
+    mutate({cid: clsId, an: num});
+}
 
-    const { mutate, data, isSuccess } = useDeleteAssignmentMutation();
+function formatDate(date?: string | Date): string {
+    if (!date) return "–";
+    const d = new Date(date);
 
-    watch([isSuccess, data], async ([success, oldData]) => {
-        if (success && oldData?.assignment) {
-            window.location.reload();
-        }
+    // Choose locale based on selected language
+    const currentLocale = locale.value;
+
+    return d.toLocaleDateString(currentLocale, {
+        weekday: "short",
+        day: "2-digit",
+        month: "long",
+        year: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
     });
+}
 
-    async function goToDeleteAssignment(num: number, clsId: string): Promise<void> {
-        mutate({ cid: clsId, an: num });
-    }
+function getDeadlineClass(deadline?: string | Date): string {
+    if (!deadline) return "";
 
-    function formatDate(date?: string | Date): string {
-        if (!date) return "–";
-        const d = new Date(date);
+    const date = new Date(deadline);
+    const now = new Date();
+    const in24Hours = new Date(now.getTime() + 24 * 60 * 60 * 1000);
 
-        // Choose locale based on selected language
-        const currentLocale = locale.value;
+    if (date.getTime() < now.getTime()) return "deadline-passed";
+    if (date.getTime() <= in24Hours.getTime()) return "deadline-in24hours";
+    return "deadline-upcoming";
+}
 
-        return d.toLocaleDateString(currentLocale, {
-            weekday: "short",
-            day: "2-digit",
-            month: "long",
-            year: "numeric",
-            hour: "numeric",
-            minute: "2-digit",
-        });
-    }
+onMounted(async () => {
+    const user = await auth.loadUser();
+    username.value = user?.profile?.preferred_username ?? "";
+});
 
-    function getDeadlineClass(deadline?: string | Date): string {
-        if (!deadline) return "";
-
-        const date = new Date(deadline);
-        const now = new Date();
-        const in24Hours = new Date(now.getTime() + 24 * 60 * 60 * 1000);
-
-        if (date.getTime() < now.getTime()) return "deadline-passed";
-        if (date.getTime() <= in24Hours.getTime()) return "deadline-in24hours";
-        return "deadline-upcoming";
-    }
-
-    onMounted(async () => {
-        const user = await auth.loadUser();
-        username.value = user?.profile?.preferred_username ?? "";
-    });
-
-    onMounted(async () => {
-        const user = await auth.loadUser();
-        username.value = user?.profile?.preferred_username ?? "";
-    });
+onMounted(async () => {
+    const user = await auth.loadUser();
+    username.value = user?.profile?.preferred_username ?? "";
+});
 </script>
 
 <template>
@@ -214,88 +210,87 @@
 </template>
 
 <style scoped>
-    .assignments-container {
-        width: 100%;
-        margin: 0 auto;
-        box-sizing: border-box;
-    }
+.assignments-container {
+    width: 100%;
+    margin: 0 auto;
+    box-sizing: border-box;
+}
 
-    .center-btn {
-        display: block;
-        margin: 0 auto 2rem auto;
-        font-weight: 600;
-        background-color: #10ad61;
-        color: white;
-        transition: background-color 0.2s;
-    }
+.center-btn {
+    display: block;
+    margin: 0 auto 2rem auto;
+    font-weight: 600;
+    background-color: #10ad61;
+    color: white;
+    transition: background-color 0.2s;
+}
 
-    .center-btn:hover {
-        background-color: #0e6942;
-    }
+.center-btn:hover {
+    background-color: #0e6942;
+}
 
-    .assignment-card {
-        padding: 1.25rem;
-        border-radius: 16px;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-        background-color: white;
-        transition:
-            transform 0.2s,
-            box-shadow 0.2s;
-    }
+.assignment-card {
+    padding: 1.25rem;
+    border-radius: 16px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    background-color: white;
+    transition: transform 0.2s,
+    box-shadow 0.2s;
+}
 
-    .assignment-card:hover {
-        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
-    }
+.assignment-card:hover {
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+}
 
-    .top-content {
-        margin-bottom: 1rem;
-        word-break: break-word;
-    }
+.top-content {
+    margin-bottom: 1rem;
+    word-break: break-word;
+}
 
-    .assignment-title {
-        font-weight: 700;
-        font-size: 1.4rem;
-        color: #0e6942;
-        margin-bottom: 0.3rem;
-    }
+.assignment-title {
+    font-weight: 700;
+    font-size: 1.4rem;
+    color: #0e6942;
+    margin-bottom: 0.3rem;
+}
 
-    .assignment-class,
-    .assignment-deadline {
-        font-size: 0.95rem;
-        color: #444;
-        margin-bottom: 0.2rem;
-    }
+.assignment-class,
+.assignment-deadline {
+    font-size: 0.95rem;
+    color: #444;
+    margin-bottom: 0.2rem;
+}
 
-    .class-name {
-        font-weight: 600;
-        color: #097180;
-    }
+.class-name {
+    font-weight: 600;
+    color: #097180;
+}
 
-    .assignment-deadline.deadline-passed {
-        color: #d32f2f;
-        font-weight: bold;
-    }
+.assignment-deadline.deadline-passed {
+    color: #d32f2f;
+    font-weight: bold;
+}
 
-    .assignment-deadline.deadline-in24hours {
-        color: #f57c00;
-        font-weight: bold;
-    }
+.assignment-deadline.deadline-in24hours {
+    color: #f57c00;
+    font-weight: bold;
+}
 
-    .spacer {
-        flex: 1;
-    }
+.spacer {
+    flex: 1;
+}
 
-    .button-row {
-        display: flex;
-        justify-content: flex-end;
-        gap: 0.75rem;
-        flex-wrap: wrap;
-    }
+.button-row {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+}
 
-    .no-assignments {
-        text-align: center;
-        font-size: 1.2rem;
-        color: #777;
-        padding: 3rem 0;
-    }
+.no-assignments {
+    text-align: center;
+    font-size: 1.2rem;
+    color: #777;
+    padding: 3rem 0;
+}
 </style>