Untitled
unknown
plain_text
3 years ago
14 kB
4
Indexable
/* eslint-disable jsx-a11y/alt-text */ import { Auth } from "aws-amplify"; import Badge from "@material-ui/core/Badge"; import React, { Fragment, useEffect } from "react"; import { Trans, withTranslation } from "react-i18next"; import { Link } from "react-router-dom"; import { getUsername } from "../../components/utils/session"; import { GiHamburgerMenu } from "react-icons/gi"; import { BiLogOut } from "react-icons/bi"; import NotificationsIcon from "@material-ui/icons/Notifications"; import { BsThreeDotsVertical } from "react-icons/bs"; import Collapse from "@mui/material/Collapse"; import MenuIcon from "@material-ui/icons/Menu"; import Button from "@material-ui/core/Button"; import Drawer from "@material-ui/core/Drawer"; import { isMobile } from "react-device-detect"; import ArrowRightIcon from "@mui/icons-material/ArrowRight"; import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown"; import * as env from "../../environment"; import i18n from "../../i18n"; import Buttons from "../button"; import { BlockButtonSignOff, BlockButtonSignOff2, ContainerDataUser, NavegationList, NavegationListSubMenu, NavegationListSubMenuTitle, NavegationListSubMenuItem, NavegationMenu, NavegationMenuContainer, UserContainer, UserMail, UserName, NavegationMobileContainer, ProductName, } from "./styles"; const { REACT_APP_API, REACT_APP_ENGINE_API } = env[process.env.NODE_ENV]; function NavegationComponent() { let userInfo = localStorage.getItem("userInfo"); const objectUser = JSON.parse(userInfo); const [username, setUserName] = React.useState(""); const [password, setPassword] = React.useState(""); const [dataModulesUser, setDataModulesUser] = React.useState([]); const [open, setOpen] = React.useState([]); const [showMenu, setShowMenu] = React.useState(true); const [activeIndex, setActiveIndex] = React.useState(0); useEffect(() => { setUserName(getUsername()); chargeModuleByUser(); console.log("leng", i18n.language); //console.log("sub", sub) }, []); const changeLanguage = (ln) => { return () => { i18n.changeLanguage(ln).then(); chargeModuleByUser(); console.log(`Language changed to ${ln}`); }; }; const chargeModuleByUser = () => { let roleUser = JSON.parse(localStorage.getItem("userInfo")).role; const menuAdmin = [ { name: <Trans count="3">Procesos</Trans>, listChildrenMenu: [ { url: "/Home", name: <Trans count="3">Inbox</Trans> }, // { url: "/home/error", name: <Trans count="3">Errores</Trans> }, { url: "/home/instances", name: <Trans count="3">Instancias</Trans> }, // { url: "/home/dashboard", name: <Trans count="3">Dashboard</Trans> }, { url: "/home/bpmnModeler", name: <Trans count="3">BPMN Modeler</Trans>, }, // { // url: "/home/parameters", // name: <Trans count="3">Parametros</Trans>, // }, { url: "/home/contexts", name: <Trans count="3">Contextos</Trans> }, // { url: {pathname: '/home/shippingorder', state: {form: 'starken:shippingorder'}}, name: <Trans count="3">Nueva-Orden</Trans> }, ], }, { name: <Trans count="3">Formulario</Trans>, listChildrenMenu: [ { url: "/home/builderform", name: <Trans count="3">Construir Formulario</Trans>, }, { url: "/home/mantenedor", name: <Trans count="3">Mantenedor-de-formularios</Trans>, }, { url: "/home/formconsult", name: <Trans count="3">Consultar-Formularios</Trans>, }, ], }, ]; const menuSolicitante = [ { name: <Trans count="3">Procesos</Trans>, listChildrenMenu: [ { url: "/Home", name: <Trans count="3">Inbox</Trans> }, { url: "/home/instances", name: <Trans count="3">Instancias</Trans> }, { url: "/home/error", name: <Trans count="3">Errores</Trans> }, ], }, ]; const MENUS = { solicitante: menuSolicitante, analista: menuSolicitante, jefe: menuSolicitante, admin: menuAdmin, }; const menus = MENUS[roleUser]; setDataModulesUser(menus); // inicializar open menues en falso menus.map((elem, index) => { open[index] = false; }); }; const handleClick = (index) => { // console.log(index); // setOpen((prevOpen) => !prevOpen); let openAux = []; open.map((idx) => { return openAux.push(false); }); openAux[index] = true; setOpen(openAux); setActiveIndex(index); }; const logout = async () => { //localStorage.setItem('token', null); localStorage.clear(); //sessionStorage.clear(); await Auth.signOut({ global: true }); //window.location.href = `https://api-hub-difarma.auth.us-east-1.amazoncognito.com/logout?client_id=1aod2gpu5v2npne8d0cvspuidr`; //window.location.href = `https://api-hub-difarma.auth.us-east-1.amazoncognito.com/logout?client_id=1aod2gpu5v2npne8d0cvspuidr&logout_uri=${COGNITO_REDIRECT_SING_OUT}`; //await Auth.signOut({ global: true }); //window.location.href = `https://api-hub-difarma.auth.us-east-1.amazoncognito.com/logout?response_type=token&client_id=1aod2gpu5v2npne8d0cvspuidr&redirect_uri=http://localhost:3000&state=STATE&scope=email openid`; window.location = "/"; }; return ( <Fragment> {isMobile ? ( <> <NavegationMobileContainer style={{ transition: "none", overflowY: "auto", zIndex: 50, width: "auto", }} > <BlockButtonSignOff2> <div> <span data-bs-toggle="collapse" data-bs-target="#CloseNavigation" style={{ fontSize: "1.8rem" , marginLeft:"3%"}} > <GiHamburgerMenu style={{Top:"2%"}} /> <BiLogOut onClick={logout} style={{ fontSize: "1.8rem" ,marginLeft:"50%"}}/> </span> </div> </BlockButtonSignOff2> {/* <ProductName> <div> <BiLogOut onClick={logout} style={{ fontSize: "1.8rem" ,marginLeft:"2%"}}/> </div> </ProductName> */} <NavegationMenu id="CloseNavigation"> <UserContainer> <ContainerDataUser style={{ padding: "0% 0% 0% 0%" }}> <UserName> {objectUser ? objectUser.firstName.toUpperCase() + " " + objectUser.lastName.toUpperCase() : ""} </UserName> <img style={{ height: "20%", width: "20%" }} src={"/images/CL-Bandera.png"} alt="Bandera Chile" /> <UserMail>{objectUser.email.toUpperCase()}</UserMail> <div style={{ marginTop: "3%", cursor: "pointer" }}> <img style={{ height: "65%" }} onClick={changeLanguage("menuEs")} src={"/images/spain_flag.png"} /> <img style={{ height: "65%" }} onClick={changeLanguage("menuEn")} src={"/images/uk_flag.png"} /> </div> </ContainerDataUser> </UserContainer> <NavegationList style={{ height: "75vh", top: 0, bottom: 0 }}> {dataModulesUser.map((element, index) => { return ( <NavegationListSubMenu style={{ padding: "0% 0% 0% 5%" }}> <NavegationListSubMenuTitle onClick={() => handleClick(index)} key={index} > {" "} {open[index] === true ? ( <ArrowDropDownIcon /> ) : ( <ArrowRightIcon /> )} {element.name} </NavegationListSubMenuTitle> <Collapse in={open[index]} timeout="auto"> {element.listChildrenMenu.map( (elementChildren, indexChildren) => { return ( <> {activeIndex === index ? ( <Link to={elementChildren.url} key={indexChildren} > <NavegationListSubMenuItem> {elementChildren.name} </NavegationListSubMenuItem> </Link> ) : null} </> ); } )} </Collapse> </NavegationListSubMenu> ); })} </NavegationList> </NavegationMenu> </NavegationMobileContainer> </> ) : null} {showMenu && !isMobile && ( <NavegationMenuContainer style={{ transition: "none" }}> <BlockButtonSignOff2> <div> <span data-bs-toggle="collapse" data-bs-target="#CloseNavigation" style={{ fontSize: "1.8rem" }} > <GiHamburgerMenu /> </span> </div> </BlockButtonSignOff2> <NavegationMenu id="CloseNavigation"> <UserContainer> <ContainerDataUser style={{ padding: "0% 0% 0% 0%" }}> <UserName> {objectUser ? objectUser.firstName.toUpperCase() + " " + objectUser.lastName.toUpperCase() : ""} </UserName> <img style={{ height: "20%", width: "20%" }} src={"/images/CL-Bandera.png"} alt="Bandera Chile" /> <UserMail>{objectUser.email.toUpperCase()}</UserMail> <div style={{ marginTop: "3%", cursor: "pointer" }}> <img style={{ height: "65%" }} onClick={changeLanguage("menuEs")} src={"/images/spain_flag.png"} /> <img style={{ height: "65%" }} onClick={changeLanguage("menuEn")} src={"/images/uk_flag.png"} /> </div> </ContainerDataUser> </UserContainer> <NavegationList style={{ height: "75vh", top: 0, bottom: 0 }}> {dataModulesUser.map((element, index) => { return ( <NavegationListSubMenu style={{ padding: "0% 0% 0% 5%" }}> <NavegationListSubMenuTitle onClick={() => handleClick(index)} key={index} > {" "} {open[index] === true ? ( <ArrowDropDownIcon /> ) : ( <ArrowRightIcon /> )} {element.name} </NavegationListSubMenuTitle> <Collapse in={open[index]} timeout="auto"> {element.listChildrenMenu.map( (elementChildren, indexChildren) => { return ( <> {activeIndex === index ? ( <Link to={elementChildren.url} key={indexChildren} > <NavegationListSubMenuItem> {elementChildren.name} </NavegationListSubMenuItem> </Link> ) : null} </> ); } )} </Collapse> </NavegationListSubMenu> ); })} </NavegationList> </NavegationMenu> </NavegationMenuContainer> )} {/* <BlockButtonSignOff2 style={{ position: "absolute", bottom: 0 }}> <div style={{ alignSelf: "flex-end", paddingLeft: "5%" }}> <span data-bs-toggle="collapse" data-bs-target="#CloseNavigation" style={{ fontSize: "1.8rem" }} > <GiHamburgerMenu /> </span> </div> </BlockButtonSignOff2> */} </Fragment> ); } export default withTranslation()(NavegationComponent);
Editor is loading...