feat: klassen van student worden opgehaald uit database

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,6 +146,25 @@
 </script>
 <template>
     <main>
+        <div
+            v-if="isLoading"
+            class="text-center py-10"
+        >
+            <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
@@ -220,8 +283,9 @@
                                                     dialog = false;
                                                     copied = false;
                                                 "
-                                            > {{ t("close") }} </v-btn
                                             >
+                                                {{ t("close") }}
+                                            </v-btn>
                                         </v-card-actions>
                                     </v-card>
                                 </v-dialog>
@@ -263,13 +327,15 @@
                                     color="green"
                                     @click="acceptRequest"
                                     class="mr-2"
-                                > {{ t("accept") }} </v-btn
                                 >
+                                    {{ t("accept") }}
+                                </v-btn>
                                 <v-btn
                                     color="red"
                                     @click="denyRequest"
-                                > {{ t("deny") }} </v-btn
                                 >
+                                    {{ t("deny") }}
+                                </v-btn>
                             </div>
                         </td>
                     </tr>
@@ -330,9 +396,9 @@
                     </v-sheet>
                 </div>
             </div>
+        </div>
     </main>
 </template>
-
 <style scoped>
     .header {
         font-weight: bold !important;