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
Bahmni · Apr 17, 2024 · 282e506 · 282e506
1 parent 36595b1
commit 282e506
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 11 deletions.
diff --git 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
@@ -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
@@ -5,6 +5,7 @@ import { react2angular } from "react2angular";
 import { IpdDashboard } from "./IpdDashboard";
 import { DrugChartModal } from "./DrugChartModal";
 import "bahmni-carbon-ui/styles.css";
+import { DrugChartModalNotification } from "./DrugChartModalNotification";
 
 angular.module("bahmni.mfe.ipd", [
   "ui.router",
@@ -73,13 +74,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();
+    },
   };
 }
 
@@ -89,11 +98,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 ==========================  */
+/** ================= 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
@@ -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
@@ -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
@@ -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;
     }
 }