Phani | A-1205081865195930 | Add React components for the left panel …

…of the Drug Chart Dashboard (#11) * WIP- Add Drug List to Drug chartdashboard * WIP - Add Legend for dashboard * WIP - Add duration for drug order * WIP - Refactor Header * Add Translations * Refactor Css * Fix snapshot
Bahmni · Aug 7, 2023 · b22ed73 · b22ed73
1 parent 95b38d5
commit b22ed73
Show file tree

Hide file tree

Showing 15 changed files with 572 additions and 45 deletions.
diff --git a/package.json b/package.json
@@ -48,6 +48,7 @@
     "carbon-components-react": "^7.25.0",
     "carbon-icons": "^7.0.7",
     "moment": "^2.29.4",
+    "prop-types": "^15.8.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "react-intl": "^3.3.2",

diff --git a/public/i18n/locale_en.json b/public/i18n/locale_en.json
@@ -11,5 +11,11 @@
   "DRUG_CHART_MODAL_SCHEDULE_ORDER_WARNING": "Times entered should be in ascending order",
   "DRUG_CHART_MODAL_EMPTY_SCHEDULE_WARNING": "Please enter Schedule(s)",
   "DRUG_CHART_MODAL_EMPTY_START_TIME_WARNING": "Please enter Start Time",
-  "DRUG_CHART_MODAL_START_TIME_BEYOND_NEXT_DOSE": "Start Time does not match with the frequency"
+  "DRUG_CHART_MODAL_START_TIME_BEYOND_NEXT_DOSE": "Start Time does not match with the frequency",
+  "ADMINISTERED_LATE": "Administered Late",
+  "NOT_ADMINISTERED": "Not Administered",
+  "LATE": "Late",
+  "ADMINISTERED": "Administered",
+  "PENDING": "Pending",
+  "NOTE": "Note"
 }
diff --git a/src/features/Calendar/Calendar.scss b/src/features/Calendar/Calendar.scss
@@ -2,7 +2,12 @@
   width: max-content;
   border-spacing: 0;
   margin: 0;
-  tbody > tr:nth-child(even) {
-    background-color: #f4f4f4;
+  tbody {
+    tr {
+      border-bottom: 0;
+      &:nth-child(even) {
+        background-color: #f4f4f4;
+      }
+    }
   }
 }
diff --git a/src/features/CalendarHeader/CalendarHeader.scss b/src/features/CalendarHeader/CalendarHeader.scss
@@ -22,6 +22,7 @@
   padding-bottom: 8px;
   display: grid;
   align-items: end;
+  box-sizing: border-box;
 
   &:last-child {
     --additional-borders: 1;

diff --git a/src/features/DrugChart/DrugChart.jsx b/src/features/DrugChart/DrugChart.jsx
@@ -4,35 +4,58 @@ import moment from "moment";
 import Calendar from "../Calendar/Calendar";
 import CalendarHeader from "../CalendarHeader/CalendarHeader";
 import "./DrugChart.scss";
+import DrugList from "../DrugList/DrugList";
+import DrugChartLegend from "../DrugChartLegend/DrugChartLegend";
 
 export const TransformDrugChartData = (drugChartData) => {
+  const drugOrderData = [];
   const transformedDrugChartData = drugChartData.map((schedule) => {
-    const { slots } = schedule;
+    const { slots, order } = schedule;
     const slotData = {};
+    const drugOrder = {
+      drugName: order.drug.display,
+      drugRoute: order.route.display,
+      administrationInfo: [],
+    };
+    if (order.duration) {
+      drugOrder.duration = order.duration + " " + order.durationUnits.display;
+    }
+    if (order.doseUnits.display !== "ml") {
+      drugOrder.dosage = order.dose;
+      drugOrder.doseType = order.doseUnits.display;
+    } else {
+      drugOrder.dosage = order.dose + order.doseUnits.display;
+    }
+    if (order.duration) {
+      drugOrder.duration = order.duration + " " + order.durationUnits.display;
+    }
     slots.forEach((slot) => {
       const { startDateTime, status } = slot;
       const startDateTimeObj = new Date(startDateTime);
-      let adminInfo;
+      let adminInfo, administeredTime;
       if (slot.admin) {
         const { administeredBy, administeredAt } = slot.admin;
-        const administeredTime = moment(new Date(administeredAt)).format(
-          "HH:mm"
-        );
-
+        administeredTime = moment(new Date(administeredAt)).format("HH:mm");
         adminInfo = administeredBy + " [" + administeredTime + "]";
       }
-
       const startHour = startDateTimeObj.getHours();
       const startMinutes = startDateTimeObj.getMinutes();
       slotData[startHour] = {
         minutes: startMinutes,
         status: status,
         administrationInfo: adminInfo,
       };
+      if (status === "Administered" || status === "Administered-Late") {
+        drugOrder.administrationInfo.push({
+          kind: status,
+          time: administeredTime,
+        });
+      }
     });
+    drugOrderData.push(drugOrder);
     return slotData;
   });
-  return transformedDrugChartData;
+  return [transformedDrugChartData, drugOrderData];
 };
 
 export default function DrugChart(props) {
@@ -49,6 +72,25 @@ export default function DrugChart(props) {
       comment: "some comment",
       startDate: "2023-08-08T18:30:00.000Z",
       endDate: "2023-08-08T18:30:00.000Z",
+      order: {
+        drug: {
+          display: "Paracetamol 120 mg/5 mL Suspension (Liquid)",
+        },
+        route: {
+          uuid: "9d6bc13f-3f10-11e4-adec-0800271c1b75",
+          display: "Oral",
+        },
+        dose: 25,
+        doseUnits: {
+          uuid: "86239663-7b04-4563-b877-d7efc4fe6c46",
+          display: "ml",
+        },
+        duration: 3,
+        durationUnits: {
+          uuid: "9d7437a9-3f10-11e4-adec-0800271c1b75",
+          display: "Day(s)",
+        },
+      },
       slots: [
         {
           id: 1,
@@ -71,7 +113,7 @@ export default function DrugChart(props) {
           notes: "some slot text",
           admin: {
             administeredBy: "Dr. John Doe",
-            administeredAt: "2023-08-08T08:30:00.000Z",
+            administeredAt: "2023-08-08T11:35:00.000Z",
             adminid: "1234",
           },
         },
@@ -95,6 +137,20 @@ export default function DrugChart(props) {
       comment: "some comment",
       scheduleStartDate: "2023-08-08T18:30:00.000Z",
       scheduleEndDate: "2023-08-08T18:30:00.000Z",
+      order: {
+        drug: {
+          display: "Ibuprofen 400 mg Tablet",
+        },
+        route: {
+          uuid: "9d6bc13f-3f10-11e4-adec-0800271c1b75",
+          display: "Oral",
+        },
+        dose: 4,
+        doseUnits: {
+          uuid: "86239663-7b04-4563-b877-d7efc4fe6c46",
+          display: "Tablet(s)",
+        },
+      },
       slots: [
         {
           id: 3,
@@ -107,7 +163,7 @@ export default function DrugChart(props) {
           notes: "some slot text",
           admin: {
             administeredBy: "Dr. John Doe",
-            administeredAt: "2023-08-08T08:30:00.000Z",
+            administeredAt: "2023-08-08T08:45:00.000Z",
             adminid: "1234",
           },
         },
@@ -136,6 +192,25 @@ export default function DrugChart(props) {
       comment: "some comment",
       scheduleStartDate: "2023-08-08T18:30:00.000Z",
       scheduleEndDate: "2023-08-08T18:30:00.000Z",
+      order: {
+        drug: {
+          display: "Amoxicillin/Clavulanic Acid 1000 mg Tablet (Tablet)",
+        },
+        route: {
+          uuid: "9d6bc13f-3f10-11e4-adec-0800271c1b75",
+          display: "Oral",
+        },
+        dose: "4",
+        doseUnits: {
+          uuid: "86239663-7b04-4563-b877-d7efc4fe6c46",
+          display: "Tablet(s)",
+        },
+        duration: 2,
+        durationUnits: {
+          uuid: "9d7437a9-3f10-11e4-adec-0800271c1b75",
+          display: "Day(s)",
+        },
+      },
       slots: [
         {
           id: 3,
@@ -172,16 +247,45 @@ export default function DrugChart(props) {
       comment: "some comment",
       startDate: "2023-08-08T18:30:00.000Z",
       endDate: "2023-08-08T18:30:00.000Z",
+      order: {
+        drug: {
+          display: "Isoflurane 250 mL Inhalation Anesthetic Liquid (Liquid)",
+        },
+        route: {
+          uuid: "9d6bc13f-3f10-11e4-adec-0800271c1b75",
+          display: "Oral",
+        },
+        dose: 30,
+        doseUnits: {
+          uuid: "86239663-7b04-4563-b877-d7efc4fe6c46",
+          display: "ml",
+        },
+        duration: 4,
+        durationUnits: {
+          uuid: "9d7437a9-3f10-11e4-adec-0800271c1b75",
+          display: "Day(s)",
+        },
+      },
+      dose: 2,
+      doseUnits: {
+        uuid: "86239663-7b04-4563-b877-d7efc4fe6c46",
+        display: "Tablet(s)",
+      },
       slots: [
         {
           id: 1,
           uuid: "738aa77d-03fc-438f-a87a-ae8a8867c421",
           orderId: 13,
           serviceType: "Medication Administration",
-          status: "Not-Administered",
+          status: "Administered-Late",
           startDateTime: "2023-08-08T10:45:00.000Z",
           endDateTime: "2023-08-08T09:30:00.000Z",
           notes: "some slot text",
+          admin: {
+            administeredBy: "Dr. John Doe",
+            administeredAt: "2023-08-08T10:50:00.000Z",
+            adminid: "1234",
+          },
         },
         {
           id: 2,
@@ -212,14 +316,19 @@ export default function DrugChart(props) {
     },
   ];
   const transformedDrugchartData = TransformDrugChartData(drugChartData);
-
   return (
-    <div className="drug-chart">
-      <div className="drug-chart-left-panel"></div>
-      <div className="drug-chart-content">
-        <CalendarHeader />
-        <Calendar calendarData={transformedDrugchartData} />
+    <div className={"drug-chart-dashboard"}>
+      <div className="drug-chart">
+        <div className="drug-chart-left-panel">
+          <div className={"header"} />
+          <DrugList drugDetails={transformedDrugchartData[1]} />
+        </div>
+        <div className="drug-chart-content">
+          <CalendarHeader />
+          <Calendar calendarData={transformedDrugchartData[0]} />
+        </div>
       </div>
+      <DrugChartLegend />
     </div>
   );
 }

diff --git a/src/features/DrugChart/DrugChart.scss b/src/features/DrugChart/DrugChart.scss
@@ -1,3 +1,6 @@
+.drug-chart-dashboard {
+  font-family: "IBM Plex Sans", sans-serif;
+}
 .drug-chart {
   --time-cell-height: 66px;
   --half-hour-width: 21px;
@@ -15,6 +18,34 @@
 
 .drug-chart-left-panel {
   border-right: 1px solid #ccc;
+  font-size: 13px;
+  overflow-y: auto;
+  height: 100%;
+  min-width: 225px;
+  .header {
+    height: 63px;
+    background-color: #ededed;
+    position: sticky;
+    top: 0;
+  }
+  table {
+    table-layout: fixed;
+    border-spacing: 0;
+    width: 100%;
+    tbody > tr:nth-child(even) {
+      background-color: #f4f4f4;
+    }
+    tr {
+      height: 66px;
+      border-bottom: 0;
+      td {
+        line-height: 20px;
+        padding: 0 10px;
+        max-width: 100%;
+        border: 0;
+      }
+    }
+  }
 }
 
 .drug-chart-content {

diff --git a/src/features/DrugChart/DrugChart.spec.jsx b/src/features/DrugChart/DrugChart.spec.jsx
@@ -25,6 +25,25 @@ const drugChartData = [
     comment: "some comment",
     startDate: "2023-08-08T18:30:00.000Z",
     endDate: "2023-08-08T18:30:00.000Z",
+    order: {
+      drug: {
+        display: "Paracetamol 120 mg/5 mL Suspension (Liquid)",
+      },
+      route: {
+        uuid: "9d6bc13f-3f10-11e4-adec-0800271c1b75",
+        display: "Oral",
+      },
+      dose: 25,
+      doseUnits: {
+        uuid: "86239663-7b04-4563-b877-d7efc4fe6c46",
+        display: "ml",
+      },
+      duration: 3,
+      durationUnits: {
+        uuid: "9d7437a9-3f10-11e4-adec-0800271c1b75",
+        display: "Day(s)",
+      },
+    },
     slots: [
       {
         id: 1,
@@ -85,23 +104,39 @@ describe("TransformDrugChartData", () => {
   it("should transform drug chart data", () => {
     const TransformedDrugChartData = TransformDrugChartData(drugChartData);
     expect(TransformedDrugChartData).toEqual([
-      {
-        11: {
-          administrationInfo: "Dr. John Doe [11:40]",
-          minutes: 30,
-          status: "Administered",
-        },
-        15: {
-          administrationInfo: "Dr. John Doe [15:30]",
-          minutes: 30,
-          status: "Pending",
+      [
+        {
+          11: {
+            administrationInfo: "Dr. John Doe [11:40]",
+            minutes: 30,
+            status: "Administered",
+          },
+          15: {
+            administrationInfo: "Dr. John Doe [15:30]",
+            minutes: 30,
+            status: "Pending",
+          },
+          8: {
+            administrationInfo: "Dr. John Doe [08:30]",
+            minutes: 30,
+            status: "Not-Administered",
+          },
         },
-        8: {
-          administrationInfo: "Dr. John Doe [08:30]",
-          minutes: 30,
-          status: "Not-Administered",
+      ],
+      [
+        {
+          administrationInfo: [
+            {
+              kind: "Administered",
+              time: "11:40",
+            },
+          ],
+          dosage: "25ml",
+          drugName: "Paracetamol 120 mg/5 mL Suspension (Liquid)",
+          drugRoute: "Oral",
+          duration: "3 Day(s)",
         },
-      },
+      ],
     ]);
   });
 });