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

style: lint + format

Browse source
This commit is contained in:
laurejablonski 2025-04-17 10:42:27 +02:00
parent 464b888e16
commit 569adf6518
3 changed files with 59 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

40
frontend/src/views/classes/SingleClass.vue
View file

@ -3,7 +3,7 @@
import authState from "@/services/auth/auth-service.ts"; import authState from "@/services/auth/auth-service.ts";
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { type ClassResponse } from "@/controllers/classes"; import type { ClassResponse } from "@/controllers/classes";
import type { JoinRequestsResponse, StudentsResponse } from "@/controllers/students"; import type { JoinRequestsResponse, StudentsResponse } from "@/controllers/students";
import type { StudentDTO } from "@dwengo-1/common/interfaces/student"; import type { StudentDTO } from "@dwengo-1/common/interfaces/student";
import UsingQueryResult from "@/components/UsingQueryResult.vue"; import UsingQueryResult from "@/components/UsingQueryResult.vue";
@ -17,40 +17,41 @@
const classId: string = route.params.id as string; const classId: string = route.params.id as string;
const username = ref<string | undefined>(undefined); const username = ref<string | undefined>(undefined);
// queries used to access the backend and catch loading or errors // Queries used to access the backend and catch loading or errors
// gets the class a teacher wants to manage // Gets the class a teacher wants to manage
const getClass = useClassQuery(classId); const getClass = useClassQuery(classId);
// get all students part of the class // Get all students part of the class
const getStudents = useClassStudentsQuery(classId); const getStudents = useClassStudentsQuery(classId);
// get all join requests for this class // Get all join requests for this class
const joinRequestsQuery = useTeacherJoinRequestsQuery(username, classId); const joinRequestsQuery = useTeacherJoinRequestsQuery(username, classId);
// handle accepting or rejecting join requests // Handle accepting or rejecting join requests
const { mutate } = useUpdateJoinRequestMutation(); const { mutate } = useUpdateJoinRequestMutation();
// handle deletion of a student from the class // Handle deletion of a student from the class
const { mutate: deleteStudentMutation } = useClassDeleteStudentMutation(); const { mutate: deleteStudentMutation } = useClassDeleteStudentMutation();
// load current user before rendering the page // Load current user before rendering the page
onMounted(async () => { onMounted(async () => {
const userObject = await authState.loadUser(); const userObject = await authState.loadUser();
username.value = userObject?.profile?.preferred_username ?? undefined; username.value = userObject?.profile?.preferred_username ?? undefined;
}); });
// used to set the visibility of the dialog // Used to set the visibility of the dialog
const dialog = ref(false); const dialog = ref(false);
// student selected for deletion // Student selected for deletion
const selectedStudent = ref<StudentDTO | null>(null); const selectedStudent = ref<StudentDTO | null>(null);
// let the teacher verify deletion of a student // Let the teacher verify deletion of a student
function showPopup(s: StudentDTO): void { function showPopup(s: StudentDTO): void {
selectedStudent.value = s; selectedStudent.value = s;
dialog.value = true; dialog.value = true;
} }
async function removeStudentFromclass(): Promise<void> { async function removeStudentFromclass(): Promise<void> {
// delete student from class // Delete student from class
deleteStudentMutation({id: classId, username: selectedStudent.value!.username}, { deleteStudentMutation(
{ id: classId, username: selectedStudent.value!.username },
{
onSuccess: async () => { onSuccess: async () => {
dialog.value = false; dialog.value = false;
await getStudents.refetch(); await getStudents.refetch();
@ -60,11 +61,12 @@
dialog.value = false; dialog.value = false;
showSnackbar(t("failed") + ": " + e.message, "error"); showSnackbar(t("failed") + ": " + e.message, "error");
}, },
},) },
);
} }
function handleJoinRequest(c: ClassJoinRequestDTO, accepted: boolean): void { function handleJoinRequest(c: ClassJoinRequestDTO, accepted: boolean): void {
// handle acception or rejection of a join request // Handle acception or rejection of a join request
mutate( mutate(
{ {
teacherUsername: username.value!, teacherUsername: username.value!,
@ -74,7 +76,7 @@
}, },
{ {
onSuccess: async () => { onSuccess: async () => {
if (accepted){ if (accepted) {
await joinRequestsQuery.refetch(); await joinRequestsQuery.refetch();
await getStudents.refetch(); await getStudents.refetch();
@ -91,14 +93,14 @@
); );
} }
// default of snackbar values // Default of snackbar values
const snackbar = ref({ const snackbar = ref({
visible: false, visible: false,
message: "", message: "",
color: "success", color: "success",
}); });
// function to show snackbar on success or failure // Function to show snackbar on success or failure
function showSnackbar(message: string, color: string): void { function showSnackbar(message: string, color: string): void {
snackbar.value.message = message; snackbar.value.message = message;
snackbar.value.color = color; snackbar.value.color = color;

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

@ -7,7 +7,7 @@
import { useCreateJoinRequestMutation, useStudentClassesQuery } from "@/queries/students"; import { useCreateJoinRequestMutation, useStudentClassesQuery } from "@/queries/students";
import type { StudentDTO } from "@dwengo-1/common/interfaces/student"; import type { StudentDTO } from "@dwengo-1/common/interfaces/student";
import type { TeacherDTO } from "@dwengo-1/common/interfaces/teacher"; import type { TeacherDTO } from "@dwengo-1/common/interfaces/teacher";
import { type ClassesResponse } from "@/controllers/classes"; import type { ClassesResponse } from "@/controllers/classes";
import UsingQueryResult from "@/components/UsingQueryResult.vue"; import UsingQueryResult from "@/components/UsingQueryResult.vue";
import { useClassStudentsQuery, useClassTeachersQuery } from "@/queries/classes"; import { useClassStudentsQuery, useClassTeachersQuery } from "@/queries/classes";
import type { StudentsResponse } from "@/controllers/students"; import type { StudentsResponse } from "@/controllers/students";
@ -44,7 +44,7 @@
async function openStudentDialog(c: ClassDTO): Promise<void> { async function openStudentDialog(c: ClassDTO): Promise<void> {
selectedClass.value = c; selectedClass.value = c;
// let the component know it should show the students in a class // Let the component know it should show the students in a class
getStudents.value = true; getStudents.value = true;
await getStudentsQuery.refetch(); await getStudentsQuery.refetch();
dialog.value = true; dialog.value = true;
@ -53,7 +53,7 @@
async function openTeacherDialog(c: ClassDTO): Promise<void> { async function openTeacherDialog(c: ClassDTO): Promise<void> {
selectedClass.value = c; selectedClass.value = c;
// let the component know it should show teachers of a class // Let the component know it should show teachers of a class
getStudents.value = false; getStudents.value = false;
await getTeachersQuery.refetch(); await getTeachersQuery.refetch();
dialog.value = true; dialog.value = true;

63
frontend/src/views/classes/TeacherClasses.vue
View file

@ -6,7 +6,7 @@
import type { ClassDTO } from "@dwengo-1/common/interfaces/class"; import type { ClassDTO } from "@dwengo-1/common/interfaces/class";
import type { TeacherInvitationDTO } from "@dwengo-1/common/interfaces/teacher-invitation"; import type { TeacherInvitationDTO } from "@dwengo-1/common/interfaces/teacher-invitation";
import { useTeacherClassesQuery } from "@/queries/teachers"; import { useTeacherClassesQuery } from "@/queries/teachers";
import { type ClassesResponse, type ClassResponse } from "@/controllers/classes"; import type { ClassesResponse } from "@/controllers/classes";
import UsingQueryResult from "@/components/UsingQueryResult.vue"; import UsingQueryResult from "@/components/UsingQueryResult.vue";
import { useClassesQuery, useClassTeacherInvitationsQuery, useCreateClassMutation } from "@/queries/classes"; import { useClassesQuery, useClassTeacherInvitationsQuery, useCreateClassMutation } from "@/queries/classes";
import type { TeacherInvitationsResponse } from "@/controllers/teacher-invitations"; import type { TeacherInvitationsResponse } from "@/controllers/teacher-invitations";
@ -252,34 +252,41 @@
:query-result="getInvitationsQuery" :query-result="getInvitationsQuery"
v-slot="invitationsResponse: { data: TeacherInvitationsResponse }" v-slot="invitationsResponse: { data: TeacherInvitationsResponse }"
> >
<using-query-result :query-result="allClassesQuery" v-slot="classesResponse: {data: ClassesResponse}"> <using-query-result
<tr :query-result="allClassesQuery"
v-for="i in invitationsResponse.data.invitations as TeacherInvitationDTO[]" v-slot="classesResponse: { data: ClassesResponse }"
:key="i.classId"
> >
<td> <tr
{{ (classesResponse.data.classes as ClassDTO[]).filter((c) => c.id == i.classId)[0] }} v-for="i in invitationsResponse.data.invitations as TeacherInvitationDTO[]"
</td> :key="i.classId"
<td>{{ (i.sender as TeacherDTO).firstName + " " + (i.sender as TeacherDTO).lastName }}</td> >
<td class="text-right"> <td>
<div> {{
<v-btn (classesResponse.data.classes as ClassDTO[]).filter((c) => c.id == i.classId)[0]
color="green" }}
@click="acceptRequest" </td>
class="mr-2" <td>
> {{ (i.sender as TeacherDTO).firstName + " " + (i.sender as TeacherDTO).lastName }}
{{ t("accept") }} </td>
</v-btn> <td class="text-right">
<v-btn <div>
color="red" <v-btn
@click="denyRequest" color="green"
> @click="acceptRequest"
{{ t("deny") }} class="mr-2"
</v-btn> >
</div> {{ t("accept") }}
</td> </v-btn>
</tr> <v-btn
</using-query-result> color="red"
@click="denyRequest"
>
{{ t("deny") }}
</v-btn>
</div>
</td>
</tr>
</using-query-result>
</using-query-result> </using-query-result>
</tbody> </tbody>
</v-table> </v-table>