From e2501339ea826dc86aa311a17057ac60567fd88a Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Mon, 17 Jul 2023 17:15:52 +0200
Subject: [PATCH] :sparkles: Edit deed type responsive

---
 .../DeedTypesEdit/classes.module.scss         | 24 +++++++++
 .../Layouts/DeedTypes/DeedTypesEdit/index.tsx | 53 +++++++++++++++++++
 .../DeedTypes/DeedTypesInformations/index.tsx |  7 ++-
 src/front/Config/Module/development.json      |  7 +++
 src/front/Config/Module/preprod.json          |  7 +++
 src/front/Config/Module/production.json       |  7 +++
 src/front/Config/Module/staging.json          |  7 +++
 .../deed-types/[deedTypeUid]/edit/index.tsx   |  5 ++
 8 files changed, 116 insertions(+), 1 deletion(-)
 create mode 100644 src/front/Components/Layouts/DeedTypes/DeedTypesEdit/classes.module.scss
 create mode 100644 src/front/Components/Layouts/DeedTypes/DeedTypesEdit/index.tsx
 create mode 100644 src/pages/deed-types/[deedTypeUid]/edit/index.tsx

diff --git a/src/front/Components/Layouts/DeedTypes/DeedTypesEdit/classes.module.scss b/src/front/Components/Layouts/DeedTypes/DeedTypesEdit/classes.module.scss
new file mode 100644
index 00000000..848ef4bc
--- /dev/null
+++ b/src/front/Components/Layouts/DeedTypes/DeedTypesEdit/classes.module.scss
@@ -0,0 +1,24 @@
+@import "@Themes/constants.scss";
+
+.root {
+	.header {
+		margin-top: 24px;
+	}
+
+	.form-container {
+		margin-top: 32px;
+		display: flex;
+		flex-direction: column;
+		gap: 32px;
+	}
+
+	.buttons-container {
+		display: flex;
+		gap: 32px;
+
+		@media (max-width: $screen-s) {
+			flex-direction: column-reverse;
+			gap: 16px;
+		}
+	}
+}
diff --git a/src/front/Components/Layouts/DeedTypes/DeedTypesEdit/index.tsx b/src/front/Components/Layouts/DeedTypes/DeedTypesEdit/index.tsx
new file mode 100644
index 00000000..651cec28
--- /dev/null
+++ b/src/front/Components/Layouts/DeedTypes/DeedTypesEdit/index.tsx
@@ -0,0 +1,53 @@
+import DeedTypes from "@Front/Api/LeCoffreApi/Admin/DeedTypes/DeedTypes";
+import Form from "@Front/Components/DesignSystem/Form";
+import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
+import DefaultDeedTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDeedTypeDashboard";
+import { DeedType } from "le-coffre-resources/dist/Admin";
+import { useRouter } from "next/router";
+import { useCallback, useEffect, useState } from "react";
+
+import classes from "./classes.module.scss";
+import TextField from "@Front/Components/DesignSystem/Form/TextField";
+import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+
+export default function DeedTypesEdit() {
+	const router = useRouter();
+	let { deedTypeUid } = router.query;
+
+	const [deedTypeSelected, setDeedTypeSelected] = useState<DeedType | null>(null);
+
+	useEffect(() => {
+		async function getDeedType() {
+			if (!deedTypeUid) return;
+			const deedType = await DeedTypes.getInstance().getByUid(deedTypeUid as string, {
+				q: {
+					document_types: true,
+				},
+			});
+			setDeedTypeSelected(deedType);
+		}
+
+		getDeedType();
+	}, [deedTypeUid]);
+
+	const onSubmitHandler = useCallback(async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => {}, []);
+
+	return (
+		<DefaultDeedTypesDashboard mobileBackText={"Liste des types d'actes"} hasBackArrow>
+			<div className={classes["root"]}>
+				<div className={classes["header"]}>
+					<Typography typo={ITypo.H1Bis}>Modifier les informations de l'acte</Typography>
+				</div>
+				<Form onSubmit={onSubmitHandler} className={classes["form-container"]}>
+					<TextField name="name" placeholder="Nom de l'acte" defaultValue={deedTypeSelected?.name} />
+					<TextAreaField name="description" placeholder="Description" defaultValue={deedTypeSelected?.description} />
+					<div className={classes["buttons-container"]}>
+						<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+						<Button type="submit">Enregistrer</Button>
+					</div>
+				</Form>
+			</div>
+		</DefaultDeedTypesDashboard>
+	);
+}
diff --git a/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx b/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx
index 80de230e..85d05fc5 100644
--- a/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx
+++ b/src/front/Components/Layouts/DeedTypes/DeedTypesInformations/index.tsx
@@ -17,6 +17,7 @@ import { useCallback, useEffect, useState } from "react";
 import { MultiValue } from "react-select";
 
 import classes from "./classes.module.scss";
+import Module from "@Front/Config/Module";
 
 type IProps = {};
 export default function DeedTypesInformations(props: IProps) {
@@ -90,7 +91,11 @@ export default function DeedTypesInformations(props: IProps) {
 						</div>
 					</div>
 					<div className={classes["pencil"]}>
-						<Link href={"/"} className={classes["edit-icon-container"]}>
+						<Link
+							href={Module.getInstance()
+								.get()
+								.modules.pages.DeedTypes.pages.Edit.props.path.replace("[uid]", deedTypeUid as string)}
+							className={classes["edit-icon-container"]}>
 							<Image src={PenICon} alt="éditer le type d'acte" />
 						</Link>
 					</div>
diff --git a/src/front/Config/Module/development.json b/src/front/Config/Module/development.json
index de759235..e2a56d46 100644
--- a/src/front/Config/Module/development.json
+++ b/src/front/Config/Module/development.json
@@ -171,6 +171,13 @@
 							"path": "/deed-types/create",
 							"labelKey": "createDeedType"
 						}
+					},
+					"Edit": {
+						"enabled": true,
+						"props": {
+							"path": "/deed-types/[uid]/edit",
+							"labelKey": "editDeedType"
+						}
 					}
 				}
 			},
diff --git a/src/front/Config/Module/preprod.json b/src/front/Config/Module/preprod.json
index de759235..e2a56d46 100644
--- a/src/front/Config/Module/preprod.json
+++ b/src/front/Config/Module/preprod.json
@@ -171,6 +171,13 @@
 							"path": "/deed-types/create",
 							"labelKey": "createDeedType"
 						}
+					},
+					"Edit": {
+						"enabled": true,
+						"props": {
+							"path": "/deed-types/[uid]/edit",
+							"labelKey": "editDeedType"
+						}
 					}
 				}
 			},
diff --git a/src/front/Config/Module/production.json b/src/front/Config/Module/production.json
index de759235..e2a56d46 100644
--- a/src/front/Config/Module/production.json
+++ b/src/front/Config/Module/production.json
@@ -171,6 +171,13 @@
 							"path": "/deed-types/create",
 							"labelKey": "createDeedType"
 						}
+					},
+					"Edit": {
+						"enabled": true,
+						"props": {
+							"path": "/deed-types/[uid]/edit",
+							"labelKey": "editDeedType"
+						}
 					}
 				}
 			},
diff --git a/src/front/Config/Module/staging.json b/src/front/Config/Module/staging.json
index de759235..e2a56d46 100644
--- a/src/front/Config/Module/staging.json
+++ b/src/front/Config/Module/staging.json
@@ -171,6 +171,13 @@
 							"path": "/deed-types/create",
 							"labelKey": "createDeedType"
 						}
+					},
+					"Edit": {
+						"enabled": true,
+						"props": {
+							"path": "/deed-types/[uid]/edit",
+							"labelKey": "editDeedType"
+						}
 					}
 				}
 			},
diff --git a/src/pages/deed-types/[deedTypeUid]/edit/index.tsx b/src/pages/deed-types/[deedTypeUid]/edit/index.tsx
new file mode 100644
index 00000000..587de6f9
--- /dev/null
+++ b/src/pages/deed-types/[deedTypeUid]/edit/index.tsx
@@ -0,0 +1,5 @@
+import DeedTypesEdit from "@Front/Components/Layouts/DeedTypes/DeedTypesEdit";
+
+export default function Route() {
+	return <DeedTypesEdit />;
+}