From e13e630cd6e4fc0b1ff92098a28a770794c7bb9a Mon Sep 17 00:00:00 2001
From: gabrhr <73925454+gabrhr@users.noreply.github.com>
Date: Wed, 20 Apr 2022 10:19:29 -0500
Subject: =?UTF-8?q?A=C3=B1adir=20plantilla?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Base para front
---
 .../odiparpack/app/components/Sidebar/MainMenu.js  | 130 +++++++++++++
 .../odiparpack/app/components/Sidebar/OtherMenu.js |  44 +++++
 front/odiparpack/app/components/Sidebar/Sidebar.js | 122 ++++++++++++
 .../app/components/Sidebar/sidebar-jss.js          | 205 +++++++++++++++++++++
 4 files changed, 501 insertions(+)
 create mode 100644 front/odiparpack/app/components/Sidebar/MainMenu.js
 create mode 100644 front/odiparpack/app/components/Sidebar/OtherMenu.js
 create mode 100644 front/odiparpack/app/components/Sidebar/Sidebar.js
 create mode 100644 front/odiparpack/app/components/Sidebar/sidebar-jss.js

(limited to 'front/odiparpack/app/components/Sidebar')

diff --git a/front/odiparpack/app/components/Sidebar/MainMenu.js b/front/odiparpack/app/components/Sidebar/MainMenu.js
new file mode 100644
index 0000000..edeb420
--- /dev/null
+++ b/front/odiparpack/app/components/Sidebar/MainMenu.js
@@ -0,0 +1,130 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { NavLink } from 'react-router-dom';
+import ExpandLess from '@material-ui/icons/ExpandLess';
+import ExpandMore from '@material-ui/icons/ExpandMore';
+// Menu Object
+import MenuContent from 'ba-api/menu';
+import { List, ListItem, ListItemIcon, ListItemText, Collapse, Icon } from '@material-ui/core';
+import styles from './sidebar-jss';
+
+function sortByKey(array, key) {
+  return array.sort((a, b) => {
+    const x = a[key]; const y = b[key];
+    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
+  });
+}
+
+const LinkBtn = React.forwardRef(function LinkBtn(props, ref) { // eslint-disable-line
+  return <NavLink to={props.to} {...props} innerRef={ref} />; // eslint-disable-line
+});
+
+function MainMenu(props) {
+  const {
+    classes,
+    toggleDrawerOpen,
+    loadTransition,
+    openSubMenu,
+    open,
+  } = props;
+
+  const handleClick = () => {
+    toggleDrawerOpen();
+    loadTransition(false);
+  };
+
+  const getMenus = menuArray => menuArray.map((item, index) => {
+    if (item.child) {
+      return (
+        <div key={index.toString()}>
+          <ListItem
+            button
+            className={classNames(classes.head, open.indexOf(item.key) > -1 ? classes.opened : '')}
+            onClick={() => openSubMenu(item.key, item.keyParent)}
+          >
+            {item.icon
+              && (
+                <ListItemIcon className={classes.iconWrapper}>
+                  <Icon className={classes.icon}>{item.icon}</Icon>
+                </ListItemIcon>
+              )
+            }
+            <ListItemText classes={{ primary: classes.primary }} variant="inset" primary={item.name} />
+            { open.indexOf(item.key) > -1 ? <ExpandLess /> : <ExpandMore /> }
+          </ListItem>
+          <Collapse
+            component="li"
+            className={classNames(
+              classes.nolist,
+              (item.keyParent ? classes.child : ''),
+            )}
+            in={open.indexOf(item.key) > -1}
+            timeout="auto"
+            unmountOnExit
+          >
+            <List className={classes.dense} dense>
+              { getMenus(sortByKey(item.child, 'key')) }
+            </List>
+          </Collapse>
+        </div>
+      );
+    }
+    return (
+      <ListItem
+        key={index.toString()}
+        button
+        exact
+        className={classes.nested}
+        activeClassName={classes.active}
+        component={LinkBtn}
+        to={item.link}
+        onClick={handleClick}
+      >
+        {item.icon
+          && (
+            <ListItemIcon>
+              <Icon className={classes.icon}>{item.icon}</Icon>
+            </ListItemIcon>
+          )
+        }
+        <ListItemText classes={{ primary: classes.primary }} inset primary={item.name} />
+      </ListItem>
+    );
+  });
+  return (
+    <div>
+      {getMenus(MenuContent)}
+    </div>
+  );
+}
+
+MainMenu.propTypes = {
+  classes: PropTypes.object.isRequired,
+  open: PropTypes.object.isRequired,
+  openSubMenu: PropTypes.func.isRequired,
+  toggleDrawerOpen: PropTypes.func.isRequired,
+  loadTransition: PropTypes.func.isRequired,
+};
+
+const openAction = (key, keyParent) => ({ type: 'OPEN_SUBMENU', key, keyParent });
+const reducer = 'ui';
+
+const mapStateToProps = state => ({
+  force: state, // force active class for sidebar menu
+  open: state.getIn([reducer, 'subMenuOpen'])
+});
+
+const mapDispatchToProps = dispatch => ({
+  openSubMenu: bindActionCreators(openAction, dispatch)
+});
+
+const MainMenuMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(MainMenu);
+
+export default withStyles(styles)(MainMenuMapped);
diff --git a/front/odiparpack/app/components/Sidebar/OtherMenu.js b/front/odiparpack/app/components/Sidebar/OtherMenu.js
new file mode 100644
index 0000000..ea2f597
--- /dev/null
+++ b/front/odiparpack/app/components/Sidebar/OtherMenu.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { NavLink } from 'react-router-dom';
+import OtherMenuContent from 'ba-api/otherMenu';
+import { ListItem, ListItemText } from '@material-ui/core';
+import styles from './sidebar-jss';
+
+const LinkBtn = React.forwardRef(function LinkBtn(props, ref) { // eslint-disable-line
+  return <NavLink to={props.to} {...props} innerRef={ref} />; // eslint-disable-line
+});
+
+function OtherMenu(props) {
+  const { toggleDrawerOpen, classes } = props;
+  const getOtherMenu = menuArray => menuArray.map((item, index) => {
+    const keyIndex = index.toString();
+    return (
+      <div key={keyIndex}>
+        <ListItem
+          button
+          component={LinkBtn}
+          to={item.link}
+          activeClassName={classes.active}
+          onClick={toggleDrawerOpen}
+        >
+          <ListItemText secondary={item.name} />
+        </ListItem>
+      </div>
+    );
+  });
+
+  return (
+    <div>
+      {getOtherMenu(OtherMenuContent)}
+    </div>
+  );
+}
+
+OtherMenu.propTypes = {
+  classes: PropTypes.object.isRequired,
+  toggleDrawerOpen: PropTypes.func.isRequired,
+};
+
+export default withStyles(styles)(OtherMenu);
diff --git a/front/odiparpack/app/components/Sidebar/Sidebar.js b/front/odiparpack/app/components/Sidebar/Sidebar.js
new file mode 100644
index 0000000..01de4ec
--- /dev/null
+++ b/front/odiparpack/app/components/Sidebar/Sidebar.js
@@ -0,0 +1,122 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import brand from 'ba-api/brand';
+import dummy from 'ba-api/dummyContents';
+import logo from 'ba-images/logo.svg';
+import { Hidden, Drawer, SwipeableDrawer, List, Divider, Avatar } from '@material-ui/core';
+import MainMenu from './MainMenu';
+import OtherMenu from './OtherMenu';
+import styles from './sidebar-jss';
+
+const MenuContent = props => {
+  const {
+    classes,
+    turnDarker,
+    drawerPaper,
+    toggleDrawerOpen,
+    loadTransition
+  } = props;
+  return (
+    <div className={classNames(classes.drawerInner, !drawerPaper ? classes.drawerPaperClose : '')}>
+      <div className={classes.drawerHeader}>
+        <div className={classNames(classes.brand, classes.brandBar, turnDarker && classes.darker)}>
+          <img src={logo} alt={brand.name} />
+          <h3>{brand.name}</h3>
+        </div>
+        <div className={classNames(classes.profile, classes.user)}>
+          <Avatar
+            alt={dummy.user.name}
+            src={dummy.user.avatar}
+            className={classNames(classes.avatar, classes.bigAvatar)}
+          />
+          <div>
+            <h4>{dummy.user.name}</h4>
+            <span>{dummy.user.title}</span>
+          </div>
+        </div>
+      </div>
+      <div className={classes.menuContainer}>
+        <MainMenu loadTransition={loadTransition} toggleDrawerOpen={toggleDrawerOpen} />
+        <Divider className={classes.divider} />
+        <List>
+          <OtherMenu toggleDrawerOpen={toggleDrawerOpen} />
+        </List>
+      </div>
+    </div>
+  );
+};
+
+MenuContent.propTypes = {
+  classes: PropTypes.object.isRequired,
+  drawerPaper: PropTypes.bool.isRequired,
+  turnDarker: PropTypes.bool,
+  toggleDrawerOpen: PropTypes.func,
+  loadTransition: PropTypes.func,
+};
+
+MenuContent.defaultProps = {
+  turnDarker: false
+};
+
+MenuContent.defaultProps = {
+  toggleDrawerOpen: () => {},
+  loadTransition: () => {},
+};
+
+const MenuContentStyle = withStyles(styles)(MenuContent);
+
+function Sidebar(props) {
+  const {
+    classes,
+    open,
+    toggleDrawerOpen,
+    loadTransition,
+    turnDarker
+  } = props;
+
+  return (
+    <Fragment>
+      <Hidden lgUp>
+        <SwipeableDrawer
+          onClose={toggleDrawerOpen}
+          onOpen={toggleDrawerOpen}
+          open={!open}
+          anchor="left"
+        >
+          <div className={classes.swipeDrawerPaper}>
+            <MenuContentStyle drawerPaper toggleDrawerOpen={toggleDrawerOpen} loadTransition={loadTransition} />
+          </div>
+        </SwipeableDrawer>
+      </Hidden>
+      <Hidden mdDown>
+        <Drawer
+          variant="permanent"
+          onClose={toggleDrawerOpen}
+          classes={{
+            paper: classNames(classes.drawer, classes.drawerPaper, !open ? classes.drawerPaperClose : ''),
+          }}
+          open={open}
+          anchor="left"
+        >
+          <MenuContentStyle
+            drawerPaper={open}
+            turnDarker={turnDarker}
+            loadTransition={loadTransition}
+          />
+        </Drawer>
+      </Hidden>
+    </Fragment>
+  );
+}
+
+Sidebar.propTypes = {
+  classes: PropTypes.object.isRequired,
+  toggleDrawerOpen: PropTypes.func.isRequired,
+  loadTransition: PropTypes.func.isRequired,
+  turnDarker: PropTypes.bool.isRequired,
+  open: PropTypes.bool.isRequired,
+};
+
+export default withStyles(styles)(Sidebar);
diff --git a/front/odiparpack/app/components/Sidebar/sidebar-jss.js b/front/odiparpack/app/components/Sidebar/sidebar-jss.js
new file mode 100644
index 0000000..e9bf4f6
--- /dev/null
+++ b/front/odiparpack/app/components/Sidebar/sidebar-jss.js
@@ -0,0 +1,205 @@
+const drawerWidth = 240;
+const styles = theme => ({
+  user: {
+    justifyContent: 'center'
+  },
+  drawerPaper: {
+    position: 'relative',
+    height: '100%',
+    overflow: 'hidden',
+    backgroundColor: theme.palette.background.default,
+    border: 'none',
+    width: drawerWidth,
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+  },
+  swipeDrawerPaper: {
+    width: drawerWidth,
+  },
+  opened: {
+    background: theme.palette.grey[200],
+    '& $primary, & $icon': {
+      color: theme.palette.secondary.dark,
+    },
+  },
+  drawerInner: {
+    height: '100%',
+    position: 'fixed',
+    width: drawerWidth,
+  },
+  drawerPaperClose: {
+    width: 66,
+    position: 'fixed',
+    overflowX: 'hidden',
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+    '& $user': {
+      justifyContent: 'flex-start'
+    },
+    '& $bigAvatar': {
+      width: 40,
+      height: 40,
+    },
+    '& li ul': {
+      display: 'none'
+    },
+    '&:hover': {
+      width: drawerWidth,
+      boxShadow: theme.shadows[6],
+      '& li ul': {
+        display: 'block'
+      }
+    },
+    '& $menuContainer': {
+      paddingLeft: theme.spacing(1.5),
+      paddingRight: theme.spacing(1.5),
+      width: drawerWidth,
+    },
+    '& $drawerInner': {
+      width: 'auto'
+    },
+    '& $brandBar': {
+      opacity: 0
+    }
+  },
+  drawerHeader: {
+    background: theme.palette.primary.main,
+    color: theme.palette.primary.contrastText,
+    padding: '0',
+    ...theme.mixins.toolbar,
+    '& h3': {
+      color: theme.palette.primary.contrastText,
+    }
+  },
+  avatar: {
+    margin: 10,
+  },
+  bigAvatar: {
+    width: 80,
+    height: 80,
+  },
+  brandBar: {
+    transition: theme.transitions.create(['width', 'margin', 'background'], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    '&:after': {
+      transition: theme.transitions.create(['box-shadow'], {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.enteringScreen,
+      }),
+    }
+  },
+  darker: {
+    background: theme.palette.primary.dark,
+  },
+  title: {},
+  nested: {
+    paddingLeft: 0,
+    paddingTop: theme.spacing(0.5),
+    paddingBottom: theme.spacing(0.5),
+    '& > div > span': {
+      fontSize: '0.8125rem'
+    }
+  },
+  child: {
+    '& a': {
+      paddingLeft: theme.spacing(3),
+    }
+  },
+  dense: {
+    '& > $title:first-child': {
+      margin: '0'
+    },
+    '& $head': {
+      paddingLeft: theme.spacing(7)
+    }
+  },
+  active: {
+    backgroundColor: theme.palette.primary.light,
+    '& $primary, & $icon': {
+      color: theme.palette.secondary.dark,
+    },
+    '&:hover': {
+      backgroundColor: theme.palette.primary.light,
+    }
+  },
+  nolist: {
+    listStyle: 'none',
+  },
+  primary: {},
+  iconWrapper: {
+    width: theme.spacing(5),
+    minWidth: 0,
+    marginRight: 0,
+    marginLeft: theme.spacing(2)
+  },
+  icon: {
+    marginRight: 0,
+    color: theme.palette.secondary.dark,
+  },
+  head: {
+    paddingLeft: 0
+  },
+  brand: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '10px 10px 5px',
+    height: 64,
+    position: 'relative',
+    '& img': {
+      width: 20
+    },
+    '& h3': {
+      fontSize: 16,
+      margin: 0,
+      paddingLeft: 10,
+      fontWeight: 500
+    }
+  },
+  profile: {
+    height: 120,
+    display: 'flex',
+    fontSize: 14,
+    padding: 10,
+    alignItems: 'center',
+    '& h4': {
+      fontSize: 18,
+      marginBottom: 0,
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      width: 110
+    },
+    '& span': {
+      fontSize: 12,
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      width: 110,
+      display: 'block',
+      overflow: 'hidden'
+    }
+  },
+  menuContainer: {
+    padding: theme.spacing(1),
+    background: theme.palette.background.default,
+    [theme.breakpoints.up('lg')]: {
+      padding: theme.spacing(1.5),
+    },
+    paddingRight: theme.spacing(1),
+    overflow: 'auto',
+    height: 'calc(100% - 185px)',
+    position: 'relative',
+    display: 'block'
+  },
+  divider: {
+    marginTop: theme.spacing(1)
+  }
+});
+
+export default styles;
-- 
cgit v1.2.3