From ecd34fd4e5fa5ab008a40bb259757a01ead8a9ba Mon Sep 17 00:00:00 2001 From: Hugo Lextrait Date: Wed, 19 Apr 2023 17:49:27 +0200 Subject: [PATCH] new page update client modal --- .../Components/DesignSystem/Button/index.tsx | 5 +- .../Modal/Confirm/classes.module.scss | 7 +- .../DesignSystem/Modal/Confirm/index.tsx | 32 +++++-- .../FolderInformation/ClientSection/index.tsx | 6 +- .../Layouts/Folder/UpdateClient/index.tsx | 85 +++++++++++++++++-- 5 files changed, 115 insertions(+), 20 deletions(-) diff --git a/src/front/Components/DesignSystem/Button/index.tsx b/src/front/Components/DesignSystem/Button/index.tsx index 88be86e8..a9b28008 100644 --- a/src/front/Components/DesignSystem/Button/index.tsx +++ b/src/front/Components/DesignSystem/Button/index.tsx @@ -2,6 +2,7 @@ import Image from "next/image"; import React, { CSSProperties } from "react"; import classes from "./classes.module.scss"; +import classNames from "classnames"; export enum EButtonVariant { PRIMARY = "primary", @@ -21,6 +22,7 @@ type IProps = { type?: "button" | "submit"; isloading?: string; iconposition?: "left" | "right"; + className?: string; }; export default function Button(props: IProps) { @@ -35,6 +37,7 @@ export default function Button(props: IProps) { children, icon, iconstyle, + className = "", } = props; const fullwidthattr = fullwidth.toString(); @@ -46,7 +49,7 @@ export default function Button(props: IProps) { delete attributes.iconstyle; delete attributes.iconposition; return ( - + + ) : ( +
+ +
+ ))} +
+ - )} - - +
); } diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx index 801bfa4a..49ba75e4 100644 --- a/src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx +++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx @@ -49,9 +49,9 @@ export default class ClientSection extends React.Component { if (!folderHasCustomer.customer) return null; // TODO : Les documents ASKED fonctionne mais les autres documents ne doivcent etre seulement ceux qui correspondent au folder return ( -
- -
+ //
+ + //
); }); return output ?? null; diff --git a/src/front/Components/Layouts/Folder/UpdateClient/index.tsx b/src/front/Components/Layouts/Folder/UpdateClient/index.tsx index a067aa16..5205eb85 100644 --- a/src/front/Components/Layouts/Folder/UpdateClient/index.tsx +++ b/src/front/Components/Layouts/Folder/UpdateClient/index.tsx @@ -10,20 +10,40 @@ import { useRouter } from "next/router"; import BasePage from "../../Base"; import classes from "./classes.module.scss"; import Link from "next/link"; +import { ChangeEvent } from "react"; +import Confirm from "@Front/Components/DesignSystem/Modal/Confirm"; type IProps = { selectedFolderUid: string; }; type IState = { selectedFolder: IDashBoardFolder | null; + inputNameValue: string; + inputFirstNameValue: string; + inputEmailValue: string; + inputPhoneNumberValue: string; + isOpenLeavingModal: boolean; + doesInputHaveValues: boolean; }; class UpdateClientClass extends BasePage { constructor(props: IProps) { super(props); this.state = { selectedFolder: null, + inputNameValue: "", + inputFirstNameValue: "", + inputEmailValue: "", + inputPhoneNumberValue: "", + isOpenLeavingModal: false, + doesInputHaveValues: false, }; this.onSelectedFolder = this.onSelectedFolder.bind(this); + this.onChangeNameInput = this.onChangeNameInput.bind(this); + this.onChangeFirstNameInput = this.onChangeFirstNameInput.bind(this); + this.onChangeEmailInput = this.onChangeEmailInput.bind(this); + this.onChangePhoneNumberInput = this.onChangePhoneNumberInput.bind(this); + this.openLeavingModal = this.openLeavingModal.bind(this); + this.closeLeavingModal = this.closeLeavingModal.bind(this); } public override render(): JSX.Element { const backwardPath = "/folder/".concat(this.props.selectedFolderUid); @@ -37,27 +57,78 @@ class UpdateClientClass extends BasePage {
- - - - + + + +
- - - + {!this.doesInputsHaveValues() ? ( + + + + ) : ( + + )}
+ + Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées.{" "} + ); } + private openLeavingModal(): void { + this.setState({ isOpenLeavingModal: true }); + } + + private closeLeavingModal(): void { + this.setState({ isOpenLeavingModal: false }); + } + + private onChangeNameInput(event: ChangeEvent) { + this.setState({ inputNameValue: event.target.value }); + } + + private onChangeFirstNameInput(event: ChangeEvent) { + this.setState({ inputFirstNameValue: event.target.value }); + } + private onChangeEmailInput(event: ChangeEvent) { + this.setState({ inputEmailValue: event.target.value }); + } + private onChangePhoneNumberInput(event: ChangeEvent) { + this.setState({ inputPhoneNumberValue: event.target.value }); + } private onSelectedFolder(folder: IDashBoardFolder): void { this.setState({ selectedFolder: folder }); } + + private doesInputsHaveValues(): boolean { + const doesInputsHaveValues: boolean = + this.state.inputNameValue !== "" || + this.state.inputFirstNameValue !== "" || + this.state.inputEmailValue !== "" || + this.state.inputPhoneNumberValue !== ""; + return doesInputsHaveValues; + } } export default function UpdateClient() {