98 lines
3.2 KiB
TypeScript
98 lines
3.2 KiB
TypeScript
import "reflect-metadata";
|
|
import React, { ReactNode } from "react";
|
|
import classes from "./classes.module.scss";
|
|
import FolderListContainer from "@Front/Components/DesignSystem/FolderListContainer";
|
|
import Header from "@Front/Components/DesignSystem/Header";
|
|
import Version from "@Front/Components/DesignSystem/Version";
|
|
import { folders } from "@Front/Components/Layouts/DesignSystem/dummyData";
|
|
import { OfficeFolder } from "le-coffre-resources/dist/Customer";
|
|
import chevronIcon from "@Assets/Icons/chevron.svg";
|
|
import Image from "next/image";
|
|
import classNames from "classnames";
|
|
import WindowStore from "@Front/Stores/WindowStore";
|
|
type IProps = {
|
|
title: string;
|
|
children?: ReactNode;
|
|
onSelectedFolder: (folder: IDashBoardFolder) => void;
|
|
};
|
|
type IState = {
|
|
folders: IDashBoardFolder[];
|
|
isLeftSideOpen: boolean;
|
|
leftSideCanBeClosed: boolean;
|
|
};
|
|
|
|
export type IDashBoardFolder = {
|
|
uid: OfficeFolder["uid"];
|
|
name: OfficeFolder["name"];
|
|
folder_number: OfficeFolder["folder_number"];
|
|
documents?: OfficeFolder["documents"];
|
|
description: OfficeFolder["description"];
|
|
deed: OfficeFolder["deed"];
|
|
created_at: OfficeFolder["created_at"];
|
|
office_folder_has_customers?: OfficeFolder["office_folder_has_customers"];
|
|
};
|
|
export default class DefaultNotaryDashboard extends React.Component<IProps, IState> {
|
|
private onWindowResize = () => {};
|
|
public static defaultProps = {
|
|
scrollTop: 0,
|
|
};
|
|
|
|
public constructor(props: IProps) {
|
|
super(props);
|
|
this.state = {
|
|
folders: folders,
|
|
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"])}>
|
|
<FolderListContainer
|
|
folders={this.state.folders}
|
|
onSelectedFolder={this.props.onSelectedFolder}
|
|
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.children}</div>
|
|
</div>
|
|
<Version />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
public override componentDidMount(): void {
|
|
this.onWindowResize = WindowStore.getInstance().onResize((window) => this.onResize(window));
|
|
}
|
|
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 });
|
|
}
|
|
}
|