From b22ed73b0b131347698f0e899670f4501a1ef186 Mon Sep 17 00:00:00 2001 From: Phanindra-tw <126503818+Phanindra-tw@users.noreply.github.com> Date: Mon, 7 Aug 2023 12:24:00 +0530 Subject: [PATCH] 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 --- package.json | 1 + public/i18n/locale_en.json | 8 +- src/features/Calendar/Calendar.scss | 9 +- .../CalendarHeader/CalendarHeader.scss | 1 + src/features/DrugChart/DrugChart.jsx | 143 +++++++++++-- src/features/DrugChart/DrugChart.scss | 31 +++ src/features/DrugChart/DrugChart.spec.jsx | 65 ++++-- .../__snapshots__/DrugChart.spec.jsx.snap | 193 +++++++++++++++++- .../DrugChartLegend/DrugChartLegend.jsx | 41 ++++ .../DrugChartLegend/DrugChartLegend.scss | 12 ++ src/features/DrugList/DrugList.jsx | 26 +++ src/features/DrugListCell/DrugListCell.jsx | 58 ++++++ src/features/DrugListCell/DrugListCell.scss | 17 ++ src/icons/clock.svg | 4 + yarn.lock | 8 +- 15 files changed, 572 insertions(+), 45 deletions(-) create mode 100644 src/features/DrugChartLegend/DrugChartLegend.jsx create mode 100644 src/features/DrugChartLegend/DrugChartLegend.scss create mode 100644 src/features/DrugList/DrugList.jsx create mode 100644 src/features/DrugListCell/DrugListCell.jsx create mode 100644 src/features/DrugListCell/DrugListCell.scss create mode 100644 src/icons/clock.svg diff --git a/package.json b/package.json index ca213c58..6aac82ca 100644 --- 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 index bec45b33..e847e80c 100644 --- 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 index 54dbfe30..7e61aab2 100644 --- 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 index 872e686d..3908af25 100644 --- 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 index dcb9c236..11ec1131 100644 --- a/src/features/DrugChart/DrugChart.jsx +++ b/src/features/DrugChart/DrugChart.jsx @@ -4,24 +4,40 @@ 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] = { @@ -29,10 +45,17 @@ export const TransformDrugChartData = (drugChartData) => { 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 ( -