From 55c0f57d42d82f1f1f5809e9c7d6845b6e0b68af Mon Sep 17 00:00:00 2001 From: gabrhr <73925454+gabrhr@users.noreply.github.com> Date: Wed, 25 May 2022 15:36:35 -0500 Subject: Add PedidoPage - cambio de esqueleto segun figma - componente de etiquetas - tabla y form de Pedido #TODO - estetica de etiquetas - redux y crear end points --- .../app/components/Sidebar/MainMenuSimple.js | 98 ++++++++++++++++++++++ front/odiparpack/app/components/Sidebar/Sidebar.js | 14 ++-- .../app/components/Sidebar/sidebar-jss.js | 18 ++-- 3 files changed, 117 insertions(+), 13 deletions(-) create mode 100644 front/odiparpack/app/components/Sidebar/MainMenuSimple.js (limited to 'front/odiparpack/app/components/Sidebar') diff --git a/front/odiparpack/app/components/Sidebar/MainMenuSimple.js b/front/odiparpack/app/components/Sidebar/MainMenuSimple.js new file mode 100644 index 0000000..f7634ca --- /dev/null +++ b/front/odiparpack/app/components/Sidebar/MainMenuSimple.js @@ -0,0 +1,98 @@ +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 ; // eslint-disable-line +}); + +function MainMenuSimple(props) { + const { + classes, + toggleDrawerOpen, + loadTransition, + openSubMenu, + open, + } = props; + + const handleClick = () => { + //toggleDrawerOpen(); + loadTransition(false); + }; + + const getMenus = menuArray => menuArray.map((item, index) => { + return ( +
+ -1 ? classes.opened : '')} + activeClassName={classes.active} + component={LinkBtn} + to={item.link} + onClick={handleClick} + timeout="auto" + unmountOnExit + > + {item.icon + && ( + + {item.icon} + + ) + } + + +
+ ); + }); + return ( +
+ {getMenus(MenuContent)} +
+ ); +} + +MainMenuSimple.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 +)(MainMenuSimple); + +export default withStyles(styles)(MainMenuMapped); diff --git a/front/odiparpack/app/components/Sidebar/Sidebar.js b/front/odiparpack/app/components/Sidebar/Sidebar.js index 01de4ec..b4f5626 100644 --- a/front/odiparpack/app/components/Sidebar/Sidebar.js +++ b/front/odiparpack/app/components/Sidebar/Sidebar.js @@ -4,10 +4,10 @@ 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 logo from 'ba-images/logo.png'; +import { Hidden, Drawer, SwipeableDrawer, Avatar } from '@material-ui/core'; +import MainMenuSimple from './MainMenuSimple'; +//import OtherMenu from './OtherMenu'; import styles from './sidebar-jss'; const MenuContent = props => { @@ -38,11 +38,11 @@ const MenuContent = props => {
- - + + {/* - + */}
); diff --git a/front/odiparpack/app/components/Sidebar/sidebar-jss.js b/front/odiparpack/app/components/Sidebar/sidebar-jss.js index e9bf4f6..95fb2b2 100644 --- a/front/odiparpack/app/components/Sidebar/sidebar-jss.js +++ b/front/odiparpack/app/components/Sidebar/sidebar-jss.js @@ -76,11 +76,14 @@ const styles = theme => ({ } }, avatar: { - margin: 10, + marginBottom: 10, + marginTop: 10, + marginLeft: 6, + marginRight: 10 }, bigAvatar: { - width: 80, - height: 80, + width: 55, + height: 55, }, brandBar: { transition: theme.transitions.create(['width', 'margin', 'background'], { @@ -168,16 +171,19 @@ const styles = theme => ({ fontSize: 14, padding: 10, alignItems: 'center', + justifyContent: 'flex-start', '& h4': { - fontSize: 18, + fontSize: 19, marginBottom: 0, textOverflow: 'ellipsis', + display: 'flex', overflow: 'hidden', whiteSpace: 'nowrap', - width: 110 + wordBreak:'break-all', + width: 180, }, '& span': { - fontSize: 12, + fontSize: 14, textOverflow: 'ellipsis', whiteSpace: 'nowrap', width: 110, -- cgit v1.2.3 From 9c396976bb42a9d41407358ce1a1d37242230f21 Mon Sep 17 00:00:00 2001 From: gabrhr <73925454+gabrhr@users.noreply.github.com> Date: Fri, 27 May 2022 12:50:13 -0500 Subject: Add redux, dispatch and etiquetas MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - estetica de etiquetas (ok) - add message, pedido Reducer - add dispatch en Componentes con connect - add api reducer que obtienen el JSON todo ok #TODO - FIX logica de añadiir - FIX axios y dispatch fuera de un componente --- front/odiparpack/app/components/Sidebar/MainMenuSimple.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'front/odiparpack/app/components/Sidebar') diff --git a/front/odiparpack/app/components/Sidebar/MainMenuSimple.js b/front/odiparpack/app/components/Sidebar/MainMenuSimple.js index f7634ca..18ac8fd 100644 --- a/front/odiparpack/app/components/Sidebar/MainMenuSimple.js +++ b/front/odiparpack/app/components/Sidebar/MainMenuSimple.js @@ -5,10 +5,8 @@ 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 MenuContent from 'odi-utils/menu'; import { List, ListItem, ListItemIcon, ListItemText, Collapse, Icon } from '@material-ui/core'; import styles from './sidebar-jss'; -- cgit v1.2.3