Merge pull request #1048 from adityadeshlahre/fix-1042-user-managemen…

…t-page-rewrite fix/feat: Rewriten User Management page in reactJS
I-TECH-UW · Jul 3, 2024 · b86043b · b86043b
2 parents 841e3df + 4d5ec45
commit b86043b
Show file tree

Hide file tree

Showing 12 changed files with 3,538 additions and 35 deletions.
diff --git a/frontend/src/components/admin/Admin.js b/frontend/src/components/admin/Admin.js
@@ -27,6 +27,7 @@ import {
   BootVolumeAlt,
   Report,
   Bullhorn,
+  User,
 } from "@carbon/icons-react";
 import PathRoute from "../utils/PathRoute";
 import CalculatedValue from "./calculatedValue/CalculatedValueForm";
@@ -41,12 +42,15 @@ import { CommonProperties } from "./menu/CommonProperties";
 import ConfigMenuDisplay from "./formEntry/common/ConfigMenuDisplay";
 import ProviderMenu from "./ProviderMenu/ProviderMenu";
 import BarcodeConfiguration from "./barcodeConfiguration/BarcodeConfiguration";
-import OrganizationManagament from "./OrganizationManagement/OrganizationManagement";
-import OrganizationAddModify from "./OrganizationManagement/OrganizationAddModify.js";
 import AnalyzerTestName from "./analyzerTestName/AnalyzerTestName.js";
 import PluginList from "./pluginFile/PluginFile.js";
 import ResultReportingConfiguration from "./ResultReportingConfiguration/ResultReportingConfiguration.js";
 import PushNotificationPage from "../notifications/PushNotificationPage.jsx";
+import OrganizationManagement from "./OrganizationManagement/OrganizationManagement";
+import OrganizationAddModify from "./OrganizationManagement/OrganizationAddModify";
+import UserManagement from "./userManagement/UserManagement";
+import UserAddModify from "./userManagement/UserAddModify";
+
 function Admin() {
   const intl = useIntl();
   const [isSmallScreen, setIsSmallScreen] = useState(false);
@@ -108,6 +112,9 @@ function Admin() {
           <SideNavLink renderIcon={Report} href="#resultReportingConfiguration">
             <FormattedMessage id="resultreporting.browse.title" />
           </SideNavLink>
+          <SideNavLink renderIcon={User} href="#userManagement">
+            <FormattedMessage id="unifiedSystemUser.browser.title" />
+          </SideNavLink>
           <SideNavMenu
             title={intl.formatMessage({ id: "sidenav.label.admin.menu" })}
             renderIcon={TableOfContents}
@@ -203,14 +210,20 @@ function Admin() {
         <BarcodeConfiguration />
       </PathRoute>
       <PathRoute path="#organizationManagement">
-        <OrganizationManagament />
+        <OrganizationManagement />
       </PathRoute>
       <PathRoute path="#organizationEdit">
         <OrganizationAddModify />
       </PathRoute>
       <PathRoute path="#resultReportingConfiguration">
         <ResultReportingConfiguration />
       </PathRoute>
+      <PathRoute path="#userManagement">
+        <UserManagement />
+      </PathRoute>
+      <PathRoute path="#userEdit">
+        <UserAddModify />
+      </PathRoute>
       <PathRoute path="#globalMenuManagement">
         <GlobalMenuManagement />
       </PathRoute>

diff --git a/frontend/src/components/admin/OrganizationManagement/OrganizationAddModify.js b/frontend/src/components/admin/OrganizationManagement/OrganizationAddModify.js
@@ -72,38 +72,34 @@ function OrganizationAddModify() {
   const [saveButton, setSaveButton] = useState(true);
   const [typeOfActivity, setTypeOfActivity] = useState();
   const [typeOfActivityShow, setTypeOfActivityShow] = useState([]);
-  const [id, setId] = useState(null);
 
-  useEffect(() => {
-    const getIdFromUrl = () => {
-      const hash = window.location.hash;
-      if (hash.includes("?")) {
-        const queryParams = hash.split("?")[1];
-        const urlParams = new URLSearchParams(queryParams);
-        const id = urlParams.get("ID");
-
-        return id;
-      }
-      return null;
-    };
-
-    const extractedId = getIdFromUrl();
-    setId(extractedId);
-  }, []);
+  const ID = (() => {
+    const hash = window.location.hash;
+    if (hash.includes("?")) {
+      const queryParams = hash.split("?")[1];
+      const urlParams = new URLSearchParams(queryParams);
+      return urlParams.get("ID");
+    }
+    return "0";
+  })();
 
   useEffect(() => {
     componentMounted.current = true;
     setLoading(true);
-    if (id) {
+    if (ID) {
       getFromOpenElisServer(
-        `/rest/Organization?ID=${id}&startingRecNo=1`,
+        `/rest/Organization?ID=${ID}&startingRecNo=1`,
         handleMenuItems,
       );
+    } else {
+      setTimeout(() => {
+        window.location.assign("/MasterListsPage#organizationManagement");
+      }, 1000);
     }
     return () => {
       componentMounted.current = false;
     };
-  }, [id]);
+  }, [ID]);
 
   const handleMenuItems = (res) => {
     if (!res) {
@@ -178,7 +174,7 @@ function OrganizationAddModify() {
       setOrgInfoPost(organizationsManagementIdInfoPost);
       setSelectedRowIds(typeOfActivity.selectedTypes);
 
-      if (id !== "0") {
+      if (ID !== "0") {
         const organizationSelectedTypeOfActivity =
           typeOfActivity.selectedTypes.map((item) => {
             return {
@@ -195,7 +191,7 @@ function OrganizationAddModify() {
         setOrgSelectedTypeOfActivity([]);
       }
     }
-  }, [typeOfActivity, id]);
+  }, [typeOfActivity, ID]);
 
   useEffect(() => {
     setOrgInfoPost((prevOrgInfoPost) => ({
@@ -331,7 +327,7 @@ function OrganizationAddModify() {
   function submitAddUpdatedOrgInfo() {
     setLoading(true);
     postToOpenElisServerJsonResponse(
-      `/rest/Organization?ID=${id}&startingRecNo=1`,
+      `/rest/Organization?ID=${ID}&startingRecNo=1`,
       JSON.stringify(orgInfoPost),
       () => {
         submitAddUpdatedOrgInfoCallback();
@@ -399,7 +395,7 @@ function OrganizationAddModify() {
           <Column lg={16} md={8} sm={4}>
             <Section>
               <Heading>
-                {id === "0" ? (
+                {ID === "0" ? (
                   <FormattedMessage id="organization.add.title" />
                 ) : (
                   <FormattedMessage id="organization.edit.title" />

diff --git a/frontend/src/components/admin/OrganizationManagement/OrganizationManagement.js b/frontend/src/components/admin/OrganizationManagement/OrganizationManagement.js
@@ -33,7 +33,6 @@ import {
 } from "../../common/CustomNotification.js";
 import { FormattedMessage, injectIntl, useIntl } from "react-intl";
 import PageBreadCrumb from "../../common/PageBreadCrumb.js";
-import { ArrowLeft, ArrowRight } from "@carbon/icons-react";
 import ActionPaginationButtonType from "../../common/ActionPaginationButtonType.js";
 
 let breadcrumbs = [
@@ -45,7 +44,7 @@ let breadcrumbs = [
   },
 ];
 
-function OrganizationManagament() {
+function OrganizationManagement() {
   const { notificationVisible, setNotificationVisible, addNotification } =
     useContext(NotificationContext);
 
@@ -320,6 +319,7 @@ function OrganizationManagament() {
           handleNextPage={handleNextPage}
           deleteDeactivate={deleteDeactivateOrganizationManagament}
           id={selectedRowIds[0]}
+          otherParmsInLink={`&startingRecNo=1`}
           addButtonRedirectLink={`/MasterListsPage#organizationEdit?ID=0`}
           modifyButtonRedirectLink={`/MasterListsPage#organizationEdit?ID=`}
           type="type2"
@@ -795,4 +795,4 @@ function OrganizationManagament() {
   );
 }
 
-export default injectIntl(OrganizationManagament);
+export default injectIntl(OrganizationManagement);
diff --git a/frontend/src/components/admin/barcodeConfiguration/BarcodeConfiguration.js b/frontend/src/components/admin/barcodeConfiguration/BarcodeConfiguration.js
@@ -766,7 +766,9 @@ function BarcodeConfiguration() {
                         title: intl.formatMessage({
                           id: "notification.title",
                         }),
-                        message: "BarCode Configurations has been saved.",
+                        message: intl.formatMessage({
+                          id: "barcode.notification.save",
+                        }),
                       });
                     }}
                     type="submit"