62 lines
2.2 KiB
TypeScript
62 lines
2.2 KiB
TypeScript
import React from "react";
|
||
import classes from "./classes.module.scss";
|
||
import classNames from "classnames";
|
||
import Image from "next/image";
|
||
import PenICon from "@Assets/Icons/pen.svg";
|
||
import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
|
||
import Typography, { ITypo } from "../../Typography";
|
||
|
||
type IProps = {
|
||
folder: IDashBoardFolder;
|
||
isDescription: boolean;
|
||
};
|
||
type IState = {};
|
||
|
||
export default class FolderBoxInformation extends React.Component<IProps, IState> {
|
||
public static defaultProps = {
|
||
isDescription: false,
|
||
};
|
||
|
||
public override render(): JSX.Element {
|
||
return <div className={classNames(classes["root"], this.props.isDescription && classes["isSignleDescription"])}>
|
||
<div className={classes["content"]}>
|
||
{this.props.isDescription ?
|
||
<div className={classes["text-container"]}>
|
||
<Typography typo={ITypo.NAV_INPUT_16}>Note dossier :</Typography>
|
||
<Typography typo={ITypo.P_18}>{this.props.folder.description ?? "..."}</Typography>
|
||
</div>
|
||
:
|
||
<>
|
||
<div className={classes["text-container"]}>
|
||
<Typography typo={ITypo.NAV_INPUT_16}>Intitulé du dossier</Typography>
|
||
<Typography typo={ITypo.P_18}>{this.props.folder.name ?? "..."}</Typography>
|
||
</div>
|
||
<div className={classes["text-container"]}>
|
||
<Typography typo={ITypo.NAV_INPUT_16}>Numéro de dossier</Typography>
|
||
<Typography typo={ITypo.P_18}>{this.props.folder.folder_number ?? "..."}</Typography>
|
||
</div>
|
||
<div className={classes["text-container"]}>
|
||
<Typography typo={ITypo.NAV_INPUT_16}>Type d’acte</Typography>
|
||
<Typography typo={ITypo.P_18}>{this.props.folder.deed.deed_type.name ?? "..."}</Typography>
|
||
</div>
|
||
<div className={classes["text-container"]}>
|
||
<Typography typo={ITypo.NAV_INPUT_16}>Ouverture du dossier</Typography>
|
||
<Typography typo={ITypo.P_18}>{this.formatDate(this.props.folder.created_at)}</Typography>
|
||
</div>
|
||
</>
|
||
}
|
||
</div>
|
||
<Image src={PenICon} alt="edit informations" className={classes["edit-icon"]}/>
|
||
</div>;
|
||
}
|
||
|
||
private formatDate(date: Date | null): string {
|
||
if(!date) return "...";
|
||
return date.toLocaleDateString("fr-FR", {
|
||
year: "numeric",
|
||
month: "long",
|
||
day: "numeric",
|
||
});
|
||
}
|
||
}
|