Arjun/Ashish | BAH-3106 | Ability to bring up the Add to drug chart m…

…odal with its elements from Treatments display control in Patient Dashboard by clicking on Add to drug chart link (#645)

* integrate DrugChartModal from ipd in dashboard

* add. changes to modify Drug Chart Controller values

* add. changes to communicate between modal and add to drug chart link

* make schedule and start time frequencies configurable

micro-frontends/src/ipd/DrugChartModal.jsx

@@ -0,0 +1,29 @@
+import PropTypes from "prop-types";
+import React, { Suspense, lazy } from "react";
+
+export function DrugChartModal(props) {
+  const LazyApp = lazy(() => import("@openmrs-mf/ipd/DrugChartModal"));
+
+  return (
+    <>
+      <Suspense fallback={""}>
+        <LazyApp
+          hostData={props.hostData}
+          hostApi={props.hostApi}
+        />
+      </Suspense>
+    </>
+  );
+}
+
+// Without propTypes, react2angular won't render the component
+DrugChartModal.propTypes = {
+  hostData: PropTypes.shape({
+    drugOrder: PropTypes.object,
+    scheduleFrequencies: PropTypes.array,
+    startTimeFrequencies: PropTypes.array,
+  }).isRequired,
+  hostApi: PropTypes.shape({
+    closeDrugChart: PropTypes.func,
+  }),
+};

micro-frontends/src/ipd/index.js

@@ -3,6 +3,7 @@
 
 import { react2angular } from "react2angular";
 import { IpdDashboard } from "./IpdDashboard";
+import { DrugChartModal } from "./DrugChartModal";
 import "bahmni-carbon-ui/styles.css";
 
 angular.module("bahmni.mfe.ipd", [
@@ -59,4 +60,40 @@ angular.module("bahmni.mfe.ipd").component("mfeIpdDashboard", {
   template:
     '<mfe-ipd-dashboard-remote host-data="hostData" host-api="hostApi"></mfe-ipd-dashboard-remote>',
 });
-/** ================= End of component 1 ==========================  */
+/** ================= End of component 1 ==========================  */
+
+/** MFE component 2: DrugChartModal
+ *================================================= */
+
+angular
+  .module("bahmni.mfe.ipd")
+  .component("mfeIpdDrugChartModalRemote", react2angular(DrugChartModal));
+
+function ipdDrugChartModalController($rootScope, $scope) {
+  var vm = this;
+  $scope.hostData = {
+    drugOrder: vm.drugOrder,
+    scheduleFrequencies: vm.scheduleFrequencies,
+    startTimeFrequencies: vm.startTimeFrequencies,
+  };
+  $scope.hostApi = {
+    onModalClose: function(event) {
+      vm.closeDrugChart();
+    },
+  };
+}
+
+ipdDrugChartModalController.$inject = ["$rootScope", "$scope"];
+
+angular.module("bahmni.mfe.ipd").component("mfeIpdDrugChartModal", {
+  controller: ipdDrugChartModalController,
+  bindings: {
+    drugOrder: "=",
+    scheduleFrequencies: "=",
+    startTimeFrequencies: "=",
+    closeDrugChart: "&"
+  },
+  template:
+    '<mfe-ipd-drug-chart-modal-remote host-data="hostData" host-api="hostApi"></mfe-ipd-drug-chart-modal-remote>',
+});
+/** ================= End of component 2 ==========================  */

ui/app/clinical/displaycontrols/treatmentData/directives/treatmentTableRow.js

@@ -3,15 +3,30 @@
 angular.module('bahmni.clinical')
     .directive('treatmentTableRow', function () {
         var controller = function ($scope, $rootScope, appService) {
+            $scope.selectedDrugOrder = {};
+            $scope.openModal = false;
             $scope.enableIPDFeature = appService.getAppDescriptor().getConfigValue("enableIPDFeature");
+            if ($scope.enableIPDFeature === true) {
+                $scope.drugChartModalScheduleFrequencies = appService.getAppDescriptor().getConfigValue("drugChartScheduleFrequencies");
+                $scope.drugChartModalStartTimeFrequencies = appService.getAppDescriptor().getConfigValue("drugChartStartTimeFrequencies");
+            }
             $scope.showDetails = false;
             if ($scope.params.showProvider === undefined) {
                 $scope.params.showProvider = true;
             }
             $scope.toggle = function () {
                 $scope.showDetails = !$scope.showDetails;
             };
+            $scope.openDrugChartModal = function (drugOrder) {
+                $scope.selectedDrugOrder = drugOrder;
+                $scope.openModal = true;
+            };
+            $scope.closeDrugChartModal = function () {
+                $scope.openModal = false;
+                $scope.$apply();
+            };
         };
+
         return {
             restrict: 'A',
             controller: controller,

ui/app/clinical/displaycontrols/treatmentData/views/treatmentTableRow.html

@@ -15,11 +15,19 @@
         <span class="fr">{{::drugOrder.effectiveStartDate | bahmniDate}}</span>
     </td>
     <td class="add-to-drug-chart">
-        <span ng-if="enableIPDFeature && drugOrder.careSetting === 'INPATIENT'">
-            <a>{{ ::'ADD_TO_DRUG_CHART_KEY'|translate }}
-                <i id="add-icon" class="fa fa-plus-circle" aria-hidden="true"></i>
+        <span class="drug-chart-link" ng-if="enableIPDFeature && drugOrder.careSetting === 'INPATIENT'">
+            <a ng-click="openDrugChartModal(drugOrder)">
+                {{ ::'ADD_TO_DRUG_CHART_KEY'|translate }}
+                <i class="fa fa-plus-circle" aria-hidden="true"></i>
             </a>
         </span>
+        <div>
+            <mfe-ipd-drug-chart-modal drug-order="selectedDrugOrder" 
+            schedule-frequencies="drugChartModalScheduleFrequencies" 
+            start-time-frequencies="drugChartModalStartTimeFrequencies" 
+            close-drug-chart="closeDrugChartModal()" 
+            ng-if="openModal"></mfe-ipd-drug-chart-modal>
+        </div>
     </td>
 
     <td class="toggle-btn" toggle="drugOrder.showDetails" ng-if="::((params.showDetailsButton == true) && !drugOrder.additionalInstructions)">

ui/app/styles/clinical/_patientDashboard.scss

@@ -750,8 +750,13 @@ table.drug-order-table td.drug {
 }
 
 .add-to-drug-chart {
-    text-align: center;
+
     width: 20%;
+
+    .drug-chart-link {
+        font-size: 11px;
+        text-align: center;
+    }
     #add-icon {
         font-size: 14px;
     }