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

Merge branch 'dev' of github.com:smart-chain-fr/leCoffre-front into dev

Browse Source
This commit is contained in:
Max S 2024-07-29 11:48:58 +02:00
commit 861bdbf7ca
26 changed files with 180 additions and 754 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/front/Components/DesignSystem/Dropdown/DropdownMenu/classes.module.scss
View File

@ -30,6 +30,7 @@
overflow: visible;
.content {
max-height: 500px;
overflow: auto;
opacity: 1;
}
}

14
src/front/Components/DesignSystem/FolderList/classes.module.scss
View File

@ -1,14 +0,0 @@
@import "@Themes/constants.scss";
.root {
height: calc(100vh - 290px);
overflow-y: scroll;
&.archived {
height: calc(100vh - 220px);
}
.active {
background-color: var(--color-neutral-200);
}
}

76
src/front/Components/DesignSystem/FolderList/index.tsx
View File

@ -1,76 +0,0 @@
import Module from "@Front/Config/Module";
import classNames from "classnames";
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
import { EDocumentStatus } from "le-coffre-resources/dist/Notary/Document";
import Link from "next/link";
import { useRouter } from "next/router";
import React from "react";
import FolderContainer from "../FolderContainer";
import classes from "./classes.module.scss";
type IProps = {
folders: OfficeFolder[];
isArchived: boolean;
onSelectedFolder?: (folder: OfficeFolder) => void;
onCloseLeftSide?: () => void;
};
type IPropsClass = IProps & {
selectedFolder: string;
};
type IState = {};
class FolderListClass extends React.Component<IPropsClass, IState> {
private redirectPath: string = this.props.isArchived
? Module.getInstance().get().modules.pages.Folder.pages.FolderArchived.pages.FolderInformation.props.path
: Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path;
public override render(): JSX.Element {
return <div className={classNames(classes["root"], this.props.isArchived ? classes["archived"] : "")}>{this.renderFolders()}</div>;
}
private renderFolders(): JSX.Element[] {
const pendingFolders = this.props.folders
.filter((folder) => {
const pendingDocuments = (folder.documents ?? []).filter(
(document) => document.document_status === EDocumentStatus.DEPOSITED,
);
return pendingDocuments.length >= 1;
})
.sort((folder1, folder2) => {
return folder1.created_at! > folder2.created_at! ? -1 : 1;
});
const otherFolders = this.props.folders
.filter((folder) => {
const pendingDocuments = (folder.documents ?? []).filter(
(document) => document.document_status === EDocumentStatus.DEPOSITED,
);
return pendingDocuments.length === 0;
})
.sort((folder1, folder2) => {
return folder1.created_at! > folder2.created_at! ? -1 : 1;
});
return [...pendingFolders, ...otherFolders].map((folder) => {
return (
<div
onClick={this.props.onCloseLeftSide}
key={folder.uid}
className={folder.uid === this.props.selectedFolder ? classes["active"] : ""}>
<Link href={this.redirectPath.replace("[folderUid]", folder.uid ?? "")}>
<FolderContainer folder={folder} onSelectedFolder={this.props.onSelectedFolder} />;
</Link>
</div>
);
});
}
}
export default function FolderList(props: IProps) {
const router = useRouter();
let { folderUid } = router.query;
folderUid = folderUid as string;
return <FolderListClass {...props} selectedFolder={folderUid} />;
}

4
src/front/Components/DesignSystem/FolderListContainer/index.tsx
View File

@ -11,8 +11,6 @@ import SearchBlockList from "../SearchBlockList";
type IProps = {
folders: OfficeFolder[];
isArchived: boolean;
onSelectedFolder?: (folder: OfficeFolder) => void;
onCloseLeftSide?: () => void;
};
export default function FolderListContainer(props: IProps) {
@ -64,10 +62,8 @@ export default function FolderListContainer(props: IProps) {
const [blocks, setBlocks] = React.useState<IBlock[]>(getBlocks(folders));
const onSelectedFolder = (block: IBlock) => {
props.onCloseLeftSide && props.onCloseLeftSide();
const folder = folders.find((folder) => folder.uid === block.id);
if (!folder) return;
props.onSelectedFolder && props.onSelectedFolder(folder);
const path = redirectPath.replace("[folderUid]", folder.uid ?? "");
router.push(path);
};

92
src/front/Components/DesignSystem/SearchBlockList/DropdownNavigation/index.tsx
View File

@ -1,8 +1,8 @@
import React, { useCallback, useEffect } from "react";
import React, { useEffect } from "react";
import { IBlock } from "../BlockList/Block";
import classes from "./classes.module.scss";
import Typography, { ETypo, ETypoColor } from "../../Typography";
import { ChevronDownIcon } from "@heroicons/react/24/outline";
import Dropdown from "../../Dropdown";
import { IOption } from "../../Dropdown/DropdownMenu/DropdownOption";
type IProps = {
blocks: IBlock[];
onSelectedBlock: (block: IBlock) => void;
@ -11,72 +11,36 @@ type IProps = {
export default function DropdownNavigation({ blocks, onSelectedBlock, defaultSelectedBlock = blocks[0] }: IProps) {
const [selectedBlock, setSelectedBlock] = React.useState<IBlock | null>(defaultSelectedBlock ?? null);
const [isDropdownOpened, setIsDropdownOpened] = React.useState<boolean>(false);
const rootRef = React.useRef<HTMLDivElement>(null);
const selectBlock = useCallback(
(id: string) => {
setIsDropdownOpened(false);
setSelectedBlock(blocks.find((folder) => folder.id === id)!);
onSelectedBlock && onSelectedBlock(blocks.find((folder) => folder.id === id)!);
},
[blocks, onSelectedBlock],
);
const handleOnClick = () => setIsDropdownOpened((prev) => !prev);
useEffect(() => {
// on click outside of root, close dropdown
const handleClickOutside = (event: MouseEvent) => {
if (rootRef.current && !rootRef.current.contains(event.target as Node)) {
setIsDropdownOpened(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
}, []);
useEffect(() => {
if (defaultSelectedBlock) setSelectedBlock(defaultSelectedBlock);
}, [defaultSelectedBlock]);
return (
<div className={classes["root"]} data-is-opened={isDropdownOpened} ref={rootRef}>
{selectedBlock && (
<>
<div className={classes["dropdown-header"]} onClick={handleOnClick}>
<div className={classes["text-container"]}>
{selectedBlock.secondaryText && (
<Typography typo={ETypo.TEXT_MD_LIGHT} color={ETypoColor.NAVIGATION_BUTTON_CONTRAST_DEFAULT}>
{selectedBlock.secondaryText}
</Typography>
)}
<Typography typo={ETypo.TEXT_MD_BOLD} color={ETypoColor.NAVIGATION_BUTTON_CONTRAST_DEFAULT}>
{selectedBlock.primaryText}
</Typography>
</div>
<ChevronDownIcon height="24" width="24" color={`var(${ETypoColor.NAVIGATION_BUTTON_CONTRAST_DEFAULT})`} />
</div>
{isDropdownOpened && (
<div className={classes["dropdown-content"]}>
{blocks
.filter((block) => block.id !== selectedBlock.id)
.map((block) => (
<div key={block.id} className={classes["dropdown-item"]} onClick={() => selectBlock(block.id)}>
{block.secondaryText && (
<Typography typo={ETypo.TEXT_MD_LIGHT} color={ETypoColor.NAVIGATION_BUTTON_CONTRAST_DEFAULT}>
{block.secondaryText}
</Typography>
)}
<Typography typo={ETypo.TEXT_MD_BOLD} color={ETypoColor.NAVIGATION_BUTTON_CONTRAST_DEFAULT}>
{block.primaryText}
</Typography>
</div>
))}
</div>
)}
</>
)}
const handleDropDownSelect = (option: IOption) => {
const block = blocks.find((block) => block.id === option.id);
if (block) {
setSelectedBlock(block);
onSelectedBlock
? onSelectedBlock(block)
: console.error("DropdownNavigation: onSelectedBlock prop is required to handle block selection");
}
};
return (
<div className={classes["root"]}>
<Dropdown
options={blocks.map((block) => {
return {
id: block.id,
label: {
subtext: block.primaryText,
text: block.secondaryText,
},
} as IOption;
})}
onSelect={handleDropDownSelect}
selectedOption={selectedBlock ? { id: selectedBlock.id, label: selectedBlock.primaryText } : undefined}
/>
</div>
);
}

1
src/front/Components/DesignSystem/SearchBlockList/classes.module.scss
View File

@ -11,6 +11,7 @@
justify-content: flex-start;
@media (max-width: $screen-m) {
height: auto;
gap: 16px;
padding: var(--spacing-lg, 24px);
width: auto;

23
src/front/Components/LayoutTemplates/DefaultDashboardWithList/classes.module.scss Normal file
View File

@ -0,0 +1,23 @@
@import "@Themes/constants.scss";
.root {
position: relative;
.content {
display: flex;
justify-content: flex-start;
height: calc(100vh - var(--header-height));
@media (max-width: $screen-m) {
flex-direction: column;
}
.right-side {
min-width: calc(100% - 336px);
overflow-y: auto;
padding: var(--spacing-lg, 24px);
@media (max-width: $screen-m) {
width: 100%;
}
}
}
}

45
src/front/Components/LayoutTemplates/DefaultDashboardWithList/index.tsx Normal file
View File

@ -0,0 +1,45 @@
import Header from "@Front/Components/DesignSystem/Header";
import Version from "@Front/Components/DesignSystem/Version";
import BackArrow from "@Front/Components/Elements/BackArrow";
import React, { ReactNode } from "react";
import classes from "./classes.module.scss";
import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList";
export type IPropsDashboardWithList = {
title?: string;
children?: ReactNode;
isArchived?: boolean;
hasBackArrow?: boolean;
backArrowUrl?: string;
mobileBackText?: string;
};
type IProps = IPropsDashboardWithList & {
blocksList: IBlock[];
onSelectedBlock: (block: IBlock) => void;
headerConnected?: boolean;
};
export default function DefaultDashboardWithList(props: IProps) {
const { hasBackArrow, backArrowUrl, children, blocksList, onSelectedBlock, headerConnected = true } = props;
return (
<div className={classes["root"]}>
<Header isUserConnected={headerConnected} />
<div className={classes["content"]}>
<SearchBlockList blocks={blocksList} onSelectedBlock={onSelectedBlock} />
<div className={classes["right-side"]}>
{hasBackArrow && (
<div className={classes["back-arrow-desktop"]}>
<BackArrow url={backArrowUrl ?? ""} />
</div>
)}
{children}
</div>
</div>
<Version />
</div>
);
}

5
src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx
View File

@ -13,14 +13,13 @@ type IProps = {
title: string;
children?: ReactNode;
isArchived?: boolean;
onSelectedFolder?: (folder: OfficeFolder) => void;
hasBackArrow?: boolean;
backArrowUrl?: string;
mobileBackText?: string;
};
export default function DefaultNotaryDashboard(props: IProps) {
const { hasBackArrow, onSelectedFolder, backArrowUrl, children, isArchived } = props;
const { hasBackArrow, backArrowUrl, children, isArchived } = props;
const [folders, setFolders] = React.useState<OfficeFolder[]>([]);
@ -67,7 +66,7 @@ export default function DefaultNotaryDashboard(props: IProps) {
<div className={classes["root"]}>
<Header isUserConnected={true} />
<div className={classes["content"]}>
<FolderListContainer folders={folders} onSelectedFolder={onSelectedFolder} isArchived={isArchived ?? false} />
<FolderListContainer folders={folders} isArchived={isArchived ?? false} />
<div className={classes["right-side"]}>
{hasBackArrow && (
<div className={classes["back-arrow-desktop"]}>

23
src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/classes.module.scss
View File

@ -1,23 +0,0 @@
@import "@Themes/constants.scss";
.root {
width: calc(100vh - 83px);
display: flex;
flex-direction: column;
justify-content: space-between;
.header {
flex: 1;
}
.searchbar {
padding: 40px 24px 24px 24px;
}
.folderlist-container {
max-height: 100vh;
height: 100vh;
overflow: auto;
border-right: 1px solid var(--color-neutral-200);
}
}

44
src/front/Components/LayoutTemplates/DefaultOfficeDashboard/OfficeListContainer/index.tsx
View File

@ -1,44 +0,0 @@
import Module from "@Front/Config/Module";
import { Office } from "le-coffre-resources/dist/SuperAdmin";
import { useRouter } from "next/router";
import React, { useCallback } from "react";
import classes from "./classes.module.scss";
import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList";
type IProps = {
offices: Office[];
onSelectedOffice?: (office: Office) => void;
onCloseLeftSide?: () => void;
};
export default function OfficeListContainer(props: IProps) {
const router = useRouter();
const { officeUid } = router.query;
const onSelectedBlock = useCallback(
(block: IBlock) => {
props.onCloseLeftSide && props.onCloseLeftSide();
const redirectPath = Module.getInstance().get().modules.pages.Offices.pages.OfficesInformations.props.path;
router.push(redirectPath.replace("[uid]", block.id));
},
[props, router],
);
return (
<div className={classes["root"]}>
<SearchBlockList
blocks={props.offices.map((office) => {
return {
primaryText: office.crpcen + " - " + office.name,
id: office.uid!,
isActive: office.uid === officeUid,
};
})}
onSelectedBlock={onSelectedBlock}
/>
</div>
);
}

116
src/front/Components/LayoutTemplates/DefaultOfficeDashboard/classes.module.scss
View File

@ -1,116 +0,0 @@
@import "@Themes/constants.scss";
@keyframes growWidth {
0% {
width: 100%;
}
100% {
width: 200%;
}
}
.root {
.content {
display: flex;
overflow: hidden;
height: calc(100vh - var(--header-height));
.overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: var(--color-generic-white);
opacity: 0.5;
z-index: 2;
transition: all 0.3s $custom-easing;
}
.left-side {
background-color: var(--color-generic-white);
z-index: 3;
display: flex;
width: 336px;
min-width: 336px;
transition: all 0.3s $custom-easing;
overflow: hidden;
@media (max-width: ($screen-m - 1px)) {
width: 56px;
min-width: 56px;
transform: translateX(-389px);
&.opened {
transform: translateX(0px);
width: 336px;
min-width: 336px;
}
}
@media (max-width: $screen-s) {
width: 0px;
min-width: 0px;
&.opened {
width: 100vw;
min-width: 100vw;
}
}
}
.closable-left-side {
position: absolute;
background-color: var(--color-generic-white);
z-index: 0;
display: flex;
justify-content: center;
min-width: 56px;
max-width: 56px;
height: calc(100vh - var(--header-height));
border-right: 1px var(--color-neutral-200) solid;
@media (min-width: $screen-m) {
display: none;
}
.chevron-icon {
margin-top: 21px;
transform: rotate(180deg);
cursor: pointer;
}
@media (max-width: $screen-s) {
display: none;
}
}
.right-side {
min-width: calc(100vw - 389px);
padding: 24px;
overflow-y: auto;
@media (max-width: ($screen-m - 1px)) {
min-width: calc(100vw - 56px);
}
@media (max-width: $screen-s) {
flex: 1;
min-width: unset;
}
.back-arrow-mobile {
display: none;
@media (max-width: $screen-s) {
display: block;
margin-bottom: 24px;
}
}
.back-arrow-desktop {
@media (max-width: $screen-s) {
display: none;
}
}
}
}
}

140
src/front/Components/LayoutTemplates/DefaultOfficeDashboard/index.tsx
View File

@ -1,112 +1,42 @@
import ChevronIcon from "@Assets/Icons/chevron.svg";
import { Office } from "le-coffre-resources/dist/SuperAdmin";
import React, { useEffect } from "react";
import { useRouter } from "next/router";
import Module from "@Front/Config/Module";
import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
import DefaultDashboardWithList, { IPropsDashboardWithList } from "../DefaultDashboardWithList";
import Offices from "@Front/Api/LeCoffreApi/SuperAdmin/Offices/Offices";
import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Header from "@Front/Components/DesignSystem/Header";
import Version from "@Front/Components/DesignSystem/Version";
import BackArrow from "@Front/Components/Elements/BackArrow";
import WindowStore from "@Front/Stores/WindowStore";
import classNames from "classnames";
import { Office } from "le-coffre-resources/dist/Notary";
import Image from "next/image";
import React, { ReactNode } from "react";
import classes from "./classes.module.scss";
import OfficeListContainer from "./OfficeListContainer";
import { ChevronLeftIcon } from "@heroicons/react/24/outline";
type IProps = IPropsDashboardWithList;
type IProps = {
title: string;
children?: ReactNode;
onSelectedOffice: (office: Office) => void;
hasBackArrow: boolean;
backArrowUrl?: string;
mobileBackText?: string;
};
type IState = {
offices: Office[] | null;
isLeftSideOpen: boolean;
leftSideCanBeClosed: boolean;
};
export default function DefaultOfficeDashboard(props: IProps) {
const [offices, setOffices] = React.useState<Office[] | null>(null);
const router = useRouter();
const { officeUid } = router.query;
useEffect(() => {
Offices.getInstance()
.get()
.then((offices) => setOffices(offices));
}, []);
export default class DefaultOfficeDashboard extends React.Component<IProps, IState> {
private onWindowResize = () => {};
public static defaultProps: Partial<IProps> = {
hasBackArrow: false,
const onSelectedBlock = (block: IBlock) => {
router.push(Module.getInstance().get().modules.pages.Offices.pages.OfficesInformations.props.path.replace("[uid]", block.id));
};
public constructor(props: IProps) {
super(props);
this.state = {
offices: null,
isLeftSideOpen: false,
leftSideCanBeClosed: typeof window !== "undefined" ? window.innerWidth < 1024 : false,
};
this.onOpenLeftSide = this.onOpenLeftSide.bind(this);
this.onCloseLeftSide = this.onCloseLeftSide.bind(this);
}
public override render(): JSX.Element {
return (
<div className={classes["root"]}>
<Header isUserConnected={true} />
<div className={classes["content"]}>
{this.state.isLeftSideOpen && <div className={classes["overlay"]} onClick={this.onCloseLeftSide} />}
<div className={classNames(classes["left-side"], this.state.isLeftSideOpen && classes["opened"])}>
{this.state.offices && <OfficeListContainer offices={this.state.offices} onCloseLeftSide={this.onCloseLeftSide} />}
</div>
<div className={classNames(classes["closable-left-side"])}>
<Image alt="open side menu" src={ChevronIcon} className={classes["chevron-icon"]} onClick={this.onOpenLeftSide} />
</div>
<div className={classes["right-side"]}>
{this.props.hasBackArrow && (
<div className={classes["back-arrow-desktop"]}>
<BackArrow url={this.props.backArrowUrl ?? ""} />
</div>
)}
{this.props.mobileBackText && (
<div className={classes["back-arrow-mobile"]}>
<Button
leftIcon={<ChevronLeftIcon />}
variant={EButtonVariant.PRIMARY}
styletype={EButtonstyletype.TEXT}
onClick={this.onOpenLeftSide}>
{this.props.mobileBackText ?? "Retour"}
</Button>
</div>
)}
{this.props.children}
</div>
</div>
<Version />
</div>
);
}
public override async componentDidMount() {
this.onWindowResize = WindowStore.getInstance().onResize((window) => this.onResize(window));
const offices = await Offices.getInstance().get();
this.setState({ offices });
}
public override componentWillUnmount() {
this.onWindowResize();
}
private onOpenLeftSide() {
this.setState({ isLeftSideOpen: true });
}
private onCloseLeftSide() {
if (!this.state.leftSideCanBeClosed) return;
this.setState({ isLeftSideOpen: false });
}
private onResize(window: Window) {
if (window.innerWidth > 1023) {
if (!this.state.leftSideCanBeClosed) return;
this.setState({ leftSideCanBeClosed: false });
}
this.setState({ leftSideCanBeClosed: true });
}
return (
<DefaultDashboardWithList
{...props}
onSelectedBlock={onSelectedBlock}
blocksList={
offices
? offices.map((office) => ({
id: office.uid!,
primaryText: office.name,
isActive: office.uid === officeUid,
secondaryText: office.crpcen,
}))
: []
}
/>
);
}

23
src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/classes.module.scss
View File

@ -1,23 +0,0 @@
@import "@Themes/constants.scss";
.root {
width: calc(100vh - 83px);
display: flex;
flex-direction: column;
justify-content: space-between;
.header {
flex: 1;
}
.searchbar {
padding: 40px 24px 24px 24px;
}
.folderlist-container {
max-height: 100vh;
height: 100vh;
overflow: auto;
border-right: 1px solid var(--color-neutral-200);
}
}

44
src/front/Components/LayoutTemplates/DefaultUserDashboard/UserListContainer/index.tsx
View File

@ -1,44 +0,0 @@
import Module from "@Front/Config/Module";
import User from "le-coffre-resources/dist/Notary";
import { useRouter } from "next/router";
import React, { useCallback } from "react";
import classes from "./classes.module.scss";
import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
import SearchBlockList from "@Front/Components/DesignSystem/SearchBlockList";
type IProps = {
users: User[];
onSelectedUser?: (user: User) => void;
onCloseLeftSide?: () => void;
};
export default function UserListContainer(props: IProps) {
const router = useRouter();
const { userUid } = router.query;
const onSelectedBlock = useCallback(
(block: IBlock) => {
props.onCloseLeftSide && props.onCloseLeftSide();
const redirectPath = Module.getInstance().get().modules.pages.Users.pages.UsersInformations.props.path;
router.push(redirectPath.replace("[uid]", block.id));
},
[props, router],
);
return (
<div className={classes["root"]}>
<SearchBlockList
blocks={props.users.map((user) => {
return {
primaryText: user.contact?.first_name + " " + user.contact?.last_name,
id: user.uid!,
isActive: user.uid === userUid,
};
})}
onSelectedBlock={onSelectedBlock}
/>
</div>
);
}

116
src/front/Components/LayoutTemplates/DefaultUserDashboard/classes.module.scss
View File

@ -1,116 +0,0 @@
@import "@Themes/constants.scss";
@keyframes growWidth {
0% {
width: 100%;
}
100% {
width: 200%;
}
}
.root {
.content {
display: flex;
overflow: hidden;
height: calc(100vh - var(--header-height));
.overlay {
position: absolute;
width: 100%;
height: 100%;
background-color: var(--color-generic-white);
opacity: 0.5;
z-index: 2;
transition: all 0.3s $custom-easing;
}
.left-side {
background-color: var(--color-generic-white);
z-index: 3;
display: flex;
width: 336px;
min-width: 336px;
transition: all 0.3s $custom-easing;
overflow: hidden;
@media (max-width: ($screen-m - 1px)) {
width: 56px;
min-width: 56px;
transform: translateX(-389px);
&.opened {
transform: translateX(0px);
width: 336px;
min-width: 336px;
}
}
@media (max-width: $screen-s) {
width: 0px;
min-width: 0px;
&.opened {
width: 100vw;
min-width: 100vw;
}
}
}
.closable-left-side {
position: absolute;
background-color: var(--color-generic-white);
z-index: 0;
display: flex;
justify-content: center;
min-width: 56px;
max-width: 56px;
height: calc(100vh - var(--header-height));
border-right: 1px var(--color-neutral-200 solid);
@media (min-width: $screen-m) {
display: none;
}
.chevron-icon {
margin-top: 21px;
transform: rotate(180deg);
cursor: pointer;
}
@media (max-width: $screen-s) {
display: none;
}
}
.right-side {
min-width: calc(100vw - 389px);
padding: 24px;
overflow-y: auto;
@media (max-width: ($screen-m - 1px)) {
min-width: calc(100vw - 56px);
}
@media (max-width: $screen-s) {
flex: 1;
min-width: unset;
}
.back-arrow-mobile {
display: none;
@media (max-width: $screen-s) {
display: block;
margin-bottom: 24px;
}
}
.back-arrow-desktop {
@media (max-width: $screen-s) {
display: none;
}
}
}
}
}

137
src/front/Components/LayoutTemplates/DefaultUserDashboard/index.tsx
View File

@ -1,115 +1,46 @@
import ChevronIcon from "@Assets/Icons/chevron.svg";
import { ChevronLeftIcon } from "@heroicons/react/20/solid";
import Users, { IGetUsersparams } from "@Front/Api/LeCoffreApi/SuperAdmin/Users/Users";
import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Header from "@Front/Components/DesignSystem/Header";
import Version from "@Front/Components/DesignSystem/Version";
import BackArrow from "@Front/Components/Elements/BackArrow";
import WindowStore from "@Front/Stores/WindowStore";
import classNames from "classnames";
import User from "le-coffre-resources/dist/SuperAdmin";
import Image from "next/image";
import React, { ReactNode } from "react";
import React, { useEffect } from "react";
import classes from "./classes.module.scss";
import UserListContainer from "./UserListContainer";
import { useRouter } from "next/router";
import Module from "@Front/Config/Module";
import { IBlock } from "@Front/Components/DesignSystem/SearchBlockList/BlockList/Block";
import DefaultDashboardWithList, { IPropsDashboardWithList } from "../DefaultDashboardWithList";
type IProps = {
title: string;
children?: ReactNode;
onSelectedUser: (user: User) => void;
hasBackArrow: boolean;
backArrowUrl?: string;
mobileBackText?: string;
};
type IState = {
users: User[] | null;
isLeftSideOpen: boolean;
leftSideCanBeClosed: boolean;
};
type IProps = IPropsDashboardWithList;
export default class DefaultUserDashboard extends React.Component<IProps, IState> {
private onWindowResize = () => {};
public static defaultProps: Partial<IProps> = {
hasBackArrow: false,
};
public constructor(props: IProps) {
super(props);
this.state = {
users: null,
isLeftSideOpen: false,
leftSideCanBeClosed: typeof window !== "undefined" ? window.innerWidth < 1024 : false,
};
this.onOpenLeftSide = this.onOpenLeftSide.bind(this);
this.onCloseLeftSide = this.onCloseLeftSide.bind(this);
}
public override render(): JSX.Element {
return (
<div className={classes["root"]}>
<Header isUserConnected={true} />
<div className={classes["content"]}>
{this.state.isLeftSideOpen && <div className={classes["overlay"]} onClick={this.onCloseLeftSide} />}
<div className={classNames(classes["left-side"], this.state.isLeftSideOpen && classes["opened"])}>
{this.state.users && <UserListContainer users={this.state.users} onCloseLeftSide={this.onCloseLeftSide} />}
</div>
<div className={classNames(classes["closable-left-side"])}>
<Image alt="open side menu" src={ChevronIcon} className={classes["chevron-icon"]} onClick={this.onOpenLeftSide} />
</div>
<div className={classes["right-side"]}>
{this.props.hasBackArrow && (
<div className={classes["back-arrow-desktop"]}>
<BackArrow url={this.props.backArrowUrl ?? ""} />
</div>
)}
{this.props.mobileBackText && (
<div className={classes["back-arrow-mobile"]}>
<Button
leftIcon={<ChevronLeftIcon />}
variant={EButtonVariant.PRIMARY}
styletype={EButtonstyletype.TEXT}
onClick={this.onOpenLeftSide}>
{this.props.mobileBackText ?? "Retour"}
</Button>
</div>
)}
{this.props.children}
</div>
</div>
<Version />
</div>
);
}
public override async componentDidMount() {
this.onWindowResize = WindowStore.getInstance().onResize((window) => this.onResize(window));
export default function DefaultUserDashboard(props: IProps) {
const [users, setUsers] = React.useState<User[] | null>(null);
const router = useRouter();
const { userUid } = router.query;
useEffect(() => {
const query: IGetUsersparams = {
include: { contact: true },
};
const users = await Users.getInstance().get(query);
this.setState({ users });
}
public override componentWillUnmount() {
this.onWindowResize();
}
Users.getInstance()
.get(query)
.then((users) => setUsers(users));
}, []);
private onOpenLeftSide() {
this.setState({ isLeftSideOpen: true });
}
const onSelectedBlock = (block: IBlock) => {
router.push(Module.getInstance().get().modules.pages.Users.pages.UsersInformations.props.path.replace("[uid]", block.id));
};
private onCloseLeftSide() {
if (!this.state.leftSideCanBeClosed) return;
this.setState({ isLeftSideOpen: false });
}
private onResize(window: Window) {
if (window.innerWidth > 1023) {
if (!this.state.leftSideCanBeClosed) return;
this.setState({ leftSideCanBeClosed: false });
}
this.setState({ leftSideCanBeClosed: true });
}
return (
<DefaultDashboardWithList
{...props}
onSelectedBlock={onSelectedBlock}
blocksList={
users
? users.map((user) => ({
id: user.uid!,
primaryText: user.contact?.first_name + " " + user.contact?.last_name,
isActive: user.uid === userUid,
secondaryText: user.contact?.email,
}))
: []
}
/>
);
}

2
src/front/Components/Layouts/Folder/AskDocuments/index.tsx
View File

@ -50,7 +50,7 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {
.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.folderUid);
return (
<DefaultNotaryDashboard title={"Demander des documents"} onSelectedFolder={() => {}}>
<DefaultNotaryDashboard title={"Demander des documents"}>
<div className={classes["root"]}>
<BackArrow url={backUrl} />
<Typography typo={ETypo.DISPLAY_LARGE} color={ETypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>

2
src/front/Components/Layouts/Folder/UpdateClient/index.tsx
View File

@ -74,7 +74,7 @@ class UpdateClientClass extends BasePage<IPropsClass, IState> {
public override render(): JSX.Element {
return (
<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
<DefaultNotaryDashboard title={"Ajouter client(s)"}>
<div className={classes["root"]}>
<div className={classes["back-arrow"]}>
<BackArrow url={this.backwardPath} />

10
src/front/Components/Layouts/Folder/index.tsx
View File

@ -6,10 +6,10 @@ import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNot
import Module from "@Front/Config/Module";
import JwtService from "@Front/Services/JwtService/JwtService";
import { DocumentIcon } from "@heroicons/react/24/outline";
import User, { OfficeFolder } from "le-coffre-resources/dist/Notary";
import User from "le-coffre-resources/dist/Notary";
import Image from "next/image";
import Link from "next/link";
import { useCallback, useEffect, useState } from "react";
import { useEffect, useState } from "react";
import classes from "./classes.module.scss";
import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
@ -17,14 +17,10 @@ import EFolderStatus from "le-coffre-resources/dist/Customer/EFolderStatus";
import { useRouter } from "next/router";
export default function Folder() {
const [_folder, setFolder] = useState<OfficeFolder | null>(null);
const [_isArchivedModalOpen, _setIsArchivedModalOpen] = useState(true);
const router = useRouter();
const [activeUser, setActiveUser] = useState<User | null>();
const onSelectedFolder = useCallback((folder: OfficeFolder): void => {
setFolder(folder);
}, []);
useEffect(() => {
const decodedJwt = JwtService.getInstance().decodeJwt();
@ -59,7 +55,7 @@ export default function Folder() {
}, [router]);
return (
<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={onSelectedFolder} mobileBackText={"Liste des dossiers"}>
<DefaultNotaryDashboard title={"Dossier"} mobileBackText={"Liste des dossiers"}>
<div className={classes["root"]}>
<div className={classes["content"]}>
<div className={classes["title-container"]}>

2
src/front/Components/Layouts/FolderArchived/UpdateFolderMetadata/index.tsx
View File

@ -39,7 +39,7 @@ class UpdateFolderMetadataClass extends BasePage<IProps, IState> {
.get()
.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid);
return (
<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
<DefaultNotaryDashboard title={"Ajouter client(s)"}>
<div className={classes["root"]}>
<div className={classes["back-arrow"]}>
<BackArrow url={backwardPath} />

6
src/front/Components/Layouts/FolderArchived/index.tsx
View File

@ -23,11 +23,7 @@ export default class FolderArchived extends BasePage<IProps, IState> {
// TODO: Message if the user has not created any folder yet
public override render(): JSX.Element {
return (
<DefaultNotaryDashboard
title={"Dossier"}
onSelectedFolder={this.onSelectedFolder}
isArchived
mobileBackText={"Liste des dossiers"}>
<DefaultNotaryDashboard title={"Dossier"} isArchived mobileBackText={"Liste des dossiers"}>
<div className={classes["root"]}>
<div className={classes["no-folder-selected"]}>
<Typography typo={ETypo.TITLE_H1}>Informations du dossier</Typography>

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

@ -117,7 +117,7 @@ export default function OfficeInformations(props: IProps) {
);
return (
<DefaultOfficeDashboard mobileBackText={"Liste des utilisateurs"}>
<DefaultOfficeDashboard>
<div className={classes["root"]}>
<div className={classes["header"]}>
<Typography typo={ETypo.TITLE_H1}>Office {officeSelected?.crpcen + " - " + officeSelected?.name}</Typography>

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

@ -9,7 +9,7 @@ type IState = {};
export default class Offices extends BasePage<IProps, IState> {
public override render(): JSX.Element {
return (
<DefaultOfficeDashboard title={"Dossier"} mobileBackText={"Liste des offices"}>
<DefaultOfficeDashboard title={"Dossier"}>
<div className={classes["root"]}>
<div className={classes["no-folder-selected"]}>
<Typography typo={ETypo.TITLE_H1}>Informations des offices</Typography>

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

@ -210,7 +210,7 @@ export default function UserInformations(props: IProps) {
}, [currentAppointment, getUser]);
return (
<DefaultUserDashboard mobileBackText={"Liste des utilisateurs"}>
<DefaultUserDashboard>
{!isLoading && (
<div className={classes["root"]}>
<div className={classes["header"]}>

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

@ -9,7 +9,7 @@ type IState = {};
export default class Users extends BasePage<IProps, IState> {
public override render(): JSX.Element {
return (
<DefaultUserDashboard title={"Dossier"} mobileBackText={"Liste des utilisateurs"}>
<DefaultUserDashboard title={"Dossier"}>
<div className={classes["root"]}>
<div className={classes["no-folder-selected"]}>
<Typography typo={ETypo.TITLE_H1}>Informations des utilisateurs</Typography>