feat(insc): add frontend

src/main/webapp/src/pages/competition/CompetitionEdit.jsx

@@ -43,8 +43,12 @@ export function CompetitionEdit() {
         <div>
             {data
                 ? <div className="">
+
                     <Content data={data} refresh={refresh}/>
 
+                    {data.id !== null &&  <button style={{marginBottom: "1.5em", width: "100%"}} className="btn btn-primary"
+                    onClick={_ => navigate(`/competition/${data.id}/register`)}>Voir/Modifier les participants</button>}
+
                     {data.id !== null && <ContentSAFCA data2={data}/>}
 
                     {data.id !== null && <>
@@ -74,14 +78,14 @@ function ContentSAFCA({data2}) {
     useEffect(() => {
         if (data === null)
             return
-        if (data.admin !== null){
+        if (data.admin !== null) {
             let index = 0
             for (const d of data.admin) {
                 dispatch({type: 'UPDATE_OR_ADD', payload: {id: index, data: d}})
                 index++
             }
         }
-        if (data.table !== null){
+        if (data.table !== null) {
             let index = 0
             for (const d of data.table) {
                 dispatch2({type: 'UPDATE_OR_ADD', payload: {id: index, data: d}})
@@ -232,7 +236,8 @@ function Content({data}) {
                 },
             }
         ).then(data => {
-            navigate("/competition/" + data.id)
+            if (data.id !== undefined)
+                navigate("/competition/" + data.id)
         })
     }
 

src/main/webapp/src/pages/competition/CompetitionRegisterAdmin.jsx

@@ -0,0 +1,289 @@
+import {useNavigate, useParams} from "react-router-dom";
+import {useLoadingSwitcher} from "../../hooks/useLoading.jsx";
+import {useFetch} from "../../hooks/useFetch.js";
+import {AxiosError} from "../../components/AxiosError.jsx";
+import {ThreeDots} from "react-loader-spinner";
+import {useEffect, useReducer, useState} from "react";
+import {apiAxios} from "../../utils/Tools.js";
+import {toast} from "react-toastify";
+import {SimpleReducer} from "../../utils/SimpleReducer.jsx";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faTrashCan} from "@fortawesome/free-solid-svg-icons";
+
+export function CompetitionRegisterAdmin() {
+    const {id} = useParams()
+    const navigate = useNavigate()
+    const [state, dispatch] = useReducer(SimpleReducer, [])
+    const [clubFilter, setClubFilter] = useState("")
+    const [catFilter, setCatFilter] = useState("")
+    const [modalState, setModalState] = useState({})
+
+    const setLoading = useLoadingSwitcher()
+    const {data, error} = useFetch(`/competition/${id}/register`, setLoading, 1)
+
+    useEffect(() => {
+        if (!data)
+            return;
+        data.forEach((d, index) => {
+            dispatch({type: 'UPDATE_OR_ADD', payload: {id: index, data: d}})
+        })
+    }, [data, clubFilter, catFilter]);
+
+    const sendRegister = (event, new_state) => {
+        event.preventDefault();
+
+        console.log(new_state)
+
+        toast.promise(apiAxios.post(`/competition/${id}/register`, new_state), {
+            pending: "Recherche en cours",
+            success: "Combattant trouvé et ajouté/mis à jour",
+            error: {
+                render({data}) {
+                    return data.response.data || "Combattant non trouvé"
+                }
+            }
+        }).then((response) => {
+            if (response.data.error) {
+                return
+            }
+
+            let maxId = 0;
+            if (new_state.id) {
+                maxId = new_state.id - 1
+            } else {
+                state.forEach((d) => {
+                    if (d.id > maxId)
+                        maxId = d.id;
+                })
+            }
+            dispatch({type: 'UPDATE_OR_ADD', payload: {id: maxId + 1, data: response.data}})
+            document.getElementById("closeModal").click();
+        })
+    }
+
+    return <div>
+        <h2>Combattants inscrits</h2>
+        <button type="button" className="btn btn-link" onClick={() => navigate("/competition/" + id)}>
+            &laquo; retour
+        </button>
+
+        <div className="row">
+            <div className="col-lg-9">
+                {data
+                    ? <div className="">
+                        <MakeCentralPanel
+                            data={state.filter(s => (clubFilter.length === 0 || s.data.club.name === clubFilter) && (catFilter.length === 0 || s.data.categorie === catFilter))}
+                            dispatch={dispatch} id={id} setModalState={setModalState}/>
+                    </div>
+                    : error
+                        ? <AxiosError error={error}/>
+                        : <Def/>
+                }
+            </div>
+            <div className="col-lg-3">
+                <div className="mb-4">
+                    <button type="button" className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#registerModal"
+                            onClick={() => setModalState({})}>Ajouter un combattant
+                    </button>
+                </div>
+                <div className="card mb-4">
+                    <div className="card-header">Filtre</div>
+                    <div className="card-body">
+                        <FiltreBar data={data} clubFilter={clubFilter} setClubFilter={setClubFilter} catFilter={catFilter}
+                                   setCatFilter={setCatFilter}/>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <Modal sendRegister={sendRegister} modalState={modalState} setModalState={setModalState}/>
+    </div>
+}
+
+function Modal({sendRegister, modalState, setModalState}) {
+    const [licence, setLicence] = useState("")
+    const [fname, setFname] = useState("")
+    const [lname, setLname] = useState("")
+    const [weight, setWeight] = useState("")
+    const [cat, setCat] = useState(0)
+    const [editMode, setEditMode] = useState(false)
+
+    useEffect(() => {
+        if (!modalState) {
+            setLicence("")
+            setFname("")
+            setLname("")
+            setWeight("")
+            setCat(0)
+            setEditMode(false)
+        } else {
+            setLicence(modalState.licence ? modalState.licence : "")
+            setFname(modalState.fname ? modalState.fname : "")
+            setLname(modalState.lname ? modalState.lname : "")
+            setWeight(modalState.weight ? modalState.weight : "")
+            setCat(modalState.overCategory ? modalState.overCategory : 0)
+            setEditMode(modalState.licence || (modalState.fname && modalState.lname))
+        }
+    }, [modalState]);
+
+    return <div className="modal fade" id="registerModal" tabIndex="-1" aria-labelledby="registerLabel"
+                aria-hidden="true">
+        <div className="modal-dialog">
+            <div className="modal-content">
+                <form onSubmit={e => {
+                    const new_state = {
+                        licence: licence,
+                        fname: fname,
+                        lname: lname,
+                        weight: weight,
+                        overCategory: cat,
+                        id: modalState.id
+                    }
+                    setModalState(new_state)
+                    sendRegister(e, new_state)
+                }}>
+                    <div className="modal-header">
+                        <h1 className="modal-title fs-5" id="registerLabel">Ajouter un combattant</h1>
+                        <button type="button" className="btn-close" data-bs-dismiss="modal"
+                                aria-label="Close"></button>
+                    </div>
+                    <div className="modal-body">
+                        <div className="card" style={{marginBottom: "1em"}}>
+                            <div className="card-header">Recherche*</div>
+                            <div className="card-body">
+                                <div className="row">
+                                    <div className="col">
+                                        <input type="number" min={0} step={1} className="form-control" placeholder="N° de licence" name="licence"
+                                               value={licence} onChange={e => setLicence(e.target.value)} disabled={editMode}/>
+                                    </div>
+                                </div>
+                                <h5 style={{textAlign: "center", marginTop: "0.25em"}}>Ou</h5>
+                                <div className="row">
+                                    <div className="col">
+                                        <input type="text" className="form-control" placeholder="Prénom" name="fname" disabled={editMode}
+                                               value={fname} onChange={e => setFname(e.target.value)}/>
+                                    </div>
+                                    <div className="col">
+                                        <input type="text" className="form-control" placeholder="Nom" name="lname" disabled={editMode}
+                                               value={lname} onChange={e => setLname(e.target.value)}/>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="input-group mb-3">
+                            <span className="input-group-text" id="weight">Poids (en kg)</span>
+                            <input type="number" min={1} step={1} className="form-control" placeholder="42" aria-label="weight"
+                                   name="weight" aria-describedby="weight" value={weight} onChange={e => setWeight(e.target.value)}/>
+                        </div>
+
+                        <div className="input-group mb-3">
+                            <span className="input-group-text" id="categorie">Surclassement</span>
+                            <select className="form-select" aria-label="categorie" name="categorie" value={cat}
+                                    onChange={e => setCat(Number(e.target.value))}>
+                                <option value={0}>Aucun</option>
+                                <option value={1}>+1 catégorie</option>
+                                <option value={2}>+2 catégorie</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div className="modal-footer">
+                        <button type="submit" className="btn btn-primary">Ajouter</button>
+                        <button type="reset" className="btn btn-secondary" data-bs-dismiss="modal" id="closeModal">Annuler</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+}
+
+let allClub = []
+let allCat = []
+
+function FiltreBar({data, clubFilter, setClubFilter, catFilter, setCatFilter}) {
+    useEffect(() => {
+        if (!data)
+            return;
+        allClub.push(...data.map((e) => e.club?.name))
+        allClub = allClub.filter((value, index, self) => self.indexOf(value) === index).filter(value => value != null).sort()
+        allCat.push(...data.map((e) => e.categorie))
+        allCat = allCat.filter((value, index, self) => self.indexOf(value) === index).filter(value => value != null).sort()
+    }, [data]);
+
+    return <div>
+        <div className="mb-3">
+            <select className="form-select" value={clubFilter} onChange={event => setClubFilter(event.target.value)}>
+                <option value="">--- tout les clubs ---</option>
+                {allClub && allClub.map((value, index) => {
+                    return <option key={index} value={value}>{value}</option>
+                })
+                }
+            </select>
+        </div>
+        <div className="mb-3">
+            <select className="form-select" value={catFilter} onChange={event => setCatFilter(event.target.value)}>
+                <option value="">--- toute les catégories ---</option>
+                {allCat && allCat.map((value, index) => {
+                    return <option key={index} value={value}>{value}</option>
+                })
+                }
+            </select>
+        </div>
+    </div>
+}
+
+function MakeCentralPanel({data, dispatch, id, setModalState}) {
+    return <>
+        <div className="mb-4">
+            <div className="list-group">
+                {data.map((req, index) => (
+                    <div key={index} className="list-group-item d-flex justify-content-between align-items-start list-group-item-action"
+                         data-bs-toggle="modal" data-bs-target="#registerModal" onClick={() => setModalState({...req.data, id: req.id})}>
+                        <div className="row">
+                            <span className="col-auto">{req.data.licence ? String(req.data.licence).padStart(5, '0') : "-------"}</span>
+                            <div className="ms-2 col-auto">
+                                <div className="fw-bold">{req.data.fname} {req.data.lname}</div>
+                            </div>
+                        </div>
+                        <div className="row">
+                            <div className="col-auto" style={{textAlign: "right"}}>
+                                <small>{req.data.club?.name || "Sans club"}<br/>{req.data.categorie}</small>
+                            </div>
+                            <div className="col-auto">
+                                <button className="btn btn-danger" type="button"
+                                        onClick={e => {
+                                            e.preventDefault()
+                                            toast.promise(apiAxios.delete(`/competition/${id}/register/${req.data.id}`), {
+                                                pending: "Désinscription en cours",
+                                                success: "Combattant désinscrit",
+                                                error: {
+                                                    render({data}) {
+                                                        return data.response.data || "Erreur"
+                                                    }
+                                                }
+                                            }).finally(() => {
+                                                dispatch({type: 'REMOVE', payload: req.id})
+                                                setTimeout(() => document.getElementById("closeModal").click(), 500);
+                                            })
+                                        }
+                                        }>
+                                    <FontAwesomeIcon icon={faTrashCan}/>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    </>
+}
+
+function Def() {
+    return <div className="list-group">
+        <li className="list-group-item"><ThreeDots/></li>
+        <li className="list-group-item"><ThreeDots/></li>
+        <li className="list-group-item"><ThreeDots/></li>
+        <li className="list-group-item"><ThreeDots/></li>
+        <li className="list-group-item"><ThreeDots/></li>
+    </div>
+}

src/main/webapp/src/pages/competition/CompetitionRoot.jsx

@@ -2,6 +2,7 @@ import {LoadingProvider} from "../../hooks/useLoading.jsx";
 import {Outlet} from "react-router-dom";
 import {CompetitionList} from "./CompetitionList.jsx";
 import {CompetitionEdit} from "./CompetitionEdit.jsx";
+import {CompetitionRegisterAdmin} from "./CompetitionRegisterAdmin.jsx";
 
 export function CompetitionRoot() {
     return <>
@@ -21,6 +22,10 @@ export function getCompetitionChildren() {
         {
             path: ':id',
             element: <CompetitionEdit/>
+        },
+        {
+            path: ':id/register',
+            element: <CompetitionRegisterAdmin/>
         }
     ]
 }