104 lines
2.9 KiB
JavaScript
104 lines
2.9 KiB
JavaScript
import { useEffect, useRef, useState } from "react";
|
|
import useFocus from "../../hooks/useFocus.hook.jsx";
|
|
import { csvGen } from "../../requests/requests.exos.js";
|
|
import styles from "../../styles/exos/ExoPrinterForm.module.scss";
|
|
import { parseClassName } from "../../utils/utils.js";
|
|
import StepExemple from "./StepExemple.jsx";
|
|
import StepOptions from "./StepOptions.jsx";
|
|
|
|
export default function ExoPrinterForm({ step }) {
|
|
const [options, setOptions] = useState({
|
|
pages: 5,
|
|
serie: 10,
|
|
name: "",
|
|
});
|
|
const pageChange = (num) => {
|
|
setOptions({
|
|
...options,
|
|
pages: num,
|
|
});
|
|
};
|
|
const serieChange = (num) => {
|
|
setOptions({
|
|
...options,
|
|
serie: num,
|
|
});
|
|
};
|
|
const ref = useRef();
|
|
useEffect(() => {
|
|
if (ref.current != null) ref.current.focus();
|
|
}, []);
|
|
return (
|
|
<>
|
|
<div className={styles["exo-input-container"]}>
|
|
{" "}
|
|
<input
|
|
type="text"
|
|
name="fich_name"
|
|
className={"exo-input " /* (error.error == true && " input-error") */}
|
|
placeholder="Nom du fichier..."
|
|
value={options.name}
|
|
onChange={(e) => {
|
|
setOptions({ ...options, name: e.target.value });
|
|
}}
|
|
tabIndex="-1"
|
|
ref={ref}
|
|
onKeyUp={(e) => {
|
|
if (e.code == "Enter") {
|
|
csvGen(
|
|
step.id_code,
|
|
options.name !== "" ? options.name : "untitled"
|
|
);
|
|
}
|
|
}}
|
|
disabled={!step.isCsv}
|
|
/>
|
|
</div>
|
|
<div className={styles["option--ex"]}>
|
|
<div>
|
|
{step.exemple.data && (
|
|
<p className="margint-p0 fontw-800">
|
|
Exemples ({step.exemple.type && step.exemple.type})
|
|
</p>
|
|
)}
|
|
<p className={"marginl-p3" + " marginb-p0 small-text " + styles.consigne}>{step.consigne}</p>
|
|
{step.exemple.data &&
|
|
step.exemple.data.slice(0, 3).map((ex, i) => {
|
|
return (
|
|
<p
|
|
key={i}
|
|
className={"marginl-p5" + " margint-p1 small-text " + styles.exemple}
|
|
title={ex.calcul}
|
|
>
|
|
{ex.calcul}
|
|
</p>
|
|
);
|
|
})}
|
|
|
|
{step.exemple.data && <p className="marginl-p5 margint-p2">...</p>}
|
|
{!step.exemple.data && <p>Exemples indisponibles</p>}
|
|
</div>
|
|
</div>
|
|
|
|
<div className={styles["btn-container"]}>
|
|
<button
|
|
className={parseClassName([
|
|
"exo-btn",
|
|
!step.isCsv ? styles["btn-disabled"] : undefined,
|
|
])}
|
|
onClick={(e) => {
|
|
e.preventDefault;
|
|
csvGen(
|
|
step.id_code,
|
|
options.name !== "" ? options.name : "untitled"
|
|
);
|
|
}}
|
|
disabled={!step.isCsv}
|
|
>
|
|
{step.isCsv ? "Télécharger" : "Téléchargement indisponible"}
|
|
</button>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|