From 20ee5a3212d9986f8199418c1d102c87ec8deb47 Mon Sep 17 00:00:00 2001 From: yaroslav Date: Tue, 7 May 2024 14:07:15 +0300 Subject: [PATCH] Added cabinet menu --- src/App.tsx | 24 +-- src/constants/general.ts | 6 +- .../MainLayout/components/Header/Header.tsx | 86 ++++---- .../Header/components/AuthZone/AuthZone.tsx | 24 +-- .../components/AuthActions/AuthActions.tsx | 184 ++++++++++-------- 5 files changed, 170 insertions(+), 154 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 216f42f..838a9f7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,17 +1,17 @@ -import CssBaseline from "@mui/material/CssBaseline"; -import ThemeProvider from "@mui/material/styles/ThemeProvider"; +import CssBaseline from '@mui/material/CssBaseline' +import ThemeProvider from '@mui/material/styles/ThemeProvider' -import { Router } from "./router"; +import { Router } from './router' -import { ColorModeContext } from "theme"; -import { useMode } from "theme/hooks"; -import "./App.css"; +import { ColorModeContext } from 'theme' +import { useMode } from 'theme/hooks' +import './App.css' -import { AuthProvider } from "context/AuthContext/AuthContext"; -import { NotificationProvider } from "context/NotificationContext/NotificationContext"; +import { AuthProvider } from 'context/AuthContext/AuthContext' +import { NotificationProvider } from 'context/NotificationContext/NotificationContext' const App = () => { - const [theme, colorMode] = useMode(); + const [theme, colorMode] = useMode() return ( @@ -24,7 +24,7 @@ const App = () => { - ); -}; + ) +} -export default App; +export default App diff --git a/src/constants/general.ts b/src/constants/general.ts index 48cb726..5ef93d6 100644 --- a/src/constants/general.ts +++ b/src/constants/general.ts @@ -1,9 +1,9 @@ const general = { - TRES_TOKEN: "oc62XD7C", + TRES_TOKEN: 'q87nfWyQ', MAX_TITLE_LENGTH: 50, MAX_BODY_LENGTH: 5000, CABINET_POPUP_WIDTH: 600, CABINET_POPUP_HEIGHT: 600, -}; +} -export { general }; +export { general } diff --git a/src/layouts/MainLayout/components/Header/Header.tsx b/src/layouts/MainLayout/components/Header/Header.tsx index 6e3f7aa..41db15e 100644 --- a/src/layouts/MainLayout/components/Header/Header.tsx +++ b/src/layouts/MainLayout/components/Header/Header.tsx @@ -1,89 +1,89 @@ -import { FC } from "react"; -import { useLocation, useNavigate, useParams } from "react-router-dom"; +import { FC } from 'react' +import { useLocation, useNavigate, useParams } from 'react-router-dom' -import AppBar from "@mui/material/AppBar"; -import Box from "@mui/material/Box"; -import Button from "@mui/material/Button"; -import IconButton from "@mui/material/IconButton"; -import Toolbar from "@mui/material/Toolbar"; -import useTheme from "@mui/material/styles/useTheme"; +import AppBar from '@mui/material/AppBar' +import Box from '@mui/material/Box' +import Button from '@mui/material/Button' +import IconButton from '@mui/material/IconButton' +import Toolbar from '@mui/material/Toolbar' +import useTheme from '@mui/material/styles/useTheme' -import MenuIcon from "@mui/icons-material/Menu"; -import ArrowBackIcon from "@mui/icons-material/ArrowBack"; +import MenuIcon from '@mui/icons-material/Menu' +import ArrowBackIcon from '@mui/icons-material/ArrowBack' -import { AuthZone } from "./components/AuthZone"; +import { AuthZone } from './components/AuthZone' -import { dimensions, endpoints } from "constants"; -import IPalette from "theme/IPalette.interface"; +import { dimensions, endpoints } from 'constants' +import IPalette from 'theme/IPalette.interface' interface HeaderProps { - handleDrawerToggle: () => void; + handleDrawerToggle: () => void } const Header: FC = ({ handleDrawerToggle }) => { - const { palette }: IPalette = useTheme(); - const { pathname } = useLocation(); - const navigate = useNavigate(); - const { ticketId } = useParams(); + const { palette }: IPalette = useTheme() + const { pathname } = useLocation() + const navigate = useNavigate() + const { ticketId } = useParams() - const drawerWidth = dimensions.DRAWER_WIDTH; + const drawerWidth = dimensions.DRAWER_WIDTH - const isFullTicketInfo: boolean = !!ticketId; - const isCreateTicket: boolean = pathname === endpoints.CREATE_TICKET; - const isDrawStepBackAction: boolean = isFullTicketInfo || isCreateTicket; + const isFullTicketInfo: boolean = !!ticketId + const isCreateTicket: boolean = pathname === endpoints.CREATE_TICKET + const isDrawStepBackAction: boolean = isFullTicketInfo || isCreateTicket const handleClick = (): void => { - navigate(-1); - }; + navigate(-1) + } return ( {isDrawStepBackAction && ( @@ -92,7 +92,7 @@ const Header: FC = ({ handleDrawerToggle }) => { - ); -}; + ) +} -export { Header }; +export { Header } diff --git a/src/layouts/MainLayout/components/Header/components/AuthZone/AuthZone.tsx b/src/layouts/MainLayout/components/Header/components/AuthZone/AuthZone.tsx index e2c932d..ad98a33 100644 --- a/src/layouts/MainLayout/components/Header/components/AuthZone/AuthZone.tsx +++ b/src/layouts/MainLayout/components/Header/components/AuthZone/AuthZone.tsx @@ -1,26 +1,26 @@ -import { FC } from "react"; +import { FC } from 'react' -import Box from "@mui/material/Box"; +import Box from '@mui/material/Box' -import { AuthActions } from "./components/AuthActions"; -import { NoAuthActions } from "./components/NoAuthActions"; +import { AuthActions } from './components/AuthActions' +import { NoAuthActions } from './components/NoAuthActions' -import { useAuth } from "context/AuthContext/AuthContext"; +import { useAuth } from 'context/AuthContext/AuthContext' const AuthZone: FC = () => { - const { isAuth } = useAuth(); + const { isAuth } = useAuth() return ( {isAuth ? : } - ); -}; + ) +} -export { AuthZone }; +export { AuthZone } diff --git a/src/layouts/MainLayout/components/Header/components/AuthZone/components/AuthActions/AuthActions.tsx b/src/layouts/MainLayout/components/Header/components/AuthZone/components/AuthActions/AuthActions.tsx index 14c3b9e..c4a3176 100644 --- a/src/layouts/MainLayout/components/Header/components/AuthZone/components/AuthActions/AuthActions.tsx +++ b/src/layouts/MainLayout/components/Header/components/AuthZone/components/AuthActions/AuthActions.tsx @@ -1,89 +1,104 @@ -import { FC, MouseEvent, useEffect, useRef, useState } from "react"; -import { useTranslation } from "react-i18next"; -import { Link, useNavigate } from "react-router-dom"; - -import Avatar from "@mui/material/Avatar"; -import Button from "@mui/material/Button"; -import Box from "@mui/material/Box"; -import Divider from "@mui/material/Divider"; -import IconButton from "@mui/material/IconButton"; -import Typography from "@mui/material/Typography"; -import useMediaQuery from "@mui/material/useMediaQuery"; -import useTheme from "@mui/material/styles/useTheme"; - -import LogoutIcon from "@mui/icons-material/Logout"; -import AccountBoxIcon from "@mui/icons-material/AccountBox"; - -import { VerticalDivider } from "components/VerticalDivider"; -import { CustomTooltip } from "components/CustomTooltip"; - -import Logo from "../../../../../../../../assets/logo.svg"; -import admin from "../../../../../../../../assets/admin.webp"; -import { dimensions, endpoints, permissions } from "constants"; -import { getUser, getUserRole } from "functions/manipulateLocalStorage"; -import { useAuth } from "context/AuthContext/AuthContext"; -import IPalette from "theme/IPalette.interface"; -import { checkIsAdmin } from "functions/index"; +import { FC, MouseEvent, useEffect, useRef, useState } from 'react' +import { useTranslation } from 'react-i18next' +import { Link, useNavigate } from 'react-router-dom' + +import Avatar from '@mui/material/Avatar' +import Button from '@mui/material/Button' +import Box from '@mui/material/Box' +import Divider from '@mui/material/Divider' +import IconButton from '@mui/material/IconButton' +import Typography from '@mui/material/Typography' +import useMediaQuery from '@mui/material/useMediaQuery' +import useTheme from '@mui/material/styles/useTheme' + +import LogoutIcon from '@mui/icons-material/Logout' +import AccountBoxIcon from '@mui/icons-material/AccountBox' + +import { VerticalDivider } from 'components/VerticalDivider' +import { CustomTooltip } from 'components/CustomTooltip' + +import Logo from '../../../../../../../../assets/logo.svg' +import admin from '../../../../../../../../assets/admin.webp' +import { dimensions, endpoints, permissions } from 'constants' +import { getUser, getUserRole } from 'functions/manipulateLocalStorage' +import { useAuth } from 'context/AuthContext/AuthContext' +import IPalette from 'theme/IPalette.interface' +import { checkIsAdmin } from 'functions/index' const AuthActions: FC = () => { - const { t } = useTranslation(); - const { palette }: IPalette = useTheme(); - const navigate = useNavigate(); + const { t } = useTranslation() + const { palette }: IPalette = useTheme() + const navigate = useNavigate() const matches = useMediaQuery( `(min-width: ${dimensions.BREAK_POINTS.AUTH_ACTIONS}px)` - ); + ) - const { logoutUser } = useAuth(); + const { logoutUser } = useAuth() - const isAdmin = checkIsAdmin(); + const isAdmin = checkIsAdmin() - const { userId, login, userName } = getUser(); - const { permissionList } = getUserRole(); - const isCanCreateTicket = permissionList.includes(permissions.CREATE_TICKET); + const { userId, login, userName } = getUser() + const { permissionList } = getUserRole() + const isCanCreateTicket = permissionList.includes(permissions.CREATE_TICKET) - const [open, setOpen] = useState(false); - const iconButtonRef = useRef(null); - const boxRef = useRef(null); + const [open, setOpen] = useState(false) + const iconButtonRef = useRef(null) + const boxRef = useRef(null) useEffect(() => { const handleClickOutside = event => { const isIconButtonClicked = - iconButtonRef.current && iconButtonRef.current.contains(event.target); + iconButtonRef.current && iconButtonRef.current.contains(event.target) const isBoxClicked = - boxRef.current && boxRef.current.contains(event.target); + boxRef.current && boxRef.current.contains(event.target) if (!isIconButtonClicked && !isBoxClicked) { - setOpen(false); + setOpen(false) } - }; + } - document.addEventListener("click", handleClickOutside); + document.addEventListener('click', handleClickOutside) return () => { - document.removeEventListener("click", handleClickOutside); - }; - }, [iconButtonRef, boxRef]); + document.removeEventListener('click', handleClickOutside) + } + }, [iconButtonRef, boxRef]) + + useEffect(() => { + const script = document.createElement('script') + + script.src = + 'https://cabinet.sumdu.edu.ua/public/js/cabinet.menu-services.min.js' + script.setAttribute('data-services-id', 'cabinet_button') + script.setAttribute( + 'data-services-options', + '{"align":"right", "color":"white"}' + ) + script.async = true + + document.body.appendChild(script) + }, []) const handleLogOut = (event: MouseEvent): void => { - event.preventDefault(); + event.preventDefault() - logoutUser(); - setOpen(false); - }; + logoutUser() + setOpen(false) + } const handleRedirectToProfile = (): void => { - navigate(`${endpoints.PROFILE}/${userId}`); - setOpen(false); - }; + navigate(`${endpoints.PROFILE}/${userId}`) + setOpen(false) + } const handleOpenMenu = (): void => { - setOpen(prevState => !prevState); - }; + setOpen(prevState => !prevState) + } return ( <> - + {userName} { @@ -99,18 +114,18 @@ const AuthActions: FC = () => { } > - + { @{login} - + .MuiButton-root": { + '& > .MuiButton-root': { backgroundColor: palette.grey.button, - color: "#ffffff", - textTransform: "initial", + color: '#ffffff', + textTransform: 'initial', borderRadius: 2, - p: "4px 15px", + p: '4px 15px', border: `2px solid ${palette.grey.active}`, }, }} > - @@ -168,16 +183,17 @@ const AuthActions: FC = () => { )} +
- ); -}; + ) +} -export { AuthActions }; +export { AuthActions }