142 lines
4.2 KiB
JavaScript
142 lines
4.2 KiB
JavaScript
import { useEffect } from "react";
|
|
import { useState } from "react";
|
|
import { useQuery } from "react-query";
|
|
import Layout from "../components/Layout.js";
|
|
import Modal from "../components/Modal.jsx";
|
|
import PdfForm from "../components/pdf_gen/PdfForm.jsx";
|
|
import SelectExo from "../components/pdf_gen/selectExo.jsx";
|
|
import { getExos, getTags, pdfGen } from "../requests/requests.exos.js";
|
|
import styles from "../styles/pdf_gen/fiche.module.scss";
|
|
import { parseClassName } from "../utils/utils.js";
|
|
|
|
export default function Fiche({ exos, tags }) {
|
|
const { isLoading, isError, data, isFetching } = useQuery(
|
|
["exo-data"],
|
|
async () => await getExos('pdf'),
|
|
{
|
|
initialData: exos,
|
|
refetchOnWindowFocus: false,
|
|
keepPreviousData: true,
|
|
}
|
|
);
|
|
|
|
const generateFile = (content, fileName) => {
|
|
const byteCharacters = atob(content);
|
|
|
|
const byteNumbers = new Array(byteCharacters.length);
|
|
for (let i = 0; i < byteCharacters.length; i++) {
|
|
byteNumbers[i] = byteCharacters.charCodeAt(i);
|
|
}
|
|
|
|
const byteArray = new Uint8Array(byteNumbers);
|
|
const blob = new Blob([byteArray], { type: "application/pdf" });
|
|
console.log(blob);
|
|
const link = document.createElement("a");
|
|
link.href = window.URL.createObjectURL(blob);
|
|
link.download = fileName;
|
|
link.click();
|
|
};
|
|
const { data: tagsData } = useQuery(
|
|
["tags"],
|
|
async () => {
|
|
return await getTags();
|
|
},
|
|
{
|
|
initialData: tags,
|
|
}
|
|
);
|
|
const [exosList, setExos] = useState([]);
|
|
useEffect(() => {
|
|
setExos([
|
|
...data.map((d) => {
|
|
return { ...d, numberInExo: 10, numberOfExo: 1 };
|
|
}),
|
|
]);
|
|
return () => {
|
|
setExos([]);
|
|
};
|
|
}, [data]);
|
|
const [selected, setSelected] = useState([]);
|
|
const [charging, setCharging] = useState(false);
|
|
const[empty, setEmpty] = useState(false)
|
|
return (
|
|
<Layout page="Composition de fiches">
|
|
<main className={parseClassName(["container"])}>
|
|
<div className={styles["main-container"]}>
|
|
<SelectExo
|
|
exos={exosList}
|
|
selected={selected}
|
|
select={setSelected}
|
|
setExos={setExos}
|
|
emptyError={empty}
|
|
tagsData={tagsData}
|
|
/>
|
|
<div className={styles.form}>
|
|
<PdfForm
|
|
submit={(param) => {
|
|
var exosSend = exosList
|
|
.filter((e) => {
|
|
return selected.includes(e.id_code);
|
|
})
|
|
.sort((a, b) => {
|
|
return (
|
|
selected.indexOf(a.id_code) - selected.indexOf(b.id_code)
|
|
);
|
|
});
|
|
setCharging(true);
|
|
exosSend = exosSend.map((s) => {
|
|
return {
|
|
numberInExo: s.numberInExo,
|
|
numberOfExo: s.numberOfExo,
|
|
exo_model: s.exo_model,
|
|
model_type: s.model_type,
|
|
consigne: s.consigne,
|
|
id_code: s.id_code,
|
|
};
|
|
});
|
|
exosSend = exosSend.reduce((res, current) => {
|
|
return res.concat(
|
|
Array(parseInt(current.numberOfExo)).fill(current)
|
|
);
|
|
}, []);
|
|
if (exosSend.length == 0) {
|
|
setEmpty(true);
|
|
setCharging(false);
|
|
return;
|
|
}
|
|
pdfGen({
|
|
exos: exosSend,
|
|
file: param.name !== "" ? param.name : "untitled.pdf",
|
|
police: param.police != "" ? param.police + "pt" : 14 + "pt",
|
|
title: param.entete,
|
|
}).then((res) => {
|
|
generateFile(res.data.pdf, res.data.filename);
|
|
setCharging(false);
|
|
});
|
|
}}
|
|
/>{" "}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
{charging && (
|
|
<>
|
|
<div className="overlay"></div>
|
|
<div className="loader-big"></div>
|
|
</>
|
|
)}
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
export async function getStaticProps() {
|
|
const exos = await getExos('pdf');
|
|
const tags = await getTags();
|
|
return {
|
|
props: {
|
|
exos: exos,
|
|
tags: tags,
|
|
},
|
|
revalidate: 60,
|
|
};
|
|
}
|