From 334313e71dd50b561037267471accfe3b628b51e Mon Sep 17 00:00:00 2001
From: Max S <maxime.sallerin@smart-chain.fr>
Date: Mon, 26 Aug 2024 11:45:01 +0200
Subject: [PATCH] :sparkles: responsive folder client view

---
 .../ClientView/DocumentTables/index.tsx       | 31 ++++++++++---
 .../ClientView/classes.module.scss            | 23 +++++++++-
 .../FolderInformation/ClientView/index.tsx    | 44 ++++++++++---------
 3 files changed, 70 insertions(+), 28 deletions(-)

diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/index.tsx
index de516731..103c3270 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/index.tsx
@@ -16,6 +16,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import classes from "./classes.module.scss";
 import DeleteAskedDocumentModal from "./DeleteAskedDocumentModal";
 import DeleteSentDocumentModal from "./DeleteSentDocumentModal";
+import { useMediaQuery } from "@mui/material";
 
 type IProps = {
 	documents: Document[];
@@ -34,6 +35,8 @@ export default function DocumentTables(props: IProps) {
 	const [documents, setDocuments] = useState<Document[]>(documentsProps);
 	const [documentUid, setDocumentUid] = useState<string | null>(null);
 
+	const isMobile = useMediaQuery("(max-width:524px)");
+
 	const deleteAskedDocumentModal = useOpenable();
 	const deleteSentDocumentModal = useOpenable();
 
@@ -232,11 +235,11 @@ export default function DocumentTables(props: IProps) {
 				</Typography>
 				<CircleProgress percentage={progress} />
 			</div>
-			{askedDocuments.length > 0 && <Table header={getHeader("Demandé le")} rows={askedDocuments} />}
-			{toValidateDocuments.length > 0 && <Table header={getHeader("Déposé le")} rows={toValidateDocuments} />}
-			{validatedDocuments.length > 0 && <Table header={getHeader("Validé le")} rows={validatedDocuments} />}
-			{refusedDocuments.length > 0 && <Table header={getHeader("Demandé le")} rows={refusedDocuments} />}
-			{sentDocuments.length > 0 && <Table header={getHeader("Envoyé le")} rows={sentDocuments} />}
+			{askedDocuments.length > 0 && <Table header={getHeader("Demandé le", isMobile)} rows={askedDocuments} />}
+			{toValidateDocuments.length > 0 && <Table header={getHeader("Déposé le", isMobile)} rows={toValidateDocuments} />}
+			{validatedDocuments.length > 0 && <Table header={getHeader("Validé le", isMobile)} rows={validatedDocuments} />}
+			{refusedDocuments.length > 0 && <Table header={getHeader("Demandé le", isMobile)} rows={refusedDocuments} />}
+			{sentDocuments.length > 0 && <Table header={getHeader("Envoyé le", isMobile)} rows={sentDocuments} />}
 			{documentUid && (
 				<>
 					<DeleteAskedDocumentModal
@@ -257,7 +260,23 @@ export default function DocumentTables(props: IProps) {
 	);
 }
 
-function getHeader(dateColumnTitle: string): IHead[] {
+function getHeader(dateColumnTitle: string, isMobile: boolean): IHead[] {
+	if (isMobile) {
+		return [
+			{
+				key: "document_type",
+				title: "Type de document",
+			},
+			{
+				key: "document_status",
+				title: "Statut",
+			},
+			{
+				key: "actions",
+				title: "Action",
+			},
+		];
+	}
 	return [
 		{
 			key: "document_type",
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/classes.module.scss b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/classes.module.scss
index 673d2297..e3002c6c 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/classes.module.scss
+++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/classes.module.scss
@@ -1,5 +1,7 @@
 @import "@Themes/constants.scss";
 
+$mobile-breakpoint: 664px;
+
 .root {
 	display: flex;
 	flex-direction: column;
@@ -20,11 +22,30 @@
 		display: flex;
 		gap: var(--spacing-lg, 24px);
 
-		.client-box {
+		@media screen and (max-width: $screen-s) {
+			flex-direction: column;
+		}
+
+		.client-box-container {
 			display: flex;
 			flex-direction: column;
 
 			gap: var(--spacing-lg, 24px);
+
+			.button-container {
+				display: flex;
+				flex-direction: column;
+				gap: var(--spacing-lg, 24px);
+			}
+
+			@media screen and (max-width: $screen-s) {
+				flex-direction: row;
+			}
+
+			@media screen and (max-width: $mobile-breakpoint) {
+				flex-direction: column;
+				margin: auto;
+			}
 		}
 	}
 }
diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx
index 444d2e83..dc4a9361 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/index.tsx
@@ -1,21 +1,20 @@
+import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
+import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Tabs from "@Front/Components/Elements/Tabs";
+import Module from "@Front/Config/Module";
+import { DocumentIcon, UserPlusIcon } from "@heroicons/react/24/outline";
 import Customer from "le-coffre-resources/dist/Customer";
+import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
 import { OfficeFolder } from "le-coffre-resources/dist/Notary";
-
+import Link from "next/link";
 import { useCallback, useMemo, useState } from "react";
 
 import { AnchorStatus } from "..";
 import classes from "./classes.module.scss";
 import ClientBox from "./ClientBox";
-import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
-import { DocumentIcon, UserPlusIcon } from "@heroicons/react/24/outline";
-import Module from "@Front/Config/Module";
-import Link from "next/link";
-import NoDocument from "./NoDocument";
 import DocumentTables from "./DocumentTables";
-import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
-import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
 import EmailReminder from "./EmailReminder";
+import NoDocument from "./NoDocument";
 
 type IProps = {
 	folder: OfficeFolder;
@@ -96,7 +95,7 @@ export default function ClientView(props: IProps) {
 				)}
 			</div>
 			<div className={classes["content"]}>
-				<div className={classes["client-box"]}>
+				<div className={classes["client-box-container"]}>
 					<ClientBox
 						customer={customer}
 						anchorStatus={anchorStatus}
@@ -104,19 +103,22 @@ export default function ClientView(props: IProps) {
 						onDelete={handleClientDelete}
 						customerNote={folder.notes!.find((value) => value.customer?.uid === customer.uid) ?? null}
 					/>
-					{anchorStatus === AnchorStatus.NOT_ANCHORED && (
-						<Link
-							href={Module.getInstance()
-								.get()
-								.modules.pages.Folder.pages.AskDocument.props.path.replace("[folderUid]", folder.uid ?? "")
-								.replace("[customerUid]", customer.uid ?? "")}>
-							<Button rightIcon={<DocumentIcon />} variant={EButtonVariant.PRIMARY} fullwidth>
-								Demander un document
-							</Button>
-						</Link>
-					)}
-					<EmailReminder customer={customer} />
+					<div className={classes["button-container"]}>
+						{anchorStatus === AnchorStatus.NOT_ANCHORED && (
+							<Link
+								href={Module.getInstance()
+									.get()
+									.modules.pages.Folder.pages.AskDocument.props.path.replace("[folderUid]", folder.uid ?? "")
+									.replace("[customerUid]", customer.uid ?? "")}>
+								<Button rightIcon={<DocumentIcon />} variant={EButtonVariant.PRIMARY} fullwidth>
+									Demander un document
+								</Button>
+							</Link>
+						)}
+						<EmailReminder customer={customer} />
+					</div>
 				</div>
+
 				{doesCustomerHaveDocument ? (
 					<DocumentTables documents={customer.documents ?? []} folderUid={folder?.uid ?? ""} />
 				) : (