From f8694d5569ff7cea9107bf286b69bab0dc7e1932 Mon Sep 17 00:00:00 2001
From: Hugo Lextrait <hugo.lextrait@smart-chain.fr>
Date: Wed, 19 Apr 2023 12:48:33 +0200
Subject: [PATCH] fix magin btw radioboxes and button on add/client

---
 .../AddClientToFolder/classes.module.scss     | 53 ++++++++++++---
 .../Folder/AddClientToFolder/index.tsx        | 11 ++-
 .../FolderInformation/classes.module.scss     |  6 +-
 .../Folder/UpdateClient/classes.module.scss   | 56 +++++++++++++++
 .../Layouts/Folder/UpdateClient/index.tsx     | 68 +++++++++++++++++++
 .../classes.module.scss                       |  2 +-
 src/pages/folder/[uid]/update/client.tsx      |  4 +-
 7 files changed, 180 insertions(+), 20 deletions(-)
 create mode 100644 src/front/Components/Layouts/Folder/UpdateClient/classes.module.scss
 create mode 100644 src/front/Components/Layouts/Folder/UpdateClient/index.tsx

diff --git a/src/front/Components/Layouts/Folder/AddClientToFolder/classes.module.scss b/src/front/Components/Layouts/Folder/AddClientToFolder/classes.module.scss
index 3ebdedef..d576f9ab 100644
--- a/src/front/Components/Layouts/Folder/AddClientToFolder/classes.module.scss
+++ b/src/front/Components/Layouts/Folder/AddClientToFolder/classes.module.scss
@@ -5,26 +5,57 @@
 	flex-direction: column;
 	min-height: 100%;
 	align-items: flex-start;
+	width: fit-content;
 
 	.back-arrow {
 		margin-bottom: 24px;
 	}
 
-	.radiobox-container {
-		margin: 32px 0;
-	}
+	.form {
+		width: 100%;
 
-	.button-container {
-		margin-top: 24px;
+		.radiobox-container {
+			margin: 32px 0;
 
-		:first-child {
-			margin-right: 32px;
+			> :not(:last-child) {
+				margin-bottom: 16px;
+			}
 		}
-	}
 
-	.new-client {
-		> :not(:last-child) {
-			margin-bottom: 24px;
+		.button-container {
+			width: 100%;
+			display: flex;
+			text-align: center;
+			margin-top: 24px;
+
+			.cancel-button {
+				display: flex;
+				margin-right: 32px;
+			}
+
+			@media (max-width: $screen-m) {
+				display: flex;
+				flex-direction: column-reverse;
+
+				.cancel-button {
+					margin-left: 0;
+					margin-top: 12px;
+
+					>* {
+						flex: 1;
+					}
+				}
+
+				>* {
+					width: 100%;
+				}
+			}
+		}
+
+		.new-client {
+			> :not(:last-child) {
+				margin-bottom: 24px;
+			}
 		}
 	}
 }
\ No newline at end of file
diff --git a/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx b/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx
index eaf06e4e..beb17d58 100644
--- a/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx
+++ b/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx
@@ -12,6 +12,7 @@ import { ActionMeta, MultiValue } from "react-select";
 
 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
+import Link from "next/link";
 
 type IProps = {
 	selectedFolderUid: string;
@@ -50,7 +51,7 @@ class AddClientToFolderClass extends BasePage<IProps, IState> {
 						<BackArrow url={backwardPath} />
 					</div>
 					<Typography typo={ITypo.H1Bis}>Associer un ou plusieurs client(s)</Typography>
-					<Form>
+					<Form className={classes["form"]}>
 						<div className={classes["radiobox-container"]}>
 							<RadioBox
 								name="client"
@@ -72,7 +73,9 @@ class AddClientToFolderClass extends BasePage<IProps, IState> {
 							<div className={classes["existing-client"]}>
 								<MultiSelect options={selectOptions} placeholder="Client" onChange={this.onMutiSelectChange} />
 								<div className={classes["button-container"]}>
-									<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+									<Link href={backwardPath} className={classes["cancel-button"]}>
+										<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+									</Link>
 									<Button disabled={!this.state.hasNewClientSelected ? true : false} type="submit">
 										Associer au dossier
 									</Button>
@@ -87,7 +90,9 @@ class AddClientToFolderClass extends BasePage<IProps, IState> {
 								<InputField name="input field" fakeplaceholder="E-mail" isEmail />
 								<InputField name="input field" fakeplaceholder="Numéro de téléphone" numbersOnly maxLength={10} />
 								<div className={classes["button-container"]}>
-									<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+									<Link href={backwardPath} className={classes["cancel-button"]}>
+										<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+									</Link>
 									<Button type="submit">Associer au dossier</Button>
 								</div>
 							</div>
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/classes.module.scss b/src/front/Components/Layouts/Folder/FolderInformation/classes.module.scss
index ce2a77e4..a1052297 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/classes.module.scss
+++ b/src/front/Components/Layouts/Folder/FolderInformation/classes.module.scss
@@ -72,12 +72,12 @@
 				margin-left: 0;
 				margin-top: 12px;
 
-				> * {
+				>* {
 					flex: 1;
 				}
 			}
 
-			> * {
+			>* {
 				width: 100%;
 			}
 		}
@@ -86,4 +86,4 @@
 	.modal-title {
 		margin-bottom: 24px;
 	}
-}
+}
\ No newline at end of file
diff --git a/src/front/Components/Layouts/Folder/UpdateClient/classes.module.scss b/src/front/Components/Layouts/Folder/UpdateClient/classes.module.scss
new file mode 100644
index 00000000..cd3ceba2
--- /dev/null
+++ b/src/front/Components/Layouts/Folder/UpdateClient/classes.module.scss
@@ -0,0 +1,56 @@
+@import "@Themes/constants.scss";
+
+.root {
+	display: flex;
+	flex-direction: column;
+	min-height: 100%;
+	align-items: flex-start;
+	width: fit-content;
+
+	.back-arrow {
+		margin-bottom: 24px;
+	}
+
+	.form {
+		width: 100%;
+
+		.content {
+			margin-top: 32px;
+
+			>:not(:last-child) {
+				margin-bottom: 24px;
+			}
+
+		}
+
+		.button-container {
+			width: 100%;
+			display: flex;
+			text-align: center;
+			margin-top: 24px;
+
+			.cancel-button {
+				display: flex;
+				margin-right: 32px;
+			}
+
+			@media (max-width: $screen-m) {
+				display: flex;
+				flex-direction: column-reverse;
+
+				.cancel-button {
+					margin-left: 0;
+					margin-top: 12px;
+
+					>* {
+						flex: 1;
+					}
+				}
+
+				>* {
+					width: 100%;
+				}
+			}
+		}
+	}
+}
\ No newline at end of file
diff --git a/src/front/Components/Layouts/Folder/UpdateClient/index.tsx b/src/front/Components/Layouts/Folder/UpdateClient/index.tsx
new file mode 100644
index 00000000..a216b6b6
--- /dev/null
+++ b/src/front/Components/Layouts/Folder/UpdateClient/index.tsx
@@ -0,0 +1,68 @@
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Form from "@Front/Components/DesignSystem/Form";
+import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
+import Select, { IOption } from "@Front/Components/DesignSystem/Select";
+import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
+import BackArrow from "@Front/Components/Elements/BackArrow";
+import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
+import { useRouter } from "next/router";
+
+import BasePage from "../../Base";
+import classes from "./classes.module.scss";
+import Link from "next/link";
+
+type IProps = {
+	selectedFolderUid: string;
+};
+type IState = {
+	selectedFolder: IDashBoardFolder | null;
+};
+class UpdateClientClass extends BasePage<IProps, IState> {
+	constructor(props: IProps) {
+		super(props);
+		this.state = {
+			selectedFolder: null,
+		};
+		this.onSelectedFolder = this.onSelectedFolder.bind(this);
+	}
+	public override render(): JSX.Element {
+		const backwardPath = "/folder/".concat(this.props.selectedFolderUid);
+		return (
+			<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
+				<div className={classes["root"]}>
+					<div className={classes["back-arrow"]}>
+						<BackArrow url={backwardPath} />
+					</div>
+					<Typography typo={ITypo.H1Bis}>Modifier les informations du client</Typography>
+
+					<Form className={classes["form"]}>
+						<div className={classes["content"]}>
+							<InputField name="input field" fakeplaceholder="Nom" />
+							<InputField name="input field" fakeplaceholder="Prénom" />
+							<InputField name="input field" fakeplaceholder="E-mail" isEmail />
+							<InputField name="input field" fakeplaceholder="Numéro de téléphone" isPositiveNumber />
+						</div>
+
+						<div className={classes["button-container"]}>
+							<Link href={backwardPath} className={classes["cancel-button"]}>
+								<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+							</Link>
+							<Button type="submit">Enregistrer</Button>
+						</div>
+					</Form>
+				</div>
+			</DefaultNotaryDashboard>
+		);
+	}
+
+	private onSelectedFolder(folder: IDashBoardFolder): void {
+		this.setState({ selectedFolder: folder });
+	}
+}
+
+export default function UpdateClient() {
+	const router = useRouter();
+	let { uid } = router.query;
+	uid = uid as string;
+	return <UpdateClientClass selectedFolderUid={uid} />;
+}
diff --git a/src/front/Components/Layouts/Folder/UpdateFolderDescription/classes.module.scss b/src/front/Components/Layouts/Folder/UpdateFolderDescription/classes.module.scss
index 4724e9d9..cd3ceba2 100644
--- a/src/front/Components/Layouts/Folder/UpdateFolderDescription/classes.module.scss
+++ b/src/front/Components/Layouts/Folder/UpdateFolderDescription/classes.module.scss
@@ -31,7 +31,7 @@
 
 			.cancel-button {
 				display: flex;
-				margin-right: 12px;
+				margin-right: 32px;
 			}
 
 			@media (max-width: $screen-m) {
diff --git a/src/pages/folder/[uid]/update/client.tsx b/src/pages/folder/[uid]/update/client.tsx
index 38d83b10..203a863c 100644
--- a/src/pages/folder/[uid]/update/client.tsx
+++ b/src/pages/folder/[uid]/update/client.tsx
@@ -1,5 +1,5 @@
-import UpdateFolderMetadata from "@Front/Components/Layouts/Folder/UpdateFolderMetadata";
+import UpdateClient from "@Front/Components/Layouts/Folder/UpdateClient";
 
 export default function Route() {
-	return <UpdateFolderMetadata />;
+	return <UpdateClient />;
 }