✨ Add a loader to users
This commit is contained in:
Maxime Lalo
parent
b14a7a5fbf
commit
ee2b018c2c
@ -83,3 +83,15 @@
|
||||
.remove-my-vote {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.loader-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
.loader {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -18,6 +18,7 @@ import { useCallback, useEffect, useState } from "react";
|
||||
|
||||
import classes from "./classes.module.scss";
|
||||
import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles";
|
||||
import Loader from "@Front/Components/DesignSystem/Loader";
|
||||
|
||||
type IProps = {};
|
||||
export default function UserInformations(props: IProps) {
|
||||
@ -36,10 +37,12 @@ export default function UserInformations(props: IProps) {
|
||||
|
||||
const [currentAppointment, setCurrentAppointment] = useState<Appointment | null>(null);
|
||||
|
||||
const [isLoading, setIsLoading] = useState<boolean>(true);
|
||||
/** When page change, get the user of the page */
|
||||
|
||||
const getUser = useCallback(async () => {
|
||||
if (!userUid) return;
|
||||
setIsLoading(true);
|
||||
const user = await Users.getInstance().getByUid(userUid as string, {
|
||||
q: {
|
||||
contact: true,
|
||||
@ -66,6 +69,7 @@ export default function UserInformations(props: IProps) {
|
||||
},
|
||||
});
|
||||
if (!roles) return;
|
||||
setIsLoading(false);
|
||||
setUserSelected(user);
|
||||
}, [userUid]);
|
||||
|
||||
@ -201,135 +205,146 @@ export default function UserInformations(props: IProps) {
|
||||
|
||||
return (
|
||||
<DefaultUserDashboard mobileBackText={"Liste des utilisateurs"}>
|
||||
<div className={classes["root"]}>
|
||||
<div className={classes["header"]}>
|
||||
<Typography typo={ITypo.H1Bis}>{userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name}</Typography>
|
||||
<Typography typo={ITypo.H3} color={ITypoColor.GREY}>
|
||||
Office {userSelected?.office_membership?.name.toLocaleUpperCase()}
|
||||
</Typography>
|
||||
</div>
|
||||
<div className={classes["user-infos"]}>
|
||||
<div className={classes["user-infos-row"]}>
|
||||
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
|
||||
Nom
|
||||
{!isLoading && (
|
||||
<div className={classes["root"]}>
|
||||
<div className={classes["header"]}>
|
||||
<Typography typo={ITypo.H1Bis}>
|
||||
{userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name}
|
||||
</Typography>
|
||||
<Typography typo={ITypo.P_18}>{userSelected?.contact?.first_name}</Typography>
|
||||
</div>
|
||||
<div className={classes["user-infos-row"]}>
|
||||
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
|
||||
Prénom
|
||||
<Typography typo={ITypo.H3} color={ITypoColor.GREY}>
|
||||
Office {userSelected?.office_membership?.name.toLocaleUpperCase()}
|
||||
</Typography>
|
||||
<Typography typo={ITypo.P_18}>{userSelected?.contact?.last_name}</Typography>
|
||||
</div>
|
||||
<div className={classes["user-infos-row"]}>
|
||||
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
|
||||
Numéro de téléphone
|
||||
</Typography>
|
||||
<Typography typo={ITypo.P_18}>{userSelected?.contact?.phone_number}</Typography>
|
||||
</div>
|
||||
<div className={classes["user-infos-row"]}>
|
||||
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
|
||||
Email
|
||||
</Typography>
|
||||
<Typography typo={ITypo.P_18}>{userSelected?.contact?.email}</Typography>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={classes["role-container"]}>
|
||||
<div className={classes["part"]}>
|
||||
<div className={classes["first-line"]}>
|
||||
<Typography typo={ITypo.P_SB_18}>Rôle au sein de son office</Typography>
|
||||
<div className={classes["user-infos"]}>
|
||||
<div className={classes["user-infos-row"]}>
|
||||
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
|
||||
Nom
|
||||
</Typography>
|
||||
<Typography typo={ITypo.P_18}>{userSelected?.contact?.first_name}</Typography>
|
||||
</div>
|
||||
<div className={classes["second-line"]}>
|
||||
<Typography typo={ITypo.P_18}>
|
||||
{userSelected?.office_role ? userSelected?.office_role?.name : "Utilisateur restreint"}
|
||||
<div className={classes["user-infos-row"]}>
|
||||
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
|
||||
Prénom
|
||||
</Typography>
|
||||
<Typography typo={ITypo.P_18}>{userSelected?.contact?.last_name}</Typography>
|
||||
</div>
|
||||
<div className={classes["user-infos-row"]}>
|
||||
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
|
||||
Numéro de téléphone
|
||||
</Typography>
|
||||
<Typography typo={ITypo.P_18}>{userSelected?.contact?.phone_number}</Typography>
|
||||
</div>
|
||||
<div className={classes["user-infos-row"]}>
|
||||
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
|
||||
Email
|
||||
</Typography>
|
||||
<Typography typo={ITypo.P_18}>{userSelected?.contact?.email}</Typography>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={classes["role-container"]}>
|
||||
<div className={classes["part"]}>
|
||||
<div className={classes["first-line"]}>
|
||||
<Typography typo={ITypo.P_SB_18}>Rôle au sein de son office</Typography>
|
||||
</div>
|
||||
<div className={classes["second-line"]}>
|
||||
<Typography typo={ITypo.P_18}>
|
||||
{userSelected?.office_role ? userSelected?.office_role?.name : "Utilisateur restreint"}
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
<div className={classes["part"]}>
|
||||
<div className={classes["first-line"]}>
|
||||
<Typography typo={ITypo.P_SB_18}>Attribuer un titre</Typography>
|
||||
</div>
|
||||
<div className={classes["second-line"]}>
|
||||
{!isSuperAdminChecked && !currentAppointment && (
|
||||
<Switch label="Admin de son office" checked={isAdminChecked} onChange={handleAdminChanged} />
|
||||
)}
|
||||
|
||||
<Switch
|
||||
label="Super-admin LeCoffre.io"
|
||||
checked={isSuperAdminChecked}
|
||||
disabled={userHasVoted()}
|
||||
onChange={handleSuperAdminChanged}
|
||||
/>
|
||||
{currentAppointment && (
|
||||
<div className={classes["votes-block"]}>
|
||||
<div className={classes["left"]}>
|
||||
<Image src={WarningIcon} alt="warning" width={28} height={28} />
|
||||
</div>
|
||||
<div className={classes["right"]}>
|
||||
<div>
|
||||
<Typography typo={ITypo.P_SB_18}>{currentAppointment.votes?.length}/3</Typography>
|
||||
</div>
|
||||
<div>
|
||||
<Typography typo={ITypo.CAPTION_14}>
|
||||
{currentAppointment.choice === EVote.NOMINATE
|
||||
? `Un ou des collaborateurs souhaitent attribuer le titre de Super Admin à ce collaborateur. Il manque ${
|
||||
3 - currentAppointment.votes?.length!
|
||||
} vote(s) pour que le collaborateur se voit attribuer le titre.`
|
||||
: `Un ou des collaborateurs souhaitent retirer le titre de Super Admin à ce collaborateur. Il manque ${
|
||||
3 - currentAppointment.votes?.length!
|
||||
} vote(s) pour que le collaborateur se voit retirer le titre.`}
|
||||
</Typography>
|
||||
</div>
|
||||
{userHasVoted() && (
|
||||
<div className={classes["remove-my-vote"]}>
|
||||
<Button variant={EButtonVariant.SECONDARY} onClick={deleteMyVote}>
|
||||
Retirer mon vote
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Confirm
|
||||
isOpen={isSuperAdminModalOpened}
|
||||
onClose={closeSuperAdminModal}
|
||||
onAccept={handleSuperAdminModalAccepted}
|
||||
closeBtn
|
||||
header={`Souhaitez-vous attribuer un vote à ${
|
||||
userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name
|
||||
} pour ${superAdminModalType === "add" ? "devenir" : "retirer son rôle de"} Super Administrateur ?`}
|
||||
confirmText={"Attribuer un vote"}
|
||||
cancelText={"Annuler"}>
|
||||
<div className={classes["modal-content"]}>
|
||||
<Typography typo={ITypo.P_16} className={classes["text"]}>
|
||||
{superAdminModalType === "add" ? "Nommer" : "Retirer"} une personne Super Administrateur nécessite 3 votes
|
||||
de super administrateurs existants. Souhaitez-vous attribuer un vote ?
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
<div className={classes["part"]}>
|
||||
<div className={classes["first-line"]}>
|
||||
<Typography typo={ITypo.P_SB_18}>Attribuer un titre</Typography>
|
||||
</div>
|
||||
<div className={classes["second-line"]}>
|
||||
{!isSuperAdminChecked && !currentAppointment && (
|
||||
<Switch label="Admin de son office" checked={isAdminChecked} onChange={handleAdminChanged} />
|
||||
)}
|
||||
|
||||
<Switch
|
||||
label="Super-admin LeCoffre.io"
|
||||
checked={isSuperAdminChecked}
|
||||
disabled={userHasVoted()}
|
||||
onChange={handleSuperAdminChanged}
|
||||
/>
|
||||
{currentAppointment && (
|
||||
<div className={classes["votes-block"]}>
|
||||
<div className={classes["left"]}>
|
||||
<Image src={WarningIcon} alt="warning" width={28} height={28} />
|
||||
</div>
|
||||
<div className={classes["right"]}>
|
||||
<div>
|
||||
<Typography typo={ITypo.P_SB_18}>{currentAppointment.votes?.length}/3</Typography>
|
||||
</div>
|
||||
<div>
|
||||
<Typography typo={ITypo.CAPTION_14}>
|
||||
{currentAppointment.choice === EVote.NOMINATE
|
||||
? `Un ou des collaborateurs souhaitent attribuer le titre de Super Admin à ce collaborateur. Il manque ${
|
||||
3 - currentAppointment.votes?.length!
|
||||
} vote(s) pour que le collaborateur se voit attribuer le titre.`
|
||||
: `Un ou des collaborateurs souhaitent retirer le titre de Super Admin à ce collaborateur. Il manque ${
|
||||
3 - currentAppointment.votes?.length!
|
||||
} vote(s) pour que le collaborateur se voit retirer le titre.`}
|
||||
</Typography>
|
||||
</div>
|
||||
{userHasVoted() && (
|
||||
<div className={classes["remove-my-vote"]}>
|
||||
<Button variant={EButtonVariant.SECONDARY} onClick={deleteMyVote}>
|
||||
Retirer mon vote
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Confirm>
|
||||
<Confirm
|
||||
isOpen={isAdminModalOpened}
|
||||
onClose={closeAdminModal}
|
||||
onAccept={handleAdminModalAccepted}
|
||||
closeBtn
|
||||
header={
|
||||
adminModalType === "add"
|
||||
? `Souhaitez-vous nommer ${
|
||||
userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name
|
||||
} administrateur de son office ?`
|
||||
: `Souhaitez-vous retirer le rôle administrateur de son office à ${
|
||||
userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name
|
||||
} ?`
|
||||
}
|
||||
confirmText={adminModalType === "add" ? "Ajouter" : "Retirer"}
|
||||
cancelText={"Annuler"}>
|
||||
<div className={classes["modal-content"]}></div>
|
||||
</Confirm>
|
||||
</div>
|
||||
)}
|
||||
{isLoading && (
|
||||
<div className={classes["loader-container"]}>
|
||||
<div className={classes["loader"]}>
|
||||
<Loader />
|
||||
</div>
|
||||
</div>
|
||||
<Confirm
|
||||
isOpen={isSuperAdminModalOpened}
|
||||
onClose={closeSuperAdminModal}
|
||||
onAccept={handleSuperAdminModalAccepted}
|
||||
closeBtn
|
||||
header={`Souhaitez-vous attribuer un vote à ${
|
||||
userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name
|
||||
} pour ${superAdminModalType === "add" ? "devenir" : "retirer son rôle de"} Super Administrateur ?`}
|
||||
confirmText={"Attribuer un vote"}
|
||||
cancelText={"Annuler"}>
|
||||
<div className={classes["modal-content"]}>
|
||||
<Typography typo={ITypo.P_16} className={classes["text"]}>
|
||||
{superAdminModalType === "add" ? "Nommer" : "Retirer"} une personne Super Administrateur nécessite 3 votes de
|
||||
super administrateurs existants. Souhaitez-vous attribuer un vote ?
|
||||
</Typography>
|
||||
</div>
|
||||
</Confirm>
|
||||
<Confirm
|
||||
isOpen={isAdminModalOpened}
|
||||
onClose={closeAdminModal}
|
||||
onAccept={handleAdminModalAccepted}
|
||||
closeBtn
|
||||
header={
|
||||
adminModalType === "add"
|
||||
? `Souhaitez-vous nommer ${
|
||||
userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name
|
||||
} administrateur de son office ?`
|
||||
: `Souhaitez-vous retirer le rôle administrateur de son office à ${
|
||||
userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name
|
||||
} ?`
|
||||
}
|
||||
confirmText={adminModalType === "add" ? "Ajouter" : "Retirer"}
|
||||
cancelText={"Annuler"}>
|
||||
<div className={classes["modal-content"]}></div>
|
||||
</Confirm>
|
||||
</div>
|
||||
)}
|
||||
</DefaultUserDashboard>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user