From 8b371daace29c167ab44689a126b370b0b449312 Mon Sep 17 00:00:00 2001
From: Antoine Jeanneney <29945628+ajeanneney@users.noreply.github.com>
Date: Tue, 3 Sep 2024 10:50:14 +0200
Subject: [PATCH] Feat/add show modifications options on problem report table
 (#123)

* add show modifications options on problem report table

* simplify isDisabled condition

* change order

---------

Co-authored-by: Antoine Jeanneney <antoine.jeanneney@justice.fr>
---
 .../ProblemReportsTable.tsx                   | 47 +++++++++++++++----
 1 file changed, 37 insertions(+), 10 deletions(-)

diff --git a/packages/generic/client/src/pages/Admin/ProblemReports/ProblemReportsTable/ProblemReportsTable.tsx b/packages/generic/client/src/pages/Admin/ProblemReports/ProblemReportsTable/ProblemReportsTable.tsx
index 8f11fc8c8..b51b43aec 100644
--- a/packages/generic/client/src/pages/Admin/ProblemReports/ProblemReportsTable/ProblemReportsTable.tsx
+++ b/packages/generic/client/src/pages/Admin/ProblemReports/ProblemReportsTable/ProblemReportsTable.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import format from 'string-template';
 import { customThemeType, useCustomTheme, optionItemType, Table, tableRowFieldType } from 'pelta-design-system';
@@ -11,6 +11,7 @@ import { localStorage } from '../../../../services/localStorage';
 import { sendMail } from '../../../../services/sendMail';
 import { wordings } from '../../../../wordings';
 import { routes } from '../../../routes';
+import { annotationDiffDocumentInfoType, AnnotationsDiffDrawer } from '../../TreatedDocuments/AnnotationsDiffDrawer';
 
 export { ProblemReportsTable };
 
@@ -26,6 +27,9 @@ function ProblemReportsTable(props: {
   const theme = useCustomTheme();
   const { displayAlert } = useAlert();
   const { displayPopup } = usePopup();
+  const [annotationDiffDocumentInfo, setAnnotationDiffDocumentInfo] = useState<
+    annotationDiffDocumentInfoType | undefined
+  >();
 
   const styles = buildStyles(theme);
   const problemReportsFields = buildProblemReportsFields();
@@ -33,15 +37,18 @@ function ProblemReportsTable(props: {
   const adminView = localStorage.adminViewHandler.get();
 
   return (
-    <Table
-      data={props.problemReportsWithDetails}
-      isRowHighlighted={isRowHighlighted}
-      fields={problemReportsFields}
-      buildOptionItems={buildOptionItems}
-      onRowClick={userRole === 'admin' && adminView === 'admin' ? onRowClick : undefined}
-      defaultOrderByProperty="date"
-      defaultOrderDirection="desc"
-    />
+    <>
+      <AnnotationsDiffDrawer documentInfo={annotationDiffDocumentInfo} close={resetDrawer} />
+      <Table
+        data={props.problemReportsWithDetails}
+        isRowHighlighted={isRowHighlighted}
+        fields={problemReportsFields}
+        buildOptionItems={buildOptionItems}
+        onRowClick={userRole === 'admin' && adminView === 'admin' ? onRowClick : undefined}
+        defaultOrderByProperty="date"
+        defaultOrderDirection="desc"
+      />
+    </>
   );
 
   function buildProblemReportsFields(): Array<
@@ -273,6 +280,21 @@ function ProblemReportsTable(props: {
       isDisabled: userRole !== 'admin' || adminView !== 'admin',
       iconName: 'turnRight' as const,
     };
+
+    const displayAnnotationDiff = {
+      kind: 'text' as const,
+      text: wordings.treatedDocumentsPage.table.optionItems.displayAnnotationDiff,
+      onClick: () =>
+        problemReportWithDetails.document &&
+        setAnnotationDiffDocumentInfo({
+          _id: problemReportWithDetails.document?._id,
+          documentNumber: problemReportWithDetails.document?.documentNumber,
+          userName: problemReportWithDetails.user.name,
+        }),
+      iconName: 'link' as const,
+      isDisabled: !problemReportWithDetails.document,
+    };
+
     const optionItems: Array<optionItemType> = [
       answerByEmailOptionItem,
       openDocumentOptionItem,
@@ -280,6 +302,7 @@ function ProblemReportsTable(props: {
       validateDocumentOptionItem,
       deleteProblemReportOptionItem,
       deleteDocument,
+      displayAnnotationDiff,
     ];
 
     return optionItems;
@@ -302,6 +325,10 @@ function ProblemReportsTable(props: {
     }
     props.refetch();
   }
+
+  function resetDrawer() {
+    setAnnotationDiffDocumentInfo(undefined);
+  }
 }
 
 function isRowHighlighted(problemReportWithDetails: apiRouteOutType<'get', 'problemReportsWithDetails'>[number]) {