2022-05-18 10:15:54 +02:00
|
|
|
import axios from "axios";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
import { useMutation, useQueryClient } from "react-query";
|
|
|
|
import { createExo } from "../../requests/requests.exos.js";
|
|
|
|
import { notificationService } from "../../services/notification.service.js";
|
|
|
|
import styles from "../../styles/exos/ExoCreateForm.module.scss";
|
|
|
|
import { CODE_SEPARATOR, PYTHON_DEFAULT } from "../../utils/constant.js";
|
|
|
|
import { csrftoken, isEmpty, parseClassName } from "../../utils/utils.js";
|
2022-06-11 23:39:03 +02:00
|
|
|
import Input from "../Input.jsx";
|
2022-05-18 10:15:54 +02:00
|
|
|
import ModelInput from "./modelInput.jsx";
|
|
|
|
|
2022-06-24 13:42:16 +02:00
|
|
|
export default function ExoCreateForm({ cancel, resetFilter }) {
|
2022-05-18 10:15:54 +02:00
|
|
|
const [newExo, setNewExo] = useState({
|
|
|
|
name: "",
|
|
|
|
consigne: "",
|
2022-06-11 23:39:03 +02:00
|
|
|
exo_model: { data: PYTHON_DEFAULT, filename: null, download: false },
|
|
|
|
private: false
|
2022-05-18 10:15:54 +02:00
|
|
|
});
|
|
|
|
|
|
|
|
const [errors, setErrors] = useState({
|
2022-06-11 23:39:03 +02:00
|
|
|
name: null,
|
2022-05-18 10:15:54 +02:00
|
|
|
consigne: null,
|
2022-06-11 23:39:03 +02:00
|
|
|
exo_model: null,
|
|
|
|
});
|
2022-06-24 13:42:16 +02:00
|
|
|
const queryClient = useQueryClient()
|
2022-05-18 10:15:54 +02:00
|
|
|
const { mutate, isLoading, data } = useMutation(
|
|
|
|
() => {
|
|
|
|
var data_sent = new FormData();
|
|
|
|
var blob = new Blob([newExo.exo_model.data], {
|
|
|
|
type: "text/x-python",
|
|
|
|
});
|
2022-06-11 23:39:03 +02:00
|
|
|
var file = new File([blob], newExo.exo_model.filename ? newExo.exo_model.filename: 'main.py', {
|
2022-05-18 10:15:54 +02:00
|
|
|
type: "text/x-python",
|
|
|
|
});
|
|
|
|
data_sent.append("file", file);
|
2022-06-11 23:39:03 +02:00
|
|
|
data_sent.append("name", newExo.name);
|
|
|
|
data_sent.append("consigne", newExo.consigne);
|
|
|
|
data_sent.append("private", newExo.private);
|
2022-05-18 10:15:54 +02:00
|
|
|
return createExo(data_sent);
|
|
|
|
},
|
|
|
|
{
|
|
|
|
onSuccess: (data) => {
|
2022-06-11 23:39:03 +02:00
|
|
|
//queryClient.invalidateQueries("exo-data");
|
2022-06-24 13:42:16 +02:00
|
|
|
resetFilter()
|
|
|
|
queryClient.invalidateQueries('user-data')
|
|
|
|
|
2022-05-18 10:15:54 +02:00
|
|
|
notificationService.success(
|
|
|
|
"Nouvel exercice",
|
|
|
|
`Exercice ${newExo.name} crée !`,
|
|
|
|
{ autoClose: true, keepAfterRouteChange: true }
|
|
|
|
);
|
|
|
|
cancel();
|
|
|
|
},
|
|
|
|
onError: (err) => {
|
2022-06-11 23:39:03 +02:00
|
|
|
var resetErrors = {
|
|
|
|
name: null,
|
|
|
|
exo_model: null,
|
|
|
|
consigne: null,
|
|
|
|
};
|
2022-05-18 10:15:54 +02:00
|
|
|
|
|
|
|
var newError = { ...resetErrors, ...err.response.data.errors };
|
|
|
|
setErrors({ ...newError });
|
|
|
|
notificationService.error(
|
|
|
|
"Erreur",
|
|
|
|
"L'exercice n'a pu être crée ! Réessayez plus tard !",
|
|
|
|
{ autoClose: true, keepAfterRouteChange: true }
|
|
|
|
);
|
|
|
|
},
|
|
|
|
}
|
|
|
|
);
|
|
|
|
|
|
|
|
const [full, setFull] = useState({ state: false, fade: false });
|
2022-06-11 23:39:03 +02:00
|
|
|
|
2022-05-18 10:15:54 +02:00
|
|
|
const fadeFull = (state) => {
|
|
|
|
setFull({ state: !state, fade: state });
|
|
|
|
setTimeout(() => {
|
|
|
|
setFull({ state: state, fade: false });
|
|
|
|
}, 300);
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
2022-06-11 23:39:03 +02:00
|
|
|
<div className={styles["ex_card--full"]}>
|
2022-05-18 10:15:54 +02:00
|
|
|
<div
|
|
|
|
className={parseClassName([
|
|
|
|
styles["ex_card--body"],
|
|
|
|
"marginb-p0",
|
|
|
|
full.fade ? styles["ex_card-fade"] : undefined,
|
|
|
|
full.fade || full.state ? styles["ex_card--big"] : undefined,
|
|
|
|
full.state ? "vh-100" : undefined,
|
|
|
|
full.state == false ? styles["ex_card--body__little"] : undefined,
|
|
|
|
])}
|
|
|
|
>
|
|
|
|
{full.state == false && (
|
|
|
|
<>
|
|
|
|
<div className={styles["ex_card--title"]}>Nouvel exercice</div>
|
2022-06-11 23:39:03 +02:00
|
|
|
<Input
|
|
|
|
error={errors.name !== null}
|
2022-05-18 10:15:54 +02:00
|
|
|
type="text"
|
2022-06-11 23:39:03 +02:00
|
|
|
placeholder="Nom du l'exercice"
|
2022-05-18 10:15:54 +02:00
|
|
|
value={newExo.name}
|
|
|
|
onChange={(e) => {
|
2022-06-11 23:39:03 +02:00
|
|
|
//setErrors({ ...errors, name: null });
|
2022-05-18 10:15:54 +02:00
|
|
|
setNewExo({
|
|
|
|
...newExo,
|
|
|
|
name: e.target.value,
|
|
|
|
});
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
{errors.name !== null &&
|
|
|
|
errors.name.map((err, i) => {
|
|
|
|
return (
|
|
|
|
<p className="error-msg margint-p0" key={i}>
|
|
|
|
{err}
|
|
|
|
</p>
|
|
|
|
);
|
|
|
|
})}
|
2022-06-11 23:39:03 +02:00
|
|
|
<Input
|
2022-05-18 10:15:54 +02:00
|
|
|
type="text"
|
2022-06-11 23:39:03 +02:00
|
|
|
error={errors.consigne !== null}
|
|
|
|
value={newExo.consigne}
|
|
|
|
onChange={(e) => {
|
|
|
|
//setErrors({...errors, consigne: null})
|
|
|
|
setNewExo({
|
|
|
|
...newExo,
|
|
|
|
consigne: e.target.value,
|
|
|
|
});
|
|
|
|
}}
|
|
|
|
placeholder="Consigne"
|
|
|
|
|
2022-05-18 10:15:54 +02:00
|
|
|
/>
|
|
|
|
{errors.consigne !== null &&
|
|
|
|
errors.consigne.map((err, i) => {
|
|
|
|
return (
|
|
|
|
<p className="error-msg margint-p0" key={i}>
|
|
|
|
{err}
|
|
|
|
</p>
|
|
|
|
);
|
|
|
|
})}
|
2022-06-11 23:39:03 +02:00
|
|
|
|
|
|
|
<div>
|
|
|
|
<label>Private</label>
|
|
|
|
<input
|
|
|
|
type="checkbox"
|
|
|
|
checked={newExo.private}
|
|
|
|
onChange={(e) => {
|
2022-06-24 17:27:17 +02:00
|
|
|
|
2022-06-11 23:39:03 +02:00
|
|
|
setNewExo({ ...newExo, private: !newExo.private });
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</div>
|
2022-05-18 10:15:54 +02:00
|
|
|
</>
|
|
|
|
)}
|
|
|
|
<ModelInput
|
|
|
|
setFull={fadeFull}
|
|
|
|
full={full.state}
|
|
|
|
model={newExo.exo_model}
|
2022-06-11 23:39:03 +02:00
|
|
|
setModel={(n) => {
|
|
|
|
setNewExo({ ...newExo, exo_model: n });
|
|
|
|
}}
|
2022-05-18 10:15:54 +02:00
|
|
|
step={{
|
|
|
|
...newExo,
|
|
|
|
name: newExo.name == "" ? "Nouveau" : newExo.name,
|
|
|
|
}}
|
|
|
|
onChange={(new_model) => {
|
|
|
|
setNewExo({ ...newExo, exo_model: new_model });
|
|
|
|
}}
|
|
|
|
tempSpec={newExo}
|
2022-06-11 23:39:03 +02:00
|
|
|
/>
|
2022-05-18 10:15:54 +02:00
|
|
|
{errors.exo_model !== null &&
|
|
|
|
errors.exo_model.map((err, i) => {
|
|
|
|
return (
|
|
|
|
<p className="error-msg margint-p0" key={i}>
|
|
|
|
{err}
|
|
|
|
</p>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
{full.state == false && (
|
|
|
|
<div className={styles["btn-container"]}>
|
2022-06-11 23:39:03 +02:00
|
|
|
<button className="exo-btn" onClick={mutate}>
|
2022-05-18 10:15:54 +02:00
|
|
|
Valider !
|
|
|
|
</button>
|
|
|
|
<button onClick={cancel} className="cancel-btn">
|
|
|
|
Annuler
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|