ui-soxo-bootstrap-core 2.4.24 → 2.4.25-dev.11

package/core/lib/components/sidemenu/sidemenu.js

@@ -1,137 +1,89 @@
 /**
  *
  * Sidemenu component
- * 
+ *
  * @author Ashique Mohammed
- * @co-author Sneha 
- * 
- * 
+ * @co-author Sneha
+ *
+ *
  */
 
-import React, { useState, useEffect, useContext } from "react";
+import React, { useState, useEffect, useContext } from 'react';
 
-import { animationControls, motion, useAnimation } from "framer-motion";
+import { animationControls, motion, useAnimation } from 'framer-motion';
 
-import { GlobalContext } from "./../../Store";
+import { GlobalContext } from './../../Store';
 
-import { Menu, message, Skeleton, Space } from "antd";
+import { Menu, message, Skeleton, Space, Popover } from 'antd';
 
-import FirebaseUtils from "./../../utils/firebase.utils";
+import FirebaseUtils from './../../utils/firebase.utils';
 
-import { useHistory } from "react-router-dom";
+import { useHistory } from 'react-router-dom';
 
 import { useTranslation, Trans } from 'react-i18next';
 
-import { Menus } from "../../models"
-
-
+import { Menus } from '../../models';
 
-
-import "./sidemenu.scss";
+import './sidemenu.scss';
 
 const { SubMenu } = Menu;
 
-
 /**
- * 
- * @param {*} collapsed 
- * @param {*} icon 
- * @param {*} caption 
- * @returns 
+ *
+ * @param {*} collapsed
+ * @param {*} icon
+ * @param {*} caption
+ * @returns
  */
 function CollapsedIconMenu({ menu, collapsed, icon, caption }) {
-
-  
-
   // Import t and i18n from useTranslation
   const { t, i18n } = useTranslation();
   const { state } = useContext(GlobalContext);
-  
-
-
+  const menuText = t(caption);
   return (
-
     <>
-
-      {/* If value of collapsed is false show caption & icon else hiding caption and showing only icon*/}
-      {!collapsed ? (
-
-        <div
-
-          className="menu-collapsed"  >
-
-          <div>
-
-          {
-              menu && menu.image_path ?
-                <img style={{ width: '25px' }} src={menu.image_path}></img>
-                :
-                <i className={`fa-solid fas ${icon}`} />
-            }
-
+      <Popover content={menuText} placement="right">
+        {/* If value of collapsed is false show caption & icon else hiding caption and showing only icon*/}
+        {!collapsed ? (
+          <div className="menu-collapsed">
+            <div>
+              {menu && menu.image_path ? <img style={{ width: '25px' }} src={menu.image_path}></img> : <i className={`fa-solid fas ${icon}`} />}
+            </div>
+
+            <div style={{ color: state.theme.colors.leftSectionColor }}>
+              <span className="caption">
+                {/* {caption} */}
+                {/* <Trans i18nKey="Appointments"></Trans> */}
+                {t(`${caption}`)}
+              </span>
+            </div>
           </div>
+        ) : (
+          <div className="menu-collapsed">
+            <span className="anticon">
+              {menu && menu.image_path ? <img style={{ width: '25px' }} src={menu.image_path}></img> : <i className={`fa-solid fas ${icon}`} />}
+            </span>
 
-          <div style={{ color: state.theme.colors.leftSectionColor }}>
-
-            <span className="caption">
-
-              {/* {caption} */}
-              {/* <Trans i18nKey="Appointments"></Trans> */}
+            <span style={{ color: state.theme.colors.colorPrimaryText, paddingLeft: '6px' }}>
+              {/* <>{caption}</> */}
               {t(`${caption}`)}
-
             </span>
-
           </div>
-
-        </div>
-
-      ) : (
-
-        <div
-
-          className="menu-collapsed">
-
-          <span className="anticon">
-
-          {
-              menu && menu.image_path ?
-                <img style={{ width: '25px' }} src={menu.image_path}></img>
-                :
-                <i className={`fa-solid fas ${icon}`} />
-            }
-
-          </span>
-
-          <span  style={{ color: state.theme.colors.colorPrimaryText,paddingLeft: '6px' }}>
-
-            {/* <>{caption}</> */}
-            {t(`${caption}`)}
-
-          </span>
-
-        </div>
-
-      )}
-
+        )}
+      </Popover>
     </>
-
-  )
-
+  );
 }
 
-export default function SideMenu({
-  loading,
-  modules = [],
-  callback,
-  appSettings,  
-  collapsed,
-}) {
-  const { brandLogo, footerLogo, renderCustomHeader = () => { } } = appSettings;
+export default function SideMenu({ loading, modules = [], callback, appSettings, collapsed }) {
+  const { brandLogo, footerLogo, renderCustomHeader = () => {} } = appSettings;
 
- let history = useHistory();
+  let history = useHistory();
 
-  const [selected, setSelected] = useState([1]);
+  //  const [selected, setSelected] = useState([1]);
 
+  const [selectedKeys, setSelectedKeys] = useState([]);
+  const [openKeys, setOpenKeys] = useState([]);
   const [menu, setMenu] = useState({});
 
   const { user = { locations: [] }, dispatch, state } = useContext(GlobalContext);
@@ -147,11 +99,16 @@ export default function SideMenu({
     // }
   }, [user]);
 
+  // Keep current menu item selected after reload or navigation
+  useEffect(() => {
+    const currentPath = history.location.pathname;
+    setSelectedKeys([currentPath]);
+  }, [history.location.pathname]);
+
   /**
    * Logout Function
    */
   async function handleLogout() {
-
     let dbPtrValue = appSettings.headers.db_ptr;
     const isEnvThemeTrue = process.env.REACT_APP_THEME === 'true';
 
@@ -162,11 +119,9 @@ export default function SideMenu({
 
     // localStorage.clear();
 
-    if (process.env.REACT_APP_PRIMARY_BACKEND === "SQL") {
-
+    if (process.env.REACT_APP_PRIMARY_BACKEND === 'SQL') {
       // const result = Users.logout()
       localStorage.clear();
-     
 
       localStorage.setItem('db_ptr', dbPtrValue);
 
@@ -176,16 +131,16 @@ export default function SideMenu({
         ...{ loggedCheckDone: true },
       };
 
-      dispatch({ type: "user", payload: userInfo });
+      dispatch({ type: 'user', payload: userInfo });
 
-      history.push("/login");
+      history.push('/login');
 
-      message.success("You have logged out successfully.");
+      message.success('You have logged out successfully.');
     } else {
       FirebaseUtils.logout().then(() => {
-        history.push("/login");
+        history.push('/login');
 
-        message.success("You have logged out successfully.");
+        message.success('You have logged out successfully.');
       });
     }
   }
@@ -194,15 +149,38 @@ export default function SideMenu({
    * Menu Click Function
    */
 
+  // const onMenuClick = (menu, index) => {
+  //   setSelected([index]);
+
+  //   history.push(menu.path);
+
+  //   setMenu(menu);
+
+  //   callback();
+  // };
+
   const onMenuClick = (menu, index) => {
-    setSelected([index]);
+    const key = menu.path || `menu-${menu.id || index}`;
+    const parentKey = menu.parentKey;
 
-    history.push(menu.path);
+    // Keep submenu highlighted
+    setSelectedKeys([key]);
+
+    // Keep parent open
+    if (parentKey) {
+      setOpenKeys([parentKey]);
+    }
 
+    history.push(menu.path);
     setMenu(menu);
 
-    callback();
+    if (callback) callback();
+  };
+
+  const onOpenChange = (keys) => {
+    setOpenKeys(keys);
   };
+
   /**
    * Function renders the footer logo
    *
@@ -210,15 +188,14 @@ export default function SideMenu({
    */
   function renderFooter(footerLogo) {
     return (
-      <div className={`sidebar-footer ${!collapsed ? "open" : "close"}`}>
-        <img className="footer-logo" src={footerLogo} alt={"footer-logo"} />
+      <div className={`sidebar-footer ${!collapsed ? 'open' : 'close'}`}>
+        <img className="footer-logo" src={footerLogo} alt={'footer-logo'} />
       </div>
     );
   }
 
   let icon;
 
-
   let index = 0;
 
   useEffect(() => {
@@ -227,7 +204,6 @@ export default function SideMenu({
     // document.documentElement.style.setProperty('--custom-text-color', state.theme.colors.colorText);
   }, [state.theme]);
 
-
   return (
     <div className="sidemenu">
       {loading ? (
@@ -235,16 +211,19 @@ export default function SideMenu({
           <Skeleton.Avatar />
           <Skeleton.Button />
           {/* <Skeleton.Input  /> */}
-        </Space>) :
-
-        <div className="intro" style={{ backgroundColor: state.theme.colors.leftSectionBackground ,borderBottom: `2px solid ${state.theme.colors.borderColor}`}}>
+        </Space>
+      ) : (
+        <div
+          className="intro"
+          style={{ backgroundColor: state.theme.colors.leftSectionBackground, borderBottom: `2px solid ${state.theme.colors.borderColor}` }}
+        >
           {/* Logo Bar */}
           <div className="logo-wrapper">
             {/* Changing the size of logo bar according to the value of collapsed */}
             <img
-              className={`sidemenu-brand-logo ${!collapsed ? "open" : "close"}`}
+              className={`sidemenu-brand-logo ${!collapsed ? 'open' : 'close'}`}
               onClick={() => {
-                history.push("/");
+                history.push('/');
               }}
               src={brandLogo}
               alt="Logo"
@@ -255,25 +234,26 @@ export default function SideMenu({
             {/* If value of collapsed is true show version else not showing */}
 
             {!collapsed && process.env.REACT_APP_package_version && (
-  <small style={{
-    
-    color: state.theme.colors.leftSectionColor,
-  }}>{process.env.REACT_APP_package_version}</small>
-)}
+              <small
+                style={{
+                  color: state.theme.colors.leftSectionColor,
+                }}
+              >
+                {process.env.REACT_APP_package_version}
+              </small>
+            )}
           </div>
           {/* Logo Bar Ends */}
 
           {/* If value of collapsed is true render header else not rendering */}
 
-          {!collapsed ? renderCustomHeader() : ""}
-
+          {!collapsed ? renderCustomHeader() : ''}
         </div>
-      }
+      )}
 
       {/* Intro Component */}
       {/* Intro Component Ends */}
 
-
       {/* Search for Queries */}
 
       {/* <div className="menu-search">
@@ -285,15 +265,11 @@ export default function SideMenu({
 
       {/* Search for Queries Ends */}
 
-      <div className={`menu-item ${!collapsed ? "open" : "close"}`} style={{ backgroundColor: state.theme.colors.leftSectionBackground}}> 
-      
+      <div className={`menu-item ${!collapsed ? 'open' : 'close'}`} style={{ backgroundColor: state.theme.colors.leftSectionBackground }}>
         {loading ? (
           <></>
         ) : (
-
-
           <Menu
-
             // selectedKeys={[selected]}
             // style={{ width: 256 }}
             // defaultSelectedKeys={selected}
@@ -301,10 +277,12 @@ export default function SideMenu({
             inlineCollapsed={collapsed}
             mode="inline"
             theme={process.env.REACT_APP_THEME}
-            style={{ backgroundColor: state.theme.colors.leftSectionBackground ,color:state.theme.colors.leftSectionColor}}
-          // theme={''}
+            selectedKeys={selectedKeys}
+            openKeys={openKeys}
+            onOpenChange={onOpenChange}
+            style={{ backgroundColor: state.theme.colors.leftSectionBackground, color: state.theme.colors.leftSectionColor }}
+            // theme={''}
           >
-
             {/* <Menu.Item
               onClick={() => {
                 setSelected([1]);
@@ -324,7 +302,6 @@ export default function SideMenu({
               />
             </Menu.Item> */}
 
-
             {/* {
               Menus.screenMenus(modules).map((menu, index) => {
 
@@ -332,7 +309,7 @@ export default function SideMenu({
               })
             } */}
 
-            {Menus.screenMenus(modules, "order")
+            {Menus.screenMenus(modules, 'order')
 
               .filter((record) => {
                 icon = record;
@@ -354,207 +331,133 @@ export default function SideMenu({
               .map((menu, index) => {
                 // return <MenuItem menu={menu} index={index} />
 
-                let sub_menus =
-                  menu && menu.sub_menus
-                    ? Menus.screenMenus(menu.sub_menus)
-                    : [];
+                let sub_menus = menu && menu.sub_menus ? Menus.screenMenus(menu.sub_menus) : [];
 
                 if (menu && sub_menus && sub_menus.length) {
-
                   let randomIndex = parseInt(Math.random() * 10000000000);
 
                   return (
-
                     <SubMenu
-
                       className="popup"
-                      style={{ color:state.theme.colors.leftSectionColor}}
-
-                      key={`first-level-${randomIndex}-${menu.caption}`}
+                      style={{ color: state.theme.colors.leftSectionColor }}
+                      // key={`first-level-${randomIndex}-${menu.caption}`}
 
+                      key={menu.path || menu.caption}
                       title={
-
                         <>
-
                           <CollapsedIconMenu
-
                             menu={menu}
-
                             caption={menu.caption}
-
                             icon={menu.icon_name || 'fa-solid fas fa-user'}
-                            
-
                             collapsed={collapsed}
-
                           />
-
-
-
                         </>
-
                       }
-
                     >
                       {sub_menus.map((submenu, innerIndex) => {
                         let randomIndex = parseInt(Math.random() * 10000000000);
 
-                        let third_menus =
-                          submenu && submenu.sub_menus
-                            ? Menus.screenMenus(submenu.sub_menus)
-                            : [];
+                        let third_menus = submenu && submenu.sub_menus ? Menus.screenMenus(submenu.sub_menus) : [];
 
                         if (third_menus && third_menus.length) {
                           return (
                             <SubMenu
-
                               className="popup"
+                              // key={`second-level-${randomIndex}-${submenu.id}`}
 
-                              key={`second-level-${randomIndex}-${submenu.id}`}
-
+                              key={submenu.path || submenu.caption}
                               title={
-
                                 <span>
-
                                   <CollapsedIconMenu
-
                                     menu={menu}
-
                                     caption={submenu.caption}
-
                                     icon={submenu.icon_name || 'fa-solid fas fa-user'}
-
                                     collapsed={collapsed}
-
                                   />
-
-
                                 </span>
                               }
                             >
                               {third_menus.map((menu) => {
-                                let randomIndex = parseInt(
-                                  Math.random() * 10000000000
-                                );
+                                let randomIndex = parseInt(Math.random() * 10000000000);
 
                                 return (
                                   <Menu.Item
+                                    // onClick={() => {
+                                    //   onMenuClick(menu, index);
+                                    // }}
                                     onClick={() => {
-                                      onMenuClick(menu, index);
+                                      onMenuClick({ ...menu, parentKey: submenu.path || submenu.caption }, index);
                                     }}
-                                    key={`second-level-${randomIndex}-${index}`}
-                                  >
+                                    // key={`second-level-${randomIndex}-${index}`}
 
+                                    key={menu.path || menu.caption}
+                                  >
                                     <CollapsedIconMenu
-
                                       menu={menu}
-
                                       caption={menu.caption}
-
                                       icon={menu.icon_name || 'fa-solid fas fa-user'}
-                                     
-
                                       collapsed={collapsed}
-
                                     />
-
                                   </Menu.Item>
                                 );
                               })}
                             </SubMenu>
                           );
                         } else {
-                          let randomIndex = parseInt(
-                            Math.random() * 10000000000
-                          );
+                          let randomIndex = parseInt(Math.random() * 10000000000);
 
                           return (
                             <Menu.Item
+                              // onClick={() => {
+                              //   onMenuClick(submenu, index);
+                              // }}
                               onClick={() => {
-                                onMenuClick(submenu, index);
+                                onMenuClick({ ...submenu, parentKey: menu.path || menu.caption }, index);
                               }}
-                              key={`first-level-${randomIndex}-${innerIndex}`}
+                              // key={`first-level-${randomIndex}-${innerIndex}`}
+                              key={submenu.path || submenu.caption}
                             >
-
                               <CollapsedIconMenu
-
                                 menu={menu}
-
                                 caption={submenu.caption}
-
                                 icon={submenu.icon_name || 'fa-solid fas fa-user'}
-                               
-
                                 collapsed={collapsed}
-
                               />
-
                             </Menu.Item>
-
                           );
-
                         }
-
                       })}
-
                     </SubMenu>
-
                   );
                 } else {
                   let randomIndex = parseInt(Math.random() * 10000000000);
 
                   return (
-
                     <Menu.Item
+                      // onClick={() => {
+                      //   onMenuClick(menu, index);
+                      // }}
+
                       onClick={() => {
-                        onMenuClick(menu, index);
+                        onMenuClick({ ...menu, parentKey: menu.path || menu.caption }, index);
                       }}
-                      key={`${menu.id}-${randomIndex}`}
+                      // key={`${menu.id}-${randomIndex}`}
+                      key={menu.path || menu.caption}
                     >
-
-                      <CollapsedIconMenu
-
-                        menu={menu}
-
-                        caption={menu.caption}
-
-                        icon={menu.icon_name || 'fa-solid fas fa-user'}
-                       
-
-                        collapsed={collapsed}
-
-                      />
-
-
+                      <CollapsedIconMenu menu={menu} caption={menu.caption} icon={menu.icon_name || 'fa-solid fas fa-user'} collapsed={collapsed} />
                     </Menu.Item>
-
                   );
                 }
               })}
 
-
-            {
-              loading ? <div class="skeleton-wrapper"></div> : <Menu.Item onClick={handleLogout} key="logout-button">
-
-                <CollapsedIconMenu
-
-                  caption="Logout"
-
-                  icon='fa-solid fas fa-user'
-
-                  collapsed={collapsed}
-
-                />
-
-
+            {loading ? (
+              <div class="skeleton-wrapper"></div>
+            ) : (
+              <Menu.Item onClick={handleLogout} key="logout-button">
+                <CollapsedIconMenu caption="Logout" icon="fa-solid fas fa-user" collapsed={collapsed} />
               </Menu.Item>
-            }
-
-
-
-
+            )}
           </Menu>
-
         )}
 
         {/* Footer Logo */}
@@ -570,16 +473,14 @@ export default function SideMenu({
  * sub menus
  */
 function MenuItem({ menu, index, history }) {
-
   function renderMenus({ menu, index }) {
     let sub_menus = [];
 
     if (menu.sub_menus) {
-      sub_menus = Menus.screenMenus(menu.sub_menus)
+      sub_menus = Menus.screenMenus(menu.sub_menus);
     }
 
     if (menu && sub_menus && sub_menus.length) {
-
       // return 'hello';
       return (
         <SubMenu
@@ -591,9 +492,7 @@ function MenuItem({ menu, index, history }) {
           }
         >
           {menu.sub_menus.map((menu, index) => {
-            return (
-              <MenuItem menu={menu} index={menu.id} />
-            );
+            return <MenuItem menu={menu} index={menu.id} />;
           })}
         </SubMenu>
       );
@@ -611,7 +510,5 @@ function MenuItem({ menu, index, history }) {
     }
   }
 
-
   return renderMenus({ menu, index });
-
-}
+}