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

124
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,71 +139,58 @@
</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>
<v-container <using-query-result
fluid :query-result="classesQuery"
class="ma-4" v-slot="classResponse: { data: ClassesResponse }"
> >
<v-row <v-container
no-gutters
fluid fluid
class="ma-4"
> >
<v-col <v-row
cols="12" no-gutters
sm="6" fluid
md="6"
> >
<v-table class="table"> <v-col
<thead> cols="12"
<tr> sm="6"
<th class="header">{{ t("classes") }}</th> md="6"
<th class="header">{{ t("teachers") }}</th> >
<th class="header">{{ t("members") }}</th> <v-table class="table">
</tr> <thead>
</thead> <tr>
<tbody> <th class="header">{{ t("classes") }}</th>
<tr <th class="header">{{ t("teachers") }}</th>
v-for="c in classes" <th class="header">{{ t("members") }}</th>
:key="c.id" </tr>
> </thead>
<td>{{ c.displayName }}</td> <tbody>
<td <tr
class="link" v-for="c in (classResponse.data.classes as ClassDTO[])"
@click="openTeacherDialog(c)" :key="c.id"
> >
{{ c.teachers.length }} <td>{{ c.displayName }}</td>
</td> <td
<td class="link"
class="link" @click="openTeacherDialog(c)"
@click="openStudentDialog(c)" >
> {{ c.teachers.length }}
{{ c.students.length }} </td>
</td> <td
</tr> class="link"
</tbody> @click="openStudentDialog(c)"
</v-table> >
</v-col> {{ c.students.length }}
</v-row> </td>
</v-container> </tr>
</tbody>
</v-table>
</v-col>
</v-row>
</v-container>
</using-query-result>
<v-dialog <v-dialog
v-model="dialog" v-model="dialog"