Skip to content

Commit

Permalink
Arjun | A-1205221989222721 | Angular wrappers refactor (Bahmni#661)
Browse files Browse the repository at this point in the history 
* refactor. angular wrappers to avoid binding hassle

* refactor. variables passed by controllers
  • Loading branch information
@Arjun-Go
Arjun-Go authored and Supriya Muppiri committed Mar 8, 2024
1 parent 6884ac1 commit 013aa69
Show file tree
Hide file tree
Showing 6 changed files with 107 additions and 157 deletions.
125 changes: 13 additions & 112 deletions micro-frontends/src/ipd/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,131 +14,32 @@ angular.module("bahmni.mfe.ipd", [
"bahmni.common.domain",
]);


/** MFE component 1: IpdDashboard
*================================================= */

/** Step 1: create a react2angular wrapper for the component */
angular
.module("bahmni.mfe.ipd")
.component("mfeIpdDashboardRemote", react2angular(IpdDashboard));

/** Step 2: create a controller to pass hostData and hostApi */
function ipdDashboardController($rootScope, $scope, confirmBox) {

// Use hostData to pass data from bahmni to the micro-frontend component
$scope.hostData = {
patient: {
uuid: "--- DUMMY UUID FOR TESTING FROM HOST ---",
},
};

// Use hostApi to provide callbacks to the micro-frontend component
$scope.hostApi = {
onConfirm() {
const dialogScope = {
message:
"This is a dialog triggered on the host in response to an event from IPD ",
okay(close) {
close();
},
};

confirmBox({
scope: dialogScope,
actions: [{ name: "okay", display: "Okay" }],
className: "ngdialog-theme-default",
});
},
};
}
ipdDashboardController.$inject = ["$rootScope", "$scope", "confirmBox"];

/** Step 3: bind the controller to the component by creating a new wrapper component */
angular.module("bahmni.mfe.ipd").component("mfeIpdDashboard", {
controller: ipdDashboardController,
template:
'<mfe-ipd-dashboard-remote host-data="hostData" host-api="hostApi"></mfe-ipd-dashboard-remote>',
});
/** ================= End of component 1 ========================== */
.component("mfeIpdDashboard", react2angular(IpdDashboard), {
template:
'<mfe-ipd-dashboard host-data="hostData" host-api="hostApi"></mfe-ipd-dashboard>'
});

/** 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,
patientId: vm.patientId,
scheduleFrequencies: vm.scheduleFrequencies,
startTimeFrequencies: vm.startTimeFrequencies,
enable24HourTimers: vm.enable24HourTimers,
};
$scope.hostApi = {
onModalClose: function () {
vm.closeDrugChart();
},
onModalSave: function () {
vm.showSuccessNotification();
},
onModalCancel: function () {
vm.showWarningNotification();
},
};
}
.component("mfeIpdDrugChartModal", react2angular(DrugChartModal), {
template:
'<mfe-ipd-drug-chart-modal host-data="hostData" host-api="hostApi"></mfe-ipd-drug-chart-modal>',
});

ipdDrugChartModalController.$inject = ["$rootScope", "$scope"];

angular.module("bahmni.mfe.ipd").component("mfeIpdDrugChartModal", {
controller: ipdDrugChartModalController,
bindings: {
drugOrder: "=",
patientId: "=",
scheduleFrequencies: "=",
startTimeFrequencies: "=",
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 ========================== */

/** MFE component 3: DrugChartModalWarnings
/** MFE component 3: DrugChartModalNotification
* ================================================= */

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 ========================== */
.component("mfeIpdDrugChartModalNotification", react2angular(DrugChartModalNotification), {
template:
'<mfe-ipd-drug-chart-modal-notification host-data="hostData" host-api="hostApi"></mfe-ipd-drug-chart-modal-notification>',
});
29 changes: 27 additions & 2 deletions ui/app/clinical/dashboard/controllers/patientDashboardController.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@

angular.module('bahmni.clinical')
.controller('PatientDashboardController', ['$scope', 'clinicalAppConfigService', 'clinicalDashboardConfig', 'printer',
'$state', 'spinner', 'visitSummary', 'appService', '$stateParams', 'diseaseTemplateService', 'patientContext', '$location', '$filter',
'$state', 'spinner', 'visitSummary', 'appService', '$stateParams', 'diseaseTemplateService', 'patientContext', '$location', '$filter', 'confirmBox',
function ($scope, clinicalAppConfigService, clinicalDashboardConfig, printer,
$state, spinner, visitSummary, appService, $stateParams, diseaseTemplateService, patientContext, $location, $filter) {
$state, spinner, visitSummary, appService, $stateParams, diseaseTemplateService, patientContext, $location, $filter, confirmBox) {
$scope.patient = patientContext.patient;
$scope.activeVisit = $scope.visitHistory.activeVisit;
$scope.activeVisitData = {};
Expand All @@ -26,6 +26,31 @@ angular.module('bahmni.clinical')
}
};

$scope.ipdDashboard = {
hostData: {
patient: {
uuid: "--- DUMMY UUID FOR TESTING FROM HOST ---"
}
},
hostApi: {
onConfirm: function () {
const dialogScope = {
message:
"This is a dialog triggered on the host in response to an event from IPD ",
okay: function (close) {
close();
}
};

confirmBox({
scope: dialogScope,
actions: [{ name: "okay", display: "Okay" }],
className: "ngdialog-theme-default"
});
}
}
};

$scope.stateChange = function () {
return $state.current.name === 'patient.dashboard.show';
};
Expand Down
2 changes: 1 addition & 1 deletion ui/app/clinical/dashboard/views/dashboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,6 @@
disease-templates="diseaseTemplates" section-groups="sectionGroups" visit-history="visitHistory"
active-visit-uuid="visitHistory.activeVisit.uuid" visit-summary="visitSummary" enrollment="enrollment">
</dashboard>
<mfe-ipd-dashboard ng-if="loadIPD" style="margin: 45px auto 0; display: block;"></mfe-ipd-dashboard>
<mfe-ipd-dashboard ng-if="loadIPD" style="margin: 45px auto 0; display: block;" host-data="ipdDashboard.hostData" host-api="ipdDashboard.hostApi"></mfe-ipd-dashboard>
<mfe-next-ui-patient-alergies-control ng-if="loadAllergies" style="display: block;" host-data="alergyData" host-api="alergyApi"></mfe-next-ui-patient-alergies-control>
<div ng-show ="!loadIPD && !stateChange()" ui-view="consultation-content" class="consultation-content"></div>
71 changes: 47 additions & 24 deletions ui/app/clinical/displaycontrols/treatmentData/directives/treatmentTableRow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,12 @@ angular.module('bahmni.clinical')
$scope.selectedDrugOrder = {};
$scope.openModal = false;
$scope.enableIPDFeature = appService.getAppDescriptor().getConfigValue("enableIPDFeature");
$scope.enable24HourTimers = appService.getAppDescriptor().getConfigValue("enable24HourTimers");
const enable24HourTimers = appService.getAppDescriptor().getConfigValue("enable24HourTimers");
var drugChartModalScheduleFrequencies = [];
var drugChartModalStartTimeFrequencies = [];
if ($scope.enableIPDFeature === true) {
$scope.drugChartModalScheduleFrequencies = appService.getAppDescriptor().getConfigValue("drugChartScheduleFrequencies");
$scope.drugChartModalStartTimeFrequencies = appService.getAppDescriptor().getConfigValue("drugChartStartTimeFrequencies");
drugChartModalScheduleFrequencies = appService.getAppDescriptor().getConfigValue("drugChartScheduleFrequencies");
drugChartModalStartTimeFrequencies = appService.getAppDescriptor().getConfigValue("drugChartStartTimeFrequencies");
}
$scope.showDetails = false;
if ($scope.params.showProvider === undefined) {
Expand All @@ -18,29 +20,50 @@ angular.module('bahmni.clinical')
$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();
};
$scope.showWarningNotification = function () {
$scope.showModalWarningMessage = true;
$scope.openModal = false;
$scope.kind = "warning";
$scope.$apply();

$scope.drugChartModal = {
hostData: {
drugOrder: {},
patientId: $scope.params.patientUuid,
scheduleFrequencies: drugChartModalScheduleFrequencies,
startTimeFrequencies: drugChartModalStartTimeFrequencies,
enable24HourTimers: enable24HourTimers
},
hostApi: {
onModalClose: function () {
$scope.openModal = false;
$scope.$apply();
},
onModalSave: function () {
$scope.openModal = false;
$scope.drugChartModalNotification.hostData.notificationKind = "success";
$scope.showModalWarningMessage = true;
$scope.$apply();
},
onModalCancel: function () {
$scope.openModal = false;
$scope.drugChartModalNotification.hostData.notificationKind = "warning";
$scope.showModalWarningMessage = true;
$scope.$apply();
}
}
};
$scope.showSuccessNotification = function () {
$scope.showModalWarningMessage = true;
$scope.openModal = false;
$scope.kind = "success";
$scope.$apply();

$scope.drugChartModalNotification = {
hostData: {
notificationKind: ""
},
hostApi: {
onClose: function () {
$scope.showModalWarningMessage = false;
$scope.$apply();
}
}
};
$scope.closeWarnings = function () {
$scope.showModalWarningMessage = false;
$scope.$apply();

$scope.openDrugChartModal = function (drugOrder) {
$scope.drugChartModal.hostData.drugOrder = drugOrder;
$scope.openModal = true;
};
};

Expand Down
23 changes: 10 additions & 13 deletions ui/app/clinical/displaycontrols/treatmentData/views/treatmentTableRow.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,20 +22,17 @@
</a>
</span>
<div>
<mfe-ipd-drug-chart-modal drug-order="selectedDrugOrder"
patient-id="params.patientUuid"
schedule-frequencies="drugChartModalScheduleFrequencies"
start-time-frequencies="drugChartModalStartTimeFrequencies"
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>
<mfe-ipd-drug-chart-modal
host-data="drugChartModal.hostData"
host-api="drugChartModal.hostApi"
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
host-data="drugChartModalNotification.hostData"
host-api="drugChartModalNotification.hostApi"
class="drug-chart-warnings"
ng-if="showModalWarningMessage">
</mfe-ipd-drug-chart-modal-notification>
</td>

Expand Down
14 changes: 9 additions & 5 deletions ui/test/unit/clinical/controllers/patientDashboardController.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ describe("patient dashboard controller", function () {
beforeEach(module('bahmni.clinical'));

var scope, spinner, _clinicalDashboardConfig, _clinicalAppConfigService, _state, _appService, _diseaseTemplateService,
_stateParams, _controller, _appConfig, location, filter;
_stateParams, _controller, _appConfig, location, filter, confirmBox;
var diseaseTemplates;
location = {
path: function () {
Expand All @@ -13,7 +13,7 @@ describe("patient dashboard controller", function () {
return url;
},
search: function () {
return {currentTab: "DASHBOARD_TAB_PATIENT_SUMMARY_KEY", replace: function () {}};
return { currentTab: "DASHBOARD_TAB_PATIENT_SUMMARY_KEY", replace: function () {} };
}
};

Expand Down Expand Up @@ -43,6 +43,7 @@ describe("patient dashboard controller", function () {

_appService = jasmine.createSpyObj('appService', ['getAppDescriptor']);
_appConfig = jasmine.createSpyObj('appConfig', ['getConfigValue']);
confirmBox = jasmine.createSpyObj('confirmBox', ['show']);

_appService.getAppDescriptor.and.returnValue(_appConfig);
_diseaseTemplateService = jasmine.createSpyObj('diseaseTemplateService', ['getLatestDiseaseTemplates']);
Expand Down Expand Up @@ -116,7 +117,8 @@ describe("patient dashboard controller", function () {
$stateParams: _stateParams,
diseaseTemplateService: _diseaseTemplateService,
patientContext: {patient: {}},
$filter: filter
$filter: filter,
confirmBox: confirmBox

});
});
Expand Down Expand Up @@ -153,7 +155,8 @@ describe("patient dashboard controller", function () {
appService: _appService,
$stateParams: _stateParams,
diseaseTemplateService: _diseaseTemplateService,
patientContext: {patient: {}}
patientContext: {patient: {}},
confirmBox: confirmBox

});
});
Expand Down Expand Up @@ -197,7 +200,8 @@ describe("patient dashboard controller", function () {
$stateParams: _stateParams,
diseaseTemplateService: _diseaseTemplateService,
patientContext: {patient: {}},
$location: location
$location: location,
confirmBox: confirmBox

});
expect(_clinicalDashboardConfig.currentTab.translationKey).toBe("DASHBOARD_TAB_PATIENT_SUMMARY_KEY");
Expand Down

0 comments on commit 013aa69

Please sign in to comment.