113 lines
3.6 KiB
TypeScript
113 lines
3.6 KiB
TypeScript
import ChevronIcon from "@Assets/Icons/chevron.svg";
|
|
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 = {
|
|
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 class DefaultOfficeDashboard extends React.Component<IProps, IState> {
|
|
private onWindowResize = () => {};
|
|
public static defaultProps: Partial<IProps> = {
|
|
hasBackArrow: false,
|
|
};
|
|
|
|
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 });
|
|
}
|
|
}
|