129 lines
3.9 KiB
TypeScript
129 lines
3.9 KiB
TypeScript
import Button from "@Front/Components/DesignSystem/Button";
|
||
import CheckBox from "@Front/Components/DesignSystem/CheckBox";
|
||
import Form, { IApiFormErrors } from "@Front/Components/DesignSystem/Form";
|
||
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
|
||
import Select, { IOption } from "@Front/Components/DesignSystem/Select";
|
||
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
|
||
import BackArrow from "@Front/Components/Elements/BackArrow";
|
||
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
|
||
import React from "react";
|
||
|
||
import BasePage from "../../Base";
|
||
import classes from "./classes.module.scss";
|
||
|
||
type IProps = {};
|
||
type IState = {
|
||
actType: IOption | null;
|
||
isCreateDocumentModalVisible: boolean;
|
||
};
|
||
|
||
export default class AskDocuments extends BasePage<IProps, IState> {
|
||
private actsOptions: IOption[] = [
|
||
{ label: "Divorce", value: "divorce" },
|
||
{ label: "Succession", value: "succession" },
|
||
{ label: "Vente immobilière", value: "vente_immobiliere" },
|
||
];
|
||
|
||
private documentsType: IOption[] = [
|
||
{ label: "Carte d'identité", value: "carte_identite" },
|
||
{ label: "Diagnostic État Risques et Pollution", value: "diagnostic_erep" },
|
||
{ label: "Justificatif de domicile", value: "justificatif_domicile" },
|
||
{ label: "Diagnostic gaz", value: "diagnostic_gaz" },
|
||
{ label: "Compromis de vente", value: "compromis_de_vente" },
|
||
{ label: "Diagnostic DPE", value: "diagnostic_dpe" },
|
||
{ label: "Diagnostic électrique", value: "diagnostic_electrique" },
|
||
{ label: "Diagnostic plombs", value: "diagnostic_plombs" },
|
||
{ label: "Diagnostic amiante", value: "diagnostic_amiante" },
|
||
{ label: "Diagnostic termites", value: "diagnostic_termites" },
|
||
{ label: "Diagnostic État des nuisances sonores aériennes", value: "diagnostic_ednsa" },
|
||
];
|
||
|
||
public constructor(props: IProps) {
|
||
super(props);
|
||
|
||
this.state = {
|
||
actType: {
|
||
label: "Divorce",
|
||
value: "divorce",
|
||
},
|
||
isCreateDocumentModalVisible: true,
|
||
};
|
||
|
||
this.onActTypeChange = this.onActTypeChange.bind(this);
|
||
this.onFormSubmit = this.onFormSubmit.bind(this);
|
||
this.closeModal = this.closeModal.bind(this);
|
||
this.openModal = this.openModal.bind(this);
|
||
}
|
||
|
||
public override render(): JSX.Element {
|
||
return (
|
||
<DefaultTemplate title={"Dossier"}>
|
||
<div className={classes["root"]}>
|
||
<BackArrow />
|
||
<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
|
||
Demander des documents
|
||
</Typography>
|
||
<Form onSubmit={this.onFormSubmit}>
|
||
<div className={classes["form-container"]}>
|
||
{!this.state.actType && (
|
||
<Select options={this.actsOptions} placeholder={"Type d’acte"} onChange={this.onActTypeChange} />
|
||
)}
|
||
{this.state.actType && (
|
||
<div className={classes["checkbox-container"]}>
|
||
{this.documentsType.map((documentType) => (
|
||
<CheckBox
|
||
name="document_type"
|
||
toolTip="Checkbox with tooltip"
|
||
option={documentType}
|
||
key={documentType.value as string}
|
||
/>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</Form>
|
||
<Button type="submit" onClick={this.openModal}>
|
||
Open modal
|
||
</Button>
|
||
<Confirm
|
||
isOpen={this.state.isCreateDocumentModalVisible}
|
||
onClose={this.closeModal}
|
||
onAccept={() => {}}
|
||
closeBtn
|
||
header={"Créer un type de document"}
|
||
cancelText={"Annuler"}
|
||
confirmText={"Ajouter"}>
|
||
Blabla
|
||
</Confirm>
|
||
</div>
|
||
</DefaultTemplate>
|
||
);
|
||
}
|
||
|
||
private openModal() {
|
||
this.setState({
|
||
isCreateDocumentModalVisible: true,
|
||
});
|
||
}
|
||
|
||
private closeModal() {
|
||
this.setState({
|
||
isCreateDocumentModalVisible: false,
|
||
});
|
||
}
|
||
|
||
private onActTypeChange(selectedOption: IOption) {
|
||
this.setState({
|
||
actType: selectedOption,
|
||
});
|
||
}
|
||
|
||
private onFormSubmit(
|
||
e: React.FormEvent<HTMLFormElement> | null,
|
||
values: {
|
||
[key: string]: string;
|
||
},
|
||
onApiErrors: (apiFormErrors: IApiFormErrors | null) => void,
|
||
) {}
|
||
}
|