✨ Document informations page

src/front/Components/DesignSystem/Header/Profile/ProfileModal/index.tsx

@@ -58,7 +58,6 @@ export default class ProfileModal extends React.Component<IProps, IState> {
 							Module.getInstance().get().modules.pages.Offices.pages.OfficesInformations.props.path,
 						]}
 					/>
-					<NavigationLink text="Gestion des noms de domaine" />
 					<NavigationLink text="CGU" />
 					<div className={classes["separator"]} />
 					<LogOutButton />

src/front/Components/LayoutTemplates/DefaultDocumentTypesDashboard/DocumentTypeListContainer/index.tsx

@@ -34,7 +34,7 @@ export default function DocumentTypeListContainer(props: IProps) {
 		(block: IBlock) => {
 			props.onCloseLeftSide && props.onCloseLeftSide();
 			console.log("Block selected :", block);
-			const redirectPath = Module.getInstance().get().modules.pages.DocumentTypes.pages.Edit.props.path;
+			const redirectPath = Module.getInstance().get().modules.pages.DocumentTypes.pages.DocumentTypesInformations.props.path;
 			router.push(redirectPath.replace("[uid]", block.id));
 		},
 		[props, router],

src/front/Components/Layouts/DocumentTypes/DocumentTypesEdit/index.tsx

@@ -5,6 +5,7 @@ import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
 import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
 import DefaultDocumentTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDocumentTypesDashboard";
+import Module from "@Front/Config/Module";
 import { validateOrReject } from "class-validator";
 import { DocumentType } from "le-coffre-resources/dist/Admin";
 import { useRouter } from "next/router";
@@ -39,12 +40,19 @@ export default function DocumentTypesEdit() {
 				});
 				await validateOrReject(documentToUpdate, { groups: ["updateDocumentType"] });
 				const documentTypeUpdated = await DocumentTypes.getInstance().put(documentTypeUid as string, documentToUpdate);
-				console.log(documentTypeUpdated);
+				router.push(
+					Module.getInstance()
+						.get()
+						.modules.pages.DocumentTypes.pages.DocumentTypesInformations.props.path.replace(
+							"[uid]",
+							documentTypeUpdated.uid ?? "",
+						),
+				);
 			} catch (e) {
 				console.log(e);
 			}
 		},
-		[documentTypeUid],
+		[documentTypeUid, router],
 	);
 
 	return (

src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/classes.module.scss

@@ -1,91 +1,39 @@
 @import "@Themes/constants.scss";
 
 .root {
-	.header {
+	.document-infos {
 		display: flex;
-		justify-content: space-between;
-		align-items: flex-end;
-
-		@media (max-width: $screen-l) {
-			flex-direction: column;
 		align-items: flex-start;
-			gap: 24px;
-		}
-	}
-
-	.subtitle {
-		margin-top: 32px;
-	}
-
-	.deed-type-container {
-		margin-top: 32px;
-		display: flex;
-		gap: 100px;
 		justify-content: space-between;
+		gap: 24px;
 		padding: 24px;
+		margin-top: 32px;
 		background-color: var(--grey-soft);
 
-		@media (max-width: $screen-l) {
+		.left {
-			gap: 80px;
+			display: flex;
-		}
-
-		@media (max-width: $screen-m) {
 			flex-direction: column;
 			gap: 32px;
+			justify-content: space-between;
+
+			@media (max-width: $screen-l) {
+				display: grid;
+				grid-template-columns: repeat(2, 1fr);
+				gap: 32px;
 			}
 
-		.infos {
+			@media (max-width: $screen-s) {
-			display: flex;
+				grid-template-columns: repeat(1, 1fr);
-			gap: 100px;
+			}
-			flex: 1;
 
-			@media (max-width: $screen-l) {
+			.document-infos-row {
+				display: flex;
 				flex-direction: column;
-				gap: 32px;
+				gap: 12px;
-			}
-
-			.box {
-				.box-title {
-					margin-bottom: 8px;
-					opacity: 0.4;
 			}
 		}
 
-			.middle-box {
+		.right {
-				flex: 1;
 		}
 	}
-
-		.pencil {
-			align-self: center;
-
-			@media (max-width: $screen-m) {
-				align-self: flex-start;
-			}
-		}
-	}
-
-	.documents-container {
-		margin-top: 32px;
-		padding: 32px 16px;
-
-		border: 1px solid var(--grey);
-
-		.container-title {
-		}
-
-		.documents {
-			margin-top: 32px;
-		}
-
-		.button-container {
-			margin-top: 32px;
-		}
-	}
-
-	.delete-container {
-		display: flex;
-		justify-content: center;
-		margin-top: 32px;
-	}
 }

src/front/Components/Layouts/DocumentTypes/DocumentTypesInformations/index.tsx

@@ -1,89 +1,72 @@
-import ChevronIcon from "@Assets/Icons/chevron.svg";
 import PenICon from "@Assets/Icons/pen.svg";
 import DocumentTypes from "@Front/Api/LeCoffreApi/Admin/DocumentTypes/DocumentTypes";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
-import Form from "@Front/Components/DesignSystem/Form";
 import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import DefaultDocumentTypesDashboard from "@Front/Components/LayoutTemplates/DefaultDocumentTypesDashboard";
 import Module from "@Front/Config/Module";
-import classNames from "classnames";
 import { DocumentType } from "le-coffre-resources/dist/Admin";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 import classes from "./classes.module.scss";
 
-type IProps = {};
+export default function DocumentTypesInformations() {
-export default function DocumentTypesInformations(props: IProps) {
 	const router = useRouter();
 	let { documentTypeUid } = router.query;
 
-	const [documentTypeSelected, setDocumentTypeSelected] = useState<DocumentType | null>(null);
+	const [documentSelected, setDocumentSelected] = useState<DocumentType | null>(null);
 
 	useEffect(() => {
-		async function getDocumentType() {
+		async function getDocument() {
 			if (!documentTypeUid) return;
-			const documentType = await DocumentTypes.getInstance().getByUid(documentTypeUid as string);
+			const document = await DocumentTypes.getInstance().getByUid(documentTypeUid as string, {
-			setDocumentTypeSelected(documentType);
+				_count: true,
+			});
+			if (!document) return;
+			setDocumentSelected(document);
 		}
 
-		getDocumentType();
+		getDocument();
 	}, [documentTypeUid]);
 
-	const onSubmitHandler = useCallback(async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => {}, []);
-
 	return (
-		<DefaultDocumentTypesDashboard mobileBackText={"Liste des types d'actes"}>
+		<DefaultDocumentTypesDashboard mobileBackText={"Liste des collaborateurs"}>
 			<div className={classes["root"]}>
-				<div className={classes["header"]}>
+				<div className={classes["folder-header"]}>
-					<Typography typo={ITypo.H1Bis}>Paramétrage des listes de pièces</Typography>
+					<Typography typo={ITypo.H1Bis}>Paramétrage des documents</Typography>
-					<Button variant={EButtonVariant.LINE}>
-						Modifier la liste des documents
-						<Image src={ChevronIcon} alt="Chevron" />
-					</Button>
 				</div>
-				<div className={classes["subtitle"]}>
+				<div className={classes["document-infos"]}>
-					<Typography typo={ITypo.H3}>{documentTypeSelected?.name}</Typography>
+					<div className={classes["left"]}>
-				</div>
+						<div className={classes["document-infos-row"]}>
-				<div className={classes["deed-type-container"]}>
+							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
-					<div className={classes["infos"]}>
+								Nom du document
-						<div className={classes["box"]}>
-							<Typography typo={ITypo.NAV_INPUT_16} className={classes["box-title"]} color={ITypoColor.BLACK}>
-								Nom du type d'acte
 							</Typography>
-							<Typography typo={ITypo.P_18}>{documentTypeSelected?.name}</Typography>
+							<Typography typo={ITypo.P_18}>{documentSelected?.name}</Typography>
 						</div>
-						<div className={classNames(classes["middle-box"], classes["box"])}>
+						<div className={classes["document-infos-row"]}>
-							<Typography typo={ITypo.NAV_INPUT_16} className={classes["box-title"]} color={ITypoColor.BLACK}>
+							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
-								Description
+								Description visible par les collaborateurs de l'office
 							</Typography>
+							<Typography typo={ITypo.P_18}>{documentSelected?.private_description}</Typography>
+						</div>
+						<div className={classes["document-infos-row"]}>
+							<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
+								Description visible par les clients de l'office
+							</Typography>
+							<Typography typo={ITypo.P_18}>{documentSelected?.public_description}</Typography>
 						</div>
 					</div>
-					<div className={classes["pencil"]}>
+					<div className={classes["right"]}>
 						<Link
 							href={Module.getInstance()
 								.get()
-								.modules.pages.DocumentTypes.pages.Edit.props.path.replace("[uid]", documentTypeUid as string)}
+								.modules.pages.DocumentTypes.pages.Edit.props.path.replace("[uid]", documentSelected?.uid ?? "")}
 							className={classes["edit-icon-container"]}>
-							<Image src={PenICon} alt="éditer le type d'acte" />
+							<Image src={PenICon} alt="edit informations" />
 						</Link>
 					</div>
 				</div>
-				<div className={classes["documents-container"]}>
-					<Form onSubmit={onSubmitHandler}>
-						<div className={classes["container-title"]}>
-							<Typography typo={ITypo.P_SB_18}>Documents paramétrés</Typography>
-						</div>
-						<div className={classes["button-container"]}>
-							<Button type="submit">Enregistrer</Button>
-						</div>
-					</Form>
-				</div>
-				<div className={classes["delete-container"]}>
-					<Button variant={EButtonVariant.GHOST}>Supprimer</Button>
-				</div>
 			</div>
 		</DefaultDocumentTypesDashboard>
 	);