From 7293d6b95c70b093b058f05655099ab521d45882 Mon Sep 17 00:00:00 2001 From: Maxime Lalo Date: Mon, 1 May 2023 21:50:56 +0200 Subject: [PATCH 1/7] :sparkles: Disabled input --- .../Form/Elements/InputField/classes.module.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/front/Components/DesignSystem/Form/Elements/InputField/classes.module.scss b/src/front/Components/DesignSystem/Form/Elements/InputField/classes.module.scss index b3731010..3bf27c20 100644 --- a/src/front/Components/DesignSystem/Form/Elements/InputField/classes.module.scss +++ b/src/front/Components/DesignSystem/Form/Elements/InputField/classes.module.scss @@ -27,12 +27,15 @@ &:disabled { cursor: not-allowed; + background: white; + opacity: 0.6; ~ .fake-placeholder { + color: rgba($grey, 0.6); /** TODO * 1. Add styles so the placeholder has the same color as the background when disabled */ - background: transparent; + // background: transparent; } } &:focus { From 73b329831e8ec4f36cc950fea49a126959c849c3 Mon Sep 17 00:00:00 2001 From: Maxime Lalo Date: Tue, 2 May 2023 08:36:44 +0200 Subject: [PATCH 2/7] :sparkles: Beginning document deposit component --- src/front/Assets/Icons/deposit-document.svg | 6 +++ .../DepositDocument/classes.module.scss | 39 ++++++++++++++ .../DesignSystem/DepositDocument/index.tsx | 51 +++++++++++++++++++ .../Typography/classes.module.scss | 4 ++ .../DesignSystem/Typography/index.tsx | 1 + .../Layouts/ClientDashboard/index.tsx | 23 +++++---- 6 files changed, 113 insertions(+), 11 deletions(-) create mode 100644 src/front/Assets/Icons/deposit-document.svg create mode 100644 src/front/Components/DesignSystem/DepositDocument/classes.module.scss create mode 100644 src/front/Components/DesignSystem/DepositDocument/index.tsx diff --git a/src/front/Assets/Icons/deposit-document.svg b/src/front/Assets/Icons/deposit-document.svg new file mode 100644 index 00000000..585626d1 --- /dev/null +++ b/src/front/Assets/Icons/deposit-document.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/front/Components/DesignSystem/DepositDocument/classes.module.scss b/src/front/Components/DesignSystem/DepositDocument/classes.module.scss new file mode 100644 index 00000000..cbe37af9 --- /dev/null +++ b/src/front/Components/DesignSystem/DepositDocument/classes.module.scss @@ -0,0 +1,39 @@ +.root { + padding: 24px; + background-color: white; + border: 1px dashed #e7e7e7; + .top-container { + display: flex; + align-items: center; + + .left { + margin-right: 28px; + } + + .separator { + background-color: #939393; + width: 1px; + align-self: stretch; + } + + .right { + margin-left: 18px; + + .title { + display: flex; + align-items: center; + gap: 8px; + } + } + } + + .bottom-container { + .add-button{ + .add-document{ + display: flex; + align-items: center; + gap: 14px; + } + } + } +} diff --git a/src/front/Components/DesignSystem/DepositDocument/index.tsx b/src/front/Components/DesignSystem/DepositDocument/index.tsx new file mode 100644 index 00000000..3bef2c68 --- /dev/null +++ b/src/front/Components/DesignSystem/DepositDocument/index.tsx @@ -0,0 +1,51 @@ +import DepositDocumentIcon from "@Assets/Icons/deposit-document.svg"; +import PlusIcon from "@Assets/Icons/plus.svg"; +import Image from "next/image"; +import React from "react"; + +import Button, { EButtonVariant } from "../Button"; +import Tooltip from "../ToolTip"; +import Typography, { ITypo, ITypoColor } from "../Typography"; +import classes from "./classes.module.scss"; + +type IProps = { + title: string; + dateAsked: Date; +}; +type IState = {}; + +export default class DepositDocument extends React.Component { + public override render(): JSX.Element { + return ( +
+
+
+ Deposit document +
+
+
+ + {this.props.title} + + + Demandé par le notaire le {this.formatDate(this.props.dateAsked)} + +
+
+
+ +
+
+ ); + } + + private addDocument() {} + + private formatDate(date: Date) { + return date.toLocaleDateString("fr-FR"); + } +} diff --git a/src/front/Components/DesignSystem/Typography/classes.module.scss b/src/front/Components/DesignSystem/Typography/classes.module.scss index 31a68d43..186404af 100644 --- a/src/front/Components/DesignSystem/Typography/classes.module.scss +++ b/src/front/Components/DesignSystem/Typography/classes.module.scss @@ -130,6 +130,10 @@ color: var(--purple-flash); } + &.pink-flash { + color: var(--pink-flash); + } + &.green-flash { color: var(--green-flash); } diff --git a/src/front/Components/DesignSystem/Typography/index.tsx b/src/front/Components/DesignSystem/Typography/index.tsx index bd212c9b..a1e72a60 100644 --- a/src/front/Components/DesignSystem/Typography/index.tsx +++ b/src/front/Components/DesignSystem/Typography/index.tsx @@ -35,6 +35,7 @@ export enum ITypoColor { GREY = "grey", BLACK = "black", PURPLE_FLASH = "purple-flash", + PINK_FLASH = "pink-flash", GREEN_FLASH = "green-flash", ORANGE_FLASH = "orange-flash", RED_FLASH = "red-flash", diff --git a/src/front/Components/Layouts/ClientDashboard/index.tsx b/src/front/Components/Layouts/ClientDashboard/index.tsx index 86abc8c3..cbfd4649 100644 --- a/src/front/Components/Layouts/ClientDashboard/index.tsx +++ b/src/front/Components/Layouts/ClientDashboard/index.tsx @@ -1,12 +1,13 @@ +import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; +import DepositDocument from "@Front/Components/DesignSystem/DepositDocument"; +import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField"; +import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography"; import Base from "@Front/Components/Layouts/Base"; import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate"; import React from "react"; import classes from "./classes.module.scss"; -import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; -import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; -import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField"; type IProps = {}; type IState = { @@ -30,12 +31,12 @@ export default class ClientDashboard extends Base { {this.renderHeader()}
-
-
-
-
-
-
+ + + + + +
Documents supplémentaires (facultatif) @@ -62,7 +63,7 @@ export default class ClientDashboard extends Base { Glissez / Déposez votre document dans la zone prévue à cet effet ou cliquez sur la zone puis sélectionnez le document correspondant. -
+
@@ -84,7 +85,7 @@ export default class ClientDashboard extends Base { - Votre notaire est dans l'attente de documents pour valider votre dossier. Voici la liste des documents.
Veuillez + Votre notaire est dans l'attente de documents pour valider votre dossier. Voici la liste des documents.Veuillez glisser / déposez chaque document dans la zone prévue à cet effet ou cliquez sur la zone puis sélectionnez le document correspondant. Si un des documents demandés ne vous concernent pas, veuillez contacter votre notaire à l’aide du bouton ci-dessus. From 5fd915467ce0c2c0c619ac933646a8b06b9a823e Mon Sep 17 00:00:00 2001 From: Maxime Lalo Date: Tue, 2 May 2023 09:23:44 +0200 Subject: [PATCH 3/7] :sparkles: Add documents working --- src/front/Assets/Icons/document-check.svg | 4 + .../DepositDocument/classes.module.scss | 36 ++++++-- .../DesignSystem/DepositDocument/index.tsx | 87 ++++++++++++++++++- 3 files changed, 117 insertions(+), 10 deletions(-) create mode 100644 src/front/Assets/Icons/document-check.svg diff --git a/src/front/Assets/Icons/document-check.svg b/src/front/Assets/Icons/document-check.svg new file mode 100644 index 00000000..09925cc3 --- /dev/null +++ b/src/front/Assets/Icons/document-check.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/front/Components/DesignSystem/DepositDocument/classes.module.scss b/src/front/Components/DesignSystem/DepositDocument/classes.module.scss index cbe37af9..75681546 100644 --- a/src/front/Components/DesignSystem/DepositDocument/classes.module.scss +++ b/src/front/Components/DesignSystem/DepositDocument/classes.module.scss @@ -13,7 +13,7 @@ .separator { background-color: #939393; width: 1px; - align-self: stretch; + align-self: stretch; } .right { @@ -27,13 +27,33 @@ } } + .documents-container { + display: flex; + flex-direction: column; + gap: 16px; + margin-top: 16px; + + .file-container { + display: flex; + align-items: center; + justify-content: space-between; + + .left-part { + display: flex; + align-items: center; + gap: 8px; + } + } + } + .bottom-container { - .add-button{ - .add-document{ - display: flex; - align-items: center; - gap: 14px; - } - } + margin-top: 16px; + .add-button { + .add-document { + display: flex; + align-items: center; + gap: 14px; + } + } } } diff --git a/src/front/Components/DesignSystem/DepositDocument/index.tsx b/src/front/Components/DesignSystem/DepositDocument/index.tsx index 3bef2c68..f7c1b220 100644 --- a/src/front/Components/DesignSystem/DepositDocument/index.tsx +++ b/src/front/Components/DesignSystem/DepositDocument/index.tsx @@ -1,5 +1,7 @@ import DepositDocumentIcon from "@Assets/Icons/deposit-document.svg"; import PlusIcon from "@Assets/Icons/plus.svg"; +import CrossIcon from "@Assets/Icons/cross.svg"; +import DocumentCheckIcon from "@Assets/Icons/document-check.svg"; import Image from "next/image"; import React from "react"; @@ -7,17 +9,43 @@ import Button, { EButtonVariant } from "../Button"; import Tooltip from "../ToolTip"; import Typography, { ITypo, ITypoColor } from "../Typography"; import classes from "./classes.module.scss"; +import { Document } from "le-coffre-resources/dist/Customer"; type IProps = { title: string; dateAsked: Date; + defaultDocuments?: Document[]; +}; + +type IFile = { + index: number; + file: File; +}; + +type IState = { + files: IFile[]; }; -type IState = {}; export default class DepositDocument extends React.Component { + private inputRef = React.createRef(); + private index = 0; + + public constructor(props: IProps) { + super(props); + + this.state = { + files: [], + }; + + this.addDocument = this.addDocument.bind(this); + this.onFileChange = this.onFileChange.bind(this); + this.removeFile = this.removeFile.bind(this); + } + public override render(): JSX.Element { return (
+
Deposit document @@ -32,6 +60,31 @@ export default class DepositDocument extends React.Component {
+ {this.state.files.length > 0 && ( +
+ {this.state.files.map((file) => { + const fileObj = file.file; + return ( +
+
+ Document check + + {fileObj.name} + +
+ Cross icon +
+ ); + })} +
+ )} +
Date: Tue, 2 May 2023 10:01:04 +0200 Subject: [PATCH 7/7] :bug: Forgot console.log --- src/front/Components/DesignSystem/DepositDocument/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/front/Components/DesignSystem/DepositDocument/index.tsx b/src/front/Components/DesignSystem/DepositDocument/index.tsx index 909cf124..d599d0e6 100644 --- a/src/front/Components/DesignSystem/DepositDocument/index.tsx +++ b/src/front/Components/DesignSystem/DepositDocument/index.tsx @@ -108,7 +108,6 @@ export default class DepositDocument extends React.Component { } public override componentDidMount(): void { - console.log(this.props.defaultFiles); if (this.props.defaultFiles) { this.setState({ files: this.props.defaultFiles.map((file) => ({