From da222a8674b166db1d305d176c8a9271168abfe0 Mon Sep 17 00:00:00 2001
From: Arjun G <91885483+Arjun-Go@users.noreply.github.com>
Date: Fri, 4 Aug 2023 17:49:00 +0530
Subject: [PATCH] BAH-3119 | Add validations and perform save in drug chart
 modal (#660)

* add. enable24hr timer toggle

* add. warnings in drug chart modal

* add. success/warning notifications for drug chart modal

* add. success/warning notifications for drug chart modal

* add. patientId for save medication
---
 micro-frontends/src/ipd/DrugChartModal.jsx    | 10 ++--
 .../src/ipd/DrugChartModalNotification.jsx    | 27 ++++++++++
 micro-frontends/src/ipd/index.js              | 52 +++++++++++++++++--
 .../directives/treatmentTableRow.js           | 17 ++++++
 .../views/treatmentTableRow.html              | 15 ++++--
 ui/app/styles/clinical/_patientDashboard.scss | 12 ++++-
 6 files changed, 122 insertions(+), 11 deletions(-)
 create mode 100644 micro-frontends/src/ipd/DrugChartModalNotification.jsx

diff --git a/micro-frontends/src/ipd/DrugChartModal.jsx b/micro-frontends/src/ipd/DrugChartModal.jsx
index 8c9b411cba..0e9baf9176 100644
--- a/micro-frontends/src/ipd/DrugChartModal.jsx
+++ b/micro-frontends/src/ipd/DrugChartModal.jsx
@@ -6,7 +6,7 @@ export function DrugChartModal(props) {
 
   return (
     <>
-      <Suspense fallback={""}>
+      <Suspense fallback={<p>Loading...</p>}>
         <LazyApp
           hostData={props.hostData}
           hostApi={props.hostApi}
@@ -20,10 +20,14 @@ export function DrugChartModal(props) {
 DrugChartModal.propTypes = {
   hostData: PropTypes.shape({
     drugOrder: PropTypes.object,
+    patientId: PropTypes.string,
     scheduleFrequencies: PropTypes.array,
     startTimeFrequencies: PropTypes.array,
+    enable24HrTimeFormat: PropTypes.bool,
   }).isRequired,
   hostApi: PropTypes.shape({
-    closeDrugChart: PropTypes.func,
-  }),
+    onModalClose: PropTypes.func,
+    onModalSave: PropTypes.func,
+    onModalCancel: PropTypes.func,
+  }).isRequired,
 };
diff --git a/micro-frontends/src/ipd/DrugChartModalNotification.jsx b/micro-frontends/src/ipd/DrugChartModalNotification.jsx
new file mode 100644
index 0000000000..4d05a3f8ba
--- /dev/null
+++ b/micro-frontends/src/ipd/DrugChartModalNotification.jsx
@@ -0,0 +1,27 @@
+import PropTypes from "prop-types";
+import React, { Suspense, lazy } from "react";
+
+export function DrugChartModalNotification(props) {
+  const LazyApp = lazy(() => import("@openmrs-mf/ipd/DrugChartModalNotification"));
+
+  return (
+    <>
+      <Suspense fallback={<p>Loading...</p>}>
+        <LazyApp
+          hostData={props.hostData}
+          hostApi={props.hostApi}
+        />
+      </Suspense>
+    </>
+  );
+}
+
+// Without propTypes, react2angular won't render the component
+DrugChartModalNotification.propTypes = {
+  hostData: PropTypes.shape({
+    notificationKind: PropTypes.string,
+  }).isRequired,
+  hostApi: PropTypes.shape({
+    onClose: PropTypes.func,
+  }).isRequired,
+};
diff --git a/micro-frontends/src/ipd/index.js b/micro-frontends/src/ipd/index.js
index e655e5dd7a..1df81f880a 100644
--- a/micro-frontends/src/ipd/index.js
+++ b/micro-frontends/src/ipd/index.js
@@ -4,6 +4,7 @@
 import { react2angular } from "react2angular";
 import { IpdDashboard } from "./IpdDashboard";
 import { DrugChartModal } from "./DrugChartModal";
+import { DrugChartModalNotification } from "./DrugChartModalNotification";
 
 angular.module("bahmni.mfe.ipd", [
   "ui.router",
@@ -72,13 +73,21 @@ function ipdDrugChartModalController($rootScope, $scope) {
   var vm = this;
   $scope.hostData = {
     drugOrder: vm.drugOrder,
+    patientId: vm.patientId,
     scheduleFrequencies: vm.scheduleFrequencies,
     startTimeFrequencies: vm.startTimeFrequencies,
+    enable24HourTimers: vm.enable24HourTimers,
   };
   $scope.hostApi = {
-    onModalClose: function(event) {
+    onModalClose: function () {
       vm.closeDrugChart();
     },
+    onModalSave: function () {
+      vm.showSuccessNotification();
+    },
+    onModalCancel: function () {
+      vm.showWarningNotification();
+    },
   };
 }
 
@@ -88,11 +97,48 @@ angular.module("bahmni.mfe.ipd").component("mfeIpdDrugChartModal", {
   controller: ipdDrugChartModalController,
   bindings: {
     drugOrder: "=",
+    patientId: "=",
     scheduleFrequencies: "=",
     startTimeFrequencies: "=",
-    closeDrugChart: "&"
+    enable24HourTimers: "=",
+    closeDrugChart: "&",
+    showWarningNotification: "&",
+    showSuccessNotification: "&",
   },
   template:
     '<mfe-ipd-drug-chart-modal-remote host-data="hostData" host-api="hostApi"></mfe-ipd-drug-chart-modal-remote>',
 });
-/** ================= End of component 2 ==========================  */
\ No newline at end of file
+/** ================= End of component 2 ==========================  */
+
+/** MFE component 3: DrugChartModalWarnings
+ * ================================================= */
+
+angular
+  .module("bahmni.mfe.ipd")
+  .component("mfeIpdDrugChartModalNotificationRemote", react2angular(DrugChartModalNotification));
+
+function ipdDrugChartModalNotificationController($rootScope, $scope) {
+  var vm = this;
+  $scope.hostData = {
+    notificationKind: vm.notificationKind,
+  };
+  $scope.hostApi = {
+    onClose() {
+      vm.closeWarnings();
+    }
+  }
+}
+
+ipdDrugChartModalNotificationController.$inject = ["$rootScope", "$scope"];
+
+angular.module("bahmni.mfe.ipd").component("mfeIpdDrugChartModalNotification", {
+  controller: ipdDrugChartModalNotificationController,
+  bindings: {
+    notificationKind: "=",
+    closeWarnings: "&",
+  },
+  template:
+    '<mfe-ipd-drug-chart-modal-notification-remote host-data="hostData" host-api="hostApi"></mfe-ipd-drug-chart-modal-notification-remote>',
+});
+
+/** ================= End of component 3 ==========================  */
diff --git a/ui/app/clinical/displaycontrols/treatmentData/directives/treatmentTableRow.js b/ui/app/clinical/displaycontrols/treatmentData/directives/treatmentTableRow.js
index 77195ccc31..68dc5dec53 100644
--- a/ui/app/clinical/displaycontrols/treatmentData/directives/treatmentTableRow.js
+++ b/ui/app/clinical/displaycontrols/treatmentData/directives/treatmentTableRow.js
@@ -6,6 +6,7 @@ angular.module('bahmni.clinical')
             $scope.selectedDrugOrder = {};
             $scope.openModal = false;
             $scope.enableIPDFeature = appService.getAppDescriptor().getConfigValue("enableIPDFeature");
+            $scope.enable24HourTimers = appService.getAppDescriptor().getConfigValue("enable24HourTimers");
             if ($scope.enableIPDFeature === true) {
                 $scope.drugChartModalScheduleFrequencies = appService.getAppDescriptor().getConfigValue("drugChartScheduleFrequencies");
                 $scope.drugChartModalStartTimeFrequencies = appService.getAppDescriptor().getConfigValue("drugChartStartTimeFrequencies");
@@ -25,6 +26,22 @@ angular.module('bahmni.clinical')
                 $scope.openModal = false;
                 $scope.$apply();
             };
+            $scope.showWarningNotification = function () {
+                $scope.showModalWarningMessage = true;
+                $scope.openModal = false;
+                $scope.kind = "warning";
+                $scope.$apply();
+            };
+            $scope.showSuccessNotification = function () {
+                $scope.showModalWarningMessage = true;
+                $scope.openModal = false;
+                $scope.kind = "success";
+                $scope.$apply();
+            };
+            $scope.closeWarnings = function () {
+                $scope.showModalWarningMessage = false;
+                $scope.$apply();
+            };
         };
 
         return {
diff --git a/ui/app/clinical/displaycontrols/treatmentData/views/treatmentTableRow.html b/ui/app/clinical/displaycontrols/treatmentData/views/treatmentTableRow.html
index 9017895455..32b4e511e8 100644
--- a/ui/app/clinical/displaycontrols/treatmentData/views/treatmentTableRow.html
+++ b/ui/app/clinical/displaycontrols/treatmentData/views/treatmentTableRow.html
@@ -22,12 +22,21 @@
             </a>
         </span>
         <div>
-            <mfe-ipd-drug-chart-modal drug-order="selectedDrugOrder" 
+            <mfe-ipd-drug-chart-modal drug-order="selectedDrugOrder"
+            patient-id="params.patientUuid" 
             schedule-frequencies="drugChartModalScheduleFrequencies" 
             start-time-frequencies="drugChartModalStartTimeFrequencies" 
-            close-drug-chart="closeDrugChartModal()" 
+            close-drug-chart="closeDrugChartModal()"
+            show-warning-notification="showWarningNotification()"
+            show-success-notification="showSuccessNotification()"
+            enable-24-hour-timers="enable24HourTimers"
             ng-if="openModal"></mfe-ipd-drug-chart-modal>
         </div>
+        <mfe-ipd-drug-chart-modal-notification class="drug-chart-warnings"
+            ng-if="showModalWarningMessage"
+            notification-kind="kind"
+            close-warnings="closeWarnings()">
+        </mfe-ipd-drug-chart-modal-notification>
     </td>
 
     <td class="toggle-btn" toggle="drugOrder.showDetails" ng-if="::((params.showDetailsButton == true) && !drugOrder.additionalInstructions)">
@@ -38,7 +47,7 @@
     </td>
 </tr>
 <tr ng-if="::drugOrder.additionalInstructions" ng-class="::{'has-test-notes': drugOrder.additionalInstructions}">
-    <td colspan="4" class="notes test-notes">
+    <td colspan="5" class="notes test-notes">
         <i class="fa fa-comments left"></i>
         <pre class="left">{{::drugOrder.additionalInstructions}}</pre>
         <div class="footer-note right">
diff --git a/ui/app/styles/clinical/_patientDashboard.scss b/ui/app/styles/clinical/_patientDashboard.scss
index a06b2186e5..2c05b6f8a0 100644
--- a/ui/app/styles/clinical/_patientDashboard.scss
+++ b/ui/app/styles/clinical/_patientDashboard.scss
@@ -761,8 +761,16 @@ table.drug-order-table td.drug {
         font-size: 14px;
     }
 
-    span{
-        font-size: 11px;
+    .drug-chart-warnings {
+        position: fixed;
+        top: 0;
+        left: 0;
+        display: flex;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 1001;
     }
 }