BAH-3850 | Add. Care View Dashboard Into IPD And Bed Mgmt

* Arjun | BAH-3850 | To build a page in React for new Ward-level patients dashboard (#793) * add. changes to view Care View Dashboard * add. care view dashboard * add. callback to jump back to in-patient screen * add. callback to jump back to in-patient screen * [Sri] - add provider uuid in care view dashboard * Phani | A-1206676106718218 | Update CSS to make Ward level Dashboard responsive * Phani | A-1206857808595293 | Add new route for Care View Dashboard (#878) * Phani | Add new state and route for Care View Dashboard * Phani | Add controller for careViewDashboard * Phani | Add initialization to careViewDashboard (#880) * Phani | Add new state and route for Care View Dashboard * Phani | Add controller for careViewDashboard * Phani | Add initialization for careViewDashboard * update. PR Feedback comments * [Rahul] | BAH-3850 | Add. Care View Support In Bed Mgmt * [Rahul] | BAH-3850 | Add. Custom Loader * BAH-3850 | auditLog events for Care view and IPD Dashboard --------- Co-authored-by: srinithishg <[email protected]> Co-authored-by: Phanindra-tw <[email protected]> Co-authored-by: Arjun-Go <[email protected]> Co-authored-by: Rahul Ramesh <[email protected]>
Bahmni · May 30, 2024 · 9978734 · 9978734
1 parent 5173462
commit 9978734
Show file tree

Hide file tree

Showing 25 changed files with 656 additions and 27 deletions.
diff --git a/micro-frontends/src/ipd/CareViewDashboard.jsx b/micro-frontends/src/ipd/CareViewDashboard.jsx
@@ -0,0 +1,25 @@
+import PropTypes from "prop-types";
+import React, { Suspense, lazy } from "react";
+import Loader from "../next-ui/Components/Loader/Loader";
+
+export function CareViewDashboard(props) {
+  const LazyApp = lazy(() => import("@openmrs-mf/ipd/CareViewDashboard"));
+
+  return (
+    <>
+      <Suspense fallback={<Loader />}>
+        <LazyApp hostData={props.hostData} hostApi={props.hostApi} />
+      </Suspense>
+    </>
+  );
+}
+
+// Without propTypes, react2angular won't render the component
+CareViewDashboard.propTypes = {
+  hostData: PropTypes.shape({
+    patientId: PropTypes.string,
+  }).isRequired,
+  hostApi: PropTypes.shape({
+    onHome: PropTypes.func,
+  }).isRequired,
+};
diff --git a/micro-frontends/src/ipd/IpdDashboard.jsx b/micro-frontends/src/ipd/IpdDashboard.jsx
@@ -0,0 +1,27 @@
+import PropTypes from "prop-types";
+import React, { Suspense, lazy } from "react";
+
+export function IpdDashboard(props) {
+  const LazyApp = lazy(() => import("@openmrs-mf/ipd/IpdDashboard"));
+
+  return (
+    <>
+      <Suspense fallback={<Loader />}>
+        <LazyApp
+          hostData={props.hostData}
+          hostApi={props.hostApi}
+        />
+      </Suspense>
+    </>
+  );
+}
+
+// Without propTypes, react2angular won't render the component
+IpdDashboard.propTypes = {
+  hostData: PropTypes.object.isRequired,
+  hostApi: PropTypes.shape({
+    navigation: PropTypes.shape({
+      visitSummary: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
diff --git a/micro-frontends/src/ipd/index.js b/micro-frontends/src/ipd/index.js
@@ -0,0 +1,47 @@
+// Adapt all IPD components to use within angular
+"use strict";
+
+import { react2angular } from "react2angular";
+import { IpdDashboard } from "./IpdDashboard";
+// import { DrugChartDashboard } from "./DrugChartDasboard";
+import { CareViewDashboard } from "./CareViewDashboard";
+
+angular.module("bahmni.mfe.ipd", [
+  "ui.router",
+  "bahmni.common.config",
+  "bahmni.common.uiHelper",
+  "bahmni.common.i18n",
+  "bahmni.common.domain",
+]);
+
+/** MFE component 1: IpdDashboard 
+ *================================================= */
+
+angular
+  .module("bahmni.mfe.ipd")
+  .component("mfeIpdDashboard", react2angular(IpdDashboard), {
+    template:
+      '<mfe-ipd-dashboard host-data="hostData" host-api="hostApi"></mfe-ipd-dashboard>'
+  });
+
+
+/** MFE component 2: DrugChartDashboard
+ *================================================= */
+
+// angular
+//     .module("bahmni.mfe.ipd")
+//     .component("mfeDrugChartDashboard", react2angular(DrugChartDashboard), {
+//         template:
+//             '<mfe-drug-chart-dashboard host-data="hostData" host-api="hostApi"></mfe-drug-chart-dashboard>'
+//     });
+
+
+/** MFE component 3: CareViewDashboard
+ *================================================= */
+
+angular
+.module("bahmni.mfe.ipd")
+.component("mfeIpdCareViewDashboard", react2angular(CareViewDashboard), {
+    template:
+        '<mfe-ipd-care-view-dashboard host-data="hostData" host-api="hostApi"></mfe-ipd-care-view-dashboard>'
+});
diff --git a/micro-frontends/src/next-ui/Components/Loader/Loader.jsx b/micro-frontends/src/next-ui/Components/Loader/Loader.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { FormattedMessage } from "react-intl";
+import './Loader.scss';
+
+const Loader = () => {
+    const loadingMessage = (
+        <FormattedMessage
+        id={"LOADING_MESSAGE"}
+        defaultMessage={"Loading... Please Wait"}
+        />
+    );
+    return (
+        <div className="loader-container">
+        <div className="loader-content">
+            <div className="lds-spinner">
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+            </div>
+            <p className="loader-text">{loadingMessage}</p>
+        </div>
+        </div>
+    );
+};
+
+export default Loader;
diff --git a/micro-frontends/src/next-ui/Components/Loader/Loader.scss b/micro-frontends/src/next-ui/Components/Loader/Loader.scss
@@ -0,0 +1,109 @@
+.lds-spinner,
+.lds-spinner div,
+.lds-spinner div:after {
+  box-sizing: border-box;
+}
+.lds-spinner {
+  color: #719898;
+  display: inline-block;
+  position: relative;
+  width: 80px;
+  height: 80px;
+
+  div {
+    transform-origin: 40px 40px;
+    animation: lds-spinner 1.2s linear infinite;
+
+    &:after {
+      content: " ";
+      display: block;
+      position: absolute;
+      top: 3.2px;
+      left: 36.8px;
+      width: 6.4px;
+      height: 17.6px;
+      border-radius: 20%;
+      background: #719898;
+    }
+
+    &:nth-child(1) {
+      transform: rotate(0deg);
+      animation-delay: -1.1s;
+    }
+    &:nth-child(2) {
+      transform: rotate(30deg);
+      animation-delay: -1s;
+    }
+    &:nth-child(3) {
+      transform: rotate(60deg);
+      animation-delay: -0.9s;
+    }
+    &:nth-child(4) {
+      transform: rotate(90deg);
+      animation-delay: -0.8s;
+    }
+    &:nth-child(5) {
+      transform: rotate(120deg);
+      animation-delay: -0.7s;
+    }
+    &:nth-child(6) {
+      transform: rotate(150deg);
+      animation-delay: -0.6s;
+    }
+    &:nth-child(7) {
+      transform: rotate(180deg);
+      animation-delay: -0.5s;
+    }
+    &:nth-child(8) {
+      transform: rotate(210deg);
+      animation-delay: -0.4s;
+    }
+    &:nth-child(9) {
+      transform: rotate(240deg);
+      animation-delay: -0.3s;
+    }
+    &:nth-child(10) {
+      transform: rotate(270deg);
+      animation-delay: -0.2s;
+    }
+    &:nth-child(11) {
+      transform: rotate(300deg);
+      animation-delay: -0.1s;
+    }
+    &:nth-child(12) {
+      transform: rotate(330deg);
+      animation-delay: 0s;
+    }
+  }
+}
+
+@keyframes lds-spinner {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+.loader-container {
+  font-family: "Arial";
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 80vh;
+  width: 100vw;
+  background-color: #fafafa;
+}
+
+.loader-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.loader-text {
+  font-size: 16px;
+  color: #333;
+  margin: 15px 0 0;
+}
diff --git a/micro-frontends/src/next-ui/Components/Loader/Loader.spec.jsx b/micro-frontends/src/next-ui/Components/Loader/Loader.spec.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import renderer from 'react-test-renderer';
+import Loader from './Loader';
+
+const messages = {
+  LOADING_MESSAGE: 'Loading... Please Wait'
+};
+
+describe('Loader Component', () => {
+  it('renders loader correctly', () => {
+    const { getAllByText } = render(
+      <IntlProvider locale="en" messages={messages}>
+        <Loader />
+      </IntlProvider>
+    );
+
+    expect(getAllByText("Loading... Please Wait").length).toEqual(1);
+  });
+
+  it('matches snapshot', () => {
+    const tree = renderer.create(
+      <IntlProvider locale="en" messages={messages}>
+        <Loader />
+      </IntlProvider>
+    ).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
diff --git a/micro-frontends/src/next-ui/Components/Loader/__snapshots__/Loader.spec.jsx.snap b/micro-frontends/src/next-ui/Components/Loader/__snapshots__/Loader.spec.jsx.snap
@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Loader Component matches snapshot 1`] = `
+<div
+  className="loader-container"
+>
+  <div
+    className="loader-content"
+  >
+    <div
+      className="lds-spinner"
+    >
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+      <div />
+    </div>
+    <p
+      className="loader-text"
+    >
+      Loading... Please Wait
+    </p>
+  </div>
+</div>
+`;
diff --git a/micro-frontends/webpack.config.js b/micro-frontends/webpack.config.js
@@ -14,6 +14,7 @@ module.exports = {
     },
   },
   entry: {
+    ipd: "./src/ipd/index.js",
     "next-ui": "./src/next-ui/index.js",
     shared: "./src/shared.js",
   },
@@ -33,7 +34,9 @@ module.exports = {
     new ModuleFederationPlugin({
       name: "bahmni_mfe_host",
       filename: "remoteEntry.js",
-      remotes: {},
+      remotes: {
+        "@openmrs-mf/ipd": remoteProxiedAtHostDomain({ name: "bahmni_ipd", path: "ipd" }),
+      },
       exposes: {},
       shared: {
         "carbon-components-react": {
@@ -133,4 +136,4 @@ function remoteProxiedAtHostDomain({name, path}) {
     // inject this script with the src set to the resolved remoteEntry.js
     document.head.appendChild(script);
   })`;
-}
+}
diff --git a/ui/app/adt/app.js b/ui/app/adt/app.js
@@ -28,8 +28,12 @@ angular.module('adt').config(['$stateProvider', '$httpProvider', '$urlRouterProv
             views: {
                 'content': {
                     templateUrl: 'views/home.html',
-                    controller: function ($scope, appService) {
+                    controller: function ($rootScope, $scope, appService, $state) {
+                        $scope.goToCareView = function () {
+                            $state.go('careViewDashboard');
+                        };
                         $scope.isBedManagementEnabled = appService.getAppDescriptor().getConfig("isBedManagementEnabled").value;
+                        $scope.enableIPDFeature = appService.getAppDescriptor().getConfigValue('enableIPDFeature');
                     }
                 },
                 'wards@home': {
@@ -44,6 +48,18 @@ angular.module('adt').config(['$stateProvider', '$httpProvider', '$urlRouterProv
                 initialization: 'initialization'
             }
         })
+        .state('careViewDashboard', {
+            url: '/home/careViewDashboard',
+            views: {
+                'content': {
+                    template: '<mfe-ipd-care-view-dashboard style="display: block;width: 100vw;margin-left: calc(50% - 50vw);" host-data="hostData" host-api="hostApi"></mfe-ipd-care-view-dashboard>',
+                    controller: 'CareViewController'
+                }
+            },
+            resolve: {
+                initialization: 'initialization'
+            }
+        })
         .state('patient', {
             url: '/patient/:patientUuid',
             data: {