tdpeuter/2025SELab2-project-Dwengo
tdpeuter/2025SELab2-project-Dwengo
1
Fork 0
Code Issues Releases 4 Packages 2 Wiki Activity

refactor: gebruikt using-query result component om klassen te laden

Browse source
This commit is contained in:
laurejablonski 2025-04-11 12:05:29 +02:00
parent a91e4b2a73
commit 0694324c83
1 changed files with 50 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

46
frontend/src/views/classes/StudentClasses.vue
View file

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import authState from "@/services/auth/auth-service.ts"; import authState from "@/services/auth/auth-service.ts";
import { computed, onMounted, ref, type ComputedRef } from "vue"; import { onMounted, ref, type ComputedRef } from "vue";
import { validate, version } from "uuid"; import { validate, version } from "uuid";
import type { ClassDTO } from "@dwengo-1/common/interfaces/class"; import type { ClassDTO } from "@dwengo-1/common/interfaces/class";
import { useCreateJoinRequestMutation, useStudentClassesQuery } from "@/queries/students"; import { useCreateJoinRequestMutation, useStudentClassesQuery } from "@/queries/students";
@ -9,6 +9,8 @@
import { StudentController } from "@/controllers/students"; import { StudentController } from "@/controllers/students";
import type { TeacherDTO } from "@dwengo-1/common/interfaces/teacher"; import type { TeacherDTO } from "@dwengo-1/common/interfaces/teacher";
import { TeacherController } from "@/controllers/teachers"; import { TeacherController } from "@/controllers/teachers";
import type { ClassesResponse } from "@/controllers/classes";
import UsingQueryResult from "@/components/UsingQueryResult.vue";
const { t } = useI18n(); const { t } = useI18n();
const studentController: StudentController = new StudentController(); const studentController: StudentController = new StudentController();
@ -25,20 +27,7 @@
}); });
// Fetch all classes of the logged in student // Fetch all classes of the logged in student
const { data: classesResponse, isLoading, error } = useStudentClassesQuery(username); const classesQuery = useStudentClassesQuery(username);
// Empty list when classes are not yet loaded, else the list of classes of the user
const classes: ComputedRef<ClassDTO[]> = computed(() => {
// The classes are not yet fetched
if (!classesResponse.value) {
return [];
}
// The user has no classes
if (classesResponse.value.classes.length === 0) {
return [];
}
return classesResponse.value.classes as ClassDTO[];
});
// Students of selected class are shown when logged in student presses on the member count // Students of selected class are shown when logged in student presses on the member count
const selectedClass = ref<ClassDTO | null>(null); const selectedClass = ref<ClassDTO | null>(null);
@ -150,26 +139,12 @@
</script> </script>
<template> <template>
<main> <main>
<div <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> <h1 class="title">{{ t("classes") }}</h1>
<using-query-result
:query-result="classesQuery"
v-slot="classResponse: { data: ClassesResponse }"
>
<v-container <v-container
fluid fluid
class="ma-4" class="ma-4"
@ -193,7 +168,7 @@
</thead> </thead>
<tbody> <tbody>
<tr <tr
v-for="c in classes" v-for="c in (classResponse.data.classes as ClassDTO[])"
:key="c.id" :key="c.id"
> >
<td>{{ c.displayName }}</td> <td>{{ c.displayName }}</td>
@ -215,6 +190,7 @@
</v-col> </v-col>
</v-row> </v-row>
</v-container> </v-container>
</using-query-result>
<v-dialog <v-dialog
v-model="dialog" v-model="dialog"