init Membre prem card
This commit is contained in:
parent
251d0e25d6
commit
e3306f4b5a
@ -20,7 +20,6 @@ export function MemberPage() {
|
|||||||
|
|
||||||
const handleSubmit = (event) => {
|
const handleSubmit = (event) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
setLoading(1)
|
setLoading(1)
|
||||||
|
|
||||||
const formData = new FormData();
|
const formData = new FormData();
|
||||||
@ -72,22 +71,151 @@ export function MemberPage() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleSubmitPerm = (event) => {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
return <>
|
return <>
|
||||||
<h2>Page membre</h2>
|
<h2>Page membre</h2>
|
||||||
<button type="button" className="btn btn-link" onClick={() => navigate("/admin/member")}>
|
<button type="button" className="btn btn-link" onClick={() => navigate("/admin/member")}>
|
||||||
<< retour
|
<< retour
|
||||||
</button>
|
</button>
|
||||||
{data
|
{data
|
||||||
? <MemberForm data={data} handleSubmit={handleSubmit}/>
|
? <div>
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-lg-4">
|
||||||
|
<PhotoCard data={data}/>
|
||||||
|
<CompteInfo userData={data}/>
|
||||||
|
</div>
|
||||||
|
<div className="col-lg-8">
|
||||||
|
<InformationForm handleSubmit={handleSubmit} data={data}/>
|
||||||
|
<PremForm handleSubmitPerm={handleSubmitPerm}/>
|
||||||
|
<div className="row">
|
||||||
|
<LicenceCard/>
|
||||||
|
<SelectCard/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
: error && <AxiosError error={error}/>
|
: error && <AxiosError error={error}/>
|
||||||
}
|
}
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
|
|
||||||
function MemberForm({data, handleSubmit}) {
|
function PhotoCard({data}) {
|
||||||
|
return <div className="card mb-4">
|
||||||
|
<div className="card-header">Licence n°{data.licence}</div>
|
||||||
|
<div className="card-body text-center">
|
||||||
|
<div className="input-group mb-3">
|
||||||
|
<img
|
||||||
|
src={`${vite_url}/api/member/${data.id}/photo`}
|
||||||
|
alt="avatar"
|
||||||
|
className="rounded-circle img-fluid" style={{object_fit: 'contain'}}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
function InformationForm({handleSubmit, data}) {
|
||||||
|
return <form onSubmit={handleSubmit}>
|
||||||
|
<div className="card mb-4">
|
||||||
|
<div className="card-header">Information</div>
|
||||||
|
<div className="card-body">
|
||||||
|
<TextField name="lname" text="Nom" value={data.lname}/>
|
||||||
|
<TextField name="fname" text="Prénom" value={data.fname}/>
|
||||||
|
<TextField name="email" text="Email" value={data.email} placeholder="name@example.com"
|
||||||
|
type="email"/>
|
||||||
|
<OptionField name="genre" text="Genre" value={data.genre}
|
||||||
|
values={{NA: 'N/A', H: 'H', F: 'F'}}/>
|
||||||
|
<OptionField name="country" text="Pays" value={data.country}
|
||||||
|
values={{NA: 'Sélectionner...', fr: 'FR', es: 'ES', be: 'BE'}}/>
|
||||||
|
<BirthDayField inti_date={data.birth_date ? data.birth_date.split('T')[0] : ''}
|
||||||
|
inti_category={data.categorie}/>
|
||||||
|
<div className="row">
|
||||||
|
<ClubSelect defaultValue={data?.club?.id} name="club"/>
|
||||||
|
</div>
|
||||||
|
<OptionField name="role" text="Rôle" value={data.role}
|
||||||
|
values={{
|
||||||
|
MEMBRE: 'Membre',
|
||||||
|
PRESIDENT: 'Président',
|
||||||
|
TRESORIER: 'Trésorier',
|
||||||
|
SECRETAIRE: 'Secrétaire'
|
||||||
|
}}/>
|
||||||
|
<OptionField name="grade_arbitrage" text="Grade d'arbitrage" value={data.grade_arbitrage}
|
||||||
|
values={{NA: 'N/A', ASSESSEUR: 'Assesseur', ARBITRE: 'Arbitre'}}/>
|
||||||
|
<div className="row">
|
||||||
|
<div className="input-group mb-3">
|
||||||
|
<label className="input-group-text" htmlFor="url_photo">Photos
|
||||||
|
(optionnelle)</label>
|
||||||
|
<input type="file" className="form-control" id="url_photo" name="url_photo"
|
||||||
|
accept=".jpg,.jpeg,.gif,.png,.svg"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-md-12 text-right">
|
||||||
|
<button type="submit" className="btn btn-primary">Enregistrer</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>;
|
||||||
|
}
|
||||||
|
|
||||||
|
function PremForm({handleSubmitPerm}) {
|
||||||
|
return <form onSubmit={handleSubmitPerm}>
|
||||||
|
<div className="card mb-4">
|
||||||
|
<div className="card-header">Permission</div>
|
||||||
|
<div className="card-body">
|
||||||
|
<div className="row g-3">
|
||||||
|
<div className="col">
|
||||||
|
<h5>FFSAF intra</h5>
|
||||||
|
<CheckField name="federation_admin" text="Accès à l'intra" value={false}/>
|
||||||
|
</div>
|
||||||
|
<div className="col">
|
||||||
|
<h5>SAFCA</h5>
|
||||||
|
<CheckField name="safca_user" text="Accès à l'application" value={false}/>
|
||||||
|
<CheckField name="safca_create_compet" text="Créer des compétion" value={false}/>
|
||||||
|
<CheckField name="safca_super_admin" text="Super administrateur" value={false}/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-md-12 text-right">
|
||||||
|
<button type="submit" className="btn btn-primary">Enregistrer</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>;
|
||||||
|
}
|
||||||
|
|
||||||
|
function LicenceCard() {
|
||||||
|
return <div className="col-md-6">
|
||||||
|
<div className="card mb-4 mb-md-0">
|
||||||
|
<div className="card-header">Licence</div>
|
||||||
|
<div className="card-body">
|
||||||
|
<p className="mb-1">Web Design</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectCard() {
|
||||||
|
return <div className="col-md-6">
|
||||||
|
<div className="card mb-4 mb-md-0">
|
||||||
|
<div className="card-header">Sélection en équipe de France</div>
|
||||||
|
<div className="card-body">
|
||||||
|
<p className="mb-1">Web Design</p>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
function CompteInfo({userData}) {
|
||||||
|
|
||||||
const creatAccount = () => {
|
const creatAccount = () => {
|
||||||
toast.promise(
|
toast.promise(
|
||||||
apiAxios.put(`/compte/${data.id}/init`),
|
apiAxios.put(`/compte/${userData.id}/init`),
|
||||||
{
|
{
|
||||||
pending: 'Création du compte en cours',
|
pending: 'Création du compte en cours',
|
||||||
success: 'Compte créé avec succès 🎉',
|
success: 'Compte créé avec succès 🎉',
|
||||||
@ -96,137 +224,53 @@ function MemberForm({data, handleSubmit}) {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
return <div>
|
return <div className="card mb-4">
|
||||||
<div className="row">
|
<div className="card-header">Compte</div>
|
||||||
<div className="col-lg-4">
|
<div className="card-body text-center">
|
||||||
<div className="card mb-4">
|
{userData.userId
|
||||||
<div className="card-header">Licence n°{data.licence}</div>
|
? <CompteInfoContent userData={userData}/>
|
||||||
<div className="card-body text-center">
|
: <>
|
||||||
|
<div className="row">
|
||||||
<div className="input-group mb-3">
|
<div className="input-group mb-3">
|
||||||
<img
|
<div>Ce membre ne dispose pas de compte...</div>
|
||||||
src={`${vite_url}/api/member/${data.id}/photo`}
|
|
||||||
alt="avatar"
|
|
||||||
className="rounded-circle img-fluid" style={{object_fit: 'contain'}}/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="row">
|
||||||
<div className="card mb-4">
|
<div className="input-group mb-3">
|
||||||
<div className="card-header">Compte</div>
|
<button className="btn btn-primary" onClick={creatAccount}>Initialiser le compte</button>
|
||||||
<div className="card-body text-center">
|
|
||||||
{data.userId
|
|
||||||
? <CompteInfo userId={data.userId}/>
|
|
||||||
: <>
|
|
||||||
<div className="row">
|
|
||||||
<div className="input-group mb-3">
|
|
||||||
<div>Ce membre ne dispose pas de compte...</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="row">
|
|
||||||
<div className="input-group mb-3">
|
|
||||||
<button className="btn btn-primary" onClick={creatAccount}>Initialiser le compte</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-lg-8">
|
|
||||||
<form onSubmit={handleSubmit}>
|
|
||||||
<div className="card mb-4">
|
|
||||||
<div className="card-header">Information</div>
|
|
||||||
<div className="card-body">
|
|
||||||
<TextField name="lname" text="Nom" value={data.lname}/>
|
|
||||||
<TextField name="fname" text="Prénom" value={data.fname}/>
|
|
||||||
<TextField name="email" text="Email" value={data.email} placeholder="name@example.com"
|
|
||||||
type="email"/>
|
|
||||||
<OptionField name="genre" text="Genre" value={data.genre}
|
|
||||||
values={{NA: 'N/A', H: 'H', F: 'F'}}/>
|
|
||||||
<OptionField name="country" text="Pays" value={data.country}
|
|
||||||
values={{NA: 'Sélectionner...', fr: 'FR', es: 'ES', be: 'BE'}}/>
|
|
||||||
<BirthDayField inti_date={data.birth_date ? data.birth_date.split('T')[0] : ''}
|
|
||||||
inti_category={data.categorie}/>
|
|
||||||
<div className="row">
|
|
||||||
<ClubSelect defaultValue={data?.club?.id} name="club"/>
|
|
||||||
</div>
|
|
||||||
<OptionField name="grade_arbitrage" text="Rôle" value={data.role}
|
|
||||||
values={{NA: 'N/A', ASSESSEUR: 'Assesseur', ARBITRE: 'Arbitre'}}/>
|
|
||||||
<OptionField name="role" text="Grade d'arbitrage" value={data.grade_arbitrage}
|
|
||||||
values={{
|
|
||||||
MEMBRE: 'Membre',
|
|
||||||
PRESIDENT: 'Président',
|
|
||||||
TRESORIER: 'Trésorier',
|
|
||||||
SECRETAIRE: 'Secrétaire'
|
|
||||||
}}/>
|
|
||||||
<div className="row">
|
|
||||||
<div className="input-group mb-3">
|
|
||||||
<label className="input-group-text" htmlFor="url_photo">Photos
|
|
||||||
(optionnelle)</label>
|
|
||||||
<input type="file" className="form-control" id="url_photo" name="url_photo"
|
|
||||||
accept=".jpg,.jpeg,.gif,.png,.svg"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="row">
|
|
||||||
<div className="col-md-12 text-right">
|
|
||||||
<button type="submit" className="btn btn-primary">Enregistrer</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</>}
|
||||||
<div className="row">
|
|
||||||
<div className="col-md-6">
|
|
||||||
<div className="card mb-4 mb-md-0">
|
|
||||||
<div className="card-header">Licence</div>
|
|
||||||
<div className="card-body">
|
|
||||||
<p className="mb-1">Web Design</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="col-md-6">
|
|
||||||
<div className="card mb-4 mb-md-0">
|
|
||||||
<div className="card-header">Sélection en équipe de France</div>
|
|
||||||
<div className="card-body">
|
|
||||||
<p className="mb-1">Web Design</p>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function CompteInfo({userId}) {
|
function CompteInfoContent({userData}) {
|
||||||
const setLoading = useLoadingSwitcher()
|
const setLoading = useLoadingSwitcher()
|
||||||
const {data, error} = useFetch(`/compte/${userId}`, setLoading, 1)
|
const {data, error} = useFetch(`/compte/${userData.userId}`, setLoading, 1)
|
||||||
|
|
||||||
return <>
|
return <>
|
||||||
{data
|
{data
|
||||||
? <CompteInfoContent data={data}/>
|
? <>
|
||||||
|
<div className="row">
|
||||||
|
<div className="input-group mb-3">
|
||||||
|
<div>Identifiant: {data.login}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="row">
|
||||||
|
<div className="input-group mb-3">
|
||||||
|
<div>Activer: <ColoredCircle boolean={data.enabled}/></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="row">
|
||||||
|
<div className="input-group mb-3">
|
||||||
|
<div>Email vérifié: <ColoredCircle boolean={data.emailVerified}/></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
: error && <AxiosError error={error}/>
|
: error && <AxiosError error={error}/>
|
||||||
}
|
} </>
|
||||||
</>
|
|
||||||
}
|
|
||||||
|
|
||||||
function CompteInfoContent({data}) {
|
|
||||||
return <>
|
|
||||||
<div className="row">
|
|
||||||
<div className="input-group mb-3">
|
|
||||||
<div>Identifiant: {data.login}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="row">
|
|
||||||
<div className="input-group mb-3">
|
|
||||||
<div>Activer: <ColoredCircle boolean={data.enabled}/></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="row">
|
|
||||||
<div className="input-group mb-3">
|
|
||||||
<div>Email vérifié: <ColoredCircle boolean={data.emailVerified}/></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function BirthDayField({inti_date, inti_category}) {
|
function BirthDayField({inti_date, inti_category}) {
|
||||||
@ -287,3 +331,23 @@ function TextField({name, text, value, placeholder, type = "text"}) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function CheckField({name, text, value, row = false}) {
|
||||||
|
return <>{
|
||||||
|
row ?
|
||||||
|
<div className="row">
|
||||||
|
<div className="input-group mb-3">
|
||||||
|
<div className="form-check">
|
||||||
|
<input className="form-check-input" type="checkbox" id={name} name={name}
|
||||||
|
defaultChecked={value}/>
|
||||||
|
<label className="form-check-label" htmlFor={name}>{text}</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
: <div className="form-check">
|
||||||
|
<input className="form-check-input" type="checkbox" id={name} name={name} defaultChecked={value}/>
|
||||||
|
<label className="form-check-label" htmlFor={name}>{text}</label>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</>
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user