feat: sort risk assessment table by date

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 ""
 

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> {

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

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>

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.")}

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,
+    };
 }