From 0a6a9566423a1f8a5b122d7e9651889ff3076f34 Mon Sep 17 00:00:00 2001
From: laurejablonski <laure.jablonski@ugent.be>
Date: Fri, 4 Apr 2025 21:42:01 +0200
Subject: [PATCH] feat: klassen van student worden opgehaald uit database

---
 frontend/src/views/classes/UserClasses.vue | 514 ++++++++++++---------
 1 file changed, 290 insertions(+), 224 deletions(-)

diff --git a/frontend/src/views/classes/UserClasses.vue b/frontend/src/views/classes/UserClasses.vue
index b2a85140..80028469 100644
--- a/frontend/src/views/classes/UserClasses.vue
+++ b/frontend/src/views/classes/UserClasses.vue
@@ -1,13 +1,56 @@
 <script setup lang="ts">
     import { useI18n } from "vue-i18n";
     import authState from "@/services/auth/auth-service.ts";
-    import { ref } from "vue";
+    import { computed, onMounted, ref, type ComputedRef } from "vue";
     import { validate, version } from "uuid";
+    import type { TeacherDTO } from "@dwengo-1/common/interfaces/teacher";
+    import type { ClassDTO } from "@dwengo-1/common/interfaces/class";
+    import { useStudentClassesQuery } from "@/queries/students";
 
     const { t } = useI18n();
 
+    type Invitation = {
+        id: string;
+        class: ClassDTO;
+        sender: TeacherDTO;
+        receiver: TeacherDTO;
+    };
+
+    const classes : ComputedRef<ClassDTO[]> = computed(() => {
+        const response = classesResponse.value;
+        let result : ClassDTO[] = []
+        if (!classesResponse.value){
+            return result
+        } else {
+            if (classesResponse.value.classes.length === 0) {
+                return result;
+            }
+            if (typeof classesResponse.value.classes[0] === 'string'){
+                for (const classid of classesResponse.value.classes) {
+                    // TODO when class queries are ready
+                }
+                return result;
+            }
+            return classesResponse.value.classes as ClassDTO[];
+        }
+    });
+        
+
+    const username = ref<string | undefined>(undefined);
+
+    const { data: classesResponse, isLoading, error } = useStudentClassesQuery(username);
+
+    onMounted(async () => {
+        const userObject = await authState.loadUser();
+        username.value = userObject?.profile?.preferred_username ?? undefined;
+    });
+
+    // get role of user
     const role: string = authState.authState.activeRole!;
 
+    // TODO: change to DTO
+    const invitations = ref<Array<Invitation>>([]);
+
     // For students: code that they give in when sending a class join request
     // For teachers: code that they get when they create a new class
     const code = ref<string>("");
@@ -39,13 +82,14 @@
     const students = ref<Array<string>>([]);
 
     // selected class itself
-    const selectedClass = ref<Class | null>(null);
+    const selectedClass = ref<ClassDTO | null>(null);
 
     // function to display all members of a class
-    function openDialog(c: Class) {
+    function openDialog(c: ClassDTO) {
         selectedClass.value = c;
         if (selectedClass.value !== undefined) {
-            students.value = selectedClass.value.students.map((student) => `${student.firstName} ${student.lastName}`);
+            // students.value = selectedClass.value.students.map((student) => `${student.firstName} ${student.lastName}`);
+            students.value = [];
             dialog.value = true;
         }
     }
@@ -102,237 +146,259 @@
 </script>
 <template>
     <main>
-        <h1 class="title">{{ t("classes") }}</h1>
-        <v-container
-            fluid
-            class="ma-4"
+        <div
+            v-if="isLoading"
+            class="text-center py-10"
         >
-            <v-row
-                no-gutters
+            <v-progress-circular
+                indeterminate
+                color="primary"
+            />
+            <p>Loading...</p>
+        </div>
+
+        <div
+            v-else-if="error"
+            class="text-center py-10 text-error"
+        >
+            <v-icon large>mdi-alert-circle</v-icon>
+            <p>Error loading: {{ error.message }}</p>
+        </div>
+        <div v-else>
+            <h1 class="title">{{ t("classes") }}</h1>
+            <v-container
                 fluid
+                class="ma-4"
             >
-                <v-col
-                    cols="12"
-                    sm="6"
-                    md="6"
+                <v-row
+                    no-gutters
+                    fluid
                 >
-                    <v-table class="table">
-                        <thead>
-                            <tr>
-                                <th class="header">{{ t("classes") }}</th>
-                                <th
-                                    class="header"
-                                    v-if="role === 'teacher'"
-                                >
-                                    {{ t("code") }}
-                                </th>
-                                <th class="header">{{ t("members") }}</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr
-                                v-for="c in classes"
-                                :key="c.id"
-                            >
-                                <td v-if="role === 'student'">{{ c.displayName }}</td>
-                                <td v-else>
-                                    <v-btn
-                                        :to="`/user/class/${c.id}`"
-                                        variant="text"
-                                    >
-                                        {{ c.displayName }}
-                                        <v-icon end> mdi-menu-right </v-icon>
-                                    </v-btn>
-                                </td>
-                                <td v-if="role === 'teacher'">{{ c.id }}</td>
-                                <td
-                                    v-if="role === 'student'"
-                                    class="link"
-                                    @click="openDialog(c)"
-                                >
-                                    {{ c.students.length }}
-                                </td>
-                                <td v-else>{{ c.students.length }}</td>
-                            </tr>
-                        </tbody>
-                    </v-table>
-                </v-col>
-                <v-col
-                    cols="12"
-                    sm="6"
-                    md="6"
-                >
-                    <div v-if="role === 'teacher'">
-                        <h2>{{ t("createClass") }}</h2>
-
-                        <v-sheet
-                            class="pa-4 sheet"
-                            max-width="600px"
-                        >
-                            <p>{{ t("createClassInstructions") }}</p>
-                            <v-form @submit.prevent>
-                                <v-text-field
-                                    class="mt-4"
-                                    :label="`${t('classname')}`"
-                                    v-model="className"
-                                    :placeholder="`${t('EnterNameOfClass')}`"
-                                    :rules="nameRules"
-                                    variant="outlined"
-                                ></v-text-field>
-                                <v-btn
-                                    class="mt-4"
-                                    color="#f6faf2"
-                                    type="submit"
-                                    @click="createClass"
-                                    block
-                                    >{{ t("create") }}</v-btn
-                                >
-                            </v-form>
-                        </v-sheet>
-                        <v-container>
-                            <v-dialog
-                                v-model="dialog"
-                                max-width="400px"
-                            >
-                                <v-card>
-                                    <v-card-title class="headline">code</v-card-title>
-                                    <v-card-text>
-                                        <v-text-field
-                                            v-model="code"
-                                            readonly
-                                            append-inner-icon="mdi-content-copy"
-                                            @click:append-inner="copyToClipboard"
-                                        ></v-text-field>
-                                        <v-slide-y-transition>
-                                            <div
-                                                v-if="copied"
-                                                class="text-center mt-2"
-                                            >
-                                                {{ t("copied") }}
-                                            </div>
-                                        </v-slide-y-transition>
-                                    </v-card-text>
-                                    <v-card-actions>
-                                        <v-spacer></v-spacer>
-                                        <v-btn
-                                            text
-                                            @click="
-                                                dialog = false;
-                                                copied = false;
-                                            "
-                                            > {{ t("close") }} </v-btn
-                                        >
-                                    </v-card-actions>
-                                </v-card>
-                            </v-dialog>
-                        </v-container>
-                    </div>
-                </v-col>
-            </v-row>
-        </v-container>
-
-        <h1
-            v-if="role === 'teacher'"
-            class="title"
-        >
-            {{ t("invitations") }}
-        </h1>
-        <v-table
-            v-if="role === 'teacher'"
-            class="table"
-        >
-            <thead>
-                <tr>
-                    <th class="header">{{ t("class") }}</th>
-                    <th class="header">{{ t("sender") }}</th>
-                    <th class="header"></th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr
-                    v-for="i in invitations"
-                    :key="i.id"
-                >
-                    <td>
-                        {{ i.class.displayName }}
-                    </td>
-                    <td>{{ i.sender.firstName + " " + i.sender.lastName }}</td>
-                    <td class="text-right">
-                        <div>
-                            <v-btn
-                                color="green"
-                                @click="acceptRequest"
-                                class="mr-2"
-                                > {{ t("accept") }} </v-btn
-                            >
-                            <v-btn
-                                color="red"
-                                @click="denyRequest"
-                                > {{ t("deny") }} </v-btn
-                            >
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-        </v-table>
-
-        <v-dialog
-            v-model="dialog"
-            width="400"
-        >
-            <v-card>
-                <v-card-title> {{ selectedClass?.displayName }} </v-card-title>
-                <v-card-text>
-                    <ul>
-                        <li
-                            v-for="student in students"
-                            :key="student"
-                        >
-                            {{ student }}
-                        </li>
-                    </ul>
-                </v-card-text>
-                <v-card-actions>
-                    <v-btn
-                        color="primary"
-                        @click="dialog = false"
-                        >Close</v-btn
+                    <v-col
+                        cols="12"
+                        sm="6"
+                        md="6"
                     >
-                </v-card-actions>
-            </v-card>
-        </v-dialog>
-        <div v-if="role === 'student'">
-            <div class="join">
-                <h2>{{ t("joinClass") }}</h2>
-                <p>{{ t("JoinClassExplanation") }}</p>
+                        <v-table class="table">
+                            <thead>
+                                <tr>
+                                    <th class="header">{{ t("classes") }}</th>
+                                    <th
+                                        class="header"
+                                        v-if="role === 'teacher'"
+                                    >
+                                        {{ t("code") }}
+                                    </th>
+                                    <th class="header">{{ t("members") }}</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr
+                                    v-for="c in classes"
+                                    :key="c.id"
+                                >
+                                    <td v-if="role === 'student'">{{ c.displayName }}</td>
+                                    <td v-else>
+                                        <v-btn
+                                            :to="`/user/class/${c.id}`"
+                                            variant="text"
+                                        >
+                                            {{ c.displayName }}
+                                            <v-icon end> mdi-menu-right </v-icon>
+                                        </v-btn>
+                                    </td>
+                                    <td v-if="role === 'teacher'">{{ c.id }}</td>
+                                    <td
+                                        v-if="role === 'student'"
+                                        class="link"
+                                        @click="openDialog(c)"
+                                    >
+                                        {{ c.students.length }}
+                                    </td>
+                                    <td v-else>{{ c.students.length }}</td>
+                                </tr>
+                            </tbody>
+                        </v-table>
+                    </v-col>
+                    <v-col
+                        cols="12"
+                        sm="6"
+                        md="6"
+                    >
+                        <div v-if="role === 'teacher'">
+                            <h2>{{ t("createClass") }}</h2>
 
-                <v-sheet
-                    class="pa-4 sheet"
-                    max-width="400"
-                >
-                    <v-form @submit.prevent>
-                        <v-text-field
-                            label="CODE"
-                            v-model="code"
-                            placeholder="XXXXXXXX-XXXX-4XXX-XXXX-XXXXXXXXXXXX"
-                            :rules="codeRules"
-                            variant="outlined"
-                        ></v-text-field>
+                            <v-sheet
+                                class="pa-4 sheet"
+                                max-width="600px"
+                            >
+                                <p>{{ t("createClassInstructions") }}</p>
+                                <v-form @submit.prevent>
+                                    <v-text-field
+                                        class="mt-4"
+                                        :label="`${t('classname')}`"
+                                        v-model="className"
+                                        :placeholder="`${t('EnterNameOfClass')}`"
+                                        :rules="nameRules"
+                                        variant="outlined"
+                                    ></v-text-field>
+                                    <v-btn
+                                        class="mt-4"
+                                        color="#f6faf2"
+                                        type="submit"
+                                        @click="createClass"
+                                        block
+                                        >{{ t("create") }}</v-btn
+                                    >
+                                </v-form>
+                            </v-sheet>
+                            <v-container>
+                                <v-dialog
+                                    v-model="dialog"
+                                    max-width="400px"
+                                >
+                                    <v-card>
+                                        <v-card-title class="headline">code</v-card-title>
+                                        <v-card-text>
+                                            <v-text-field
+                                                v-model="code"
+                                                readonly
+                                                append-inner-icon="mdi-content-copy"
+                                                @click:append-inner="copyToClipboard"
+                                            ></v-text-field>
+                                            <v-slide-y-transition>
+                                                <div
+                                                    v-if="copied"
+                                                    class="text-center mt-2"
+                                                >
+                                                    {{ t("copied") }}
+                                                </div>
+                                            </v-slide-y-transition>
+                                        </v-card-text>
+                                        <v-card-actions>
+                                            <v-spacer></v-spacer>
+                                            <v-btn
+                                                text
+                                                @click="
+                                                    dialog = false;
+                                                    copied = false;
+                                                "
+                                            >
+                                                {{ t("close") }}
+                                            </v-btn>
+                                        </v-card-actions>
+                                    </v-card>
+                                </v-dialog>
+                            </v-container>
+                        </div>
+                    </v-col>
+                </v-row>
+            </v-container>
+
+            <h1
+                v-if="role === 'teacher'"
+                class="title"
+            >
+                {{ t("invitations") }}
+            </h1>
+            <v-table
+                v-if="role === 'teacher'"
+                class="table"
+            >
+                <thead>
+                    <tr>
+                        <th class="header">{{ t("class") }}</th>
+                        <th class="header">{{ t("sender") }}</th>
+                        <th class="header"></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr
+                        v-for="i in invitations"
+                        :key="i.id"
+                    >
+                        <td>
+                            {{ i.class.displayName }}
+                        </td>
+                        <td>{{ i.sender.firstName + " " + i.sender.lastName }}</td>
+                        <td class="text-right">
+                            <div>
+                                <v-btn
+                                    color="green"
+                                    @click="acceptRequest"
+                                    class="mr-2"
+                                >
+                                    {{ t("accept") }}
+                                </v-btn>
+                                <v-btn
+                                    color="red"
+                                    @click="denyRequest"
+                                >
+                                    {{ t("deny") }}
+                                </v-btn>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </v-table>
+
+            <v-dialog
+                v-model="dialog"
+                width="400"
+            >
+                <v-card>
+                    <v-card-title> {{ selectedClass?.displayName }} </v-card-title>
+                    <v-card-text>
+                        <ul>
+                            <li
+                                v-for="student in students"
+                                :key="student"
+                            >
+                                {{ student }}
+                            </li>
+                        </ul>
+                    </v-card-text>
+                    <v-card-actions>
                         <v-btn
-                            class="mt-4"
-                            color="#f6faf2"
-                            type="submit"
-                            @click="submitCode"
-                            block
-                            >{{ t("submitCode") }}</v-btn
+                            color="primary"
+                            @click="dialog = false"
+                            >Close</v-btn
                         >
-                    </v-form>
-                </v-sheet>
+                    </v-card-actions>
+                </v-card>
+            </v-dialog>
+            <div v-if="role === 'student'">
+                <div class="join">
+                    <h2>{{ t("joinClass") }}</h2>
+                    <p>{{ t("JoinClassExplanation") }}</p>
+
+                    <v-sheet
+                        class="pa-4 sheet"
+                        max-width="400"
+                    >
+                        <v-form @submit.prevent>
+                            <v-text-field
+                                label="CODE"
+                                v-model="code"
+                                placeholder="XXXXXXXX-XXXX-4XXX-XXXX-XXXXXXXXXXXX"
+                                :rules="codeRules"
+                                variant="outlined"
+                            ></v-text-field>
+                            <v-btn
+                                class="mt-4"
+                                color="#f6faf2"
+                                type="submit"
+                                @click="submitCode"
+                                block
+                                >{{ t("submitCode") }}</v-btn
+                            >
+                        </v-form>
+                    </v-sheet>
+                </div>
             </div>
         </div>
     </main>
 </template>
-
 <style scoped>
     .header {
         font-weight: bold !important;
@@ -422,4 +488,4 @@
             margin: 5px;
         }
     }
-</style>
\ No newline at end of file
+</style>