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

✨ Collaborator page done

Browse Source
This commit is contained in:
Maxime Lalo 2023-07-11 16:21:58 +02:00
parent 5285de9268
commit 765522a7e6
10 changed files with 194 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.vscode/custom.code-snippets vendored
View File

@ -6,4 +6,10 @@
],
"description": "media queries"
},
"Default div": {
"prefix": "<div",
"body": [
"<div className={classes[\"$1\"]}>$2</div>"
]
}
}

4
src/front/Components/LayoutTemplates/DefaultCollaboratorDashboard/CollaboratorListContainer/index.tsx
View File

@ -5,6 +5,7 @@ import SearchBar from "@Front/Components/DesignSystem/SearchBar";
import User from "le-coffre-resources/dist/Notary";
import BlockList, { IBlock } from "@Front/Components/DesignSystem/BlockList";
import { useRouter } from "next/router";
import Module from "@Front/Config/Module";
type IProps = {
collaborators: User[];
@ -32,7 +33,8 @@ export default function CollaboratorListContainer(props: IProps) {
const onSelectedBlock = useCallback(
(block: IBlock) => {
props.onCloseLeftSide && props.onCloseLeftSide();
router.push("/collaborators/" + block.id);
const redirectPath = Module.getInstance().get().modules.pages.Collaborators.pages.CollaboratorInformations.props.path;
router.push(redirectPath.replace("[uid]", block.id));
},
[props, router],
);

45
src/front/Components/Layouts/Collaborators/CollaboratorInformations/classes.module.scss Normal file
View File

@ -0,0 +1,45 @@
@import "@Themes/constants.scss";
.root {
.user-infos {
background-color: var(--grey-soft);
display: flex;
justify-content: space-between;
padding: 24px;
margin-top: 32px;
@media (max-width: $screen-l) {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
@media (max-width: $screen-s) {
grid-template-columns: repeat(1, 1fr);
}
.user-infos-row {
display: flex;
flex-direction: column;
gap: 12px;
}
}
.role-container {
padding: 32px 16px;
border: 1px solid var(--grey);
margin-top: 32px;
.first-line {
display: flex;
justify-content: space-between;
}
.second-line {
margin-top: 32px;
}
.third-line {
margin-top: 32px;
}
}
}

101
src/front/Components/Layouts/Collaborators/CollaboratorInformations/index.tsx Normal file
View File

@ -0,0 +1,101 @@
import Users from "@Front/Api/LeCoffreApi/SuperAdmin/Users/Users";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import DefaultCollaboratorDashboard from "@Front/Components/LayoutTemplates/DefaultCollaboratorDashboard";
import User from "le-coffre-resources/dist/Notary";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import classes from "./classes.module.scss";
import Link from "next/link";
import SelectField from "@Front/Components/DesignSystem/Form/SelectField";
import CheckBox from "@Front/Components/DesignSystem/CheckBox";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import ChevronIcon from "@Assets/Icons/chevron.svg";
type IProps = {};
export default function CollaboratorInformations(props: IProps) {
const router = useRouter();
let { collaboratorUid } = router.query;
const [userSelected, setUserSelected] = useState<User | null>(null);
useEffect(() => {
console.log("Getting user with uid ", collaboratorUid);
async function getUser() {
if (!collaboratorUid) return;
const user = await Users.getInstance().getByUid(collaboratorUid as string, {
q: {
contact: true,
},
});
if (!user) return;
setUserSelected(user);
}
getUser();
}, [collaboratorUid]);
const mockedRole = { value: "1", label: "Clerc de notaire" };
return (
<DefaultCollaboratorDashboard mobileBackText={"Liste des collaborateurs"}>
<div className={classes["root"]}>
<div className={classes["folder-header"]}>
<Typography typo={ITypo.H1Bis}>{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 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>
<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["first-line"]}>
<Typography typo={ITypo.P_SB_18}>Modifier le rôle</Typography>
<div className={classes["gestion-role"]}>
<Link href={`/collaborators/${collaboratorUid}/role`}>
<Button
icon={ChevronIcon}
iconposition={"right"}
iconstyle={{ width: "22px", height: "22px" }}
variant={EButtonVariant.LINE}>
Gestion des rôles
</Button>
</Link>
</div>
</div>
<div className={classes["second-line"]}>
<SelectField placeholder="Rôle" name="role" options={[mockedRole]} selectedOption={mockedRole} />
</div>
<div className={classes["third-line"]}>
<CheckBox
option={{
value: "1",
label: "Nommer administrateur de l'office",
}}
toolTip="blabla"
/>
</div>
</div>
</div>
</DefaultCollaboratorDashboard>
);
}

2
src/front/Components/Layouts/Collaborators/index.tsx
View File

@ -23,7 +23,7 @@ export default class Folder extends BasePage<IProps, IState> {
// TODO: Message if the user has not created any folder yet
public override render(): JSX.Element {
return (
<DefaultCollaboratorDashboard title={"Dossier"} mobileBackText={"Liste des collaborateurss"}>
<DefaultCollaboratorDashboard title={"Dossier"} mobileBackText={"Liste des collaborateurs"}>
<div className={classes["root"]}>
<div className={classes["no-folder-selected"]}>
<Typography typo={ITypo.H1Bis}>Informations du collaboraeur</Typography>

9
src/front/Config/Module/development.json
View File

@ -124,6 +124,15 @@
"props": {
"path": "/collaborators",
"labelKey": "collaborators"
},
"pages": {
"CollaboratorInformations": {
"enabled": true,
"props": {
"path": "/collaborators/[uid]",
"labelKey": "collaborator_informations"
}
}
}
},
"404": {

9
src/front/Config/Module/preprod.json
View File

@ -124,6 +124,15 @@
"props": {
"path": "/collaborators",
"labelKey": "collaborators"
},
"pages": {
"CollaboratorInformations": {
"enabled": true,
"props": {
"path": "/collaborators/[uid]",
"labelKey": "collaborator_informations"
}
}
}
},
"404": {

9
src/front/Config/Module/production.json
View File

@ -124,6 +124,15 @@
"props": {
"path": "/collaborators",
"labelKey": "collaborators"
},
"pages": {
"CollaboratorInformations": {
"enabled": true,
"props": {
"path": "/collaborators/[uid]",
"labelKey": "collaborator_informations"
}
}
}
},
"404": {

9
src/front/Config/Module/staging.json
View File

@ -124,6 +124,15 @@
"props": {
"path": "/collaborators",
"labelKey": "collaborators"
},
"pages": {
"CollaboratorInformations": {
"enabled": true,
"props": {
"path": "/collaborators/[uid]",
"labelKey": "collaborator_informations"
}
}
}
},
"404": {

4
src/pages/collaborators/[collaboratorUid]/index.tsx
View File

@ -1,5 +1,5 @@
import Collaborators from "@Front/Components/Layouts/Collaborators";
import CollaboratorInformations from "@Front/Components/Layouts/Collaborators/CollaboratorInformations";
export default function Route() {
return <Collaborators />;
return <CollaboratorInformations />;
}