feat: move competition setting to ffsaf site

src/main/webapp/src/App.jsx

@@ -13,6 +13,7 @@ import 'react-toastify/dist/ReactToastify.css';
 import {ClubRoot, getClubChildren} from "./pages/club/ClubRoot.jsx";
 import {DemandeAff, DemandeAffOk} from "./pages/DemandeAff.jsx";
 import {MePage} from "./pages/MePage.jsx";
+import {CompetitionRoot, getCompetitionChildren} from "./pages/competition/CompetitionRoot.jsx";
 
 const router = createBrowserRouter([
     {
@@ -47,6 +48,11 @@ const router = createBrowserRouter([
                     }
                 ]
             },
+            {
+                path: 'competition',
+                element: <CompetitionRoot/>,
+                children: getCompetitionChildren()
+            },
             {
                 path: 'me',
                 element: <MePage/>

src/main/webapp/src/components/ClubSelect.jsx

@@ -2,15 +2,15 @@ import {LoadingProvider, useLoadingSwitcher} from "../hooks/useLoading.jsx";
 import {useFetch} from "../hooks/useFetch.js";
 import {AxiosError} from "./AxiosError.jsx";
 
-export function ClubSelect({defaultValue, name, na = false}) {
+export function ClubSelect({defaultValue, name, na = false, disabled = false}) {
     return <LoadingProvider>
         <div className="input-group mb-3">
-            <ClubSelect_ defaultValue={defaultValue} name={name} na={na}/>
+            <ClubSelect_ defaultValue={defaultValue} name={name} na={na} disabled={disabled}/>
         </div>
     </LoadingProvider>
 }
 
-function ClubSelect_({defaultValue, name, na}) {
+function ClubSelect_({defaultValue, name, na, disabled}) {
     const setLoading = useLoadingSwitcher()
     const {data, error} = useFetch(`/club/no_detail`, setLoading, 1)
 
@@ -18,7 +18,7 @@ function ClubSelect_({defaultValue, name, na}) {
         {data
             ? <div className="input-group mb-3">
                 <label className="input-group-text" id="inputGroupSelect02">Club</label>
-                <select className="form-select" id="inputGroupSelect02"
+                <select className="form-select" id="inputGroupSelect02" disabled={disabled}
                         defaultValue={defaultValue? defaultValue : -1} name={name}>
                     <option>Sélectionner...</option>
                     {na && <option value={-1}>-- Non licencier --</option>}

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

@@ -0,0 +1,270 @@
+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 {Checkbox, CheckField, OptionField, TextField} from "../../components/MemberCustomFiels.jsx";
+import {ClubSelect} from "../../components/ClubSelect.jsx";
+import {ConfirmDialog} from "../../components/ConfirmDialog.jsx";
+import {toast} from "react-toastify";
+import {apiAxios, errFormater} from "../../utils/Tools.js";
+import {useEffect, useReducer, useState} from "react";
+import {SimpleReducer} from "../../utils/SimpleReducer.jsx";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faAdd, faPen, faTrashCan} from "@fortawesome/free-solid-svg-icons";
+
+export function CompetitionEdit() {
+    const {id} = useParams()
+    const navigate = useNavigate();
+
+    const setLoading = useLoadingSwitcher()
+    const {data, refresh, error} = useFetch(`/competition/${id}`, setLoading, 1)
+
+    const handleRm = () => {
+        toast.promise(
+            apiAxios.delete(`/competition/${id}`),
+            {
+                pending: "Suppression de la competition en cours...",
+                success: "Competition supprimé avec succès 🎉",
+                error: {
+                    render({data}) {
+                        return errFormater(data, "Échec de la suppression de la competition")
+                    }
+                },
+            }
+        ).then(_ => {
+            navigate("/competition")
+        })
+    }
+
+    return <>
+        <button type="button" className="btn btn-link" onClick={() => navigate("/competition")}>
+            &laquo; retour
+        </button>
+        <div>
+            {data
+                ? <div className="">
+                    <Content data={data} refresh={refresh}/>
+
+                    {data.id !== null && <ContentSAFCA data2={data}/>}
+
+                    {data.id !== null && <>
+                        <div className="col" style={{textAlign: 'right', marginTop: '1em'}}>
+                            <button className="btn btn-danger btn-sm" data-bs-toggle="modal"
+                                    data-bs-target="#confirm-delete">Supprimer la competition
+                            </button>
+                        </div>
+                        <ConfirmDialog title="Supprimer la competition"
+                                       message="Êtes-vous sûr de vouloir supprimer cette competition est tout les resultat associer?"
+                                       onConfirm={handleRm}/>
+                    </>}
+                </div>
+                : error && <AxiosError error={error}/>
+            }
+        </div>
+    </>
+}
+
+function ContentSAFCA({data2}) {
+    const setLoading = useLoadingSwitcher()
+    const {data, error} = useFetch(`/competition/${data2.id}/safcaData`, setLoading, 1)
+
+    const [state, dispatch] = useReducer(SimpleReducer, [])
+    const [state2, dispatch2] = useReducer(SimpleReducer, [])
+
+    useEffect(() => {
+        if (data === null)
+            return
+        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){
+            let index = 0
+            for (const d of data.table) {
+                dispatch2({type: 'UPDATE_OR_ADD', payload: {id: index, data: d}})
+                index++
+            }
+        }
+    }, [data]);
+
+    const handleSubmit = (event) => {
+        event.preventDefault();
+
+        const out = {}
+        out['id'] = (data2.id === "") ? null : data2.id
+        out['show_blason'] = event.target.show_blason.checked
+        out['show_flag'] = event.target.show_flag.checked
+        out['admin'] = state.map(d => d.data)
+        out['table'] = state2.map(d => d.data)
+
+        toast.promise(
+            apiAxios.post(`/competition/safcaData`, out),
+            {
+                pending: "Enregistrement des paramètres en cours",
+                success: "Paramètres enregistrée avec succès 🎉",
+                error: {
+                    render({data}) {
+                        return errFormater(data, "Échec de l'enregistrement des paramètres")
+                    }
+                },
+            }
+        )
+    }
+
+    return <>
+        {data ?
+            <form onSubmit={handleSubmit}>
+                <input name="id" value={data2.id || ""} readOnly hidden/>
+                <div className="card mb-4">
+                    <div className="card-header">Configuration SAFCA</div>
+                    <div className="card-body text-center">
+
+                        <div className="input-group mb-1">
+                            <div className="input-group-text">
+                                <input className="form-check-input mt-0" type="checkbox" aria-label="Afficher le blason du club sur les écrans"
+                                       defaultChecked={data.show_blason} name="show_blason"/>
+                            </div>
+                            <span className="input-group-text">Afficher le blason du club sur les écrans</span>
+                        </div>
+
+                        <div className="input-group mb-3">
+                            <div className="input-group-text">
+                                <input className="form-check-input mt-0" type="checkbox" aria-label="Afficher le pays du combattant sur les écrans"
+                                       defaultChecked={data.show_flag} name="show_flag"/>
+                            </div>
+                            <span className="input-group-text">Afficher le pays du combattant sur les écrans</span>
+                        </div>
+
+                        <span className="input-group-text">Administrateur</span>
+                        <ul className="list-group form-control">
+                            {state.map((d, index) => {
+                                return <div key={index} className="input-group">
+                                    <input type="text" className="form-control" value={d.data} required
+                                           onChange={(e) => {
+                                               dispatch({type: 'UPDATE_OR_ADD', payload: {id: d.id, data: e.target.value}})
+                                           }}/>
+                                    <button className="btn btn-danger"
+                                            onClick={() => dispatch({type: 'REMOVE', payload: d.id})}>
+                                        <FontAwesomeIcon icon={faTrashCan}/></button>
+                                </div>
+                            })}
+                            <div className="d-grid gap-2 d-md-flex justify-content-md-end">
+                                <button className="btn btn-success" onClick={e => {
+                                    e.preventDefault();
+
+                                    let maxId = 0;
+                                    state.forEach((d) => {
+                                        if (d.id > maxId)
+                                            maxId = d.id;
+                                    })
+
+                                    dispatch({type: 'UPDATE_OR_ADD', payload: {id: maxId + 1, data: ""}})
+                                }}><FontAwesomeIcon icon={faAdd}/></button>
+                            </div>
+                        </ul>
+
+                        <div className="mb-3"></div>
+                        <span className="input-group-text">Table</span>
+                        <ul className="list-group form-control">
+                            {state2.map((d, index) => {
+                                return <div key={index} className="input-group">
+                                    <input type="text" className="form-control" value={d.data} required
+                                           onChange={(e) => {
+                                               dispatch2({type: 'UPDATE_OR_ADD', payload: {id: d.id, data: e.target.value}})
+                                           }}/>
+                                    <button className="btn btn-danger"
+                                            onClick={() => dispatch2({type: 'REMOVE', payload: d.id})}>
+                                        <FontAwesomeIcon icon={faTrashCan}/></button>
+                                </div>
+                            })}
+                            <div className="d-grid gap-2 d-md-flex justify-content-md-end">
+                                <button className="btn btn-success" onClick={e => {
+                                    e.preventDefault();
+
+                                    let maxId = 0;
+                                    state2.forEach((d) => {
+                                        if (d.id > maxId)
+                                            maxId = d.id;
+                                    })
+
+                                    dispatch2({type: 'UPDATE_OR_ADD', payload: {id: maxId + 1, data: ""}})
+                                }}><FontAwesomeIcon icon={faAdd}/></button>
+                            </div>
+                        </ul>
+                    </div>
+                    <div className="row mb-3">
+                        <div className="d-grid gap-2 d-md-flex justify-content-md-end">
+                            <button type="submit" className="btn btn-primary">Enregistrer</button>
+                        </div>
+                    </div>
+                </div>
+            </form>
+            : error && <AxiosError error={error}/>}
+    </>
+}
+
+function Content({data}) {
+    const navigate = useNavigate();
+
+    const handleSubmit = (event) => {
+        event.preventDefault();
+
+        const out = {}
+        out['id'] = (data.id === "") ? null : data.id
+        out['name'] = event.target.name?.value
+        out['date'] = event.target.date?.value
+        out['system'] = event.target.system?.value
+        out['club'] = event.target.club?.value
+        out['owner'] = event.target.owner?.value
+
+        toast.promise(
+            apiAxios.post(`/competition`, out),
+            {
+                pending: "Enregistrement du club en cours",
+                success: "Club enregistrée avec succès 🎉",
+                error: {
+                    render({data}) {
+                        return errFormater(data, "Échec de l'enregistrement du club")
+                    }
+                },
+            }
+        ).then(data => {
+            navigate("/competition/" + data.id)
+        })
+    }
+
+    return <form onSubmit={handleSubmit}>
+        <div className="card mb-4">
+            <input name="id" value={data.id || ""} readOnly hidden/>
+            <div className="card-header">{data.id ? "Edition competition" : "Création competition"}</div>
+            <div className="card-body text-center">
+                <TextField name="uuid" text="UUID" value={data.uuid} disabled={true}/>
+                <TextField name="name" text="Nom" value={data.name}/>
+
+                <div className="input-group mb-3">
+                    <span className="input-group-text" id="birth_date">Date</span>
+                    <input type="date" className="form-control" placeholder="jj/mm/aaaa" aria-label="date"
+                           name="date" aria-describedby="date" defaultValue={data.date ? data.date.split('T')[0] : ''} required/>
+                </div>
+
+                {data.id !== null && <TextField name="owner" text="Propriétaire" value={data.owner}/>}
+
+                <OptionField name="system" text="System" value={data.system} values={{SAFCA: 'SAFCA'}} disabled={data.id !== null}/>
+
+                <div className="row">
+                    <ClubSelect defaultValue={data.club} name="club" na={false} disabled={data.id !== null}/>
+                </div>
+
+            </div>
+
+            <div className="row mb-3">
+                <div className="d-grid gap-2 d-md-flex justify-content-md-end">
+                    <button type="submit" className="btn btn-primary">Enregistrer</button>
+                </div>
+            </div>
+        </div>
+    </form>
+}

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

@@ -0,0 +1,61 @@
+import {useNavigate} 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";
+
+
+export function CompetitionList() {
+    const navigate = useNavigate();
+    const setLoading = useLoadingSwitcher()
+    const {data, error} = useFetch(`/competition/all`, setLoading, 1)
+
+
+    return <>
+        <div>
+            <div className="row">
+                {data
+                    ? <MakeCentralPanel data={data} navigate={navigate}/>
+                    : error
+                        ? <AxiosError error={error}/>
+                        : <Def/>
+                }
+            </div>
+        </div>
+    </>
+}
+
+function MakeCentralPanel({data, navigate}) {
+
+    return <>
+        <div className="col mb-2" style={{textAlign: 'right', marginTop: '1em'}}>
+            <button type="button" className="btn btn-primary" onClick={() => navigate("/competition/0")}>Nouvelle competition</button>
+        </div>
+        <div className="mb-4">
+            <div className="list-group">
+                {data.map(req => (<MakeRow key={req.id} data={req} navigate={navigate}/>))}
+            </div>
+        </div>
+    </>
+}
+
+function MakeRow({data, navigate}) {
+    return <div className="list-group-item d-flex justify-content-between align-items-start list-group-item-action"
+                onClick={() => navigate("" + data.id)}>
+        <div className="ms-2 col-auto">
+            <div className="fw-bold">{data.name}</div>
+            <small>{data.date.split('T')[0]}</small>
+        </div>
+        <small style={{textAlign: 'right'}}>{data.clubName}<br/>{data.system}</small>
+    </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

@@ -0,0 +1,26 @@
+import {LoadingProvider} from "../../hooks/useLoading.jsx";
+import {Outlet} from "react-router-dom";
+import {CompetitionList} from "./CompetitionList.jsx";
+import {CompetitionEdit} from "./CompetitionEdit.jsx";
+
+export function CompetitionRoot() {
+    return <>
+        <h1>Competition</h1>
+        <LoadingProvider>
+            <Outlet/>
+        </LoadingProvider>
+    </>
+}
+
+export function getCompetitionChildren() {
+    return [
+        {
+            path: '',
+            element: <CompetitionList/>
+        },
+        {
+            path: ':id',
+            element: <CompetitionEdit/>
+        }
+    ]
+}