fix: add time to meds and procedures (#2949)

* fix: add time to meds and procedures * fix: add problem list time * fix: split date and time across lines * test: update snapshot
CDCgov · Nov 25, 2024 · 68c3d35 · 68c3d35
1 parent 035cf00
commit 68c3d35
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 15 deletions.
diff --git a/containers/ecr-viewer/src/app/services/formatService.tsx b/containers/ecr-viewer/src/app/services/formatService.tsx
@@ -111,7 +111,7 @@ export const formatAddress = (
  * @param dateTimeString datetime string.
  * @returns Formatted datetime string.
  */
-export const formatDateTime = (dateTimeString: string): string => {
+export const formatDateTime = (dateTimeString: string | undefined): string => {
   if (!dateTimeString) {
     return "";
   }

diff --git a/containers/ecr-viewer/src/app/tests/components/ActiveProblems.test.tsx b/containers/ecr-viewer/src/app/tests/components/ActiveProblems.test.tsx
@@ -139,7 +139,7 @@ describe("Active Problems Table", () => {
           },
         ],
         resourceType: "Condition",
-        onsetDateTime: "08/19/2018",
+        onsetDateTime: "08/19/2018 1:00 PM",
         clinicalStatus: {
           coding: [
             {

diff --git a/containers/ecr-viewer/src/app/tests/components/AdminMedTable.test.tsx b/containers/ecr-viewer/src/app/tests/components/AdminMedTable.test.tsx
@@ -13,12 +13,16 @@ describe("AdminMedTable", () => {
   it("should render administered medications", () => {
     render(
       <AdministeredMedication
-        medicationData={[{ name: "aspirin tablet 325 mg", date: "09/29/2022" }]}
+        medicationData={[
+          { name: "aspirin tablet 325 mg", date: "09/29/2022" },
+          { name: "aleve tablet 325 mg", date: "09/29/2022 4:53" },
+        ]}
       />,
     );
 
     expect(screen.getByText("Administered Medications")).toBeVisible();
     expect(screen.getByText("aspirin tablet 325 mg")).toBeVisible();
     expect(screen.getByText("09/29/2022")).toBeVisible();
+    expect(screen.getByText("09/29/2022 4:53")).toBeVisible();
   });
 });
diff --git a/containers/ecr-viewer/src/app/tests/components/Clinical.test.tsx b/containers/ecr-viewer/src/app/tests/components/Clinical.test.tsx
@@ -49,7 +49,7 @@ describe("Snapshot test for Procedures (Treatment Details)", () => {
           },
         ],
         resourceType: "Procedure",
-        performedDateTime: "06/24/2022",
+        performedDateTime: "2022-06-24T12:50:00-04:00",
       },
       {
         id: "b40f0081-4052-4971-3f3b-e3d9f5e1e44d",

diff --git a/containers/ecr-viewer/src/app/tests/components/__snapshots__/ActiveProblems.test.tsx.snap b/containers/ecr-viewer/src/app/tests/components/__snapshots__/ActiveProblems.test.tsx.snap
@@ -21,7 +21,7 @@ exports[`Active Problems Table should match snapshot 1`] = `
           class="tableHeader"
           scope="col"
         >
-          Onset Date
+          Onset Date/Time
         </th>
         <th
           class="tableHeader"
@@ -116,7 +116,7 @@ exports[`Active Problems Table should match snapshot 1`] = `
         <td
           class="text-top"
         >
-          08/19/2018
+          08/19/2018 1:00 PM
         </td>
         <td
           class="text-top"

diff --git a/containers/ecr-viewer/src/app/tests/components/__snapshots__/Clinical.test.tsx.snap b/containers/ecr-viewer/src/app/tests/components/__snapshots__/Clinical.test.tsx.snap
@@ -192,7 +192,7 @@ exports[`Snapshot test for Procedures (Treatment Details) should match snapshot
                         class="tableHeader"
                         scope="col"
                       >
-                        Date Performed
+                        Date/Time Performed
                       </th>
                       <th
                         class="tableHeader"
@@ -213,6 +213,7 @@ exports[`Snapshot test for Procedures (Treatment Details) should match snapshot
                         class="text-top"
                       >
                         06/24/2022
+12:50 PM -04:00
                       </td>
                       <td
                         class="text-top"

diff --git a/containers/ecr-viewer/src/app/view-data/components/AdministeredMedication.tsx b/containers/ecr-viewer/src/app/view-data/components/AdministeredMedication.tsx
@@ -1,5 +1,5 @@
 import { noData } from "@/app/view-data/utils/utils";
-import { formatDate } from "@/app/services/formatService";
+import { formatDateTime } from "@/app/services/formatService";
 import {
   BuildHeaders,
   BuildTable,
@@ -28,13 +28,16 @@ export const AdministeredMedication = ({
 
   const headers = BuildHeaders([
     { columnName: "Medication Name", className: "bg-gray-5 minw-15" },
-    { columnName: "Medication Start Date", className: "bg-gray-5 minw-15" },
+    {
+      columnName: "Medication Start Date/Time",
+      className: "bg-gray-5 minw-15",
+    },
   ]);
   const tableRows = medicationData.map((entry, index: number) => {
     return (
       <tr key={`table-row-${index}`}>
         <td>{entry?.name ?? noData}</td>
-        <td>{formatDate(entry?.date) ?? noData}</td>
+        <td>{formatDateTime(entry?.date) ?? noData}</td>
       </tr>
     );
   });

diff --git a/containers/ecr-viewer/src/app/view-data/components/common.tsx b/containers/ecr-viewer/src/app/view-data/components/common.tsx
@@ -209,7 +209,7 @@ export const returnProblemsTable = (
       columnName: "Active Problem",
       infoPath: "activeProblemsDisplay",
     },
-    { columnName: "Onset Date", infoPath: "activeProblemsOnsetDate" },
+    { columnName: "Onset Date/Time", infoPath: "activeProblemsOnsetDate" },
     { columnName: "Onset Age", infoPath: "activeProblemsOnsetAge" },
     {
       columnName: "Comments",
@@ -220,7 +220,7 @@ export const returnProblemsTable = (
   ];
 
   problemsArray.forEach((entry) => {
-    entry.onsetDateTime = formatDate(entry.onsetDateTime);
+    entry.onsetDateTime = formatDateTime(entry.onsetDateTime);
     entry.onsetAge = {
       value: calculatePatientAge(fhirBundle, mappings, entry.onsetDateTime),
     };
@@ -344,12 +344,14 @@ export const returnProceduresTable = (
 
   const columnInfo: ColumnInfoInput[] = [
     { columnName: "Name", infoPath: "procedureName" },
-    { columnName: "Date Performed", infoPath: "procedureDate" },
+    { columnName: "Date/Time Performed", infoPath: "procedureDate" },
     { columnName: "Reason", infoPath: "procedureReason" },
   ];
 
-  proceduresArray.forEach((entry) => {
-    entry.performedDateTime = formatDate(entry.performedDateTime);
+  proceduresArray = proceduresArray.map((entry) => {
+    // Have date and time be on two different lines
+    const dt = formatDateTime(entry.performedDateTime);
+    return { ...entry, performedDateTime: dt.replace(" ", "\n") };
   });
 
   proceduresArray.sort(