Add PedidoPage

- cambio de esqueleto segun figma
- componente de etiquetas
- tabla y form de Pedido

#TODO
- estetica de etiquetas
- redux y crear end points

11 files changed, 276 insertions, 24 deletions

diff --git a/front/odiparpack/app/components/Forms/ReduxFormMUI.js b/front/odiparpack/app/components/Forms/ReduxFormMUI.js
index 383a717..e3f5c33 100644
--- a/front/odiparpack/app/components/Forms/ReduxFormMUI.js
+++ b/front/odiparpack/app/components/Forms/ReduxFormMUI.js
@@ -4,6 +4,12 @@ import TextField from '@material-ui/core/TextField';
 import Select from '@material-ui/core/Select';
 import Checkbox from '@material-ui/core/Checkbox';
 import Switch from '@material-ui/core/Switch';
+import { DateTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
+
+import MomentUtils from '@date-io/moment';
+import moment from 'moment'
+import 'moment/locale/es'
+moment.locale('es');
 
 /* Textfield */
 export const TextFieldRedux = ({ meta: { touched, error }, input, ...rest }) => (
@@ -67,3 +73,18 @@ SwitchRedux.propTypes = {
   input: PropTypes.object.isRequired,
 };
 /* End */
+
+export const DatePickerRedux = ({ input, label, readonly}) => (
+  
+  <MuiPickersUtilsProvider locale={'es'} utils={MomentUtils}>
+  <DateTimePicker
+      format="DD/MM/YYYY hh:mm A"
+      autoOk
+      onChange={date => input.onChange(moment(date).format("DD/MM/YYYY hh:mm A"))}
+      value={input.value ? moment(input.value,"DD/MM/YYYY hh:mm A"): null}
+      label={label}
+      readOnly = {readonly}
+      disabled = {readonly}
+  />
+  </MuiPickersUtilsProvider>
+);
diff --git a/front/odiparpack/app/components/Header/Header.js b/front/odiparpack/app/components/Header/Header.js
index e1d0bf5..2b86b41 100644
--- a/front/odiparpack/app/components/Header/Header.js
+++ b/front/odiparpack/app/components/Header/Header.js
@@ -36,7 +36,7 @@ function Header(props) {
         >
           <MenuIcon />
         </IconButton>
-        <div className={classes.flex}>
+        {/* <div className={classes.flex}>
           <div className={classes.wrapper}>
             <div className={classes.search}>
               <SearchIcon />
@@ -46,8 +46,8 @@ function Header(props) {
         </div>
         <Hidden xsDown>
           <span className={classes.separatorV} />
-        </Hidden>
-        <UserMenu />
+        </Hidden> 
+        <UserMenu />*/}
       </Toolbar>
     </AppBar>
   );
diff --git a/front/odiparpack/app/components/Odipar/EtiquetaData.js b/front/odiparpack/app/components/Odipar/EtiquetaData.js
new file mode 100644
index 0000000..4a2a37c
--- /dev/null
+++ b/front/odiparpack/app/components/Odipar/EtiquetaData.js
@@ -0,0 +1,73 @@
+//Pedido
+export const pedido = {
+    entregado: {
+      text: "Entregado",
+      color: "#81C784",
+      icon: false
+    },
+    pendiente:{
+      text: "Pendiente",
+      color: "#FFB74D",
+      icon: false
+    },
+    enCamino: {
+      text: "En Camino",
+      color: "#64B5F6",
+      icon: false
+    },
+    cancelado: {
+      text: "Cancelado",
+      color: "#E57373",
+      icon: false
+    } 
+  }
+  
+  //Camion
+  export const camion = {
+    entregado: {
+      text: "Entregado",
+      color: "#81C784",
+      icon: false
+    },
+    pendiente:{
+      text: "Pendiente",
+      color: "#FFB74D",
+      icon: false
+    },
+    enCamino: {
+      text: "En Camino",
+      color: "#64B5F6",
+      icon: false
+    },
+    cancelado: {
+      text: "Cancelado",
+      color: "#E57373",
+      icon: false
+    } 
+  }
+  
+  export const bloqueo = {
+    desbloqueado: {
+      text: "Entregado",
+      color: "#81C784",
+      icon: false
+    },
+    bloqueado:{
+      text: "Pendiente",
+      color: "#FFB74D",
+      icon: false
+    } 
+  }
+  
+  export const almacen = {
+    noPrincipal: {
+      text: "Pequeño",
+      color: "#81C784",
+      icon: false
+    },
+    principal:{
+      text: "Principal",
+      color: "#FFB74D",
+      icon: false
+    } 
+  }
\ No newline at end of file
diff --git a/front/odiparpack/app/components/Odipar/common.js b/front/odiparpack/app/components/Odipar/common.js
new file mode 100644
index 0000000..c66b792
--- /dev/null
+++ b/front/odiparpack/app/components/Odipar/common.js
@@ -0,0 +1,38 @@
+import React from "react"
+import { Chip } from "@material-ui/core";
+import {pedido, camion, bloqueo, almacen} from './EtiquetaData'
+
+const etiquetaStyle = color => ({
+  fontWeight: 'bold',
+  color: '#FFF',
+  backgroundColor: color
+});
+
+
+//Etiquetas
+export function etiqueta(tipo , estado) { // eslint-disable-line
+  let {color, text} = ""
+  switch(tipo){
+    case 'etiq_pedido': 
+      text = pedido[Object.keys(pedido)[estado]].text
+      color = pedido[Object.keys(pedido)[estado]].color
+      break;
+    case 'etiq_camion': 
+      text = camion[Object.keys(camion)[estado]].text
+      color = camion[Object.keys(camion)[estado]].color
+      break;
+    case 'etiq_bloqueo': 
+      text = bloqueo[Object.keys(bloqueo)[estado]].text
+      color = bloqueo[Object.keys(bloqueo)[estado]].color
+      break;
+    case 'etiq_alma': 
+      console.log("entre?")
+      text = almacen[Object.keys(almacen)[estado]].text
+      color = almacen[Object.keys(almacen)[estado]].color
+      break;
+  }
+
+  return (
+    <Chip label={text} style={etiquetaStyle(color)}/>
+  )
+}
\ No newline at end of file
diff --git a/front/odiparpack/app/components/Panel/FloatingPanel.js b/front/odiparpack/app/components/Panel/FloatingPanel.js
index 675166a..f0a0e6b 100644
--- a/front/odiparpack/app/components/Panel/FloatingPanel.js
+++ b/front/odiparpack/app/components/Panel/FloatingPanel.js
@@ -82,7 +82,7 @@ FloatingPanel.propTypes = {
 };
 
 FloatingPanel.defaultProps = {
-  title: 'Add New Item',
+  title: 'Añadir nuevo',
   extraSize: false,
 };
 
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 <NavLink to={props.to} {...props} innerRef={ref} />; // 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 (
+        <div key={index.toString()}>
+          <ListItem
+            button
+            exact
+            className={classNames(classes.head, open.indexOf(item.key) > -1 ? classes.opened : '')}
+            activeClassName={classes.active}
+            component={LinkBtn}
+            to={item.link}
+            onClick={handleClick}
+            timeout="auto"
+            unmountOnExit
+          >
+            {item.icon
+              && (
+                <ListItemIcon className={classes.iconWrapper}>
+                  <Icon className={classes.icon}>{item.icon}</Icon>
+                </ListItemIcon>
+              )
+            }
+            <ListItemText classes={{ primary: classes.primary }} variant="inset" primary={item.name} />
+          </ListItem>
+        </div>
+      );
+  });
+  return (
+    <div>
+      {getMenus(MenuContent)}
+    </div>
+  );
+}
+
+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 => {
         </div>
       </div>
       <div className={classes.menuContainer}>
-        <MainMenu loadTransition={loadTransition} toggleDrawerOpen={toggleDrawerOpen} />
-        <Divider className={classes.divider} />
+        <MainMenuSimple loadTransition={loadTransition} toggleDrawerOpen={toggleDrawerOpen} />
+        {/* <Divider className={classes.divider} />
         <List>
           <OtherMenu toggleDrawerOpen={toggleDrawerOpen} />
-        </List>
+        </List> */}
       </div>
     </div>
   );
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,
diff --git a/front/odiparpack/app/components/Tables/tableParts/MainTableForm.js b/front/odiparpack/app/components/Tables/tableParts/MainTableForm.js
index ccf0e4a..8869212 100644
--- a/front/odiparpack/app/components/Tables/tableParts/MainTableForm.js
+++ b/front/odiparpack/app/components/Tables/tableParts/MainTableForm.js
@@ -61,7 +61,7 @@ class MainTableForm extends React.Component {
             <Tooltip title="Add Item">
               <Button variant="contained" onClick={() => addNew(anchor, branch)} color="secondary" className={classes.button}>
                 <AddIcon className={classNames(classes.leftIcon, classes.iconSmall)} />
-                Add New
+                Añadir
               </Button>
             </Tooltip>
           </div>
diff --git a/front/odiparpack/app/components/Tables/tableParts/RowReadOnly.js b/front/odiparpack/app/components/Tables/tableParts/RowReadOnly.js
index 7da655f..2f4a519 100644
--- a/front/odiparpack/app/components/Tables/tableParts/RowReadOnly.js
+++ b/front/odiparpack/app/components/Tables/tableParts/RowReadOnly.js
@@ -5,8 +5,9 @@ import classNames from 'classnames';
 import css from 'ba-styles/Table.scss';
 import DeleteIcon from '@material-ui/icons/Delete';
 import EditIcon from '@material-ui/icons/BorderColor';
+import { etiqueta } from 'ba-components/Odipar/common';
 
-import { TableCell, IconButton } from '@material-ui/core';
+import { TableCell, IconButton, LinearProgress } from '@material-ui/core';
 
 const styles = theme => ({
   button: {
@@ -32,11 +33,24 @@ class RowReadOnly extends React.Component {
     };
     const renderCell = dataArray => dataArray.map((itemCell, index) => {
       if (itemCell.name !== 'action' && !itemCell.hidden) {
-        return (
-          <TableCell padding="none" key={index.toString()}>
-            {item.get(itemCell.name) !== undefined ? item.get(itemCell.name).toString() : ''}
-          </TableCell>
-        );
+        const inputType = anchor[index].type;
+        switch (inputType) {
+          case 'etiq_pedido':
+          case 'etiq_camion':
+          case 'etiq_bloqueo': 
+          case 'etiq_alma':
+            return (
+              <TableCell padding="none" key={index.toString()}>
+                {etiqueta(inputType, item.get(itemCell.name))}
+              </TableCell>
+            );
+          case 'texto':
+            return (
+              <TableCell padding="none" key={index.toString()}>
+                {item.get(itemCell.name) !== undefined ? item.get(itemCell.name).toString() : ''}
+              </TableCell>
+            );
+        }
       }
       return false;
     });
diff --git a/front/odiparpack/app/components/index.js b/front/odiparpack/app/components/index.js
index 9d7bdb3..123b48c 100644
--- a/front/odiparpack/app/components/index.js
+++ b/front/odiparpack/app/components/index.js
@@ -3,6 +3,8 @@ export Sidebar from './Sidebar/Sidebar';
 export BreadCrumb from './BreadCrumb/BreadCrumb';
 export SourceReader from './SourceReader/SourceReader';
 export PapperBlock from './PapperBlock/PapperBlock';
+//Odipar
+
 // Dashboard and Widget
 export CounterWidget from './Counter/CounterWidget';
 export SliderWidget from './Widget/SliderWidget';