Generateurv2/frontend/components/pdf_gen/selectExo.jsx
2022-05-18 10:15:54 +02:00

181 lines
5.7 KiB
JavaScript

import { createRef } from "react";
import { useState } from "react";
import { FiLink } from "react-icons/fi";
import useFilter from "../../hooks/useFilter.hook.jsx";
import styles from "../../styles/pdf_gen/selectExo.module.scss";
import { parseClassName } from "../../utils/utils.js";
import TagSelect from "../exos/TagSelect.jsx";
import Modal from "../Modal.jsx";
import Tag from "../Tag.jsx";
import ParamItem from "./ParamItem.jsx";
import TagContainer from "./tagContainer.jsx";
import { AiOutlineClose } from "react-icons/ai";
export default function SelectExo({
exos,
selected,
select,
setExos,
emptyError,
tagsData,
}) {
const [active, setActive] = useState(false);
const [search, setSearch] = useState("");
const [exData, setExData] = useState([]);
const [selectedOption, setSelectedOption] = useState(null);
const [sortMode, setSortMode] = useState(false); // false == au moins 1 / true = tous
useFilter(exos, selectedOption, search, setExData, sortMode);
return (
<>
<div className={styles["exo-select"]}>
<div className={styles["head"]}>
<p>Ajouter exercices</p>
<p className={styles.add} onClick={() => setActive(true)}>
+
</p>
</div>
<div className={styles["exos-selected"]}>
{exos.filter((e) => {
return selected.includes(e.id_code);
}).length === 0 && (
<>
<p
className={parseClassName([
styles["no-select"],
emptyError ? styles["error-empty"] : undefined,
])}
>
Aucun exercice selectionné
</p>
{emptyError == true && (
<p className={parseClassName(["error-msg", styles.error])}>
Veuillez selectionner un exercice au minimum
</p>
)}
</>
)}
{exos
.filter((e) => {
return selected.includes(e.id_code);
})
.sort((a, b) => {
return selected.indexOf(a.id_code) - selected.indexOf(b.id_code);
})
.map((s, i) => {
return (
<ParamItem
exo={s}
unSelect={() => {
select([
...selected.filter((ex) => {
return ex !== s.id_code;
}),
]);
}}
setExo={(nbIn, nbOf) => {
/* setExos([
...exos.filter((e) => {
return e.id_code !== s.id_code;
}), {...s, numberInExo:nbIn, numberOfExo: nbOf}
]); */
setExos([
...exos.slice(0, exos.indexOf(s)),
{
...s,
numberInExo: nbIn,
numberOfExo: nbOf,
},
...exos.slice(exos.indexOf(s) + 1),
]);
}}
key={i}
/>
);
})}
</div>
</div>
<Modal active={active} onClose={() => setActive(false)}>
<div className={styles["modal-list-container"]}>
<div className={styles["search-container"]}>
<input
type="text"
className="exo-input"
placeholder="Rechercher..."
value={search}
onChange={(e) => {
setSearch(e.target.value);
}}
/>
<div style={{ display: "flex" }}>
<TagSelect
tags={tagsData}
onChange={setSelectedOption}
select={selectedOption}
/>
<div
onClick={() => {
setSortMode(!sortMode);
}}
title={
sortMode == true
? "Doit avoir au moins tous les tags"
: "Doit avoir au moins un tag"
}
className={parseClassName([
styles["toggler-sort"],
sortMode
? styles["toggler-active"]
: styles["toggler-inactive"],
])}
>
<FiLink />
</div>
</div>
</div>
<div>
{exData.length == 0 && (
<p className={styles["no-select"]}>Aucun résultat</p>
)}
{exData.map((d, i) => {
return (
<div
key={i}
onClick={() => {
if (!selected.includes(d.id_code)) {
select([...selected, d.id_code]);
} else {
select([
...selected.filter((ex) => {
return ex !== d.id_code;
}),
]);
}
}}
className={parseClassName([
selected.includes(d.id_code)
? styles["selected"]
: undefined,
styles["item-in-modal"],
"pointer",
])}
>
<div className={styles["modal-name"]}>{d.name}</div>
{d.tags.length !== 0 && <TagContainer tags={d.tags} />}
</div>
);
})}
</div>
</div>
<div className={styles["icon-container"]}>
<AiOutlineClose className={styles['icon']} onClick={()=>{setActive(false)}}/>
</div>
</Modal>
</>
);
}