From c1f5e80e76bf421b2210dbdb8e211bfce36653f8 Mon Sep 17 00:00:00 2001
From: 9sneha-n <9sneha.n@gmail.com>
Date: Mon, 4 Nov 2024 00:59:22 +0530
Subject: [PATCH] feat: sort risk assessment table by date

---
 i18n/en.pot                                   | 10 ++++-
 .../DiseaseOutbreakEventTestRepository.ts     |  2 +-
 .../form-summary/EventTrackerFormSummary.tsx  |  2 +-
 src/webapp/components/table/BasicTable.tsx    | 43 ++++++++++++++++---
 .../pages/event-tracker/EventTrackerPage.tsx  | 15 +++++--
 .../event-tracker/useDiseaseOutbreakEvent.ts  | 38 +++++++++++++++-
 6 files changed, 95 insertions(+), 15 deletions(-)

diff --git a/i18n/en.pot b/i18n/en.pot
index 4d53e015..392348f3 100644
--- a/i18n/en.pot
+++ b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-10-16T14:36:22.158Z\n"
-"PO-Revision-Date: 2024-10-16T14:36:22.158Z\n"
+"POT-Creation-Date: 2024-11-03T18:35:32.151Z\n"
+"PO-Revision-Date: 2024-11-03T18:35:32.151Z\n"
 
 msgid "Low"
 msgstr ""
@@ -87,9 +87,15 @@ msgstr ""
 msgid "Edit Action Plan"
 msgstr ""
 
+msgid "Event completed"
+msgstr ""
+
 msgid "Edit Details"
 msgstr ""
 
+msgid "Complete Event"
+msgstr ""
+
 msgid "Notes"
 msgstr ""
 
diff --git a/src/data/repositories/test/DiseaseOutbreakEventTestRepository.ts b/src/data/repositories/test/DiseaseOutbreakEventTestRepository.ts
index aab9ec8e..b7dc9d78 100644
--- a/src/data/repositories/test/DiseaseOutbreakEventTestRepository.ts
+++ b/src/data/repositories/test/DiseaseOutbreakEventTestRepository.ts
@@ -10,7 +10,7 @@ import { DiseaseOutbreakEventRepository } from "../../../domain/repositories/Dis
 import { FutureData } from "../../api-futures";
 
 export class DiseaseOutbreakEventTestRepository implements DiseaseOutbreakEventRepository {
-    complete(id: Id): FutureData<void> {
+    complete(_id: Id): FutureData<void> {
         return Future.success(undefined);
     }
     get(id: Id): FutureData<DiseaseOutbreakEventBaseAttrs> {
diff --git a/src/webapp/components/form/form-summary/EventTrackerFormSummary.tsx b/src/webapp/components/form/form-summary/EventTrackerFormSummary.tsx
index 09d51891..2b8f9a45 100644
--- a/src/webapp/components/form/form-summary/EventTrackerFormSummary.tsx
+++ b/src/webapp/components/form/form-summary/EventTrackerFormSummary.tsx
@@ -51,7 +51,7 @@ export const EventTrackerFormSummary: React.FC<EventTrackerFormSummaryProps> = R
                 console.error(err);
             }
         );
-    }, []);
+    }, [compositionRoot, id, snackbar]);
 
     const editButton = (
         <Button
diff --git a/src/webapp/components/table/BasicTable.tsx b/src/webapp/components/table/BasicTable.tsx
index 46ca19bf..a263311a 100644
--- a/src/webapp/components/table/BasicTable.tsx
+++ b/src/webapp/components/table/BasicTable.tsx
@@ -1,10 +1,18 @@
-import React from "react";
-import { Table, TableBody, TableCell, TableHead, TableRow } from "@material-ui/core";
+import React, { useCallback, useEffect, useState } from "react";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableRow,
+    TableSortLabel,
+} from "@material-ui/core";
 import styled from "styled-components";
 import { Maybe } from "../../../utils/ts-utils";
 import i18n from "../../../utils/i18n";
 import { Option } from "../utils/option";
 import { Cell } from "./Cell";
+import _c from "../../../domain/entities/generic/Collection";
 
 const noop = () => {};
 
@@ -34,18 +42,41 @@ interface BasicTableProps {
     rows: TableRowType[];
     onChange?: (cell: Maybe<string>, rowIndex: number, column: TableColumn["value"]) => void;
     showRowIndex?: boolean;
+    onOrderBy?: (direction: "asc" | "desc") => void;
 }
 
 export const BasicTable: React.FC<BasicTableProps> = React.memo(
-    ({ columns, rows, onChange = noop, showRowIndex = false }) => {
+    ({ columns, rows, onChange = noop, showRowIndex = false, onOrderBy }) => {
+        const [order, setOrder] = useState<"asc" | "desc">();
+
+        const orderBy = useCallback(() => {
+            const updatedOrder = order === "asc" ? "desc" : "asc";
+            setOrder(prevOrder => (prevOrder === "asc" ? "desc" : "asc"));
+            onOrderBy && onOrderBy(updatedOrder);
+        }, [onOrderBy, order]);
+
         return (
             <StyledTable stickyHeader>
                 <TableHead>
                     <TableRow>
                         {showRowIndex && <TableCell />}
-                        {columns.map(({ value, label }) => (
-                            <TableCell key={value}>{i18n.t(label)}</TableCell>
-                        ))}
+                        {columns.map(({ value, label }) =>
+                            label === "Assessment Date" ? (
+                                <TableCell key={value} sortDirection={order}>
+                                    <TableSortLabel
+                                        direction={order}
+                                        onClick={orderBy}
+                                        active={true}
+                                    >
+                                        {label}
+                                    </TableSortLabel>
+                                </TableCell>
+                            ) : (
+                                <TableCell key={value} sortDirection={order}>
+                                    {i18n.t(label)}
+                                </TableCell>
+                            )
+                        )}
                     </TableRow>
                 </TableHead>
                 <TableBody>
diff --git a/src/webapp/pages/event-tracker/EventTrackerPage.tsx b/src/webapp/pages/event-tracker/EventTrackerPage.tsx
index c94e7a8b..7e2691f7 100644
--- a/src/webapp/pages/event-tracker/EventTrackerPage.tsx
+++ b/src/webapp/pages/event-tracker/EventTrackerPage.tsx
@@ -42,8 +42,13 @@ export const EventTrackerPage: React.FC = React.memo(() => {
         id: string;
     }>();
     const { goTo } = useRoutes();
-    const { formSummary, summaryError, riskAssessmentRows, eventTrackerDetails } =
-        useDiseaseOutbreakEvent(id);
+    const {
+        formSummary,
+        summaryError,
+        riskAssessmentRows,
+        eventTrackerDetails,
+        orderByRiskAssessmentDate,
+    } = useDiseaseOutbreakEvent(id);
     const { changeCurrentEventTracker, getCurrentEventTracker } = useCurrentEventTracker();
     const currentEventTracker = getCurrentEventTracker();
     const { lastAnalyticsRuntime } = useLastAnalyticsRuntime();
@@ -130,7 +135,11 @@ export const EventTrackerPage: React.FC = React.memo(() => {
                 titleVariant="secondary"
             >
                 {riskAssessmentRows.length > 0 ? (
-                    <BasicTable columns={riskAssessmentColumns} rows={riskAssessmentRows} />
+                    <BasicTable
+                        columns={riskAssessmentColumns}
+                        rows={riskAssessmentRows}
+                        onOrderBy={orderByRiskAssessmentDate}
+                    />
                 ) : (
                     <NoticeBox title={i18n.t("Risk assessment incomplete")}>
                         {i18n.t("Risks associated with this event have not yet been assessed.")}
diff --git a/src/webapp/pages/event-tracker/useDiseaseOutbreakEvent.ts b/src/webapp/pages/event-tracker/useDiseaseOutbreakEvent.ts
index d0670bcc..0433f5e2 100644
--- a/src/webapp/pages/event-tracker/useDiseaseOutbreakEvent.ts
+++ b/src/webapp/pages/event-tracker/useDiseaseOutbreakEvent.ts
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Id } from "../../../domain/entities/Ref";
 import { Maybe } from "../../../utils/ts-utils";
 import { useAppContext } from "../../contexts/app-context";
@@ -141,6 +141,40 @@ export function useDiseaseOutbreakEvent(id: Id) {
             return [];
         }
     };
+    const orderByRiskAssessmentDate = useCallback(
+        (direction: "asc" | "desc") => {
+            setRiskAssessmentRows(prevRows => {
+                if (direction === "asc") {
+                    const sortedRows = prevRows.sort((a, b) => {
+                        if (!a.riskAssessmentDate) return -1;
+                        if (!b.riskAssessmentDate) return 1;
 
-    return { formSummary, summaryError, riskAssessmentRows, eventTrackerDetails };
+                        const dateA = new Date(a.riskAssessmentDate).toISOString();
+                        const dateB = new Date(b.riskAssessmentDate).toISOString();
+                        return dateA < dateB ? -1 : dateA > dateB ? 1 : 0;
+                    });
+                    return sortedRows;
+                } else {
+                    const sortedRows = prevRows.sort((a, b) => {
+                        if (!a.riskAssessmentDate) return -1;
+                        if (!b.riskAssessmentDate) return -1;
+
+                        const dateA = new Date(a.riskAssessmentDate).toISOString();
+                        const dateB = new Date(b.riskAssessmentDate).toISOString();
+                        return dateA < dateB ? 1 : dateA > dateB ? -1 : 0;
+                    });
+                    return sortedRows;
+                }
+            });
+        },
+        [setRiskAssessmentRows]
+    );
+
+    return {
+        formSummary,
+        summaryError,
+        riskAssessmentRows,
+        eventTrackerDetails,
+        orderByRiskAssessmentDate,
+    };
 }