feat: add guest comb to competition register form
This commit is contained in:
@@ -4,14 +4,14 @@ import {useFetch} from "../../hooks/useFetch.js";
|
||||
import {AxiosError} from "../../components/AxiosError.jsx";
|
||||
import {ThreeDots} from "react-loader-spinner";
|
||||
import {useEffect, useReducer, useRef, useState} from "react";
|
||||
import {apiAxios, errFormater} from "../../utils/Tools.js";
|
||||
import {apiAxios, CatList, getCatName} from "../../utils/Tools.js";
|
||||
import {toast} from "react-toastify";
|
||||
import {SimpleReducer} from "../../utils/SimpleReducer.jsx";
|
||||
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
||||
import {faAdd, faGavel, faTrashCan} from "@fortawesome/free-solid-svg-icons";
|
||||
import "./CompetitionRegisterAdmin.css"
|
||||
import * as XLSX from "xlsx-js-style";
|
||||
import * as Tools from "../../utils/Tools.js";
|
||||
import {useCountries} from "../../hooks/useCountries.jsx";
|
||||
|
||||
export function CompetitionRegisterAdmin({source}) {
|
||||
const {id} = useParams()
|
||||
@@ -70,9 +70,14 @@ export function CompetitionRegisterAdmin({source}) {
|
||||
</div> : error ? <AxiosError error={error}/> : <Def/>}
|
||||
</div>
|
||||
<div className="col-lg-3">
|
||||
<div className="mb-1">
|
||||
<button type="button" className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#registerModal"
|
||||
onClick={() => setModalState({id: 0})}>Ajouter un combattant
|
||||
</button>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<button type="button" className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#registerModal"
|
||||
onClick={() => setModalState({})}>Ajouter un combattant
|
||||
onClick={() => setModalState({id: -793548328091516928})}>Ajouter un invité
|
||||
</button>
|
||||
</div>
|
||||
<QuickAdd sendRegister={sendRegister} source={source}/>
|
||||
@@ -276,15 +281,22 @@ const AutoCompleteInput = ({suggestions = [], handleAdd}) => {
|
||||
};
|
||||
|
||||
function Modal({sendRegister, modalState, setModalState, source}) {
|
||||
const country = useCountries('fr')
|
||||
|
||||
const [licence, setLicence] = useState("")
|
||||
const [fname, setFname] = useState("")
|
||||
const [lname, setLname] = useState("")
|
||||
const [weight, setWeight] = useState("")
|
||||
const [cat, setCat] = useState(0)
|
||||
const [gcat, setGCat] = useState("")
|
||||
const [club, setClub] = useState("")
|
||||
const [country_, setCountry_] = useState("fr")
|
||||
const [genre, setGenre] = useState("NA")
|
||||
const [editMode, setEditMode] = useState(false)
|
||||
const [lockEdit, setLockEdit] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
console.log(modalState)
|
||||
if (!modalState) {
|
||||
setLicence("")
|
||||
setFname("")
|
||||
@@ -293,6 +305,10 @@ function Modal({sendRegister, modalState, setModalState, source}) {
|
||||
setCat(0)
|
||||
setEditMode(false)
|
||||
setLockEdit(false)
|
||||
setClub("")
|
||||
setGCat("")
|
||||
setCountry_("fr")
|
||||
setGenre("NA")
|
||||
} else {
|
||||
setLicence(modalState.licence ? modalState.licence : "")
|
||||
setFname(modalState.fname ? modalState.fname : "")
|
||||
@@ -301,6 +317,10 @@ function Modal({sendRegister, modalState, setModalState, source}) {
|
||||
setCat(modalState.overCategory ? modalState.overCategory : 0)
|
||||
setEditMode(modalState.licence || (modalState.fname && modalState.lname))
|
||||
setLockEdit(modalState.lockEdit)
|
||||
setClub(modalState.club ? modalState.club.name : "")
|
||||
setGCat(modalState.categorie ? modalState.categorie : "")
|
||||
setCountry_(modalState.country ? modalState.country : "fr")
|
||||
setGenre(modalState.genre ? modalState.genre : "NA")
|
||||
}
|
||||
}, [modalState]);
|
||||
|
||||
@@ -311,46 +331,103 @@ function Modal({sendRegister, modalState, setModalState, source}) {
|
||||
<form onSubmit={e => {
|
||||
e.preventDefault()
|
||||
const new_state = {
|
||||
licence: licence, fname: fname, lname: lname, weight: weight, overCategory: cat, lockEdit: lockEdit, id: modalState.id
|
||||
licence: licence,
|
||||
fname: fname,
|
||||
lname: lname,
|
||||
weight: weight,
|
||||
overCategory: cat,
|
||||
lockEdit: lockEdit,
|
||||
id: modalState.id !== 0 ? modalState.id : null
|
||||
}
|
||||
if (modalState.id < 0) {
|
||||
new_state.licence = -1
|
||||
new_state.categorie = gcat
|
||||
new_state.club = club
|
||||
new_state.country = country_
|
||||
new_state.genre = genre
|
||||
}
|
||||
setModalState(new_state)
|
||||
sendRegister(new_state)
|
||||
}}>
|
||||
<div className="modal-header">
|
||||
<h1 className="modal-title fs-5" id="registerLabel">{editMode ? "Modification d'" : "Ajouter "}un combattant</h1>
|
||||
<h1 className="modal-title fs-5"
|
||||
id="registerLabel">{editMode ? "Modification d'" : "Ajouter "}un {modalState.id >= 0 ? "combattant" : "invité"}</h1>
|
||||
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
{modalState.id < 0 && <div className="mb-2">Les invités sont réservés aux membres non licenciés par la fédération. Les combattants inscrits via ce formulaire ne pourront pas voir leur résultat depuis leur profil.</div>}
|
||||
<div className="card" style={{marginBottom: "1em"}}>
|
||||
<div className="card-header">Recherche*</div>
|
||||
<div className="card-header">{modalState.id >= 0 ? "Recherche*" : "Information"}</div>
|
||||
<div className="card-body">
|
||||
<div className="row">
|
||||
<div className="row" hidden={modalState.id < 0}>
|
||||
<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>
|
||||
<h5 style={{textAlign: "center", marginTop: "0.25em"}} hidden={modalState.id < 0}>Ou</h5>
|
||||
<div className="row">
|
||||
<div className="col">
|
||||
<input type="text" className="form-control" placeholder="Prénom" name="fname" disabled={editMode}
|
||||
<input type="text" className="form-control" placeholder="Prénom" name="fname"
|
||||
disabled={editMode && modalState.id >= 0}
|
||||
value={fname} onChange={e => setFname(e.target.value)}/>
|
||||
</div>
|
||||
<div className="col">
|
||||
<input type="text" className="form-control" placeholder="Nom" name="lname" disabled={editMode}
|
||||
<input type="text" className="form-control" placeholder="Nom" name="lname"
|
||||
disabled={editMode && modalState.id >= 0}
|
||||
value={lname} onChange={e => setLname(e.target.value)}/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="input-group mb-3" hidden={modalState.id >= 0}>
|
||||
<span className="input-group-text" id="categorie">Club</span>
|
||||
<input type="text" className="form-control" placeholder="Club" name="club"
|
||||
value={club} onChange={e => setClub(e.target.value)}/>
|
||||
</div>
|
||||
|
||||
<div className="input-group mb-3" hidden={modalState.id >= 0}>
|
||||
<span className="input-group-text" id="categorie">Catégorie</span>
|
||||
<select id="inputState2" className="form-select" value={gcat}
|
||||
onChange={(e) => setGCat(e.target.value)}>
|
||||
<option>-- Sélectionner catégorie --</option>
|
||||
{CatList.map((cat, index) => {
|
||||
return (<option key={index} value={cat}>{getCatName(cat)}</option>)
|
||||
})}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="input-group mb-3" hidden={modalState.id >= 0}>
|
||||
<span className="input-group-text" id="categorie">Pays</span>
|
||||
<select id="inputState0" className="form-select" value={country_} onChange={(e) => setCountry_(e.target.value)}>
|
||||
{country && Object.keys(country).sort((a, b) => {
|
||||
if (a < b) return -1
|
||||
if (a > b) return 1
|
||||
return 0
|
||||
}).map((key, _) => {
|
||||
return (<option key={key} value={key}>{country[key]}</option>)
|
||||
})}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="input-group mb-3" hidden={modalState.id >= 0}>
|
||||
<span className="input-group-text" id="categorie">Genre</span>
|
||||
<select className="form-select" aria-label="categorie" name="categorie" value={genre}
|
||||
onChange={e => setGenre(e.target.value)}>
|
||||
<option value={"NA"}>NA</option>
|
||||
<option value={"H"}>H</option>
|
||||
<option value={"F"}>F</option>
|
||||
</select>
|
||||
</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">
|
||||
<div className="input-group mb-3" hidden={modalState.id < 0}>
|
||||
<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))}>
|
||||
@@ -360,7 +437,7 @@ function Modal({sendRegister, modalState, setModalState, source}) {
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{editMode && source === "admin" && <div className="form-check form-switch form-check-reverse">
|
||||
{editMode && source === "admin" && <div className="form-check form-switch form-check-reverse" hidden={modalState.id < 0}>
|
||||
<input className="form-check-input" type="checkbox" id="switchCheckReverse" checked={lockEdit}
|
||||
onChange={e => setLockEdit(e.target.checked)}/>
|
||||
<label className="form-check-label" htmlFor="switchCheckReverse">Empêcher les membres/club de modifier cette
|
||||
@@ -436,7 +513,7 @@ function MakeCentralPanel({data, dispatch, id, setModalState, source}) {
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-auto" style={{textAlign: "right"}}>
|
||||
<small>{req.data.categorie + (req.data.overCategory === 0 ? "" : (" avec " + req.data.overCategory + " de surclassement"))}<br/>
|
||||
<small>{getCatName(req.data.categorie) + (req.data.overCategory === 0 ? "" : (" avec " + req.data.overCategory + " de surclassement"))}<br/>
|
||||
{req.data.weight ? req.data.weight : "---"} kg
|
||||
</small>
|
||||
</div>
|
||||
|
||||
@@ -99,6 +99,8 @@ export function getCatName(cat) {
|
||||
return "Vétéran 1";
|
||||
case "VETERAN2":
|
||||
return "Vétéran 2";
|
||||
case null:
|
||||
return "Catégorie inconnue";
|
||||
default:
|
||||
return cat;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user