adriano.andrade
/
projeto-hit
mirror of https://github.com/AdrianoRobson/projeto-hit.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Login page Done; 

Menu WP. And in current removing MUI
pull/2/head
RenatoDiGiacomo 2022-07-12 18:49:11 -03:00
parent 2f7f202630
commit 62631cf874
21 changed files with 704 additions and 409 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/assets/images/HitLogo/HIT-Logo_Blanco_48mm.svg 100644
View File

@ -0,0 +1,9 @@
<svg width="76" height="76" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect width="76" height="76" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_204_7817" transform="scale(0.00735294)"/>
</pattern>
<image id="image0_204_7817" width="136" height="136" xlink:href="data:image/png;base64,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"/>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

11
frontend/src/components/Base/MainContainer.jsx 100644
View File

@ -0,0 +1,11 @@
import React from 'react';
import MainContainerStyled from "./MainContainer.style"
const Container = ({children}) => {
return (
<MainContainerStyled>{children}</MainContainerStyled>
)
}
export default Container

11
frontend/src/components/Base/MainContainer.style.jsx 100644
View File

@ -0,0 +1,11 @@
import styled from "styled-components";
const MainContainer = styled.div`
display: flex;
flex-direction: row;
justify-content: right;
width: 100%;
height: 100vh;
`;
export default MainContainer;

9
frontend/src/components/LoadingScreen/Loading.jsx 100644
View File

@ -0,0 +1,9 @@
import React from "react";
import LoadingStyled from "./Loading.style"
const Loading = () => {
return <LoadingStyled/>;
};
export default Loading;

55
frontend/src/components/LoadingScreen/Loading.style.jsx 100644
View File

@ -0,0 +1,55 @@
import styled from "styled-components";
import {color} from "../../style/varibles"
import logo from "../../assets/images/Logo.png";
const LoadingStyled = styled.div`
position: relative;
width: 100%;
height: 100vh;
background-color: #00000032;
display: flex;
text-align: center;
justify-items: center;
align-items: center;
&:after {
content: "";
display: block;
margin: 0 auto;
border: 16px solid transparent;
border-top: 16px solid ${color.pricinpal.naranja};
border-bottom: 16px solid ${color.pricinpal.grisOscuro};
border-radius: 50%;
width: 220px;
height: 220px;
animation: spin 2s linear infinite;
}
&:before {
content: url(${logo});
position: absolute;
display: block;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
background-color: white;
padding: 24px;
border-radius: 50%;
width: 200px;
height: 200px;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
`;
export default LoadingStyled;

18
frontend/src/components/LoginComponents/CompanyLogo/Company.jsx
View File

@ -1,9 +1,17 @@
import React from 'react'
import React from "react";
import CompanyStyled from "./Company.style";
import { ReactComponent as Hit46mm } from "../../../assets/images/HitLogo/HIT-Logo_Blanco_48mm.svg";
const Company = () => {
return (
<div>Company</div>
)
}
<CompanyStyled>
<Hit46mm />
<p>Copyright Ⓒ 2022 HIT Communications. Todos os Direitos Reservados</p>
</CompanyStyled>
);
};
export default Company;
export default Company

19
frontend/src/components/LoginComponents/CompanyLogo/Company.style.jsx 100644
View File

@ -0,0 +1,19 @@
import styled from "styled-components";
const CompanyStyled = styled.div`
position: absolute;
display: flex;
flex-direction: column;
justify-content: right;
align-items: flex-end;
width: 100%;
right: 16px;
bottom: 16px;
font-size: 10px;
p{
font-family: "HelveticaHeavy";
}
`;
export default CompanyStyled;

15
frontend/src/components/LoginComponents/VideoTag/VideoLogin.jsx
View File

@ -1,15 +0,0 @@
import React from "react";
import StyleVideo from "./VideoLogin.style";
import bgvideo from "../../../assets/videos/video.mp4";
const VideoLogin = () => {
return (
<StyleVideo autoPlay muted loop id="bglogin">
<source src={bgvideo} type="video/mp4" />
</StyleVideo>
);
};
export default VideoLogin;

50
frontend/src/components/Menu/MenuComponent.jsx 100644
View File

@ -0,0 +1,50 @@
import React from "react";
import { MenuStyled, MenuListStyled, MenuListItemStyled } from "./MenuComponent.style";
import { WhatsAppsContext } from "../../context/WhatsApp/WhatsAppsContext";
import { AuthContext } from "../../context/Auth/AuthContext";
import VideoComponent from "../VideoTag/VideoComponent";
const MenuComponent = () => {
const { whatsApps } = React.useContext(WhatsAppsContext);
const { user } = React.useContext(AuthContext);
const [connectionWarning, setConnectionWarning] = React.useState(false);
React.useEffect(() => {
const delayDebounceFn = setTimeout(() => {
if (whatsApps.length > 0) {
const offlineWhats = whatsApps.filter((whats) => {
return (
whats.status === "qrcode" ||
whats.status === "PAIRING" ||
whats.status === "DISCONNECTED" ||
whats.status === "TIMEOUT" ||
whats.status === "OPENING"
);
});
if (offlineWhats.length > 0) {
setConnectionWarning(true);
} else {
setConnectionWarning(false);
}
}
}, 2000);
return () => clearTimeout(delayDebounceFn);
}, [whatsApps]);
return (
<MenuStyled>
<VideoComponent width={"100%"} zIndex={"-1"} position={"absolute"} />
<MenuListStyled>
<MenuListItemStyled>link</MenuListItemStyled>
<MenuListItemStyled>link</MenuListItemStyled>
<MenuListItemStyled>link</MenuListItemStyled>
<MenuListItemStyled>link</MenuListItemStyled>
</MenuListStyled>
</MenuStyled>
);
};
export default MenuComponent;

36
frontend/src/components/Menu/MenuComponent.style.jsx 100644
View File

@ -0,0 +1,36 @@
import styled from "styled-components";
import { color } from "../../style/varibles";
//Nav
const MenuStyled = styled.nav`
position: absolute;
width: 76px;
height: 100vh;
background: ${color.pricinpal.grisOscuro}; //Same background login
z-index: 10;
`;
//UL
const MenuListStyled = styled.ul`
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
z-index: 100;
`;
//LI
const MenuListItemStyled = styled.li`
display: flex;
flex-direction: row;
justify-content: center;
gap: 6px;
color: ${color.pricinpal.blanco};
transition: all 0.2s linear;
&:hover {
color: ${color.pricinpal.naranja};
transition: all 0.2s linear;
}
`;
export { MenuStyled, MenuListStyled, MenuListItemStyled };

15
frontend/src/components/Menu/MenuTop.jsx 100644
View File

@ -0,0 +1,15 @@
import React from 'react';
import { MenuTopStyled } from "./MenuTop.style";
import video from "../../assets/videos/video.mp4"
const MenuTop = () => {
return (
<MenuTopStyled>
<img src="" alt="" />
</MenuTopStyled>
)
}
export default MenuTop

8
frontend/src/components/Menu/MenuTop.style.jsx 100644
View File

@ -0,0 +1,8 @@
import styled from "styled-components";
const MenuTopStyled = styled.div`
width: 100%;
`;
export { MenuTopStyled };

15
frontend/src/components/VideoTag/VideoComponent.jsx 100644
View File

@ -0,0 +1,15 @@
import React from "react";
import StyleVideo from "./VideoComponent.style";
import bgvideo from "../../assets/videos/video.mp4";
const VideoComponent = ({ width, zIndex,position, ...props }) => {
return (
<StyleVideo {...props} width={width} zIndex={zIndex} position={position} id="bglogin">
<source src={bgvideo} type="video/mp4" />
</StyleVideo>
);
};
export default VideoComponent;

8
frontend/src/components/LoginComponents/VideoTag/VideoLogin.style.jsx → frontend/src/components/VideoTag/VideoComponent.style.jsx
View File

@ -1,17 +1,17 @@
import styled from "styled-components";
const StyleVideo = styled.video`
width: 350px;
position: ${(props) => (props.position === "relative" ? "relative" : "absolute")};
z-index: ${(props) => props.zIndex};
width: ${(props) => props.width};
height: 100vh;
object-fit: cover;
filter: grayscale(1) brightness(.3);
filter: grayscale(1) brightness(0.3);
margin-right: 60px;
@media screen and (max-width: 992px) {
display: none;
}
`;
export default StyleVideo;

3
frontend/src/context/Auth/AuthContext.js
View File

@ -6,9 +6,6 @@ const AuthContext = createContext();
const AuthProvider = ({ children }) => {
const { loading, user, isAuth, handleLogin, handleLogout } = useAuth();
//{console.log('authContext teste: ', user)}
return (
<AuthContext.Provider
value={{ loading, user, isAuth, handleLogin, handleLogout }}

145
frontend/src/layout/MainListItems copy.js 100644
View File

@ -0,0 +1,145 @@
import React, { useContext, useEffect, useState } from "react";
import { Link as RouterLink } from "react-router-dom";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import ListSubheader from "@material-ui/core/ListSubheader";
import Divider from "@material-ui/core/Divider";
import { Badge } from "@material-ui/core";
import DashboardOutlinedIcon from "@material-ui/icons/DashboardOutlined";
import ReportOutlinedIcon from "@material-ui/icons/ReportOutlined";
import SendOutlined from "@material-ui/icons/SendOutlined";
//import ReportOutlined from "@bit/mui-org.material-ui-icons.report-outlined";
import WhatsAppIcon from "@material-ui/icons/WhatsApp";
import SyncAltIcon from "@material-ui/icons/SyncAlt";
import SettingsOutlinedIcon from "@material-ui/icons/SettingsOutlined";
import PeopleAltOutlinedIcon from "@material-ui/icons/PeopleAltOutlined";
import ContactPhoneOutlinedIcon from "@material-ui/icons/ContactPhoneOutlined";
import AccountTreeOutlinedIcon from "@material-ui/icons/AccountTreeOutlined";
import QuestionAnswerOutlinedIcon from "@material-ui/icons/QuestionAnswerOutlined";
import { i18n } from "../translate/i18n";
import { WhatsAppsContext } from "../context/WhatsApp/WhatsAppsContext";
import { AuthContext } from "../context/Auth/AuthContext";
import { Can } from "../components/Can";
function ListItemLink(props) {
const { icon, primary, to, className } = props;
const renderLink = React.useMemo(
() => React.forwardRef((itemProps, ref) => <RouterLink to={to} ref={ref} {...itemProps} />),
[to]
);
return (
<li>
<ListItem button component={renderLink} className={className}>
{icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
<ListItemText primary={primary} />
</ListItem>
</li>
);
}
const MainListItems = (props) => {
const { drawerClose } = props;
const { whatsApps } = useContext(WhatsAppsContext);
const { user } = useContext(AuthContext);
const [connectionWarning, setConnectionWarning] = useState(false);
useEffect(() => {
const delayDebounceFn = setTimeout(() => {
if (whatsApps.length > 0) {
const offlineWhats = whatsApps.filter((whats) => {
return (
whats.status === "qrcode" ||
whats.status === "PAIRING" ||
whats.status === "DISCONNECTED" ||
whats.status === "TIMEOUT" ||
whats.status === "OPENING"
);
});
if (offlineWhats.length > 0) {
setConnectionWarning(true);
} else {
setConnectionWarning(false);
}
}
}, 2000);
return () => clearTimeout(delayDebounceFn);
}, [whatsApps]);
return (
<div onClick={drawerClose}>
<ListItemLink
to="/tickets"
primary={i18n.t("mainDrawer.listItems.tickets")}
icon={<WhatsAppIcon />}
/>
<ListItemLink
to="/contacts"
primary={i18n.t("mainDrawer.listItems.contacts")}
icon={<ContactPhoneOutlinedIcon />}
/>
<ListItemLink to="/schedulesReminder" primary="Lembretes" icon={<SendOutlined />} />
<ListItemLink
to="/quickAnswers"
primary={i18n.t("mainDrawer.listItems.quickAnswers")}
icon={<QuestionAnswerOutlinedIcon />}
/>
<Can
role={user.profile}
perform="drawer-admin-items:view"
yes={() => (
<>
<Divider />
<ListSubheader inset>{i18n.t("mainDrawer.listItems.administration")}</ListSubheader>
<ListItemLink
to="/users"
primary={i18n.t("mainDrawer.listItems.users")}
icon={<PeopleAltOutlinedIcon />}
/>
<ListItemLink
to="/queues"
primary={i18n.t("mainDrawer.listItems.queues")}
icon={<AccountTreeOutlinedIcon />}
/>
<ListItemLink
to="/connections"
primary={i18n.t("mainDrawer.listItems.connections")}
icon={
<Badge badgeContent={connectionWarning ? "!" : 0} color="error">
<SyncAltIcon />
</Badge>
}
/>
<ListItemLink to="/" primary="Dashboard" icon={<DashboardOutlinedIcon />} />
<ListItemLink to="/report" primary="Relatório" icon={<ReportOutlinedIcon />} />
<Can
role={user.profile}
perform="settings-view:show"
yes={() => (
<ListItemLink
to="/settings"
primary={i18n.t("mainDrawer.listItems.settings")}
icon={<SettingsOutlinedIcon />}
/>
)}
/>
</>
)}
/>
</div>
);
};
export default MainListItems;

124
frontend/src/layout/MainListItems.js
View File

@ -1,28 +1,6 @@
import React, { useContext, useEffect, useState } from "react";
import { Link as RouterLink } from "react-router-dom";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import ListSubheader from "@material-ui/core/ListSubheader";
import Divider from "@material-ui/core/Divider";
import { Badge } from "@material-ui/core";
import DashboardOutlinedIcon from "@material-ui/icons/DashboardOutlined";
import ReportOutlinedIcon from "@material-ui/icons/ReportOutlined";
import SendOutlined from '@material-ui/icons/SendOutlined';
//import ReportOutlined from "@bit/mui-org.material-ui-icons.report-outlined";
import WhatsAppIcon from "@material-ui/icons/WhatsApp";
import SyncAltIcon from "@material-ui/icons/SyncAlt";
import SettingsOutlinedIcon from "@material-ui/icons/SettingsOutlined";
import PeopleAltOutlinedIcon from "@material-ui/icons/PeopleAltOutlined";
import ContactPhoneOutlinedIcon from "@material-ui/icons/ContactPhoneOutlined";
import AccountTreeOutlinedIcon from "@material-ui/icons/AccountTreeOutlined";
import QuestionAnswerOutlinedIcon from "@material-ui/icons/QuestionAnswerOutlined";
import { i18n } from "../translate/i18n";
import { WhatsAppsContext } from "../context/WhatsApp/WhatsAppsContext";
import { AuthContext } from "../context/Auth/AuthContext";
@ -32,25 +10,14 @@ function ListItemLink(props) {
const { icon, primary, to, className } = props;
const renderLink = React.useMemo(
() =>
React.forwardRef((itemProps, ref) => (
<RouterLink to={to} ref={ref} {...itemProps} />
)),
() => React.forwardRef((itemProps, ref) => <RouterLink to={to} ref={ref} {...itemProps} />),
[to]
);
return (
<li>
<ListItem button component={renderLink} className={className}>
{icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
<ListItemText primary={primary} />
</ListItem>
</li>
);
}
const MainListItems = (props) => {
const { drawerClose } = props;
const { whatsApps } = useContext(WhatsAppsContext);
const { user } = useContext(AuthContext);
const [connectionWarning, setConnectionWarning] = useState(false);
@ -78,90 +45,9 @@ const MainListItems = (props) => {
}, [whatsApps]);
return (
<div onClick={drawerClose}>
<ListItemLink
to="/tickets"
primary={i18n.t("mainDrawer.listItems.tickets")}
icon={<WhatsAppIcon />}
/>
<ListItemLink
to="/contacts"
primary={i18n.t("mainDrawer.listItems.contacts")}
icon={<ContactPhoneOutlinedIcon />}
/>
<ListItemLink
to="/schedulesReminder"
primary="Lembretes"
icon={<SendOutlined />}
/>
<ListItemLink
to="/quickAnswers"
primary={i18n.t("mainDrawer.listItems.quickAnswers")}
icon={<QuestionAnswerOutlinedIcon />}
/>
<Can
role={user.profile}
perform="drawer-admin-items:view"
yes={() => (
<>
<Divider />
<ListSubheader inset>
{i18n.t("mainDrawer.listItems.administration")}
</ListSubheader>
<ListItemLink
to="/users"
primary={i18n.t("mainDrawer.listItems.users")}
icon={<PeopleAltOutlinedIcon />}
/>
<ListItemLink
to="/queues"
primary={i18n.t("mainDrawer.listItems.queues")}
icon={<AccountTreeOutlinedIcon />}
/>
<ListItemLink
to="/connections"
primary={i18n.t("mainDrawer.listItems.connections")}
icon={
<Badge badgeContent={connectionWarning ? "!" : 0} color="error">
<SyncAltIcon />
</Badge>
}
/>
<ListItemLink
to="/"
primary="Dashboard"
icon={<DashboardOutlinedIcon />}
/>
<ListItemLink
to="/report"
primary="Relatório"
icon={<ReportOutlinedIcon />}
/>
<Can
role={user.profile}
perform="settings-view:show"
yes={() => (
<ListItemLink
to="/settings"
primary={i18n.t("mainDrawer.listItems.settings")}
icon={<SettingsOutlinedIcon />}
/>
)}
/>
</>
)}
/>
</div>
<ul>
<li></li>
</ul>
);
};

271
frontend/src/layout/index copy.js 100644
View File

@ -0,0 +1,271 @@
import React, { useState, useContext, useEffect } from "react";
import clsx from "clsx";
import {
makeStyles,
Drawer,
AppBar,
Toolbar,
List,
Typography,
Divider,
MenuItem,
IconButton,
Menu,
} from "@material-ui/core";
import MenuIcon from "@material-ui/icons/Menu";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import AccountCircle from "@material-ui/icons/AccountCircle";
import MainListItems from "./MainListItems";
import NotificationsPopOver from "../components/NotificationsPopOver";
import UserModal from "../components/UserModal";
import { AuthContext } from "../context/Auth/AuthContext";
import BackdropLoading from "../components/BackdropLoading";
import { i18n } from "../translate/i18n";
const drawerWidth = 240;
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
height: "100vh",
[theme.breakpoints.down("sm")]: {
height: "calc(100vh - 56px)",
},
},
toolbar: {
paddingRight: 24, // keep right padding when drawer closed
},
toolbarIcon: {
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
padding: "0 8px",
minHeight: "48px",
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(["width", "margin"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
},
appBarShift: {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(["width", "margin"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
menuButton: {
marginRight: 36,
},
menuButtonHidden: {
display: "none",
},
title: {
flexGrow: 1,
},
drawerPaper: {
position: "relative",
whiteSpace: "nowrap",
width: drawerWidth,
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
drawerPaperClose: {
overflowX: "hidden",
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
width: theme.spacing(7),
[theme.breakpoints.up("sm")]: {
width: theme.spacing(9),
},
},
appBarSpacer: {
minHeight: "48px",
},
content: {
flex: 1,
overflow: "auto",
},
container: {
paddingTop: theme.spacing(4),
paddingBottom: theme.spacing(4),
},
paper: {
padding: theme.spacing(2),
display: "flex",
overflow: "auto",
flexDirection: "column",
},
}));
const LoggedInLayout = ({ children }) => {
const classes = useStyles();
const [userModalOpen, setUserModalOpen] = useState(false);
const [anchorEl, setAnchorEl] = useState(null);
const [menuOpen, setMenuOpen] = useState(false);
const { handleLogout, loading } = useContext(AuthContext);
const [drawerOpen, setDrawerOpen] = useState(true);
const [drawerVariant, setDrawerVariant] = useState("permanent");
const { user } = useContext(AuthContext);
useEffect(() => {
if (document.body.offsetWidth > 600) {
setDrawerOpen(true);
}
}, []);
useEffect(() => {
if (document.body.offsetWidth < 600) {
setDrawerVariant("temporary");
} else {
setDrawerVariant("permanent");
}
}, [drawerOpen]);
const handleMenu = (event) => {
setAnchorEl(event.currentTarget);
setMenuOpen(true);
};
const handleCloseMenu = () => {
setAnchorEl(null);
setMenuOpen(false);
};
const handleOpenUserModal = () => {
setUserModalOpen(true);
handleCloseMenu();
};
const handleClickLogout = () => {
handleCloseMenu();
handleLogout();
};
const drawerClose = () => {
if (document.body.offsetWidth < 600) {
setDrawerOpen(false);
}
};
if (loading) {
return <BackdropLoading />;
}
return (
<div className={classes.root}>
<Drawer
variant={drawerVariant}
className={drawerOpen ? classes.drawerPaper : classes.drawerPaperClose}
classes={{
paper: clsx(
classes.drawerPaper,
!drawerOpen && classes.drawerPaperClose
),
}}
open={drawerOpen}
>
<div className={classes.toolbarIcon}>
<IconButton onClick={() => setDrawerOpen(!drawerOpen)}>
<ChevronLeftIcon />
</IconButton>
</div>
<Divider />
<List>
<MainListItems drawerClose={drawerClose} />
</List>
<Divider />
</Drawer>
<UserModal
open={userModalOpen}
onClose={() => setUserModalOpen(false)}
userId={user?.id}
/>
<AppBar
position="absolute"
className={clsx(classes.appBar, drawerOpen && classes.appBarShift)}
color={process.env.NODE_ENV === "development" ? "inherit" : "primary"}
>
<Toolbar variant="dense" className={classes.toolbar}>
<IconButton
edge="start"
color="inherit"
aria-label="open drawer"
onClick={() => setDrawerOpen(!drawerOpen)}
className={clsx(
classes.menuButton,
drawerOpen && classes.menuButtonHidden
)}
>
<MenuIcon />
</IconButton>
<Typography
component="h1"
variant="h6"
color="inherit"
noWrap
className={classes.title}
>
OMNIHIT
</Typography>
{user.id && <NotificationsPopOver />}
<div>
<IconButton
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleMenu}
color="inherit"
>
<AccountCircle />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorEl}
getContentAnchorEl={null}
anchorOrigin={{
vertical: "bottom",
horizontal: "right",
}}
transformOrigin={{
vertical: "top",
horizontal: "right",
}}
open={menuOpen}
onClose={handleCloseMenu}
>
<MenuItem onClick={handleOpenUserModal}>
{i18n.t("mainDrawer.appBar.user.profile")}
</MenuItem>
<MenuItem onClick={handleClickLogout}>
{i18n.t("mainDrawer.appBar.user.logout")}
</MenuItem>
</Menu>
</div>
</Toolbar>
</AppBar>
<main className={classes.content}>
<div className={classes.appBarSpacer} />
{children ? children : null}
</main>
</div>
);
};
export default LoggedInLayout;

267
frontend/src/layout/index.js
View File

@ -1,271 +1,32 @@
import React, { useState, useContext, useEffect } from "react";
import clsx from "clsx";
import React from "react";
import {
makeStyles,
Drawer,
AppBar,
Toolbar,
List,
Typography,
Divider,
MenuItem,
IconButton,
Menu,
} from "@material-ui/core";
import MenuIcon from "@material-ui/icons/Menu";
import ChevronLeftIcon from "@material-ui/icons/ChevronLeft";
import AccountCircle from "@material-ui/icons/AccountCircle";
import MainListItems from "./MainListItems";
import NotificationsPopOver from "../components/NotificationsPopOver";
import UserModal from "../components/UserModal";
import Loading from "../components/LoadingScreen/Loading";
import MainContainer from "../components/Base/MainContainer";
import { AuthContext } from "../context/Auth/AuthContext";
import BackdropLoading from "../components/BackdropLoading";
import { i18n } from "../translate/i18n";
//import MailLogo from '../assets/logo.jpg';
const drawerWidth = 240;
const useStyles = makeStyles((theme) => ({
root: {
display: "flex",
height: "100vh",
[theme.breakpoints.down("sm")]: {
height: "calc(100vh - 56px)",
},
},
toolbar: {
paddingRight: 24, // keep right padding when drawer closed
},
toolbarIcon: {
display: "flex",
alignItems: "center",
justifyContent: "flex-end",
padding: "0 8px",
minHeight: "48px",
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
transition: theme.transitions.create(["width", "margin"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
},
appBarShift: {
marginLeft: drawerWidth,
width: `calc(100% - ${drawerWidth}px)`,
transition: theme.transitions.create(["width", "margin"], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
menuButton: {
marginRight: 36,
},
menuButtonHidden: {
display: "none",
},
title: {
flexGrow: 1,
},
drawerPaper: {
position: "relative",
whiteSpace: "nowrap",
width: drawerWidth,
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.enteringScreen,
}),
},
drawerPaperClose: {
overflowX: "hidden",
transition: theme.transitions.create("width", {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
width: theme.spacing(7),
[theme.breakpoints.up("sm")]: {
width: theme.spacing(9),
},
},
appBarSpacer: {
minHeight: "48px",
},
content: {
flex: 1,
overflow: "auto",
},
container: {
paddingTop: theme.spacing(4),
paddingBottom: theme.spacing(4),
},
paper: {
padding: theme.spacing(2),
display: "flex",
overflow: "auto",
flexDirection: "column",
},
}));
import MenuComponent from "../components/Menu/MenuComponent";
const LoggedInLayout = ({ children }) => {
const classes = useStyles();
const [userModalOpen, setUserModalOpen] = useState(false);
const [anchorEl, setAnchorEl] = useState(null);
const [menuOpen, setMenuOpen] = useState(false);
const { handleLogout, loading } = useContext(AuthContext);
const [drawerOpen, setDrawerOpen] = useState(false);
const [drawerVariant, setDrawerVariant] = useState("permanent");
const { user } = useContext(AuthContext);
const { handleLogout, loading, isAuth } = React.useContext(AuthContext);
const { user } = React.useContext(AuthContext);
useEffect(() => {
if (document.body.offsetWidth > 600) {
setDrawerOpen(true);
}
}, []);
useEffect(() => {
if (document.body.offsetWidth < 600) {
setDrawerVariant("temporary");
} else {
setDrawerVariant("permanent");
}
}, [drawerOpen]);
const handleMenu = (event) => {
setAnchorEl(event.currentTarget);
setMenuOpen(true);
};
const handleCloseMenu = () => {
setAnchorEl(null);
setMenuOpen(false);
};
const handleOpenUserModal = () => {
setUserModalOpen(true);
handleCloseMenu();
};
const handleClickLogout = () => {
handleCloseMenu();
const logout = (e) => {
handleLogout();
};
const drawerClose = () => {
if (document.body.offsetWidth < 600) {
setDrawerOpen(false);
}
};
if (loading) {
return <BackdropLoading />;
return <Loading />;
}
return (
<div className={classes.root}>
<Drawer
variant={drawerVariant}
className={drawerOpen ? classes.drawerPaper : classes.drawerPaperClose}
classes={{
paper: clsx(
classes.drawerPaper,
!drawerOpen && classes.drawerPaperClose
),
}}
open={drawerOpen}
>
<div className={classes.toolbarIcon}>
<IconButton onClick={() => setDrawerOpen(!drawerOpen)}>
<ChevronLeftIcon />
</IconButton>
</div>
<Divider />
<List>
<MainListItems drawerClose={drawerClose} />
</List>
<Divider />
</Drawer>
<UserModal
open={userModalOpen}
onClose={() => setUserModalOpen(false)}
userId={user?.id}
/>
<AppBar
position="absolute"
className={clsx(classes.appBar, drawerOpen && classes.appBarShift)}
color={process.env.NODE_ENV === "development" ? "inherit" : "primary"}
>
<Toolbar variant="dense" className={classes.toolbar}>
<IconButton
edge="start"
color="inherit"
aria-label="open drawer"
onClick={() => setDrawerOpen(!drawerOpen)}
className={clsx(
classes.menuButton,
drawerOpen && classes.menuButtonHidden
)}
>
<MenuIcon />
</IconButton>
<Typography
component="h1"
variant="h6"
color="inherit"
noWrap
className={classes.title}
>
OMNIHIT
</Typography>
{user.id && <NotificationsPopOver />}
<div>
<IconButton
aria-label="account of current user"
aria-controls="menu-appbar"
aria-haspopup="true"
onClick={handleMenu}
color="inherit"
>
<AccountCircle />
</IconButton>
<Menu
id="menu-appbar"
anchorEl={anchorEl}
getContentAnchorEl={null}
anchorOrigin={{
vertical: "bottom",
horizontal: "right",
}}
transformOrigin={{
vertical: "top",
horizontal: "right",
}}
open={menuOpen}
onClose={handleCloseMenu}
>
<MenuItem onClick={handleOpenUserModal}>
{i18n.t("mainDrawer.appBar.user.profile")}
</MenuItem>
<MenuItem onClick={handleClickLogout}>
{i18n.t("mainDrawer.appBar.user.logout")}
</MenuItem>
</Menu>
</div>
</Toolbar>
</AppBar>
<main className={classes.content}>
<div className={classes.appBarSpacer} />
<>
<MenuComponent/>
<MainContainer>
<main style={{ padding: "16px", marginLeft: "90px",marginBottom: "16px", width: "100%", height:"100vh", justifyItem: "right" }}>
{children ? children : null}
</main>
</div>
</MainContainer>
</>
);
};

16
frontend/src/pages/Login/index.js
View File

@ -3,10 +3,9 @@ import { AuthContext } from "../../context/Auth/AuthContext";
import { i18n } from "../../translate/i18n";
import ContainerLogin from "../../components/Base/ContainerLogin";
import VideoLogin from "../../components/LoginComponents/VideoTag/VideoLogin";
import { Input } from "@mui/material";
import AvatarLogin from "../../components/LoginComponents/AvatarCompany/AvatarLogin";
import VideoComponent from "../../components/VideoTag/VideoComponent";
import LoginForm from "../../components/LoginComponents/LoginForm/LoginForm";
import Company from "../../components/LoginComponents/CompanyLogo/Company";
//! Can i Delete this comment above?
// const Copyright = () => {
@ -44,7 +43,6 @@ import LoginForm from "../../components/LoginComponents/LoginForm/LoginForm";
const Login = () => {
const [user, setUser] = React.useState({ email: "", password: "" });
const [showPassword, setShowPassword] = React.useState(false);
const { handleLogin } = React.useContext(AuthContext);
@ -59,8 +57,14 @@ const Login = () => {
return (
<ContainerLogin>
<VideoLogin />
<LoginForm handleChangeInput={handleChangeInput} handlSubmit={handlSubmit} user={user.email} password={user.password} />
<VideoComponent width={"350px"} autoPlay muted loop position={"relative"} />
<LoginForm
handleChangeInput={handleChangeInput}
handlSubmit={handlSubmit}
user={user.email}
password={user.password}
/>
<Company />
</ContainerLogin>
);
};

4
frontend/src/routes/index.js
View File

@ -8,9 +8,9 @@ import Dashboard from "../pages/Dashboard/";
import Report from "../pages/Report/";
import SchedulesReminder from "../pages/SchedulesReminder/";
import Tickets from "../pages/Tickets/";
import Signup from "../pages/Signup/";
import Login from "../pages/Login/";
import Signup from "../pages/Signup/";
import Tickets from "../pages/Tickets/";
import Connections from "../pages/Connections/";
import Settings from "../pages/Settings/";
import Users from "../pages/Users";