feat: remove knop bij klasleden werkt

This commit is contained in:
laurejablonski 2025-04-11 19:02:13 +02:00
parent 404ca914d0
commit 9cb44949ac

View file

@ -5,8 +5,12 @@
import type { ClassDTO } from "@dwengo-1/common/interfaces/class"; import type { ClassDTO } from "@dwengo-1/common/interfaces/class";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { ClassController, type ClassResponse } from "@/controllers/classes"; import { ClassController, type ClassResponse } from "@/controllers/classes";
import type { StudentsResponse } from "@/controllers/students"; import type { JoinRequestResponse, JoinRequestsResponse, StudentsResponse } from "@/controllers/students";
import type { StudentDTO } from "@dwengo-1/common/interfaces/student"; import type { StudentDTO } from "@dwengo-1/common/interfaces/student";
import { useStudentJoinRequestQuery } from "@/queries/students";
import UsingQueryResult from "@/components/UsingQueryResult.vue";
import { useTeacherJoinRequestsQuery } from "@/queries/teachers";
import type { ClassJoinRequestDTO } from "@dwengo-1/common/interfaces/class-join-request";
const { t } = useI18n(); const { t } = useI18n();
@ -22,6 +26,8 @@
const currentClass = ref<ClassDTO | undefined>(undefined); const currentClass = ref<ClassDTO | undefined>(undefined);
const students = ref<StudentDTO[]>([]); const students = ref<StudentDTO[]>([]);
const joinRequestsQuery = useTeacherJoinRequestsQuery(username, classId);
// Find the username of the logged in user so it can be used to fetch other information // Find the username of the logged in user so it can be used to fetch other information
// When loading the page // When loading the page
onMounted(async () => { onMounted(async () => {
@ -51,8 +57,21 @@
} }
// Remove student from class // Remove student from class
function removeStudentFromclass(): void { async function removeStudentFromclass(): Promise<void> {
// TODO: replace by query
if (selectedStudent.value) await classController.deleteStudent(classId, selectedStudent.value.username);
dialog.value = false; dialog.value = false;
selectedStudent.value = null;
//TODO when query; reload table so student not longer in table
}
function acceptStudent(s: StudentDTO) {
//TODO
}
function rejectStudent(joinRequest: ClassJoinRequestDTO) {
//TODO
} }
</script> </script>
<template> <template>
@ -98,12 +117,58 @@
{{ s.firstName + " " + s.lastName }} {{ s.firstName + " " + s.lastName }}
</td> </td>
<td> <td>
<v-btn @click="showPopup"> {{ t("remove") }} </v-btn> <v-btn @click="showPopup(s)"> {{ t("remove") }} </v-btn>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</v-table> </v-table>
</v-col> </v-col>
<using-query-result
:query-result="joinRequestsQuery"
v-slot="joinRequests: { data: JoinRequestsResponse }"
>
<v-col
cols="12"
sm="6"
md="6"
>
<v-table class="table">
<thead>
<tr>
<th class="header">{{ t("classJoinRequests") }}</th>
<th class="header">{{ t("accept") + "/" + t("reject") }}</th>
</tr>
</thead>
<tbody>
<tr
v-for="jr in joinRequests.data.joinRequests as ClassJoinRequestDTO[]"
:key="(jr.class, jr.requester, jr.status)"
>
<td>
{{ jr.requester.firstName + " " + jr.requester.lastName }}
</td>
<td>
<v-btn
@click="acceptStudent"
class="mr-2"
color="green"
>
{{ t("accept") }}</v-btn
>
<v-btn
@click="rejectStudent"
class="mr-2"
color="red"
>
{{ t("reject") }}
</v-btn>
</td>
</tr>
</tbody>
</v-table>
</v-col>
</using-query-result>
</v-row> </v-row>
</v-container> </v-container>
</div> </div>