ui-soxo-bootstrap-core 2.4.25-dev.8 → 2.4.25

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

@@ -1,89 +1,137 @@
 /**
  *
  * 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, Popover } from 'antd';
+import { Menu, message, Skeleton, Space } 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 (
+
     <>
-      <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>
+
+      {/* 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 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}</> */}
+          <div style={{ color: state.theme.colors.leftSectionColor }}>
+
+            <span className="caption">
+
+              {/* {caption} */}
+              {/* <Trans i18nKey="Appointments"></Trans> */}
               {t(`${caption}`)}
+
             </span>
+
           </div>
-        )}
-      </Popover>
+
+        </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>
+
+      )}
+
     </>
-  );
+
+  )
+
 }
 
-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);
@@ -99,16 +147,11 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
     // }
   }, [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';
 
@@ -119,9 +162,11 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
 
     // 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);
 
@@ -131,16 +176,16 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
         ...{ 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.");
       });
     }
   }
@@ -149,38 +194,15 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
    * Menu Click Function
    */
 
-  // const onMenuClick = (menu, index) => {
-  //   setSelected([index]);
-
-  //   history.push(menu.path);
-
-  //   setMenu(menu);
-
-  //   callback();
-  // };
-
   const onMenuClick = (menu, index) => {
-    const key = menu.path || `menu-${menu.id || index}`;
-    const parentKey = menu.parentKey;
-
-    // Keep submenu highlighted
-    setSelectedKeys([key]);
-
-    // Keep parent open
-    if (parentKey) {
-      setOpenKeys([parentKey]);
-    }
+    setSelected([index]);
 
     history.push(menu.path);
-    setMenu(menu);
 
-    if (callback) callback();
-  };
+    setMenu(menu);
 
-  const onOpenChange = (keys) => {
-    setOpenKeys(keys);
+    callback();
   };
-
   /**
    * Function renders the footer logo
    *
@@ -188,14 +210,15 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
    */
   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(() => {
@@ -204,6 +227,7 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
     // document.documentElement.style.setProperty('--custom-text-color', state.theme.colors.colorText);
   }, [state.theme]);
 
+
   return (
     <div className="sidemenu">
       {loading ? (
@@ -211,19 +235,16 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
           <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"
@@ -234,26 +255,25 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
             {/* 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">
@@ -265,11 +285,15 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
 
       {/* 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}
@@ -277,12 +301,10 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
             inlineCollapsed={collapsed}
             mode="inline"
             theme={process.env.REACT_APP_THEME}
-            selectedKeys={selectedKeys}
-            openKeys={openKeys}
-            onOpenChange={onOpenChange}
-            style={{ backgroundColor: state.theme.colors.leftSectionBackground, color: state.theme.colors.leftSectionColor }}
-            // theme={''}
+            style={{ backgroundColor: state.theme.colors.leftSectionBackground ,color:state.theme.colors.leftSectionColor}}
+          // theme={''}
           >
+
             {/* <Menu.Item
               onClick={() => {
                 setSelected([1]);
@@ -302,6 +324,7 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
               />
             </Menu.Item> */}
 
+
             {/* {
               Menus.screenMenus(modules).map((menu, index) => {
 
@@ -309,7 +332,7 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
               })
             } */}
 
-            {Menus.screenMenus(modules, 'order')
+            {Menus.screenMenus(modules, "order")
 
               .filter((record) => {
                 icon = record;
@@ -331,133 +354,207 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
               .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={submenu.path || submenu.caption}
+                              key={`second-level-${randomIndex}-${submenu.id}`}
+
                               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, parentKey: submenu.path || submenu.caption }, index);
+                                      onMenuClick(menu, index);
                                     }}
-                                    // key={`second-level-${randomIndex}-${index}`}
-
-                                    key={menu.path || menu.caption}
+                                    key={`second-level-${randomIndex}-${index}`}
                                   >
+
                                     <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, parentKey: menu.path || menu.caption }, index);
+                                onMenuClick(submenu, index);
                               }}
-                              // key={`first-level-${randomIndex}-${innerIndex}`}
-                              key={submenu.path || submenu.caption}
+                              key={`first-level-${randomIndex}-${innerIndex}`}
                             >
+
                               <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);
-                      // }}
 
+                    <Menu.Item
                       onClick={() => {
-                        onMenuClick({ ...menu, parentKey: menu.path || menu.caption }, index);
+                        onMenuClick(menu, index);
                       }}
-                      // key={`${menu.id}-${randomIndex}`}
-                      key={menu.path || menu.caption}
+                      key={`${menu.id}-${randomIndex}`}
                     >
-                      <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 */}
@@ -473,14 +570,16 @@ export default function SideMenu({ loading, modules = [], callback, appSettings,
  * 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
@@ -492,7 +591,9 @@ 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>
       );
@@ -510,5 +611,7 @@ function MenuItem({ menu, index, history }) {
     }
   }
 
+
   return renderMenus({ menu, index });
-}
+
+}