A-1205100474888030 | Pass translations from angular to local react mi…

…cro-frontend components (#646) * add. passing of translations from angular to local micro-frontend * add. wrapper component for handling translations
Bahmni · Jul 24, 2023 · 2efd6d0 · 2efd6d0
1 parent 2dca64b
commit 2efd6d0
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 1 deletion.
diff --git a/micro-frontends/src/next-ui/index.js b/micro-frontends/src/next-ui/index.js
@@ -6,4 +6,30 @@ angular.module(moduleName, []);
 
 angular
   .module(moduleName)
-  .component("mfeNextUiPatientAlergiesControl", react2angular(PatientAlergiesControl));
+  .component("mfeNextUiPatientAlergiesControlRemote", react2angular(PatientAlergiesControl));
+
+function nextUIPatientAlergiesControlController ($scope, $translate) {
+  const vm = this;
+  $scope.hostData = vm.hostData;
+  $scope.hostApi = vm.hostApi;
+  $scope.translations = {
+    ipdDemoKey: $translate.instant("DASHBOARD_TAB_IPD_DEMO_KEY"),
+  };
+}
+
+nextUIPatientAlergiesControlController.$inject = ["$scope", "$translate"];
+
+angular.module(moduleName).component("mfeNextUiPatientAlergiesControl", {
+  controller: nextUIPatientAlergiesControlController,
+  bindings: {
+    hostData: "=",
+    hostApi: "=",
+  },
+  template: `
+    <mfe-next-ui-patient-alergies-control-remote
+      host-data="hostData"
+      host-api="hostApi"
+      translations="translations"
+    ></mfe-next-ui-patient-alergies-control-remote>
+  `,
+});
diff --git a/micro-frontends/src/next-ui/patientAlergies/PatientAlergiesControl.jsx b/micro-frontends/src/next-ui/patientAlergies/PatientAlergiesControl.jsx
@@ -11,6 +11,7 @@ export function PatientAlergiesControl(props) {
   return (
     <div>
       <span>Displaying alergy control from {props.hostData.name}</span>
+      <span>Translation: {props.translations?.ipdDemoKey}</span>
       <Button onClick={props.hostApi?.callback}>Click for callback</Button>
     </div>
   );
@@ -23,4 +24,5 @@ PatientAlergiesControl.propTypes = {
   hostApi: PropTypes.shape({
     callback: PropTypes.func.isRequired,
   }),
+  translations: PropTypes.object.isRequired,
 };