4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

✨ Add a loader to users

Browse Source
This commit is contained in:
Maxime Lalo 2023-10-09 17:35:58 +02:00
parent b14a7a5fbf
commit ee2b018c2c
2 changed files with 148 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/front/Components/Layouts/Users/UserInformations/classes.module.scss
View File

@ -83,3 +83,15 @@
.remove-my-vote { .remove-my-vote {
margin-top: 16px; margin-top: 16px;
} }
.loader-container {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
height: 100%;
.loader {
width: 40px;
height: 40px;
}
}

257
src/front/Components/Layouts/Users/UserInformations/index.tsx
View File

@ -18,6 +18,7 @@ import { useCallback, useEffect, useState } from "react";
import classes from "./classes.module.scss"; import classes from "./classes.module.scss";
import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles"; import OfficeRoles from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles";
import Loader from "@Front/Components/DesignSystem/Loader";
type IProps = {}; type IProps = {};
export default function UserInformations(props: 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 [currentAppointment, setCurrentAppointment] = useState<Appointment | null>(null);
const [isLoading, setIsLoading] = useState<boolean>(true);
/** When page change, get the user of the page */ /** When page change, get the user of the page */
const getUser = useCallback(async () => { const getUser = useCallback(async () => {
if (!userUid) return; if (!userUid) return;
setIsLoading(true);
const user = await Users.getInstance().getByUid(userUid as string, { const user = await Users.getInstance().getByUid(userUid as string, {
q: { q: {
contact: true, contact: true,
@ -66,6 +69,7 @@ export default function UserInformations(props: IProps) {
}, },
}); });
if (!roles) return; if (!roles) return;
setIsLoading(false);
setUserSelected(user); setUserSelected(user);
}, [userUid]); }, [userUid]);
@ -201,135 +205,146 @@ export default function UserInformations(props: IProps) {
return ( return (
<DefaultUserDashboard mobileBackText={"Liste des utilisateurs"}> <DefaultUserDashboard mobileBackText={"Liste des utilisateurs"}>
<div className={classes["root"]}> {!isLoading && (
<div className={classes["header"]}> <div className={classes["root"]}>
<Typography typo={ITypo.H1Bis}>{userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name}</Typography> <div className={classes["header"]}>
<Typography typo={ITypo.H3} color={ITypoColor.GREY}> <Typography typo={ITypo.H1Bis}>
Office {userSelected?.office_membership?.name.toLocaleUpperCase()} {userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name}
</Typography>
</div>
<div className={classes["user-infos"]}>
<div className={classes["user-infos-row"]}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
Nom
</Typography> </Typography>
<Typography typo={ITypo.P_18}>{userSelected?.contact?.first_name}</Typography> <Typography typo={ITypo.H3} color={ITypoColor.GREY}>
</div> Office {userSelected?.office_membership?.name.toLocaleUpperCase()}
<div className={classes["user-infos-row"]}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
Prénom
</Typography> </Typography>
<Typography typo={ITypo.P_18}>{userSelected?.contact?.last_name}</Typography>
</div> </div>
<div className={classes["user-infos-row"]}> <div className={classes["user-infos"]}>
<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}> <div className={classes["user-infos-row"]}>
Numéro de téléphone <Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
</Typography> Nom
<Typography typo={ITypo.P_18}>{userSelected?.contact?.phone_number}</Typography> </Typography>
</div> <Typography typo={ITypo.P_18}>{userSelected?.contact?.first_name}</Typography>
<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>
<div className={classes["second-line"]}> <div className={classes["user-infos-row"]}>
<Typography typo={ITypo.P_18}> <Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
{userSelected?.office_role ? userSelected?.office_role?.name : "Utilisateur restreint"} 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> </Typography>
</div> </div>
</div> </Confirm>
<div className={classes["part"]}> <Confirm
<div className={classes["first-line"]}> isOpen={isAdminModalOpened}
<Typography typo={ITypo.P_SB_18}>Attribuer un titre</Typography> onClose={closeAdminModal}
</div> onAccept={handleAdminModalAccepted}
<div className={classes["second-line"]}> closeBtn
{!isSuperAdminChecked && !currentAppointment && ( header={
<Switch label="Admin de son office" checked={isAdminChecked} onChange={handleAdminChanged} /> adminModalType === "add"
)} ? `Souhaitez-vous nommer ${
userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name
<Switch } administrateur de son office ?`
label="Super-admin LeCoffre.io" : `Souhaitez-vous retirer le rôle administrateur de son office à ${
checked={isSuperAdminChecked} userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name
disabled={userHasVoted()} } ?`
onChange={handleSuperAdminChanged} }
/> confirmText={adminModalType === "add" ? "Ajouter" : "Retirer"}
{currentAppointment && ( cancelText={"Annuler"}>
<div className={classes["votes-block"]}> <div className={classes["modal-content"]}></div>
<div className={classes["left"]}> </Confirm>
<Image src={WarningIcon} alt="warning" width={28} height={28} /> </div>
</div> )}
<div className={classes["right"]}> {isLoading && (
<div> <div className={classes["loader-container"]}>
<Typography typo={ITypo.P_SB_18}>{currentAppointment.votes?.length}/3</Typography> <div className={classes["loader"]}>
</div> <Loader />
<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>
</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> </DefaultUserDashboard>
); );
} }