refactor: klas aanmaken met query

This commit is contained in:
laurejablonski 2025-04-16 11:42:24 +02:00
parent 922907e72a
commit dcb099f45b

View file

@ -6,11 +6,11 @@
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 { ClassController, type ClassesResponse, type ClassResponse } from "@/controllers/classes"; import { type ClassesResponse, type ClassResponse } from "@/controllers/classes";
import UsingQueryResult from "@/components/UsingQueryResult.vue"; import UsingQueryResult from "@/components/UsingQueryResult.vue";
import { useCreateClassMutation } from "@/queries/classes";
const { t } = useI18n(); const { t } = useI18n();
const classController = new ClassController();
// Username of logged in teacher // Username of logged in teacher
const username = ref<string | undefined>(undefined); const username = ref<string | undefined>(undefined);
@ -24,6 +24,7 @@
// Fetch all classes of the logged in teacher // Fetch all classes of the logged in teacher
const classesQuery = useTeacherClassesQuery(username, true); const classesQuery = useTeacherClassesQuery(username, true);
const { mutate } = useCreateClassMutation();
// Boolean that handles visibility for dialogs // Boolean that handles visibility for dialogs
// Creating a class will generate a popup with the generated code // Creating a class will generate a popup with the generated code
@ -64,24 +65,25 @@
async function createClass(): Promise<void> { async function createClass(): Promise<void> {
// Check if the class name is valid // Check if the class name is valid
if (className.value && className.value.length > 0 && /^[a-zA-Z0-9_-]+$/.test(className.value)) { if (className.value && className.value.length > 0 && /^[a-zA-Z0-9_-]+$/.test(className.value)) {
try { const classDto: ClassDTO = {
const classDto: ClassDTO = { id: "",
id: "", displayName: className.value,
displayName: className.value, teachers: [username.value!],
teachers: [username.value!], students: [],
students: [], };
};
const classResponse: ClassResponse = await classController.createClass(classDto);
const createdClass: ClassDTO = classResponse.class;
code.value = createdClass.id;
dialog.value = true;
showSnackbar(t("created"), "success");
// Reload the table with classes so the new class appears mutate(classDto, {
await classesQuery.refetch(); onSuccess: async (classResponse) => {
} catch (_) { showSnackbar(t("classCreated"), "success");
showSnackbar(t("wrong"), "error"); const createdClass: ClassDTO = classResponse.class;
} code.value = createdClass.id;
await classesQuery.refetch();
},
onError: (err) => {
showSnackbar(t("creationFailed") + ": " + err.message, "error");
},
});
dialog.value = true;
} }
if (!className.value || className.value === "") { if (!className.value || className.value === "") {
showSnackbar(t("name is mandatory"), "error"); showSnackbar(t("name is mandatory"), "error");