119 lines
3.7 KiB
TypeScript
119 lines
3.7 KiB
TypeScript
import ChevronIcon from "@Assets/Icons/chevron.svg";
|
|
import OfficeRoles, { IGetRolesParams } from "@Front/Api/LeCoffreApi/Admin/OfficeRoles/OfficeRoles";
|
|
import Button, { 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 { OfficeRole } from "le-coffre-resources/dist/Admin";
|
|
import Image from "next/image";
|
|
import React, { ReactNode } from "react";
|
|
|
|
import classes from "./classes.module.scss";
|
|
import RoleListContainer from "./RoleListContainer";
|
|
|
|
type IProps = {
|
|
title: string;
|
|
children?: ReactNode;
|
|
onSelectedRole: (role: OfficeRole) => void;
|
|
hasBackArrow: boolean;
|
|
backArrowUrl?: string;
|
|
mobileBackText?: string;
|
|
};
|
|
type IState = {
|
|
roles: OfficeRole[] | null;
|
|
isLeftSideOpen: boolean;
|
|
leftSideCanBeClosed: boolean;
|
|
};
|
|
|
|
export default class DefaultRoleDashboard extends React.Component<IProps, IState> {
|
|
private onWindowResize = () => {};
|
|
public static defaultProps: Partial<IProps> = {
|
|
hasBackArrow: false,
|
|
};
|
|
|
|
public constructor(props: IProps) {
|
|
super(props);
|
|
this.state = {
|
|
roles: 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.roles && <RoleListContainer roles={this.state.roles} 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
|
|
icon={ChevronIcon}
|
|
iconposition={"left"}
|
|
iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
|
|
variant={EButtonVariant.LINE}
|
|
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 query: IGetRolesParams = {
|
|
include: { rules: true },
|
|
};
|
|
|
|
const roles = await OfficeRoles.getInstance().get(query);
|
|
console.log(roles);
|
|
|
|
this.setState({ roles });
|
|
}
|
|
|
|
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 });
|
|
}
|
|
}
|