init Membre prem card
This commit is contained in:
parent
251d0e25d6
commit
e3306f4b5a
@ -20,7 +20,6 @@ export function MemberPage() {
|
||||
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
|
||||
setLoading(1)
|
||||
|
||||
const formData = new FormData();
|
||||
@ -72,22 +71,151 @@ export function MemberPage() {
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmitPerm = (event) => {
|
||||
|
||||
}
|
||||
|
||||
return <>
|
||||
<h2>Page membre</h2>
|
||||
<button type="button" className="btn btn-link" onClick={() => navigate("/admin/member")}>
|
||||
<< retour
|
||||
</button>
|
||||
{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}/>
|
||||
}
|
||||
</>
|
||||
}
|
||||
|
||||
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 = () => {
|
||||
toast.promise(
|
||||
apiAxios.put(`/compte/${data.id}/init`),
|
||||
apiAxios.put(`/compte/${userData.id}/init`),
|
||||
{
|
||||
pending: 'Création du compte en cours',
|
||||
success: 'Compte créé avec succès 🎉',
|
||||
@ -96,137 +224,53 @@ function MemberForm({data, handleSubmit}) {
|
||||
)
|
||||
}
|
||||
|
||||
return <div>
|
||||
<div className="row">
|
||||
<div className="col-lg-4">
|
||||
<div className="card mb-4">
|
||||
<div className="card-header">Licence n°{data.licence}</div>
|
||||
<div className="card-body text-center">
|
||||
return <div className="card mb-4">
|
||||
<div className="card-header">Compte</div>
|
||||
<div className="card-body text-center">
|
||||
{userData.userId
|
||||
? <CompteInfoContent userData={userData}/>
|
||||
: <>
|
||||
<div className="row">
|
||||
<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>Ce membre ne dispose pas de compte...</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card mb-4">
|
||||
<div className="card-header">Compte</div>
|
||||
<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 className="row">
|
||||
<div className="input-group mb-3">
|
||||
<button className="btn btn-primary" onClick={creatAccount}>Initialiser le compte</button>
|
||||
</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>
|
||||
|
||||
}
|
||||
|
||||
function CompteInfo({userId}) {
|
||||
function CompteInfoContent({userData}) {
|
||||
const setLoading = useLoadingSwitcher()
|
||||
const {data, error} = useFetch(`/compte/${userId}`, setLoading, 1)
|
||||
const {data, error} = useFetch(`/compte/${userData.userId}`, setLoading, 1)
|
||||
|
||||
return <>
|
||||
{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}/>
|
||||
}
|
||||
</>
|
||||
}
|
||||
|
||||
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}) {
|
||||
@ -286,4 +330,24 @@ function TextField({name, text, value, placeholder, type = "text"}) {
|
||||
name={name} aria-describedby={name} defaultValue={value} required/>
|
||||
</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