diff --git a/frontend/app/[locale]/components/EditCourseForm.tsx b/frontend/app/[locale]/components/EditCourseForm.tsx index 2ae88f82..44600b17 100644 --- a/frontend/app/[locale]/components/EditCourseForm.tsx +++ b/frontend/app/[locale]/components/EditCourseForm.tsx @@ -3,7 +3,7 @@ import React, {useEffect, useState} from "react"; import {useTranslation} from "react-i18next"; import {getCourse, getImage, postData, updateCourse} from "@lib/api"; import Typography from "@mui/material/Typography"; -import {Box, Button, Input, LinearProgress, MenuItem, Select, TextField} from "@mui/material"; +import {Box, Button, Input, LinearProgress, MenuItem, Select, TextField, Dialog, DialogActions, DialogTitle} from "@mui/material"; import {LocalizationProvider} from "@mui/x-date-pickers/LocalizationProvider"; import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs"; import {DatePicker} from '@mui/x-date-pickers/DatePicker'; @@ -24,6 +24,8 @@ const EditCourseForm = ({courseId}: EditCourseFormProps) => { const [selectedImage, setSelectedImage] = useState(null); const [selectedImageURL, setSelectedImageURL] = useState(""); const [loading, setLoading] = useState(true); + const [openConfirmation, setOpenConfirmation] = useState(false); // State for confirmation dialog + useEffect(() => { const fetchCourseData = async () => { @@ -57,6 +59,15 @@ const EditCourseForm = ({courseId}: EditCourseFormProps) => { const handleSubmit = async (event: any) => { event.preventDefault(); + setOpenConfirmation(true); // Open confirmation dialog + }; + + const handleConfirmationClose = () => { + setOpenConfirmation(false); + }; + + const handleConfirmationYes = async () => { + setOpenConfirmation(false); const formData = new FormData(); formData.append('name', name); formData.append('description', description); @@ -66,13 +77,16 @@ const EditCourseForm = ({courseId}: EditCourseFormProps) => { fileReader.onload = async function () { const arrayBuffer = this.result; if (arrayBuffer !== null) { - formData.append('banner', new Blob([arrayBuffer], {type: 'image/png'})); + formData.append('banner', new Blob([arrayBuffer], { type: 'image/png' })); + await updateCourse(courseId, formData).then((response) => { + window.location.href = `/course/${courseId}/`; + }); } - await updateCourse(courseId, formData); - window.location.href = `/course/${courseId}/`; } + if (selectedImage) fileReader.readAsArrayBuffer(selectedImage); }; + const handleImageUpload = (event: any) => { const imageFile = event.target.files[0]; setSelectedImage(imageFile); @@ -253,6 +267,22 @@ const EditCourseForm = ({courseId}: EditCourseFormProps) => { {t("cancel")} + + {t("Are you sure you want to submit this course?")} + + + + + ); } diff --git a/frontend/locales/en/common.json b/frontend/locales/en/common.json index 9327bea9..5ade4b3a 100644 --- a/frontend/locales/en/common.json +++ b/frontend/locales/en/common.json @@ -76,6 +76,7 @@ "role": "Role", "save changes": "Save changes", "save course": "Save course", + "edit course": "Edit course", "save": "Save", "save_changes": "Save Changes", "score_required": "Score is required", diff --git a/frontend/locales/nl/common.json b/frontend/locales/nl/common.json index c5aad752..778fefc7 100644 --- a/frontend/locales/nl/common.json +++ b/frontend/locales/nl/common.json @@ -76,6 +76,7 @@ "role": "Rol", "save changes": "Wijzigingen opslaan", "save course": "Cursus opslaan", + "edit course": "Cursus bewerken", "save": "Opslaan", "save_changes": "Wijzigingen Opslaan", "score_required": "Score is verplicht",