BAH-4052 | Fix. Slot Details Cell View (#228)

* [Rahul] | BAH-4052 | Fix. Remove Daemon User Tag from Tasks * [Rahul] | BAH-4052 | Add. Border CSS To Slot Details Cell * [Rahul] | BAH-4052 | Add. Task Provider Font Styling * [Rahul] | BAH-4052 | Refactor. Extend Task Cell Styling * [Rahul] | BAH-4052 | Add. Creator Styling In Slot Details Cell
Bahmni · Aug 2, 2024 · 79e62f4 · 79e62f4
1 parent afe1a4a
commit 79e62f4
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 24 deletions.
diff --git a/public/i18n/locale_en.json b/public/i18n/locale_en.json
@@ -100,5 +100,6 @@
   "HEIGHT_HEADER": "Height ({unit})",
   "WEIGHT_HEADER": "Weight ({unit})",
   "BMI_HEADER": "BMI ({unit})",
-  "MUAC": "MUAC ({unit})"
+  "MUAC": "MUAC ({unit})",
+  "CREATED_BY": "Created by {provider}"
 }
diff --git a/src/features/CareViewPatientsSummary/components/SlotDetailsCell.jsx b/src/features/CareViewPatientsSummary/components/SlotDetailsCell.jsx
@@ -12,6 +12,8 @@ import { getAdministrationStatus } from "../../../utils/CommonUtils";
 import SVGIcon from "../../SVGIcon/SVGIcon";
 import { CareViewContext } from "../../../context/CareViewContext";
 import propTypes from "prop-types";
+import { isSystemGeneratedTask } from "../../../utils/CommonUtils";
+import { FormattedMessage } from "react-intl";
 
 export const SlotDetailsCell = ({
   uuid,
@@ -84,7 +86,7 @@ export const SlotDetailsCell = ({
       if (slotItem.isNonMedication) {
         const taskItem = slotItem;
         return (
-          <div className="slot-details" key={`${taskItem.uuid}`}>
+          <div className="non-medication-task" key={`${taskItem.uuid}`}>
             <div className="logo">
               <div className="status-icon" data-testid={taskItem.status}>
                 {taskItem.status === "REQUESTED" && (
@@ -106,27 +108,39 @@ export const SlotDetailsCell = ({
             </span>
             <div className="drug-details-wrapper">
               <span>{taskItem.name}</span>
-              <div className="drug-details" data-testid="drug-details">
-                {taskItem.creator && (
-                  <span className="drug-detail">
-                    {taskItem.creator.display}
-                  </span>
+              {taskItem.creator &&
+                taskItem.creator.display &&
+                !isSystemGeneratedTask(taskItem) && (
+                  <div className="drug-details" data-testid="drug-details">
+                    <div className="creator-details">
+                      <FormattedMessage
+                        id={"CREATED_BY"}
+                        defaultMessage={`Created by {provider}`}
+                        values={{ provider: taskItem.creator.display }}
+                      />
+                    </div>
+                  </div>
                 )}
-              </div>
             </div>
           </div>
         );
       } else {
         const { dose, doseUnits, route, drugNonCoded } = slotItem.order;
         return (
-          <div className="slot-details" key={`${slotItem.uuid}`}>
+          <div className="medication-task" key={`${slotItem.uuid}`}>
             <div className="logo">
               {renderStatusIcon(slotItem)}
               <Clock className="clock-icon" />
             </div>
-            <span>{epochTo24HourTimeFormat(slotItem.startTime)}</span>
+            <span>
+              {enable24HourTime
+                ? epochTo24HourTimeFormat(slotItem.startTime / 1000)
+                : epochTo12HourTimeFormat(slotItem.startTime / 1000)}
+            </span>
             <div className="drug-details-wrapper">
-                <span>{drugNonCoded ? drugNonCoded : slotItem?.order?.drug?.display}</span>
+              <span>
+                {drugNonCoded ? drugNonCoded : slotItem?.order?.drug?.display}
+              </span>
               <div className="drug-details" data-testid="drug-details">
                 {dose && <span className="drug-detail">{dose}</span>}
                 {doseUnits && (

diff --git a/src/features/CareViewPatientsSummary/styles/CareViewPatientsSummary.scss b/src/features/CareViewPatientsSummary/styles/CareViewPatientsSummary.scss
@@ -53,11 +53,20 @@
 
   .slot-details-container {
     width: 550px;
-    padding: 20px 0;
+    padding-top: 20px;
+    padding-bottom: 10px;
     vertical-align: top;
 
-    .slot-details {
+    .medication-task,
+    .non-medication-task {
       display: flex;
+      border: 2px solid;
+      transition: opacity 0.3s ease;
+      display: flex;
+      padding: 15px 5px;
+      margin: 10px;
+      margin-top: 0px;
+      justify-content: start;
 
       .logo {
         display: flex;
@@ -70,19 +79,34 @@
       .drug-details-wrapper {
         display: flex;
         flex-direction: column;
-        padding: 0 0 20px 20px;
+        padding-left: 20px;
 
         .drug-details {
           display: flex;
           margin-top: 5px;
-
+          font-size: 12px;
+          font-weight: 400;
+          color: #393939;
+          .creator-details {
+            font-style: italic;
+          }
           .drug-detail {
             margin: 2px;
             white-space: break-spaces;
           }
         }
       }
     }
+
+    .medication-task {
+      border-color: #92c4c3;
+      background: #edf8e6;
+    }
+
+    .non-medication-task {
+      border-color: #0f62fe;
+      background: #e1f3fe;
+    }
   }
 }
 

diff --git a/src/features/CareViewPatientsSummary/tests/SlotDetailsCell.spec.jsx b/src/features/CareViewPatientsSummary/tests/SlotDetailsCell.spec.jsx
@@ -4,7 +4,7 @@ import {
   mockNonMedicationData,
 } from "../../CareViewSummary/tests/CareViewSummaryMock";
 import React from "react";
-import { render, waitFor, within } from "@testing-library/react";
+import { act, render, waitFor, within } from "@testing-library/react";
 import { CareViewContext } from "../../../context/CareViewContext";
 import { mockConfig } from "../../../utils/CommonUtils";
 import "@testing-library/jest-dom/extend-expect";
@@ -112,28 +112,36 @@ describe("SlotDetailsCell", () => {
       {
         startTime: "16:30",
         name: "Non Medication Task 1",
-        creator: "superman",
+        creator: {
+          display: "superman",
+        },
         status: "REQUESTED",
       },
       {
         startTime: "16:30",
         name: "Non Medication Task 2",
-        creator: "Nurse One",
+        creator: {
+          display: "Nurse One",
+        },
         status: "COMPLETED",
       },
       {
         startTime: "16:30",
         name: "Non Medication Task 3",
-        creator: "Nurse One",
+        creator: {
+          display: "Nurse One",
+        },
         status: "REJECTED",
       },
     ];
-    await waitFor(() => {
-      const slotDetails = container.querySelectorAll(".slot-details");
+    const slotDetails = container.querySelectorAll(".slot-details");
+    act(() => {
       slotDetails.forEach((slot, idx) => {
         expect(within(slot).getByText(tasksData[idx].startTime)).toBeTruthy();
+        expect(
+          within(slot).getByText("Created by " + tasksData[idx].creator.display)
+        ).toBeTruthy();
         expect(within(slot).getByText(tasksData[idx].name)).toBeTruthy();
-        expect(within(slot).getByText(tasksData[idx].creator)).toBeTruthy();
         expect(within(slot).getByTestId(tasksData[idx].status)).toBeTruthy();
       });
     });

diff --git a/src/features/CareViewPatientsSummary/tests/__snapshots__/SlotDetailsCell.spec.jsx.snap b/src/features/CareViewPatientsSummary/tests/__snapshots__/SlotDetailsCell.spec.jsx.snap
@@ -6,7 +6,7 @@ exports[`SlotDetailsCell should render slotDetailsCell 1`] = `
     class="slot-details-container"
   >
     <div
-      class="slot-details"
+      class="medication-task"
     >
       <div
         class="logo"
@@ -23,7 +23,7 @@ exports[`SlotDetailsCell should render slotDetailsCell 1`] = `
         />
       </div>
       <span>
-        12:16
+        08:36
       </span>
       <div
         class="drug-details-wrapper"