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;
}
}

21
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,9 +205,12 @@ export default function UserInformations(props: IProps) {
return ( return (
<DefaultUserDashboard mobileBackText={"Liste des utilisateurs"}> <DefaultUserDashboard mobileBackText={"Liste des utilisateurs"}>
{!isLoading && (
<div className={classes["root"]}> <div className={classes["root"]}>
<div className={classes["header"]}> <div className={classes["header"]}>
<Typography typo={ITypo.H1Bis}>{userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name}</Typography> <Typography typo={ITypo.H1Bis}>
{userSelected?.contact?.first_name + " " + userSelected?.contact?.last_name}
</Typography>
<Typography typo={ITypo.H3} color={ITypoColor.GREY}> <Typography typo={ITypo.H3} color={ITypoColor.GREY}>
Office {userSelected?.office_membership?.name.toLocaleUpperCase()} Office {userSelected?.office_membership?.name.toLocaleUpperCase()}
</Typography> </Typography>
@ -306,8 +313,8 @@ export default function UserInformations(props: IProps) {
cancelText={"Annuler"}> cancelText={"Annuler"}>
<div className={classes["modal-content"]}> <div className={classes["modal-content"]}>
<Typography typo={ITypo.P_16} className={classes["text"]}> <Typography typo={ITypo.P_16} className={classes["text"]}>
{superAdminModalType === "add" ? "Nommer" : "Retirer"} une personne Super Administrateur nécessite 3 votes de {superAdminModalType === "add" ? "Nommer" : "Retirer"} une personne Super Administrateur nécessite 3 votes
super administrateurs existants. Souhaitez-vous attribuer un vote ? de super administrateurs existants. Souhaitez-vous attribuer un vote ?
</Typography> </Typography>
</div> </div>
</Confirm> </Confirm>
@ -330,6 +337,14 @@ export default function UserInformations(props: IProps) {
<div className={classes["modal-content"]}></div> <div className={classes["modal-content"]}></div>
</Confirm> </Confirm>
</div> </div>
)}
{isLoading && (
<div className={classes["loader-container"]}>
<div className={classes["loader"]}>
<Loader />
</div>
</div>
)}
</DefaultUserDashboard> </DefaultUserDashboard>
); );
} }