63 lines
2.2 KiB
TypeScript
63 lines
2.2 KiB
TypeScript
import React from "react";
|
||
import classes from "./classes.module.scss";
|
||
import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
|
||
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
|
||
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
|
||
import PlusIcon from "@Assets/Icons/plus.svg";
|
||
import UserFolder from "@Front/Components/DesignSystem/UserFolder";
|
||
import Link from "next/link";
|
||
|
||
type IProps = {
|
||
folder: IDashBoardFolder;
|
||
};
|
||
type IState = {};
|
||
|
||
export default class ClientSection extends React.Component<IProps, IState> {
|
||
public override render(): JSX.Element {
|
||
return (
|
||
<div className={classes["root"]}>
|
||
{this.doesFolderHaveCustomer() ? (
|
||
<>
|
||
<div className={classes["client"]}>{this.renderCustomerFolders()}</div>
|
||
<Link href={"/dossier/".concat(this.props.folder.uid).concat("/ajouter-client")}>
|
||
<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
|
||
Ajouter un client
|
||
</Button>
|
||
</Link>
|
||
</>
|
||
) : (
|
||
<div className={classes["no-client"]}>
|
||
<div className={classes["title"]}>
|
||
<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
|
||
Aucun client n’est associé au dossier.
|
||
</Typography>
|
||
</div>
|
||
<Link href={"/dossier/".concat(this.props.folder.uid).concat("/ajouter-client")}>
|
||
<Button variant={EButtonVariant.LINE} icon={PlusIcon}>
|
||
Ajouter un client
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
private renderCustomerFolders() {
|
||
const output = this.props.folder.office_folder_has_customers?.map((folderHasCustomer, key) => {
|
||
if (!folderHasCustomer.customer) return null;
|
||
// TODO : Les documents ASKED fonctionne mais les autres documents ne doivcent etre seulement ceux qui correspondent au folder
|
||
return (
|
||
<div className={classes["user-folder"]} key={folderHasCustomer.customer.uid}>
|
||
<UserFolder folder={this.props.folder} customer={folderHasCustomer.customer} />
|
||
</div>
|
||
);
|
||
});
|
||
return output ?? null;
|
||
}
|
||
|
||
private doesFolderHaveCustomer(): boolean {
|
||
return this.props.folder.office_folder_has_customers !== undefined;
|
||
}
|
||
}
|