93 lines
3.9 KiB
JavaScript
93 lines
3.9 KiB
JavaScript
import {useNavigate, useParams} from "react-router-dom";
|
|
import {LoadingProvider, useLoadingSwitcher} from "../../../hooks/useLoading.jsx";
|
|
import {useFetch} from "../../../hooks/useFetch.js";
|
|
import {AxiosError} from "../../../components/AxiosError.jsx";
|
|
import {CompteInfo} from "./CompteInfo.jsx";
|
|
import {PremForm} from "./PremForm.jsx";
|
|
import {InformationForm} from "./InformationForm.jsx";
|
|
import {LicenceCard} from "./LicenceCard.jsx";
|
|
import {toast} from "react-toastify";
|
|
import {apiAxios, errFormater, getToastMessage} from "../../../utils/Tools.js";
|
|
import {ConfirmDialog} from "../../../components/ConfirmDialog.jsx";
|
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
|
import {faFilePdf} from "@fortawesome/free-solid-svg-icons";
|
|
import {SelectCard} from "./SelectCard.jsx";
|
|
import {useTranslation} from "react-i18next";
|
|
|
|
const vite_url = import.meta.env.VITE_URL;
|
|
|
|
export function MemberPage() {
|
|
const {id} = useParams()
|
|
const navigate = useNavigate();
|
|
const {t} = useTranslation();
|
|
|
|
const setLoading = useLoadingSwitcher()
|
|
const {data, error} = useFetch(`/member/${id}`, setLoading, 1)
|
|
|
|
const handleRm = () => {
|
|
toast.promise(
|
|
apiAxios.delete(`/member/${id}`), getToastMessage("membre.toast.del")
|
|
).then(_ => {
|
|
navigate(-1)
|
|
})
|
|
}
|
|
|
|
return <>
|
|
<h2>{t('pageMembre')}</h2>
|
|
<button type="button" className="btn btn-link" onClick={() => navigate(-1)}>
|
|
{t('back')}
|
|
</button>
|
|
{data
|
|
? <div>
|
|
<div className="row">
|
|
<div className="col-lg-4">
|
|
<PhotoCard data={data}/>
|
|
<LoadingProvider><CompteInfo userData={data}/></LoadingProvider>
|
|
</div>
|
|
<div className="col-lg-8">
|
|
<InformationForm data={data}/>
|
|
<LoadingProvider><PremForm userData={data}/></LoadingProvider>
|
|
<div className="row">
|
|
<div className="col-md-6">
|
|
<LoadingProvider><LicenceCard userData={data}/></LoadingProvider>
|
|
</div>
|
|
<div className="col-md-6">
|
|
<LoadingProvider><SelectCard userData={data}/></LoadingProvider>
|
|
</div>
|
|
</div>
|
|
<div className="col" style={{textAlign: 'right', marginTop: '1em'}}>
|
|
<button className="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#confirm-delete">{t('supprimerLeCompte')}
|
|
</button>
|
|
</div>
|
|
<ConfirmDialog title={t('supprimerLeCompte')} message={t('supprimerLeCompte.msg')}
|
|
onConfirm={handleRm}/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
: error && <AxiosError error={error}/>
|
|
}
|
|
</>
|
|
}
|
|
|
|
function PhotoCard({data}) {
|
|
const {t} = useTranslation();
|
|
|
|
return <div className="card mb-4">
|
|
<div className="card-header">{data.licence ? t('licenceNo', {no: data.licence}) : t('pasDeLicence')}</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>
|
|
<a href={`${vite_url}/api/member/${data.id}/licence`} target='#'>
|
|
<button className="btn btn-primary" type="button" id="button-addon1"
|
|
onClick={e => null}>
|
|
{t('téléchargéeLaLicence')} <FontAwesomeIcon icon={faFilePdf}></FontAwesomeIcon>
|
|
</button>
|
|
</a>
|
|
</div>
|
|
</div>;
|
|
}
|