From 4abce7b5df77142abcf731a1bcb9abd25fef4505 Mon Sep 17 00:00:00 2001 From: Norbert Herczeg Date: Fri, 22 Sep 2023 01:22:43 +0200 Subject: [PATCH] JNG-5219 refactor layout --- .../SimpleBar.tsx.hbs | 30 +-- .../actor/src/components/index.tsx.hbs | 1 + .../resources/actor/src/config/layout.ts.hbs | 1 - .../DrawerContent/Navigation/Dot.tsx.hbs | 32 --- .../Navigation/NavCollapse.tsx.hbs | 170 +++---------- .../DrawerContent/Navigation/NavGroup.tsx.hbs | 156 ++---------- .../DrawerContent/Navigation/NavItem.tsx.hbs | 227 +++++------------- .../DrawerContent/Navigation/index.tsx.hbs | 46 +--- .../layout/Drawer/DrawerContent/index.tsx.hbs | 2 +- .../HeaderContent/Customization/index.tsx.hbs | 3 +- .../HeaderContent/Profile/ProfileTab.tsx.hbs | 191 --------------- .../HeaderContent/Profile/SettingTab.tsx.hbs | 47 ---- .../HeaderContent/Profile/index.tsx.hbs | 116 ++------- .../src/main/resources/ui-react.yaml | 20 +- 14 files changed, 169 insertions(+), 873 deletions(-) rename judo-ui-react/src/main/resources/actor/src/{layout/Drawer/DrawerContent => components}/SimpleBar.tsx.hbs (74%) delete mode 100644 judo-ui-react/src/main/resources/actor/src/layout/Drawer/DrawerContent/Navigation/Dot.tsx.hbs delete mode 100644 judo-ui-react/src/main/resources/actor/src/layout/Header/HeaderContent/Profile/ProfileTab.tsx.hbs delete mode 100644 judo-ui-react/src/main/resources/actor/src/layout/Header/HeaderContent/Profile/SettingTab.tsx.hbs diff --git a/judo-ui-react/src/main/resources/actor/src/layout/Drawer/DrawerContent/SimpleBar.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/components/SimpleBar.tsx.hbs similarity index 74% rename from judo-ui-react/src/main/resources/actor/src/layout/Drawer/DrawerContent/SimpleBar.tsx.hbs rename to judo-ui-react/src/main/resources/actor/src/components/SimpleBar.tsx.hbs index 795f3816..df8303d0 100644 --- a/judo-ui-react/src/main/resources/actor/src/layout/Drawer/DrawerContent/SimpleBar.tsx.hbs +++ b/judo-ui-react/src/main/resources/actor/src/components/SimpleBar.tsx.hbs @@ -1,46 +1,47 @@ {{> fragment.header.hbs }} +import { forwardRef } from 'react'; +import type { ReactNode } from 'react'; import { alpha, styled } from '@mui/material/styles'; import { Box } from '@mui/material'; import type { Theme } from '@mui/material'; +import type { MUIStyledCommonProps } from '@mui/system'; import { default as SimpleBarOriginal } from 'simplebar-react'; import type { Props as SimpleBarProps } from 'simplebar-react'; import { BrowserView, MobileView } from 'react-device-detect'; -import type { MUIStyledCommonProps } from '@mui/system'; -import type { ReactNode } from 'react'; import 'simplebar-react/dist/simplebar.min.css'; const RootStyle = styled(BrowserView)({ flexGrow: 1, height: '100%', - overflow: 'hidden' + overflow: 'hidden', }); export const SimpleBarStyle = styled(SimpleBarOriginal)(({ theme }) => ({ maxHeight: '100%', '& .simplebar-scrollbar': { '&:before': { - backgroundColor: alpha(theme.palette.grey[500], 0.48) + backgroundColor: alpha(theme.palette.grey[500], 0.48), }, '&.simplebar-visible:before': { - opacity: 1 - } + opacity: 1, + }, }, '& .simplebar-track.simplebar-vertical': { - width: 10 + width: 10, }, '& .simplebar-track.simplebar-horizontal .simplebar-scrollbar': { - height: 6 + height: 6, }, '& .simplebar-mask': { - zIndex: 'inherit' - } + zIndex: 'inherit', + }, })); -export function SimpleBar({ children, sx, ...other }: MUIStyledCommonProps & SimpleBarProps) { +export const SimpleBar = forwardRef & SimpleBarProps>(({ children, sx, ...other }: MUIStyledCommonProps & SimpleBarProps, ref) => { return ( - <> +
{children as ReactNode} @@ -51,6 +52,7 @@ export function SimpleBar({ children, sx, ...other }: MUIStyledCommonProps - +
); -} +}); + diff --git a/judo-ui-react/src/main/resources/actor/src/components/index.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/components/index.tsx.hbs index 99b7ace2..cf88beaf 100644 --- a/judo-ui-react/src/main/resources/actor/src/components/index.tsx.hbs +++ b/judo-ui-react/src/main/resources/actor/src/components/index.tsx.hbs @@ -7,3 +7,4 @@ export * from './DropdownButton'; export * from './MdiIcon'; export * from './ModeledTabs'; export * from './PageHeader'; +export * from './SimpleBar'; diff --git a/judo-ui-react/src/main/resources/actor/src/config/layout.ts.hbs b/judo-ui-react/src/main/resources/actor/src/config/layout.ts.hbs index d811694d..81ef91f1 100644 --- a/judo-ui-react/src/main/resources/actor/src/config/layout.ts.hbs +++ b/judo-ui-react/src/main/resources/actor/src/config/layout.ts.hbs @@ -1,7 +1,6 @@ {{> fragment.header.hbs }} export const DIVIDER_HEIGHT = 70; -export const HORIZONTAL_MAX_ITEM = 6; export const DRAWER_WIDTH = 260; export type I18n = 'en' | 'hu'; // not used yet, will be implemented later, once we need language switching. diff --git a/judo-ui-react/src/main/resources/actor/src/layout/Drawer/DrawerContent/Navigation/Dot.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/layout/Drawer/DrawerContent/Navigation/Dot.tsx.hbs deleted file mode 100644 index e70f1b28..00000000 --- a/judo-ui-react/src/main/resources/actor/src/layout/Drawer/DrawerContent/Navigation/Dot.tsx.hbs +++ /dev/null @@ -1,32 +0,0 @@ -{{> fragment.header.hbs }} - -import { useTheme } from '@mui/material/styles'; -import type { CSSObject, PaletteColor } from '@mui/material/styles'; -import { Box } from '@mui/material'; -import type { Palette } from '@mui/material'; - -export interface DotProps { - color: keyof Palette; - size?: number; - variant?: string; - sx?: CSSObject; -} - -export const Dot = ({ color, size, variant, sx }: DotProps) => { - const theme = useTheme(); - - return ( - - ); -}; diff --git a/judo-ui-react/src/main/resources/actor/src/layout/Drawer/DrawerContent/Navigation/NavCollapse.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/layout/Drawer/DrawerContent/Navigation/NavCollapse.tsx.hbs index 10f75f2a..eb149677 100644 --- a/judo-ui-react/src/main/resources/actor/src/layout/Drawer/DrawerContent/Navigation/NavCollapse.tsx.hbs +++ b/judo-ui-react/src/main/resources/actor/src/layout/Drawer/DrawerContent/Navigation/NavCollapse.tsx.hbs @@ -1,7 +1,7 @@ {{> fragment.header.hbs }} -import { useEffect, useState, useMemo } from 'react'; -import type { Dispatch, MouseEvent, SetStateAction } from 'react'; +import { useState } from 'react'; +import type { MouseEvent } from 'react'; import { useJudoNavigation } from '~/components'; import { useTranslation } from 'react-i18next'; import { styled, useTheme } from '@mui/material/styles'; @@ -20,10 +20,8 @@ import { } from '@mui/material'; import { useConfig } from '~/hooks'; import { MenuOrientation, ThemeMode } from '~/config'; -import { MdiIcon } from '~/components'; +import { MdiIcon, SimpleBar } from '~/components'; import { NavItem } from './NavItem'; -import { Dot } from './Dot'; -import { SimpleBar } from '../SimpleBar'; import { Transitions } from '../../../Transitions'; import { NavItemType } from './NavItem'; @@ -56,31 +54,29 @@ export interface NavCollapseProps { menu: NavItemType; level: number; parentId: string; - setSelectedItems: Dispatch>; - selectedItems: string | undefined; - setSelectedLevel: Dispatch>; - selectedLevel: number; } -export const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedItems, setSelectedLevel, selectedLevel }: NavCollapseProps) => { +export const NavCollapse = ({ menu, level, parentId }: NavCollapseProps) => { const { t } = useTranslation(); const theme = useTheme(); const { navigate } = useJudoNavigation(); const { menuOrientation, miniDrawer } = useConfig(); - const downLG = useMediaQuery(theme.breakpoints.down('lg')); - const [open, setOpen] = useState(false); - const [selected, setSelected] = useState(null); const [anchorEl, setAnchorEl] = useState VirtualElement) | null | undefined>(null); + const miniMenuOpened = Boolean(anchorEl); + const simpleBarSx = { + overflowX: 'hidden', + overflowY: 'auto', + maxHeight: 'calc(100vh - 170px)', + }; + const iconSize = 36; + const iconSizeSmall = 18; const handleClick = (event: MouseEvent) => { setAnchorEl(null); - setSelectedLevel(level); if (!miniDrawer) { setOpen(!open); - setSelected(!selected ? menu.id : null); - setSelectedItems(!selected ? menu.id : ''); if (menu.url) navigate(`${menu.url}`); } else { setAnchorEl(event?.currentTarget); @@ -90,144 +86,71 @@ export const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedI const handlerIconLink = () => { if (miniDrawer) { if (menu.url) navigate(`${menu.url}`); - setSelected(menu.id); } }; const handleHover = (event: MouseEvent) => { setAnchorEl(event?.currentTarget); - if (miniDrawer) { - setSelected(menu.id); - } }; - const miniMenuOpened = Boolean(anchorEl); - const handleClose = () => { setOpen(false); - if (!miniMenuOpened) { - if (!menu.url) { - setSelected(null); - } - } setAnchorEl(null); }; - useMemo(() => { - if (selected === selectedItems) { - if (level === 1) { - setOpen(true); - } - } else { - if (level === selectedLevel) { - setOpen(false); - if (!miniMenuOpened && miniDrawer && !selected) { - setSelected(null); - } - if (!miniDrawer) { - setSelected(null); - } - } - } - }, [selectedItems, level, selected, miniMenuOpened, !miniDrawer, selectedLevel]); - const navCollapse = menu.children?.map((item) => { switch (item.type) { case 'collapse': return ( - + ); case 'item': return ; default: return ( - Fix - Collapse or Item + Unhandled NavItemType! ); } }); - const isSelected = selected === menu.id; - const borderIcon = level === 1 ? : false; - const menuIcon = menu.icon ? ( - - ) : ( - borderIcon - ); + const borderIcon = level === 1 ? : null; + const menuIcon = menu.icon ? : (miniDrawer && menuOrientation === MenuOrientation.VERTICAL) ? borderIcon : null; const textColor = theme.palette.mode === ThemeMode.DARK ? 'grey.400' : 'text.primary'; - const iconSelectedColor = theme.palette.mode === ThemeMode.DARK && !miniDrawer ? theme.palette.text.primary : theme.palette.primary.main; const popperId = miniMenuOpened ? `collapse-pop-${menu.id}` : undefined; - const FlexBox = { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }; + const boxSx = { display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%' }; + return ( <> {menuOrientation === MenuOrientation.VERTICAL || downLG ? ( <> {menuIcon && ( {menuIcon} @@ -236,28 +159,14 @@ export const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedI {(!miniDrawer || (miniDrawer && level !== 1)) && ( + {t(`menuTree.${menu.title}`, { defaultValue: menu.title })} } - secondary={ - menu.caption && ( - - {menu.caption} - - ) - } /> )} {(!miniDrawer || (miniDrawer && level !== 1)) && - (miniMenuOpened || open ? ( - - ) : ( - - ))} + } {miniDrawer && ( - + {navCollapse} @@ -316,7 +219,6 @@ export const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedI - + {menuIcon && ( - + {menuIcon} )} @@ -337,12 +239,12 @@ export const NavCollapse = ({ menu, level, parentId, setSelectedItems, selectedI - + )} - + {navCollapse} diff --git a/judo-ui-react/src/main/resources/actor/src/layout/Drawer/DrawerContent/Navigation/NavGroup.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/layout/Drawer/DrawerContent/Navigation/NavGroup.tsx.hbs index cd8feb95..d70aa385 100644 --- a/judo-ui-react/src/main/resources/actor/src/layout/Drawer/DrawerContent/Navigation/NavGroup.tsx.hbs +++ b/judo-ui-react/src/main/resources/actor/src/layout/Drawer/DrawerContent/Navigation/NavGroup.tsx.hbs @@ -1,7 +1,7 @@ {{> fragment.header.hbs }} -import { Fragment, useEffect, useState } from 'react'; -import type { MouseEvent, Dispatch, SetStateAction } from 'react'; +import { useState } from 'react'; +import type { MouseEvent } from 'react'; import { useTranslation } from 'react-i18next'; import { useTheme, styled } from '@mui/material/styles'; import { @@ -14,14 +14,13 @@ import { Paper, Popper, Typography, - useMediaQuery + useMediaQuery, } from '@mui/material'; import { useConfig } from '~/hooks'; import { MenuOrientation, ThemeMode } from '~/config'; -import { MdiIcon } from '~/components'; +import { MdiIcon, SimpleBar } from '~/components'; import { NavItem } from './NavItem'; import { NavCollapse } from './NavCollapse'; -import { SimpleBar } from '../SimpleBar'; import { Transitions } from '../../../Transitions'; import { NavItemType } from './NavItem'; @@ -45,47 +44,21 @@ const PopperStyled = styled(Popper)(({ theme }) => ({ transform: 'translateY(-50%) rotate(45deg)', zIndex: 120, backgroundColor: theme.palette.background.paper, - } + }, })); export interface NavGroupProps { item: NavItemType; - lastItem: number; - remItems: NavItemType[]; - lastItemId: string; - setSelectedItems: Dispatch>; - selectedItems: string | undefined; - setSelectedLevel: Dispatch>; - selectedLevel: number; } -export const NavGroup = ({ item, lastItem, remItems, lastItemId, setSelectedItems, selectedItems, setSelectedLevel, selectedLevel }: NavGroupProps) => { +export const NavGroup = ({ item }: NavGroupProps) => { const theme = useTheme(); const { t } = useTranslation(); - const { menuOrientation, miniDrawer, onChangeMiniDrawer } = useConfig(); - const selectedID = 'TODO'; // TODO JNG-5207 - const downLG = useMediaQuery(theme.breakpoints.down('lg')); - const [anchorEl, setAnchorEl] = useState VirtualElement) | null | undefined>(null); - const [currentItem, setCurrentItem] = useState(item); - const openMini = Boolean(anchorEl); - useEffect(() => { - if (lastItem) { - if (item.id === lastItemId) { - const localItem: any = { ...item }; - const elements = remItems.map((ele: NavItemType) => ele.elements); - localItem.children = elements.flat(1); - setCurrentItem(localItem); - } else { - setCurrentItem(item); - } - } - }, [item, lastItem, downLG]); - const handleClick = (event: MouseEvent) => { if (!openMini) { setAnchorEl(event?.currentTarget); @@ -96,95 +69,21 @@ export const NavGroup = ({ item, lastItem, remItems, lastItemId, setSelectedItem setAnchorEl(null); }; - const itemIcon = currentItem?.icon ? ( + const itemIcon = item?.icon ? ( ) : null; - const navCollapse = item.children?.map((menuItem, index) => { - switch (menuItem.type) { - case 'collapse': - return ( - - ); - case 'item': - return ; - default: - return ( - - Fix - Group Collapse or Items - - ); - } - }); - - const moreItems = remItems.map((itemRem: NavItemType, i) => ( - - {itemRem.title && ( - - {t(`menuTree.${itemRem.title}`, { defaultValue: itemRem.title })} - - )} - {itemRem?.elements?.map((menu) => { - switch (menu.type) { - case 'collapse': - return ( - - ); - case 'item': - return ; - default: - return ( - - Menu Items Error - - ); - } - })} - - )); - - // menu list collapse & items - const items = currentItem.children?.map((menu) => { + const items = item.children?.map((menu) => { switch (menu.type) { case 'collapse': - return ( - - ); + return ; case 'item': return ; default: @@ -209,22 +108,16 @@ export const NavGroup = ({ item, lastItem, remItems, lastItemId, setSelectedItem {t(`menuTree.${item.title}`, { defaultValue: item.title })} - {item.caption && ( - - {item.caption} - - )} ) } sx={ { mt: !miniDrawer && item.title ? 1.5 : 0, py: 0, zIndex: 0 } } > - {navCollapse} + {items} ) : ( {itemIcon && ( - {currentItem.id === lastItemId ? : itemIcon} + {itemIcon} )} - {currentItem.id === lastItemId ? t('judo.navigation.more-items', { defaultValue: 'More Items' }) : t(`menuTree.${currentItem.title}`, { defaultValue: currentItem.title })} + + {t(`menuTree.${item.title}`, { defaultValue: item.title })} } /> - {openMini ? ( - - ) : ( - - )} + {anchorEl && ( {({ TransitionProps }) => ( @@ -279,7 +165,7 @@ export const NavGroup = ({ item, lastItem, remItems, lastItemId, setSelectedItem mt: 0.5, py: 1.25, boxShadow: theme.shadows[8], - backgroundImage: 'none' + backgroundImage: 'none', } } > @@ -287,10 +173,10 @@ export const NavGroup = ({ item, lastItem, remItems, lastItemId, setSelectedItem sx={ { overflowX: 'hidden', overflowY: 'auto', - maxHeight: 'calc(100vh - 170px)' + maxHeight: 'calc(100vh - 170px)', } } > - {currentItem.id !== lastItemId ? items : moreItems} + {items} diff --git a/judo-ui-react/src/main/resources/actor/src/layout/Drawer/DrawerContent/Navigation/NavItem.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/layout/Drawer/DrawerContent/Navigation/NavItem.tsx.hbs index f99e54f9..1e8df17e 100644 --- a/judo-ui-react/src/main/resources/actor/src/layout/Drawer/DrawerContent/Navigation/NavItem.tsx.hbs +++ b/judo-ui-react/src/main/resources/actor/src/layout/Drawer/DrawerContent/Navigation/NavItem.tsx.hbs @@ -5,31 +5,20 @@ import type { ForwardRefExoticComponent, RefAttributes, ReactNode } from 'react' import { Link } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import { useTheme } from '@mui/material/styles'; -import { Avatar, Chip, ListItemButton, ListItemIcon, ListItemText, Typography, useMediaQuery } from '@mui/material'; -import type { ChipProps } from '@mui/material'; -import { Dot } from './Dot'; +import { ListItemButton, ListItemIcon, ListItemText, Typography, useMediaQuery } from '@mui/material'; import { useConfig } from '~/hooks'; import { MenuOrientation, ThemeMode } from '~/config'; import { MdiIcon, useJudoNavigation } from '~/components'; -export type LinkTarget = '_blank' | '_self' | '_parent' | '_top'; - export type NavItemType = { - breadcrumbs?: boolean; - caption?: ReactNode | string; - children?: NavItemType[]; - elements?: NavItemType[]; - chip?: ChipProps; - color?: 'primary' | 'secondary' | 'default' | undefined; - disabled?: boolean; - icon?: string; id?: string; - search?: string; - target?: boolean; title?: ReactNode | string; - type?: string; url?: string; + icon?: string; + disabled?: boolean; hiddenBy?: string; + children?: NavItemType[]; + type?: 'group' | 'collapse' | 'item'; }; export interface NavItemProps { @@ -42,208 +31,121 @@ export const NavItem = ({ item, level }: NavItemProps) => { const { clearNavigate } = useJudoNavigation(); const { menuOrientation, miniDrawer, onChangeMiniDrawer } = useConfig(); const theme = useTheme(); - - const matchDownLg = useMediaQuery(theme.breakpoints.down('lg')); const downLG = useMediaQuery(theme.breakpoints.down('lg')); + const textColor = theme.palette.mode === ThemeMode.DARK ? 'grey.400' : 'text.primary'; + const iconWidth = 28; + const iconSize = 36; + const borderRadius = 1.5; + const iconPropsHorizontal = { + borderRadius: borderRadius, + alignItems: 'center', + justifyContent: 'flex-start', + '&:hover': { + bgcolor: 'transparent', + }, + }; + const iconPropsVertical = { + borderRadius: borderRadius, + alignItems: 'center', + justifyContent: 'center', + '&:hover': { + bgcolor: theme.palette.mode === ThemeMode.DARK ? 'secondary.light' : 'secondary.lighter', + }, + }; - let itemTarget: LinkTarget = '_self'; - if (item.target) { - itemTarget = '_blank'; - } - - let listItemProps: { - component: ForwardRefExoticComponent> | string; - href?: string; - target?: LinkTarget; - } = { component: forwardRef((props, ref) => ( + const LinkComponent: ForwardRefExoticComponent> = forwardRef((props, ref) => ( { - // menu item-based navigations should always clear the breadcrumbs - e.preventDefault(); - e.stopPropagation(); - clearNavigate(item.url!); + // menu item-based navigations should always clear the breadcrumbs + e.preventDefault(); + e.stopPropagation(); + clearNavigate(item.url!); } } /> - )) }; - - const itemIcon = item.icon ? : false; - const isSelected = false; // TODO JNG-5207 - const textColor = theme.palette.mode === ThemeMode.DARK ? 'grey.400' : 'text.primary'; - const iconSelectedColor = theme.palette.mode === ThemeMode.DARK && !miniDrawer ? 'text.primary' : 'primary.main'; + )); return ( <> {menuOrientation === MenuOrientation.VERTICAL || downLG ? ( onChangeMiniDrawer(true) + {...(downLG && { + onClick: () => onChangeMiniDrawer(true), })} > - {itemIcon && ( + {item.icon && ( - {itemIcon} + )} {(!miniDrawer || (miniDrawer && level !== 1)) && ( + {t(`menuTree.${item.title}`, { defaultValue: item.title })} } /> )} - {(!miniDrawer || (miniDrawer && level !== 1)) && item.chip && ( - {item.chip.avatar}} - /> - )} ) : ( - {itemIcon && ( + {item.icon && ( - {itemIcon} + )} - {!itemIcon && ( + {!item.icon && ( - + )} { } /> - {(!miniDrawer || (miniDrawer && level !== 1)) && item.chip && ( - {item.chip.avatar}} - /> - )} )} diff --git a/judo-ui-react/src/main/resources/actor/src/layout/Drawer/DrawerContent/Navigation/index.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/layout/Drawer/DrawerContent/Navigation/index.tsx.hbs index f3b55406..a9742c29 100644 --- a/judo-ui-react/src/main/resources/actor/src/layout/Drawer/DrawerContent/Navigation/index.tsx.hbs +++ b/judo-ui-react/src/main/resources/actor/src/layout/Drawer/DrawerContent/Navigation/index.tsx.hbs @@ -8,7 +8,7 @@ import { Box, Typography, useMediaQuery } from '@mui/material'; import { {{ classDataName application.principal 'Stored' }} } from '~/generated/data-api'; {{/ if }} import { useConfig } from '~/hooks'; -import { HORIZONTAL_MAX_ITEM, MenuOrientation } from '~/config'; +import { MenuOrientation } from '~/config'; import { NavGroup } from './NavGroup'; import { NavItem } from './NavItem'; import { menus } from './menu-items'; @@ -16,12 +16,8 @@ import { NavItemType } from './NavItem'; export const Navigation = () => { const theme = useTheme(); - const downLG = useMediaQuery(theme.breakpoints.down('lg')); - - const { menuOrientation, miniDrawer } = useConfig(); - const [selectedItems, setSelectedItems] = useState(''); - const [selectedLevel, setSelectedLevel] = useState(0); + const { menuOrientation, miniDrawer } = useConfig(); const [menuItems, setMenuItems] = useState(menus); {{# if application.authentication }} @@ -40,7 +36,7 @@ export const Navigation = () => { const clone: NavItemType = { ...item, children: Array.isArray(item.children) && item.children.length ? [] : undefined, - } + }; target.push(clone); if (Array.isArray(item.children) && item.children.length) { @@ -51,43 +47,19 @@ export const Navigation = () => { }; useEffect(() => { - const filteredMenus: NavItemType[] = []; - handlerMenuItems(menus, filteredMenus); - setMenuItems(filteredMenus); - }, [{{# if application.authentication }}principal{{/ if }}]); + const filteredMenus: NavItemType[] = []; + handlerMenuItems(menus, filteredMenus); + setMenuItems(filteredMenus); + }, [{{# if application.authentication }}principal{{/ if }}]); const isHorizontal = menuOrientation === MenuOrientation.HORIZONTAL && !downLG; - - const lastItem = isHorizontal ? HORIZONTAL_MAX_ITEM : null; let lastItemIndex = menuItems.length - 1; - let remItems: NavItemType[] = []; - let lastItemId: string; - - if (lastItem && lastItem < menuItems.length) { - lastItemId = menuItems[lastItem - 1].id!; - lastItemIndex = lastItem - 1; - remItems = menuItems.slice(lastItem - 1, menuItems.length).map((item) => ({ - title: item.title, - elements: item.children, - icon: item.icon - })); - } const navGroups = menuItems.slice(0, lastItemIndex + 1).map((item) => { switch (item.type) { case 'group': return ( - + ); case 'item': return ; @@ -104,7 +76,7 @@ export const Navigation = () => { sx={ { pt: !miniDrawer ? (isHorizontal ? 0 : 2) : 0, '& > ul:first-of-type': { mt: 0 }, - display: isHorizontal ? { xs: 'block', lg: 'flex' } : 'block' + display: isHorizontal ? { xs: 'block', lg: 'flex' } : 'block', } } > {navGroups} diff --git a/judo-ui-react/src/main/resources/actor/src/layout/Drawer/DrawerContent/index.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/layout/Drawer/DrawerContent/index.tsx.hbs index 4fc4bcbf..84a038d1 100644 --- a/judo-ui-react/src/main/resources/actor/src/layout/Drawer/DrawerContent/index.tsx.hbs +++ b/judo-ui-react/src/main/resources/actor/src/layout/Drawer/DrawerContent/index.tsx.hbs @@ -1,7 +1,7 @@ {{> fragment.header.hbs }} +import { SimpleBar } from '~/components'; import { Navigation } from './Navigation'; -import { SimpleBar } from './SimpleBar'; export const DrawerContent = () => { return ( diff --git a/judo-ui-react/src/main/resources/actor/src/layout/Header/HeaderContent/Customization/index.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/layout/Header/HeaderContent/Customization/index.tsx.hbs index 96dcee86..ae117f3c 100644 --- a/judo-ui-react/src/main/resources/actor/src/layout/Header/HeaderContent/Customization/index.tsx.hbs +++ b/judo-ui-react/src/main/resources/actor/src/layout/Header/HeaderContent/Customization/index.tsx.hbs @@ -5,11 +5,10 @@ import { useTheme } from '@mui/material/styles'; import { Box, Card, Drawer, IconButton, Stack, Typography } from '@mui/material'; import { useConfig } from '~/hooks'; import { ThemeMode as ThemeModeEnum } from '~/config'; -import { MdiIcon } from '~/components'; +import { MdiIcon, SimpleBar } from '~/components'; import { ThemeMode } from './ThemeMode'; import { ThemeWidth } from './ThemeWidth'; import { ThemeMenuLayout } from './ThemeMenuLayout'; -import { SimpleBar } from '../../../Drawer/DrawerContent/SimpleBar'; export const Customization = () => { const theme = useTheme(); diff --git a/judo-ui-react/src/main/resources/actor/src/layout/Header/HeaderContent/Profile/ProfileTab.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/layout/Header/HeaderContent/Profile/ProfileTab.tsx.hbs deleted file mode 100644 index 534505ff..00000000 --- a/judo-ui-react/src/main/resources/actor/src/layout/Header/HeaderContent/Profile/ProfileTab.tsx.hbs +++ /dev/null @@ -1,191 +0,0 @@ -{{> fragment.header.hbs }} - -import { useCallback, useState } from 'react'; -import type { ChangeEvent, MouseEvent } from 'react'; -import { - Button, - DialogActions, - DialogContent, - DialogTitle, - FormControl, - FormControlLabel, - Grid, - IconButton, - List, - ListItemButton, - ListItemIcon, - ListItemText, - Radio, - RadioGroup, -} from '@mui/material'; -import { useTranslation } from 'react-i18next'; -{{# if application.authentication }} - import { useAuth } from 'react-oidc-context'; -{{/ if }} -{{# if (otherApplicationsAvailable application applications) }} - import { generateAlternativeApplications, changeApplication } from '~/utilities/application'; - import { useDialog } from '~/components/dialog'; -{{/ if }} -import { MdiIcon } from '~/components'; - -interface ProfileTabProps { - handleLogout: () => void; -} - -export const ProfileTab = ({ handleLogout }: ProfileTabProps) => { - const { t } = useTranslation(); - {{# if (otherApplicationsAvailable application applications) }} - const [createDialog, closeDialog] = useDialog(); - const alternativeApplications: Record = generateAlternativeApplications(t); - const [selectedApp, setSelectedApp] = useState(Object.keys(alternativeApplications)[0]); - {{/ if }} - const [selectedIndex, setSelectedIndex] = useState(0); - const handleListItemClick = (event: MouseEvent, index: number) => { - setSelectedIndex(index); - }; - {{# if application.authentication }} - const { signoutRedirect, isAuthenticated } = useAuth(); - - const doLogout = useCallback(() => { - const redirectUrl = window.location.href.split('#')[0]; - signoutRedirect({ - post_logout_redirect_uri: redirectUrl, - }); - }, [isAuthenticated]); - {{/ if }} - {{# if (otherApplicationsAvailable application applications) }} - const openChangerDialog = useCallback(() => { - createDialog({ - fullWidth: true, - maxWidth: 'sm', - onClose: (event: object, reason: string) => { - if (reason !== 'backdropClick') { - closeDialog(); - } - }, - children: ( - <> - - {t('judo.applications.available_applications', { defaultValue: 'Available applications' })} - { - closeDialog(); - } } - sx={ { - position: 'absolute', - right: 8, - top: 8, - color: (theme) => theme.palette.grey[500], - } } - > - - - - - - - - ) => setSelectedApp((event.target as HTMLInputElement).value)} - > - {Object.keys(alternativeApplications).map((key) => ( - } label={alternativeApplications[key]} /> - ))} - - - - - - - - - - - - - - - ), - }); - }, []); - {{/ if }} - - return ( - - {/*) => handleListItemClick(event, 0)}*/} - {/*>*/} - {/* */} - {/* */} - {/* */} - {/* */} - {/**/} - {/*) => handleListItemClick(event, 1)}*/} - {/*>*/} - {/* */} - {/* */} - {/* */} - {/* */} - {/**/} - - {/*) => handleListItemClick(event, 3)}*/} - {/*>*/} - {/* */} - {/* */} - {/* */} - {/* */} - {/**/} - {/*) => handleListItemClick(event, 4)}*/} - {/*>*/} - {/* */} - {/* */} - {/* */} - {/* */} - {/**/} - {{# if (otherApplicationsAvailable application applications) }} - - - - - - - {{/ if }} - {{# if application.authentication }} - - - - - - - {{/ if }} - - ); -}; diff --git a/judo-ui-react/src/main/resources/actor/src/layout/Header/HeaderContent/Profile/SettingTab.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/layout/Header/HeaderContent/Profile/SettingTab.tsx.hbs deleted file mode 100644 index 00680f03..00000000 --- a/judo-ui-react/src/main/resources/actor/src/layout/Header/HeaderContent/Profile/SettingTab.tsx.hbs +++ /dev/null @@ -1,47 +0,0 @@ -{{> fragment.header.hbs }} - -import { useState } from 'react'; -import { List, ListItemButton, ListItemIcon, ListItemText } from '@mui/material'; -import { MdiIcon } from '~/components'; - -export const SettingTab = () => { - const [selectedIndex, setSelectedIndex] = useState(0); - const handleListItemClick = (event: React.MouseEvent, index: number) => { - setSelectedIndex(index); - }; - - return ( - - ) => handleListItemClick(event, 0)}> - - - - - - ) => handleListItemClick(event, 1)}> - - - - - - ) => handleListItemClick(event, 2)}> - - - - - - ) => handleListItemClick(event, 3)}> - - - - - - ) => handleListItemClick(event, 4)}> - - - - - - - ); -}; diff --git a/judo-ui-react/src/main/resources/actor/src/layout/Header/HeaderContent/Profile/index.tsx.hbs b/judo-ui-react/src/main/resources/actor/src/layout/Header/HeaderContent/Profile/index.tsx.hbs index d9ed23c6..bfcf1615 100644 --- a/judo-ui-react/src/main/resources/actor/src/layout/Header/HeaderContent/Profile/index.tsx.hbs +++ b/judo-ui-react/src/main/resources/actor/src/layout/Header/HeaderContent/Profile/index.tsx.hbs @@ -1,7 +1,6 @@ {{> fragment.header.hbs }} import { useRef, useState, useCallback } from 'react'; -import type { ReactNode, SyntheticEvent } from 'react'; import { useTranslation } from 'react-i18next'; import { useTheme } from '@mui/material/styles'; import { @@ -12,50 +11,23 @@ import { CardContent, ClickAwayListener, Grid, - IconButton, + List, + ListItemButton, + ListItemIcon, + ListItemText, Paper, Popper, Stack, - Tab, - Tabs, - Tooltip, Typography, } from '@mui/material'; {{# if application.authentication }} import { useAuth } from 'react-oidc-context'; - import { usePrincipal } from '~/auth'; {{/ if }} import { ThemeMode } from '~/config'; import { MdiIcon } from '~/components'; -import { useHeroProps, useLogoProps } from '~/hooks'; -import { ProfileTab } from './ProfileTab'; -import { SettingTab } from './SettingTab'; +import { useHeroProps } from '~/hooks'; import { Transitions } from '../../../Transitions'; -interface TabPanelProps { - children?: ReactNode; - dir?: string; - index: number; - value: number; -} - -function TabPanel(props: TabPanelProps) { - const { children, value, index, ...other } = props; - - return ( - - ); -} - -function a11yProps(index: number) { - return { - id: `profile-tab-${index}`, - 'aria-controls': `profile-tabpanel-${index}` - }; -} - export const Profile = () => { const { t } = useTranslation(); const theme = useTheme(); @@ -68,7 +40,6 @@ export const Profile = () => { post_logout_redirect_uri: redirectUrl, }); }, [isAuthenticated]); - const { principal } = usePrincipal(); {{/ if }} const anchorRef = useRef(null); @@ -84,12 +55,6 @@ export const Profile = () => { setOpen(false); }; - const [value, setValue] = useState(0); - - const handleChange = (event: SyntheticEvent, newValue: number) => { - setValue(newValue); - }; - const iconBackColorOpen = theme.palette.mode === ThemeMode.DARK ? 'grey.200' : 'grey.300'; return ( @@ -102,8 +67,8 @@ export const Profile = () => { '&:hover': { bgcolor: theme.palette.mode === ThemeMode.DARK ? 'secondary.light' : 'secondary.lighter' }, '&:focus-visible': { outline: `2px solid ${theme.palette.secondary.dark}`, - outlineOffset: 2 - } + outlineOffset: 2, + }, } } aria-label="open profile" ref={anchorRef} @@ -128,10 +93,10 @@ export const Profile = () => { { name: 'offset', options: { - offset: [0, 9] - } - } - ] + offset: [0, 9], + }, + }, + ], } } > {({ TransitionProps }) => ( @@ -142,8 +107,8 @@ export const Profile = () => { minWidth: 240, maxWidth: 290, [theme.breakpoints.down('md')]: { - maxWidth: 250 - } + maxWidth: 250, + }, } } > @@ -161,54 +126,19 @@ export const Profile = () => { - {{# if application.authentication }} - - - - - - - - {{/ if }} - - - } - label="Profile" - {...a11yProps(0)} - /> - {/*}*/} - {/* label="Setting"*/} - {/* {...a11yProps(1)}*/} - {/*/>*/} - - - {{# if application.authentication }} - - - - - - - {{/ if }} + + {{# if application.authentication }} + + + + + + + {{/ if }} + diff --git a/judo-ui-react/src/main/resources/ui-react.yaml b/judo-ui-react/src/main/resources/ui-react.yaml index 79ba0fd9..e4962063 100644 --- a/judo-ui-react/src/main/resources/ui-react.yaml +++ b/judo-ui-react/src/main/resources/ui-react.yaml @@ -334,6 +334,10 @@ templates: pathExpression: "'src/components/PageHeader.tsx'" templateName: actor/src/components/PageHeader.tsx.hbs + - name: actor/src/components/SimpleBar.tsx + pathExpression: "'src/components/SimpleBar.tsx'" + templateName: actor/src/components/SimpleBar.tsx.hbs + # Actor - src - components - dialog - name: actor/src/components/dialog/ConfirmationDialog.tsx @@ -860,10 +864,6 @@ templates: ## START V2 - - name: actor/src/layout/Drawer/DrawerContent/Navigation/Dot.tsx - pathExpression: "'src/layout/Drawer/DrawerContent/Navigation/Dot.tsx'" - templateName: actor/src/layout/Drawer/DrawerContent/Navigation/Dot.tsx.hbs - - name: actor/src/layout/Drawer/DrawerContent/Navigation/index.tsx pathExpression: "'src/layout/Drawer/DrawerContent/Navigation/index.tsx'" templateName: actor/src/layout/Drawer/DrawerContent/Navigation/index.tsx.hbs @@ -888,10 +888,6 @@ templates: pathExpression: "'src/layout/Drawer/DrawerContent/index.tsx'" templateName: actor/src/layout/Drawer/DrawerContent/index.tsx.hbs - - name: actor/src/layout/Drawer/DrawerContent/SimpleBar.tsx - pathExpression: "'src/layout/Drawer/DrawerContent/SimpleBar.tsx'" - templateName: actor/src/layout/Drawer/DrawerContent/SimpleBar.tsx.hbs - - name: actor/src/layout/Drawer/DrawerHeader/DrawerHeaderStyled.tsx pathExpression: "'src/layout/Drawer/DrawerHeader/DrawerHeaderStyled.tsx'" templateName: actor/src/layout/Drawer/DrawerHeader/DrawerHeaderStyled.tsx.hbs @@ -932,14 +928,6 @@ templates: pathExpression: "'src/layout/Header/HeaderContent/Profile/index.tsx'" templateName: actor/src/layout/Header/HeaderContent/Profile/index.tsx.hbs - - name: actor/src/layout/Header/HeaderContent/Profile/ProfileTab.tsx - pathExpression: "'src/layout/Header/HeaderContent/Profile/ProfileTab.tsx'" - templateName: actor/src/layout/Header/HeaderContent/Profile/ProfileTab.tsx.hbs - - - name: actor/src/layout/Header/HeaderContent/Profile/SettingTab.tsx - pathExpression: "'src/layout/Header/HeaderContent/Profile/SettingTab.tsx'" - templateName: actor/src/layout/Header/HeaderContent/Profile/SettingTab.tsx.hbs - - name: actor/src/layout/Header/HeaderContent/index.tsx pathExpression: "'src/layout/Header/HeaderContent/index.tsx'" templateName: actor/src/layout/Header/HeaderContent/index.tsx.hbs