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

🐛 Fixing office page

Browse Source
This commit is contained in:
Maxime Lalo 2023-09-28 13:26:03 +02:00
parent 140bda5aaf
commit 4db1e6bb06
2 changed files with 79 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@ -22,7 +22,7 @@
"eslint-config-next": "13.2.4",
"form-data": "^4.0.0",
"jwt-decode": "^3.1.2",
"le-coffre-resources": "git@github.com:smart-chain-fr/leCoffre-resources.git#v2.83",
"le-coffre-resources": "git@github.com:smart-chain-fr/leCoffre-resources.git#v2.84",
"next": "13.2.4",
"prettier": "^2.8.7",
"react": "18.2.0",

147
src/front/Components/Layouts/Offices/OfficeInformations/index.tsx
View File

@ -3,7 +3,7 @@ import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Ty
import DefaultOfficeDashboard from "@Front/Components/LayoutTemplates/DefaultOfficeDashboard";
import User, { Office } from "le-coffre-resources/dist/SuperAdmin";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import { useCallback, useEffect, useState } from "react";
import classes from "./classes.module.scss";
@ -13,6 +13,8 @@ export default function OfficeInformations(props: IProps) {
let { officeUid } = router.query;
const [officeSelected, setOfficeSelected] = useState<Office | null>(null);
const [adminUsers, setAdminUsers] = useState<User[]>([]);
const [collaboratorUsers, setCollaboratorUsers] = useState<User[]>([]);
useEffect(() => {
async function getOffice() {
@ -31,54 +33,87 @@ export default function OfficeInformations(props: IProps) {
});
if (!office) return;
setOfficeSelected(office);
const adminUsers = office.users?.filter((user) => {
if (user.office_role && user.office_role.name === "admin") {
return true;
}
if (!user.office_role && user.role?.name === "admin") {
return true;
}
if (!user.office_role && user.role?.name === "super-admin") {
return true;
}
return false;
});
const collaboratorUsers = office.users?.filter((user) => {
if (user.office_role && user.office_role.name === "admin") {
return false;
}
if (!user.office_role && user.role?.name === "admin") {
return false;
}
if (!user.office_role && user.role?.name === "super-admin") {
return false;
}
return true;
});
setAdminUsers(adminUsers!);
setCollaboratorUsers(collaboratorUsers!);
}
getOffice();
}, [officeUid]);
const renderUser = (user: User) => (
<>
<div key={user.uid} className={classes["user-line-desktop"]}>
<Typography typo={ITypo.P_16}>{user.contact?.last_name}</Typography>
<Typography typo={ITypo.P_16}>{user.contact?.first_name}</Typography>
<Typography typo={ITypo.P_16}>{user.contact?.email}</Typography>
<Typography typo={ITypo.P_16}>{user.contact?.phone_number}</Typography>
<Typography typo={ITypo.P_16}>{user.office_role ? user.office_role?.name : user.role?.name}</Typography>
</div>
<div key={user.uid} className={classes["user-line-mobile"]}>
<div className={classes["line"]}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK}>
Nom
</Typography>
const renderUser = useCallback(
(user: User) => (
<>
<div key={user.uid + "-" + officeUid} className={classes["user-line-desktop"]}>
<Typography typo={ITypo.P_16}>{user.contact?.last_name}</Typography>
</div>
<div className={classes["line"]}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK}>
Prénom
</Typography>
<Typography typo={ITypo.P_16}>{user.contact?.first_name}</Typography>
</div>
<div className={classes["line"]}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK}>
E-mail
</Typography>
<Typography typo={ITypo.P_16}>{user.contact?.email}</Typography>
</div>
<div className={classes["line"]}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK}>
Téléphone
</Typography>
<Typography typo={ITypo.P_16}>{user.contact?.phone_number}</Typography>
<Typography typo={ITypo.P_16}>{user.office_role ? user.office_role?.name : "Utilisateur restreint"}</Typography>
</div>
<div className={classes["line"]}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK}>
Rôle
</Typography>
<Typography typo={ITypo.P_16}>{user.office_role ? user.office_role?.name : user.role?.name}</Typography>
<div key={user.uid} className={classes["user-line-mobile"]}>
<div className={classes["line"]}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK}>
Nom
</Typography>
<Typography typo={ITypo.P_16}>{user.contact?.last_name}</Typography>
</div>
<div className={classes["line"]}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK}>
Prénom
</Typography>
<Typography typo={ITypo.P_16}>{user.contact?.first_name}</Typography>
</div>
<div className={classes["line"]}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK}>
E-mail
</Typography>
<Typography typo={ITypo.P_16}>{user.contact?.email}</Typography>
</div>
<div className={classes["line"]}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK}>
Téléphone
</Typography>
<Typography typo={ITypo.P_16}>{user.contact?.phone_number}</Typography>
</div>
<div className={classes["line"]}>
<Typography typo={ITypo.P_SB_16} color={ITypoColor.BLACK}>
Rôle
</Typography>
<Typography typo={ITypo.P_16}>{user.office_role ? user.office_role?.name : user.role?.name}</Typography>
</div>
</div>
</div>
</>
</>
),
[officeUid],
);
return (
<DefaultOfficeDashboard mobileBackText={"Liste des utilisateurs"}>
<div className={classes["root"]}>
@ -134,22 +169,9 @@ export default function OfficeInformations(props: IProps) {
Rôle
</Typography>
</div>
{officeSelected?.users
?.filter((user) => {
if (user.office_role && user.office_role.name === "admin") {
return true;
}
if (!user.office_role && user.role?.name === "admin") {
return true;
}
if (!user.office_role && user.role?.name === "super-admin") {
return true;
}
return false;
})
.map((user) => {
return renderUser(user);
})}
{adminUsers.map((user) => {
return renderUser(user);
})}
</div>
</div>
<div className={classes["users"]}>
@ -174,22 +196,9 @@ export default function OfficeInformations(props: IProps) {
Rôle
</Typography>
</div>
{officeSelected?.users
?.filter((user) => {
if (user.office_role && user.office_role.name === "admin") {
return false;
}
if (!user.office_role && user.role?.name === "admin") {
return false;
}
if (!user.office_role && user.role?.name === "super-admin") {
return false;
}
return true;
})
.map((user) => {
return renderUser(user);
})}
{collaboratorUsers.map((user) => {
return renderUser(user);
})}
</div>
</div>
</div>