diff --git a/src/front/Assets/Icons/check.svg b/src/front/Assets/Icons/check.svg index 7f7be385..1ca6eec4 100644 --- a/src/front/Assets/Icons/check.svg +++ b/src/front/Assets/Icons/check.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/front/Components/DesignSystem/CheckBox/classes.module.scss b/src/front/Components/DesignSystem/CheckBox/classes.module.scss index a5e980a7..bb91348f 100644 --- a/src/front/Components/DesignSystem/CheckBox/classes.module.scss +++ b/src/front/Components/DesignSystem/CheckBox/classes.module.scss @@ -10,7 +10,7 @@ background-color: transparent; width: 16px; height: 16px; - border: 1px solid $green-flash; + border: 1px solid $turquoise-flash; border-radius: 2px; margin-right: 16px; display: grid; @@ -19,11 +19,11 @@ input[type="checkbox"]::before { content: url("../../../Assets/Icons/check.svg"); - place-content: center; + place-content: flex-start; display: grid; width: 16px; height: 16px; - background-color: $green-flash; + background-color: $turquoise-flash; border-radius: 2px; transform: scale(0); } diff --git a/src/front/Components/DesignSystem/CheckBox/index.tsx b/src/front/Components/DesignSystem/CheckBox/index.tsx index fcf3bb9b..ee5c3950 100644 --- a/src/front/Components/DesignSystem/CheckBox/index.tsx +++ b/src/front/Components/DesignSystem/CheckBox/index.tsx @@ -1,9 +1,12 @@ import React from "react"; + +import { IOption } from "../Select"; import Tooltip from "../ToolTip"; import Typography, { ITypo, ITypoColor } from "../Typography"; import classes from "./classes.module.scss"; type IProps = { + option: IOption; name: string; toolTip?: string; }; @@ -17,8 +20,8 @@ export default class CheckBox extends React.Component { return ( diff --git a/src/front/Components/DesignSystem/Modal/Confirm/index.tsx b/src/front/Components/DesignSystem/Modal/Confirm/index.tsx index 77728315..4c7ad6a6 100644 --- a/src/front/Components/DesignSystem/Modal/Confirm/index.tsx +++ b/src/front/Components/DesignSystem/Modal/Confirm/index.tsx @@ -1,8 +1,9 @@ -import Button, { EButtonVariant } from "../../Button"; -import Modal, { IProps as IPropsModal } from ".."; -import classes from "./classes.module.scss"; import React from "react"; +import Modal, { IProps as IPropsModal } from ".."; +import Button, { EButtonVariant } from "../../Button"; +import classes from "./classes.module.scss"; + type IProps = IPropsModal & { onAccept?: () => void; cancelText: string | JSX.Element; diff --git a/src/front/Components/DesignSystem/Modal/classes.module.scss b/src/front/Components/DesignSystem/Modal/classes.module.scss index 1c1e3038..a247e517 100644 --- a/src/front/Components/DesignSystem/Modal/classes.module.scss +++ b/src/front/Components/DesignSystem/Modal/classes.module.scss @@ -35,6 +35,7 @@ &[data-will-close="true"] { animation: smooth-disappear var(--animation-delay) $custom-easing; + opacity: 0; } .background { diff --git a/src/front/Components/DesignSystem/Modal/index.tsx b/src/front/Components/DesignSystem/Modal/index.tsx index 72b208c6..a2d22bc7 100644 --- a/src/front/Components/DesignSystem/Modal/index.tsx +++ b/src/front/Components/DesignSystem/Modal/index.tsx @@ -24,6 +24,7 @@ export type IProps = { type IState = { willClose: boolean; + isOpen: boolean; }; export default class Modal extends React.Component { @@ -37,12 +38,12 @@ export default class Modal extends React.Component { this.state = { willClose: false, + isOpen: this.props.isOpen, }; } public override render(): JSX.Element | null { - if (!this.props.isOpen) return null; - const onClick = (this.props.hasContainerClosable && this.close) || (() => {}); + if (!this.state.isOpen) return null; return (
{
+ onClick={this.close}> {this.props.closeBtn && (
Unplugged @@ -71,18 +72,24 @@ export default class Modal extends React.Component { ); } - public override componentDidUpdate(): void { + public override componentDidUpdate(prevProps: IProps): void { + if (prevProps.isOpen !== this.props.isOpen && !this.props.isOpen) { + this.setState({ willClose: true }); + window.setTimeout(() => { + this.setState({ + isOpen: false, + willClose: false, + }); + }, this.props.animationDelay); + } + if (prevProps.isOpen !== this.props.isOpen && this.props.isOpen) { + this.setState({ isOpen: true }); + } this.rootRefElement.current?.style.setProperty("--animation-delay", this.props.animationDelay!.toString().concat("ms")); } protected close() { if (this.state.willClose) return; - this.setState({ willClose: true }); - window.setTimeout(() => { - this.setState({ - willClose: false, - }); - - }, this.props.animationDelay); + this.props.onClose(); } } diff --git a/src/front/Components/Layouts/Folder/AskDocuments/classes.module.scss b/src/front/Components/Layouts/Folder/AskDocuments/classes.module.scss index d8635d4c..acf7d19d 100644 --- a/src/front/Components/Layouts/Folder/AskDocuments/classes.module.scss +++ b/src/front/Components/Layouts/Folder/AskDocuments/classes.module.scss @@ -1,48 +1,24 @@ @import "@Themes/constants.scss"; .root { - margin: 64px; - width: 530px; - - @media (max-width: $screen-l) { - width: 100%; - margin: 64px 0; - padding: 0 64px; - } - - @media (max-width: $screen-m) { - padding: 0 16px 0 16px; - } - .title { margin-top: 24px; } - .subtitle { - margin-top: 32px; - } - .form-container { margin-top: 16px; display: flex; flex-direction: column; gap: 24px; - } - .access-container { - margin-top: 16px; - - .radio-container { - margin-top: 16px; - display: flex; - flex-direction: column; - gap: 16px; + .checkbox-container { + margin-top: 32px; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 24px; } } - .collaborators-container { - margin-top: 32px; - } .buttons-container { margin-top: 32px; } diff --git a/src/front/Components/Layouts/Folder/AskDocuments/index.tsx b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx index 015820e4..9b240c5c 100644 --- a/src/front/Components/Layouts/Folder/AskDocuments/index.tsx +++ b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx @@ -1,71 +1,58 @@ import Button from "@Front/Components/DesignSystem/Button"; +import CheckBox from "@Front/Components/DesignSystem/CheckBox"; import Form, { IApiFormErrors } from "@Front/Components/DesignSystem/Form"; -import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField"; import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; -import MultiSelect from "@Front/Components/DesignSystem/MultiSelect"; -import RadioBox from "@Front/Components/DesignSystem/RadioBox"; 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 { ActionMeta, MultiValue } from "react-select"; import BasePage from "../../Base"; import classes from "./classes.module.scss"; -type IFormValues = { - folder_number: number; - entitled: string; - act_type: IOption | null; - personal_note: string; - collaborators: MultiValue; -}; - type IProps = {}; type IState = { - folder_access: string; - formValues: IFormValues; + actType: IOption | null; isCreateDocumentModalVisible: boolean; }; -export default class AskDocuments extends BasePage { - private collaboratorsOptions: IOption[] = [ - { label: "John Doe", value: "john_doe" }, - { label: "Éric Dupont", value: "eric_dupont" }, - { label: "Julien Doe", value: "julien_doe" }, - { label: "Nathalie Costa", value: "nathalie_costa" }, - { label: "Max Durant", value: "max_durant" }, - { label: "Jane Doe", value: "jane_doe" }, - ]; +export default class AskDocuments extends BasePage { 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 = { - folder_access: "", - formValues: { - folder_number: NaN, - entitled: "", - act_type: null, - personal_note: "", - collaborators: [], + actType: { + label: "Divorce", + value: "divorce", }, - isCreateDocumentModalVisible: false, + isCreateDocumentModalVisible: true, }; - this.radioOnChange = this.radioOnChange.bind(this); - this.onFolderNumberChange = this.onFolderNumberChange.bind(this); - this.onEntitleChange = this.onEntitleChange.bind(this); this.onActTypeChange = this.onActTypeChange.bind(this); - this.onPersonalNoteChange = this.onPersonalNoteChange.bind(this); - this.onCollaboratorsChange = this.onCollaboratorsChange.bind(this); - this.isFormSubmittable = this.isFormSubmittable.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 { @@ -78,53 +65,29 @@ export default class AskDocuments extends BasePage {
- - - + )} + {this.state.actType && ( +
+ {this.documentsType.map((documentType) => ( + + ))}
)} -
- -
+ {}} + onClose={this.closeModal} onAccept={() => {}} closeBtn header={"Créer un type de document"} @@ -137,48 +100,21 @@ export default class AskDocuments extends BasePage { ); } - private onFolderNumberChange(e: React.ChangeEvent) { + private openModal() { this.setState({ - formValues: { - ...this.state.formValues, - folder_number: parseInt(e.target.value), - }, + isCreateDocumentModalVisible: true, }); } - private onEntitleChange(e: React.ChangeEvent) { + private closeModal() { this.setState({ - formValues: { - ...this.state.formValues, - entitled: e.target.value, - }, + isCreateDocumentModalVisible: false, }); } private onActTypeChange(selectedOption: IOption) { this.setState({ - formValues: { - ...this.state.formValues, - act_type: selectedOption, - }, - }); - } - - private onPersonalNoteChange(e: React.ChangeEvent) { - this.setState({ - formValues: { - ...this.state.formValues, - personal_note: e.target.value, - }, - }); - } - - private onCollaboratorsChange(newValue: MultiValue, actionMeta: ActionMeta) { - this.setState({ - formValues: { - ...this.state.formValues, - collaborators: newValue, - }, + actType: selectedOption, }); } @@ -189,27 +125,4 @@ export default class AskDocuments extends BasePage { }, onApiErrors: (apiFormErrors: IApiFormErrors | null) => void, ) {} - - private isFormSubmittable(): boolean { - if ( - this.state.formValues.entitled === "" || - this.state.formValues.personal_note === "" || - Number.isNaN(this.state.formValues.folder_number) || - this.state.formValues.act_type === null - ) { - return false; - } - - if (this.state.folder_access === "select_collaborators" && this.state.formValues.collaborators.length === 0) { - return false; - } - - return true; - } - - private radioOnChange(e: React.ChangeEvent) { - this.setState({ - folder_access: e.target.value, - }); - } }