99 lines
3.0 KiB
TypeScript
99 lines
3.0 KiB
TypeScript
import PlusIcon from "@Assets/Icons/plus.svg";
|
|
import Button, { EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
|
|
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
|
|
import UserFolder from "@Front/Components/DesignSystem/UserFolder";
|
|
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
|
|
import Module from "@Front/Config/Module";
|
|
import Link from "next/link";
|
|
import React from "react";
|
|
|
|
import classes from "./classes.module.scss";
|
|
import { AnchorStatus } from "..";
|
|
|
|
type IProps = {
|
|
folder: OfficeFolder;
|
|
anchorStatus: AnchorStatus;
|
|
getFolderCallback: () => Promise<void>;
|
|
openedCustomer?: string;
|
|
};
|
|
type IState = {
|
|
openedCustomer: string;
|
|
};
|
|
|
|
export default class ClientSection extends React.Component<IProps, IState> {
|
|
public constructor(props: IProps) {
|
|
super(props);
|
|
this.state = {
|
|
openedCustomer: this.props.openedCustomer ?? "",
|
|
};
|
|
this.changeUserFolder = this.changeUserFolder.bind(this);
|
|
this.renderCustomerFolders = this.renderCustomerFolders.bind(this);
|
|
}
|
|
|
|
public override render(): JSX.Element {
|
|
const navigatePath = Module.getInstance()
|
|
.get()
|
|
.modules.pages.Folder.pages.AddClient.props.path.replace("[folderUid]", this.props.folder.uid ?? "");
|
|
return (
|
|
<div className={classes["root"]}>
|
|
{this.doesFolderHaveCustomer() ? (
|
|
<>
|
|
<div className={classes["client"]}>{this.renderCustomerFolders()}</div>
|
|
{this.props.anchorStatus === AnchorStatus.NOT_ANCHORED && (
|
|
<Link href={navigatePath}>
|
|
<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} icon={PlusIcon}>
|
|
Ajouter un client
|
|
</Button>
|
|
</Link>
|
|
)}
|
|
</>
|
|
) : (
|
|
<div className={classes["no-client"]}>
|
|
<div className={classes["title"]}>
|
|
<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_NEUTRAL_500}>
|
|
Aucun client n'est associé au dossier.
|
|
</Typography>
|
|
</div>
|
|
{this.props.anchorStatus === AnchorStatus.NOT_ANCHORED && (
|
|
<Link href={navigatePath}>
|
|
<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT} icon={PlusIcon}>
|
|
Ajouter un client
|
|
</Button>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
private renderCustomerFolders() {
|
|
const output = this.props.folder.customers?.map((customer) => {
|
|
if (!customer) return null;
|
|
return (
|
|
<UserFolder
|
|
folder={this.props.folder}
|
|
customer={customer}
|
|
key={customer.uid}
|
|
isOpened={this.state.openedCustomer === customer.uid}
|
|
onChange={this.changeUserFolder}
|
|
anchorStatus={this.props.anchorStatus}
|
|
getFolderCallback={this.props.getFolderCallback}
|
|
/>
|
|
);
|
|
});
|
|
return output ?? null;
|
|
}
|
|
|
|
private changeUserFolder(uid: string) {
|
|
this.setState({
|
|
openedCustomer: uid === this.state.openedCustomer ? "" : uid,
|
|
});
|
|
}
|
|
|
|
private doesFolderHaveCustomer(): boolean {
|
|
if (!this.props.folder?.customers) return false;
|
|
return this.props.folder?.customers!.length > 0;
|
|
}
|
|
}
|