From 282e50610232d2b2ed8f0b608d1f74e1fa0ca157 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 ( <> - + Loading...

}> import("@openmrs-mf/ipd/DrugChartModalNotification")); + + return ( + <> + Loading...

}> + + + + ); +} + +// 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 45318d7864..5b79df9b28 100644 --- 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: '', }); -/** ================= 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: + '', +}); + +/** ================= 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 @@
-
+ + @@ -38,7 +47,7 @@ - + 
{{::drugOrder.additionalInstructions}}
diff --git a/ui/app/styles/clinical/_patientDashboard.scss b/ui/app/styles/clinical/_patientDashboard.scss index c4462a2982..b295c68074 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; } }