From 6fb40f9f01d4d30c7e7523e2ff464c4680f95a46 Mon Sep 17 00:00:00 2001 From: Maxime Lalo Date: Wed, 19 Apr 2023 14:16:52 +0200 Subject: [PATCH 01/18] :sparkles: Initializing page --- .../Components/DesignSystem/Modal/index.tsx | 10 +- .../DefaultDoubleSidePage/index.tsx | 4 +- .../Folder/AskDocuments/classes.module.scss | 49 ++++ .../Layouts/Folder/AskDocuments/index.tsx | 215 ++++++++++++++++++ .../Layouts/Folder/CreateFolder/index.tsx | 2 +- .../folder/[uid]/ask-documents/index.tsx | 5 + 6 files changed, 278 insertions(+), 7 deletions(-) create mode 100644 src/front/Components/Layouts/Folder/AskDocuments/classes.module.scss create mode 100644 src/front/Components/Layouts/Folder/AskDocuments/index.tsx create mode 100644 src/pages/folder/[uid]/ask-documents/index.tsx diff --git a/src/front/Components/DesignSystem/Modal/index.tsx b/src/front/Components/DesignSystem/Modal/index.tsx index 802af1a7..72b208c6 100644 --- a/src/front/Components/DesignSystem/Modal/index.tsx +++ b/src/front/Components/DesignSystem/Modal/index.tsx @@ -1,12 +1,12 @@ +import CrossIcon from "@Assets/Icons/cross.svg"; +import Image from "next/image"; import React from "react"; + +import Typography, { ITypo } from "../Typography"; import classes from "./classes.module.scss"; import Footer from "./Elements/Footer"; import Header from "./Elements/Header"; - import Loader from "./Elements/Loader"; -import Typography, { ITypo } from "../Typography"; -import CrossIcon from "@Assets/Icons/cross.svg"; -import Image from "next/image"; export type IProps = { closeBtn?: boolean; @@ -82,7 +82,7 @@ export default class Modal extends React.Component { this.setState({ willClose: false, }); - this.props.onClose(); + }, this.props.animationDelay); } } diff --git a/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx index b86d5071..e76a0821 100644 --- a/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx +++ b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx @@ -15,6 +15,7 @@ type IProps = { scrollTop: number | null; image: StaticImageData; type: "background" | "image"; + showHeader: boolean; }; type IState = {}; @@ -23,12 +24,13 @@ export default class DefaultDoubleSidePage extends React.Component -
+
{this.props.children}
{this.props.type === "image" && ( diff --git a/src/front/Components/Layouts/Folder/AskDocuments/classes.module.scss b/src/front/Components/Layouts/Folder/AskDocuments/classes.module.scss new file mode 100644 index 00000000..d8635d4c --- /dev/null +++ b/src/front/Components/Layouts/Folder/AskDocuments/classes.module.scss @@ -0,0 +1,49 @@ +@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; + } + } + + .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 new file mode 100644 index 00000000..015820e4 --- /dev/null +++ b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx @@ -0,0 +1,215 @@ +import Button from "@Front/Components/DesignSystem/Button"; +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; + 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" }, + ]; + + private actsOptions: IOption[] = [ + { label: "Divorce", value: "divorce" }, + { label: "Succession", value: "succession" }, + { label: "Vente immobilière", value: "vente_immobiliere" }, + ]; + + public constructor(props: IProps) { + super(props); + + this.state = { + folder_access: "", + formValues: { + folder_number: NaN, + entitled: "", + act_type: null, + personal_note: "", + collaborators: [], + }, + isCreateDocumentModalVisible: false, + }; + + 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); + } + + public override render(): JSX.Element { + return ( + +
+ + + Demander des documents + +
+
+ + + - {this.props.name} + + {this.props.option.label} {this.props.toolTip && } 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, - }); - } } From 961c7709a8689a7c1d08e043cdcbd41efea5bbf2 Mon Sep 17 00:00:00 2001 From: Maxime Lalo Date: Wed, 19 Apr 2023 15:40:26 +0200 Subject: [PATCH 03/18] :bug: Fixing tooltip on checkboxes --- src/front/Components/DesignSystem/ToolTip/index.tsx | 12 ++++++------ .../Components/Layouts/Folder/AskDocuments/index.tsx | 5 +++++ src/front/Themes/variables.scss | 2 -- 3 files changed, 11 insertions(+), 8 deletions(-) diff --git a/src/front/Components/DesignSystem/ToolTip/index.tsx b/src/front/Components/DesignSystem/ToolTip/index.tsx index 82282499..dddea180 100644 --- a/src/front/Components/DesignSystem/ToolTip/index.tsx +++ b/src/front/Components/DesignSystem/ToolTip/index.tsx @@ -1,8 +1,8 @@ -import React from "react"; -import Image from "next/image"; import ToolTipIcon from "@Assets/Icons/tool-tip.svg"; -import TooltipMUI, { TooltipProps, tooltipClasses } from "@mui/material/Tooltip"; import styled from "@emotion/styled"; +import TooltipMUI, { tooltipClasses, TooltipProps } from "@mui/material/Tooltip"; +import Image from "next/image"; +import React from "react"; type IProps = { title?: string | JSX.Element; @@ -19,13 +19,13 @@ type IState = { const LightTooltip = styled(({ className, ...props }: TooltipProps) => )( ({ theme }) => ({ [`& .${tooltipClasses.tooltip}`]: { - backgroundColor: "var(--colormerdum)", - color: "var(--colormerdum)", + backgroundColor: "var(--turquoise-flash)", + color: "white", //boxShadow: theme.shadows[1], fontSize: 11, }, [`& .${tooltipClasses.arrow}`]: { - // color: theme.palette.common.black, + color: "var(--turquoise-flash)", }, }), ); diff --git a/src/front/Components/Layouts/Folder/AskDocuments/index.tsx b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx index 9b240c5c..bdd02f03 100644 --- a/src/front/Components/Layouts/Folder/AskDocuments/index.tsx +++ b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx @@ -100,6 +100,11 @@ export default class AskDocuments extends BasePage { ); } + override componentDidMount(): void { + setTimeout(() => { + debugger; + }, 3000); + } private openModal() { this.setState({ isCreateDocumentModalVisible: true, diff --git a/src/front/Themes/variables.scss b/src/front/Themes/variables.scss index 6a80b51e..b95bd46f 100644 --- a/src/front/Themes/variables.scss +++ b/src/front/Themes/variables.scss @@ -7,8 +7,6 @@ --font-primary: "Inter", sans-serif; - --colormerdum: blue; - --green-flash: #{$green-flash}; --blue-flash: #{$blue-flash}; --turquoise-flash: #{$turquoise-flash}; From ccd4efa090f214eae61928374c8bc79da833a874 Mon Sep 17 00:00:00 2001 From: Maxime Lalo Date: Wed, 19 Apr 2023 16:05:43 +0200 Subject: [PATCH 04/18] :sparkles: Whole page working --- .../DesignSystem/CheckBox/index.tsx | 8 ++- .../Folder/AskDocuments/classes.module.scss | 13 +++- .../Layouts/Folder/AskDocuments/index.tsx | 64 ++++++++++++------- 3 files changed, 56 insertions(+), 29 deletions(-) diff --git a/src/front/Components/DesignSystem/CheckBox/index.tsx b/src/front/Components/DesignSystem/CheckBox/index.tsx index ee5c3950..06a50c27 100644 --- a/src/front/Components/DesignSystem/CheckBox/index.tsx +++ b/src/front/Components/DesignSystem/CheckBox/index.tsx @@ -6,8 +6,8 @@ import Typography, { ITypo, ITypoColor } from "../Typography"; import classes from "./classes.module.scss"; type IProps = { + name?: string; option: IOption; - name: string; toolTip?: string; }; @@ -20,7 +20,11 @@ export default class CheckBox extends React.Component { return ( diff --git a/src/front/Components/Layouts/Folder/AskDocuments/classes.module.scss b/src/front/Components/Layouts/Folder/AskDocuments/classes.module.scss index acf7d19d..cdfe52a9 100644 --- a/src/front/Components/Layouts/Folder/AskDocuments/classes.module.scss +++ b/src/front/Components/Layouts/Folder/AskDocuments/classes.module.scss @@ -7,9 +7,6 @@ .form-container { margin-top: 16px; - display: flex; - flex-direction: column; - gap: 24px; .checkbox-container { margin-top: 32px; @@ -17,6 +14,16 @@ grid-template-columns: repeat(2, 1fr); gap: 24px; } + + .buttons-container { + display: flex; + gap: 32px; + margin-top: 32px; + } + } + + .add-document-container { + margin-top: 32px; } .buttons-container { diff --git a/src/front/Components/Layouts/Folder/AskDocuments/index.tsx b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx index bdd02f03..ec6499f2 100644 --- a/src/front/Components/Layouts/Folder/AskDocuments/index.tsx +++ b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx @@ -1,4 +1,5 @@ -import Button from "@Front/Components/DesignSystem/Button"; +import PlusIcon from "@Assets/Icons/plus.svg"; +import Button, { EButtonVariant } 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"; @@ -42,17 +43,15 @@ export default class AskDocuments extends BasePage { super(props); this.state = { - actType: { - label: "Divorce", - value: "divorce", - }, - isCreateDocumentModalVisible: true, + actType: null, + isCreateDocumentModalVisible: false, }; this.onActTypeChange = this.onActTypeChange.bind(this); this.onFormSubmit = this.onFormSubmit.bind(this); this.closeModal = this.closeModal.bind(this); this.openModal = this.openModal.bind(this); + this.cancel = this.cancel.bind(this); } public override render(): JSX.Element { @@ -69,22 +68,36 @@ export default class AskDocuments extends BasePage {