From 9fa0ae6039426398a2f4212fd5dab6f9db7894fb Mon Sep 17 00:00:00 2001
From: Max S <maxime.sallerin@smart-chain.fr>
Date: Tue, 13 Aug 2024 11:47:28 +0200
Subject: [PATCH] sent documents table

---
 .../DocumentTables/classes.module.scss        |  6 ++
 .../ClientView/DocumentTables/index.tsx       | 80 ++++++++++++-------
 2 files changed, 59 insertions(+), 27 deletions(-)

diff --git a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/classes.module.scss b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/classes.module.scss
index 1e85e972..c4b3c70e 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/classes.module.scss
+++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/classes.module.scss
@@ -11,4 +11,10 @@
 		justify-content: space-between;
 		align-items: center;
 	}
+
+	.actions {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-sm, 8px);
+	}
 }
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 8714f3dc..5259f4d4 100644
--- a/src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/index.tsx
+++ b/src/front/Components/Layouts/Folder/FolderInformation/ClientView/DocumentTables/index.tsx
@@ -21,25 +21,6 @@ type IProps = {
 	folderUid: string;
 };
 
-const header: readonly IHead[] = [
-	{
-		key: "document_type",
-		title: "Type de document",
-	},
-	{
-		key: "document_status",
-		title: "Statut",
-	},
-	{
-		key: "created_at",
-		title: "Demandé le",
-	},
-	{
-		key: "actions",
-		title: "Actions",
-	},
-];
-
 const tradDocumentStatus: Record<EDocumentStatus, string> = {
 	[EDocumentStatus.ASKED]: "Demandé",
 	[EDocumentStatus.DEPOSITED]: "À valider",
@@ -99,7 +80,7 @@ export default function DocumentTables(props: IProps) {
 								label={tradDocumentStatus[document.document_status].toUpperCase()}
 							/>
 						),
-						created_at: document.created_at ? new Date(document.created_at).toLocaleDateString() : "_",
+						date: document.created_at ? new Date(document.created_at).toLocaleDateString() : "_",
 						actions: <IconButton icon={<TrashIcon onClick={() => openDeleteAskedDocumentModal(document.uid)} />} />,
 					};
 				})
@@ -122,7 +103,7 @@ export default function DocumentTables(props: IProps) {
 								label={tradDocumentStatus[document.document_status].toUpperCase()}
 							/>
 						),
-						created_at: document.created_at ? new Date(document.created_at).toLocaleDateString() : "_",
+						date: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_",
 						actions: (
 							<Link
 								href={Module.getInstance()
@@ -153,7 +134,7 @@ export default function DocumentTables(props: IProps) {
 								label={tradDocumentStatus[document.document_status].toUpperCase()}
 							/>
 						),
-						created_at: document.created_at ? new Date(document.created_at).toLocaleDateString() : "_",
+						date: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_",
 						actions: (
 							<div className={classes["actions"]}>
 								<Link
@@ -187,7 +168,7 @@ export default function DocumentTables(props: IProps) {
 								label={tradDocumentStatus[document.document_status].toUpperCase()}
 							/>
 						),
-						created_at: document.created_at ? new Date(document.created_at).toLocaleDateString() : "_",
+						date: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_",
 						actions: "",
 					};
 				})
@@ -195,6 +176,29 @@ export default function DocumentTables(props: IProps) {
 		[documents],
 	);
 
+	//TODO: modify accordingly when the back will handle sent documents
+	const sentDocuments: IRowProps[] = useMemo(
+		() =>
+			documents
+				.map((document) => {
+					if (document.document_status !== "sent") return null;
+					return {
+						key: document.uid,
+						document_type: document.document_type?.name ?? "_",
+						document_status: <Tag color={ETagColor.ERROR} variant={ETagVariant.SEMI_BOLD} label={"Envoyé"} />,
+						date: document.updated_at ? new Date(document.updated_at).toLocaleDateString() : "_",
+						actions: (
+							<div className={classes["actions"]}>
+								<IconButton onClick={() => onDownload(document)} icon={<ArrowDownTrayIcon />} />
+								<IconButton icon={<TrashIcon onClick={() => openDeleteAskedDocumentModal(document.uid)} />} />
+							</div>
+						),
+					};
+				})
+				.filter((document) => document !== null) as IRowProps[],
+		[documents, onDownload, openDeleteAskedDocumentModal],
+	);
+
 	const progress = useMemo(() => {
 		const total = askedDocuments.length + toValidateDocuments.length + validatedDocuments.length + refusedDocuments.length;
 		if (total === 0) return 0;
@@ -217,10 +221,11 @@ export default function DocumentTables(props: IProps) {
 				</Typography>
 				<CircleProgress percentage={progress} />
 			</div>
-			{askedDocuments.length > 0 && <Table header={header} rows={askedDocuments} />}
-			{toValidateDocuments.length > 0 && <Table header={header} rows={toValidateDocuments} />}
-			{validatedDocuments.length > 0 && <Table header={header} rows={validatedDocuments} />}
-			{refusedDocuments.length > 0 && <Table header={header} rows={refusedDocuments} />}
+			{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} />}
 			{documentUid && (
 				<DeleteAskedDocumentModal
 					isOpen={deleteAskedOocumentModal.isOpen}
@@ -232,3 +237,24 @@ export default function DocumentTables(props: IProps) {
 		</div>
 	);
 }
+
+function getHeader(dateColumnTitle: string): IHead[] {
+	return [
+		{
+			key: "document_type",
+			title: "Type de document",
+		},
+		{
+			key: "document_status",
+			title: "Statut",
+		},
+		{
+			key: "date",
+			title: dateColumnTitle,
+		},
+		{
+			key: "actions",
+			title: "Action",
+		},
+	];
+}