feat(fe-piattaforma): fe updates 08102022

teamdigitale · Aug 10, 2022 · 30d2726 · 30d2726
2 parents ee0f3c8 + c2ac78f
commit 30d2726
Show file tree

Hide file tree

Showing 19 changed files with 425 additions and 272 deletions.
diff --git a/fe-piattaforma/src/components/Breadcrumb/breadCrumb.tsx b/fe-piattaforma/src/components/Breadcrumb/breadCrumb.tsx
@@ -12,6 +12,9 @@ import {
   selectBreadcrumb,
   selectInfoIdsBreadcrumb,
 } from '../../redux/features/app/appSlice';
+import { useAppSelector } from '../../redux/hooks';
+import { selectProfile } from '../../redux/features/user/userSlice';
+import { userRoles } from '../../pages/administrator/AdministrativeArea/Entities/utils';
 
 export interface BreadcrumbI {
   label?: string;
@@ -20,6 +23,7 @@ export interface BreadcrumbI {
 }
 
 const Breadcrumb = () => {
+  const userProfile = useAppSelector(selectProfile);
   const breadcrumbList = useSelector(selectBreadcrumb);
   const idsBreadcrumb = useSelector(selectInfoIdsBreadcrumb);
   const urlCurrentLocation = useLocation().pathname;
@@ -90,13 +94,26 @@ const Breadcrumb = () => {
             newList.push({
               label: getLabelBreadcrumb(elem),
               url: createUrl(index),
-              link: index !== 0 && index !== currentLocation?.length - 2,
+              link:
+                (userProfile?.codiceRuolo === userRoles.REGP &&
+                  getLabelBreadcrumb(elem) === 'Progetti') ||
+                ((userProfile?.codiceRuolo === userRoles.REG ||
+                  userProfile?.codiceRuolo === userRoles.REGP) &&
+                  getLabelBreadcrumb(elem) === 'Programmi')
+                  ? false
+                  : index !== 0 && index !== currentLocation?.length - 2,
             });
           } else if (currentLocation?.length <= 3) {
             newList.push({
               label: getLabelBreadcrumb(elem),
               url: createUrl(index),
-              link: index !== 0 && index !== currentLocation?.length - 1,
+              link:
+                (userProfile?.codiceRuolo === userRoles.REGP &&
+                  getLabelBreadcrumb(elem) === 'Progetti') ||
+                (userProfile?.codiceRuolo === userRoles.REG &&
+                  getLabelBreadcrumb(elem) === 'Programmi')
+                  ? false
+                  : index !== 0 && index !== currentLocation?.length - 1,
             });
           }
         }

diff --git a/fe-piattaforma/src/components/HamburgerMenu/hamburgerMenu.tsx b/fe-piattaforma/src/components/HamburgerMenu/hamburgerMenu.tsx
@@ -2,23 +2,24 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/anchor-is-valid */
 
+import React, { useEffect, useState } from 'react';
 import clsx from 'clsx';
 import { Button, Collapse, Icon, LinkList } from 'design-react-kit';
-import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import ClickOutside from '../../hoc/ClickOutside';
 import './hamburgerMenu.scss';
+import ClickOutside from '../../hoc/ClickOutside';
 import LogoSmall from '/public/assets/img/logo-mobile.png';
-import { focusId, MenuRoutes } from '../../utils/common';
+import { focusId, MenuItem } from '../../utils/common';
 import useGuard from '../../hooks/guard';
 
 interface HBMenuProps {
   open: boolean;
   setOpen: (state: boolean) => void;
+  menuRoutes: MenuItem[];
 }
 
 const HamburgerMenu: React.FC<HBMenuProps> = (props) => {
-  const { open, setOpen } = props;
+  const { open, setOpen, menuRoutes = [] } = props;
   const { hasUserPermission } = useGuard();
 
   const [collapseOpen, setCollapseOpen] = useState(false);
@@ -46,8 +47,8 @@ const HamburgerMenu: React.FC<HBMenuProps> = (props) => {
             id='hamburger'
           >
             <ul>
-              {(MenuRoutes || [])
-                .filter(({ visible }) => hasUserPermission(visible))
+              {menuRoutes
+                .filter(({ visible = [] }) => hasUserPermission(visible))
                 .map((link, index: number) => {
                   return link.subRoutes?.length ? (
                     <React.Fragment key={index}>

diff --git a/fe-piattaforma/src/components/Header/header.tsx b/fe-piattaforma/src/components/Header/header.tsx
@@ -1,16 +1,20 @@
-import React, { memo } from 'react';
+import React, { memo, useEffect, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { isEmpty } from 'lodash';
 import { useAppSelector } from '../../redux/hooks';
 import {
   selectUserNotification,
   selectUser,
   UserStateI,
   selectProfile,
+  UserProfileI,
 } from '../../redux/features/user/userSlice';
-import { useDispatch } from 'react-redux';
 import { selectDevice } from '../../redux/features/app/appSlice';
 import HeaderMobile from './view/headerMobile';
 import HeaderDesktop from './view/headerDesktop';
-import { isEmpty } from 'lodash';
+import SwitchProfileModal from '../Modals/SwitchProfileModal/switchProfileModal';
+import { MenuItem, MenuRoutes } from '../../utils/common';
+import { userRoles } from '../../pages/administrator/AdministrativeArea/Entities/utils';
 
 export interface HeaderI {
   isHeaderFull?: boolean | undefined;
@@ -19,15 +23,67 @@ export interface HeaderI {
   userProfile: UserStateI['profilo'];
   isLogged: boolean;
   notification?: [] | undefined;
+  menuRoutes: MenuItem[];
 }
 
 export interface HeaderProp {
   isHeaderFull?: boolean;
 }
 
+const parseMenuRoute = (menuRoute: MenuItem, userProfile: UserProfileI) => {
+  switch (userProfile?.codiceRuolo) {
+    case userRoles.REG: {
+      if (userProfile?.idProgramma && menuRoute.path === '/area-amministrativa/programmi') {
+        return {
+          ...menuRoute,
+          label: 'Programma',
+          path: `/area-amministrativa/programmi/${userProfile.idProgramma}/info`,
+        };
+      }
+      return menuRoute;
+    }
+    case userRoles.REGP: {
+      if (userProfile?.idProgetto && menuRoute.path === '/area-amministrativa/progetti') {
+        return {
+          ...menuRoute,
+          label: 'Progetto',
+          path: `/area-amministrativa/progetti/${userProfile.idProgetto}/info`,
+        };
+      } else if (userProfile?.idProgramma && menuRoute.path === '/area-amministrativa/programmi') {
+        return {
+          ...menuRoute,
+          label: 'Programma',
+          path: `/area-amministrativa/programmi/${userProfile.idProgramma}/info`,
+        };
+      }
+      return menuRoute;
+    }
+    default:
+      return menuRoute;
+  }
+};
+
+const getRoleMenuRoutes = (userProfile?: UserProfileI | null) => {
+  let roleMenuRoutes: MenuItem[] = MenuRoutes;
+  if (userProfile) {
+    roleMenuRoutes = MenuRoutes.map((menuRoute) => {
+      if (menuRoute.subRoutes?.length) {
+        return {
+          ...parseMenuRoute(menuRoute, userProfile),
+          subRoutes: menuRoute.subRoutes.map((subRoute) =>
+            parseMenuRoute(subRoute, userProfile)
+          ),
+        };
+      }
+      return parseMenuRoute(menuRoute, userProfile);
+    });
+  }
+  return roleMenuRoutes;
+};
+
 const Header: React.FC<HeaderProp> = (props) => {
   const { isHeaderFull } = props;
-
+  const [menuRoutes, setMenuRoutes] = useState<MenuItem[]>(MenuRoutes);
   const isLogged = useAppSelector((state) => state.user.isLogged);
   const user = useAppSelector(selectUser);
   const userProfile = useAppSelector(selectProfile);
@@ -37,19 +93,29 @@ const Header: React.FC<HeaderProp> = (props) => {
 
   const device = useAppSelector(selectDevice);
 
+  useEffect(() => {
+    if (isLogged) setMenuRoutes(getRoleMenuRoutes(userProfile));
+  }, [isLogged, userProfile]);
+
   const componentProps = {
     notification,
     isLogged,
     user,
     userProfile,
     dispatch,
     isHeaderFull,
+    menuRoutes,
   };
 
-  return isEmpty(device) ? null : device.mediaIsDesktop ? (
-    <HeaderDesktop {...componentProps} />
-  ) : (
-    <HeaderMobile {...componentProps} />
+  return (
+    <>
+      {isEmpty(device) ? null : device.mediaIsDesktop ? (
+        <HeaderDesktop {...componentProps} />
+      ) : (
+        <HeaderMobile {...componentProps} />
+      )}
+      <SwitchProfileModal />
+    </>
   );
 };
 export default memo(Header);
diff --git a/fe-piattaforma/src/components/Header/view/headerDesktop.tsx b/fe-piattaforma/src/components/Header/view/headerDesktop.tsx
@@ -19,12 +19,12 @@ import { HeaderI } from '../header';
 import { logout } from '../../../redux/features/user/userSlice';
 import HeaderMenu from '../../HeaderMenu/headerMenu';
 import { openModal } from '../../../redux/features/modal/modalSlice';
-import SwitchProfileModal from '../../Modals/SwitchProfileModal/switchProfileModal';
 import AvatarInitials, {
   AvatarSizes,
   AvatarTextSizes,
 } from '../../AvatarInitials/avatarInitials';
 import useGuard from '../../../hooks/guard';
+import { defaultRedirectUrl } from '../../../routes';
 
 const HeaderDesktop: React.FC<HeaderI> = ({
   isHeaderFull = true,
@@ -33,6 +33,7 @@ const HeaderDesktop: React.FC<HeaderI> = ({
   userProfile,
   isLogged,
   notification,
+                                            menuRoutes,
 }) => {
   //const languages = ['ITA', 'ENG'];
 
@@ -222,8 +223,7 @@ const HeaderDesktop: React.FC<HeaderI> = ({
                         'text-nowrap'
                       )}
                     >
-                      {' '}
-                      {t('role_management')}{' '}
+                      {t('role_management')}
                     </h6>
                   </div>
                 </a>
@@ -340,7 +340,7 @@ const HeaderDesktop: React.FC<HeaderI> = ({
                 'pt-3'
               )}
             >
-              <Link to='/' replace>
+              <Link to={defaultRedirectUrl} replace>
                 <img src={Logo} alt='logo' />
               </Link>
             </div>
@@ -398,10 +398,9 @@ const HeaderDesktop: React.FC<HeaderI> = ({
       )}
       {isLogged ? (
         <div className='header-container__nav primary-bg pt-2'>
-          <HeaderMenu isHeaderFull={isHeaderFull} />
+          <HeaderMenu isHeaderFull={isHeaderFull} menuRoutes={menuRoutes} />
         </div>
       ) : null}
-      <SwitchProfileModal />
     </header>
   );
 };

diff --git a/fe-piattaforma/src/components/Header/view/headerMobile.tsx b/fe-piattaforma/src/components/Header/view/headerMobile.tsx
@@ -14,19 +14,20 @@ import Bell from '/public/assets/img/campanella.png';
 import { HeaderI } from '../header';
 import { logout } from '../../../redux/features/user/userSlice';
 import HamburgerMenu from '../../HamburgerMenu/hamburgerMenu';
-import SwitchProfileModal from '../../Modals/SwitchProfileModal/switchProfileModal';
 import { openModal } from '../../../redux/features/modal/modalSlice';
 import AvatarInitials, {
   AvatarSizes,
   AvatarTextSizes,
 } from '../../AvatarInitials/avatarInitials';
+import { defaultRedirectUrl } from '../../../routes';
 
 const HeaderMobile: React.FC<HeaderI> = ({
   dispatch,
   user,
   userProfile,
   isLogged,
   notification,
+  menuRoutes,
 }) => {
   const [openUser, setOpenUser] = useState<boolean>(false);
   const navigate = useNavigate();
@@ -61,7 +62,9 @@ const HeaderMobile: React.FC<HeaderI> = ({
           <div className='d-flex flex-row justify-content-start'>
             <p className='h6 text-wrap font-weight-light'>
               {/*<em>{getRoleLabel(userProfile?.codiceRuolo)}</em>*/}
-              <em>{`${userProfile?.descrizioneRuolo}${userProfile?.nomeEnte ? ` ${userProfile.nomeEnte}`: ''}`}</em>
+              <em>{`${userProfile?.descrizioneRuolo}${
+                userProfile?.nomeEnte ? ` ${userProfile.nomeEnte}` : ''
+              }`}</em>
             </p>
           </div>
         </div>
@@ -161,7 +164,7 @@ const HeaderMobile: React.FC<HeaderI> = ({
             'w-100'
           )}
         >
-          <HamburgerMenu open={isOpen} setOpen={setIsOpen} />
+          <HamburgerMenu open={isOpen} setOpen={setIsOpen} menuRoutes={menuRoutes} />
           <div
             className={clsx(
               'd-flex',
@@ -226,7 +229,7 @@ const HeaderMobile: React.FC<HeaderI> = ({
               'ml-2'
             )}
           >
-            <Link to='/' replace>
+            <Link to={defaultRedirectUrl} replace>
               <img src={LogoMobile} alt='logo' />
             </Link>
           </div>
@@ -255,7 +258,6 @@ const HeaderMobile: React.FC<HeaderI> = ({
           ) : null}
         </div>
       </div>
-      <SwitchProfileModal />
     </header>
   );
 };