Add PedidoPage

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

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

9 files changed, 437 insertions, 2 deletions

diff --git a/front/odiparpack/app/containers/App/Application.js b/front/odiparpack/app/containers/App/Application.js
index 0a3ffc2..21c7a76 100644
--- a/front/odiparpack/app/containers/App/Application.js
+++ b/front/odiparpack/app/containers/App/Application.js
@@ -25,7 +25,8 @@ import {
   Profile, BlankPage,
   Photos, Error, Settings,
   HelpSupport, MapMarker, MapDirection, SearchMap,
-  TrafficIndicator, StreetViewMap, NotFound
+  TrafficIndicator, StreetViewMap, NotFound, 
+  Pedidos
 } from '../pageListAsync';
 
 function Application(props) {
@@ -36,6 +37,8 @@ function Application(props) {
       <Switch>
         <Route exact path="/app" component={DashboardV1} />
         <Route exact path="/app/dashboard-v2" component={DashboardV2} />
+        {/* Pedidos */}
+        <Route exact path="/app/pedidos" component={Pedidos}/>
         { /* Layout */ }
         <Route exact path="/app/layouts" component={Parent} />
         <Route path="/app/layouts/grid" component={Grid} />
diff --git a/front/odiparpack/app/containers/Odipar/Pedidos/Pedidos.js b/front/odiparpack/app/containers/Odipar/Pedidos/Pedidos.js
new file mode 100644
index 0000000..c1539e0
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Pedidos/Pedidos.js
@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { CrudPedido } from './table'
+import { Paper, Typography } from '@material-ui/core';
+import { etiqueta } from 'ba-components/Odipar/common';
+const styles = ({
+    root: {
+      flexGrow: 1,
+      marginTop: 30,
+    }
+  });
+
+class Pedidos extends Component {
+    render() {
+      const { classes } = this.props;
+        return (
+          <div>
+            <Typography variant="h4">
+                {`Pedidos`}
+            </Typography>
+            <div>
+              {etiqueta("etiq_pedido", 1)}
+            </div>
+            <div>  
+              <Paper className={classes.root}>
+                <CrudPedido title = "Historial de Pedidos"/>
+              </Paper>
+            </div>
+          </div>
+        );
+    }
+}
+
+Pedidos.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Pedidos);
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/Pedidos/table/CrudPedido.js b/front/odiparpack/app/containers/Odipar/Pedidos/table/CrudPedido.js
new file mode 100644
index 0000000..b11881f
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Pedidos/table/CrudPedido.js
@@ -0,0 +1,132 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import {
+  fetchAction,
+  addAction,
+  closeAction,
+  submitAction,
+  removeAction,
+  editAction,
+  closeNotifAction
+} from 'ba-actions/CrudTbFrmActions';
+import { CrudTableForm, Notification } from 'ba-components';
+import {
+  Paper,
+  RadioGroup,
+} from '@material-ui/core';
+import { anchorTable, dataApi } from './sampleData';
+import FormPedido from './FormPedido';
+
+
+const branch = 'crudPedido';
+
+const renderRadioGroup = ({ input, ...rest }) => (
+  <RadioGroup
+    {...input}
+    {...rest}
+    valueselected={input.value}
+    onChange={(event, value) => input.onChange(value)}
+  />
+);
+
+
+const styles = ({
+  root: {
+    flexGrow: 1,
+  }
+});
+
+class CrudPedido extends Component {
+  render() {
+    const {
+      classes,
+      fetchData,
+      addNew,
+      closeForm,
+      submit,
+      removeRow,
+      editRow,
+      dataTable,
+      openForm,
+      initValues,
+      closeNotif,
+      messageNotif,
+      title,
+    } = this.props;
+    return (
+      <div>
+        <Notification close={() => closeNotif(branch)} message={messageNotif} />
+        <Paper className={classes.root}>
+          <CrudTableForm
+            dataTable={dataTable}
+            openForm={openForm}
+            dataInit={dataApi}
+            anchor={anchorTable}
+            title={title}
+            fetchData={fetchData}
+            addNew={addNew}
+            closeForm={closeForm}
+            submit={submit}
+            removeRow={removeRow}
+            editRow={editRow}
+            branch={branch}
+            initValues={initValues}
+          >
+            {/* Create Your own form, then arrange or custom it as You like */}
+            <FormPedido/>
+            {/* No need create button or submit, because that already made in this component */}
+          </CrudTableForm>
+        </Paper>
+      </div>
+    );
+  }
+}
+
+renderRadioGroup.propTypes = {
+  input: PropTypes.object.isRequired,
+};
+
+CrudPedido.propTypes = {
+  dataTable: PropTypes.object.isRequired,
+  openForm: PropTypes.bool.isRequired,
+  classes: PropTypes.object.isRequired,
+  fetchData: PropTypes.func.isRequired,
+  addNew: PropTypes.func.isRequired,
+  closeForm: PropTypes.func.isRequired,
+  submit: PropTypes.func.isRequired,
+  removeRow: PropTypes.func.isRequired,
+  editRow: PropTypes.func.isRequired,
+  initValues: PropTypes.object.isRequired,
+  closeNotif: PropTypes.func.isRequired,
+  messageNotif: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+};
+
+
+const mapStateToProps = state => ({
+  force: state, // force state from reducer
+  initValues: state.getIn([branch, 'formValues']),
+  dataTable: state.getIn([branch, 'dataTable']),
+  openForm: state.getIn([branch, 'showFrm']),
+  messageNotif: state.getIn([branch, 'notifMsg']),
+});
+
+const mapDispatchToProps = dispatch => ({
+  fetchData: bindActionCreators(fetchAction, dispatch),
+  addNew: bindActionCreators(addAction, dispatch),
+  closeForm: bindActionCreators(closeAction, dispatch),
+  submit: bindActionCreators(submitAction, dispatch),
+  removeRow: bindActionCreators(removeAction, dispatch),
+  editRow: bindActionCreators(editAction, dispatch),
+  closeNotif: bindActionCreators(closeNotifAction, dispatch),
+});
+
+const CrudPedidoMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CrudPedido);
+
+export default withStyles(styles)(CrudPedidoMapped);
diff --git a/front/odiparpack/app/containers/Odipar/Pedidos/table/FormPedido.js b/front/odiparpack/app/containers/Odipar/Pedidos/table/FormPedido.js
new file mode 100644
index 0000000..40bc801
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Pedidos/table/FormPedido.js
@@ -0,0 +1,164 @@
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { Field } from 'redux-form/immutable';
+import {required, integer} from 'ba-api/validation'
+import {
+    SelectRedux,
+    TextFieldRedux,
+    DatePickerRedux
+} from 'ba-components/Forms/ReduxFormMUI';
+import {
+    MenuItem,
+    InputLabel,
+    FormControl,
+  } from '@material-ui/core';
+
+const styles = ({
+    root: {
+      flexGrow: 1,
+    },
+    field: {
+      width: '100%',
+      marginBottom: 20
+    },
+    fieldBasic: {
+      width: '100%',
+      marginBottom: 20,
+      marginTop: 10
+    },
+    inlineWrap: {
+      display: 'flex',
+      flexDirection: 'row'
+    }
+  });
+  
+
+class FormPedido extends Component {
+    saveRef = ref => {
+        this.ref = ref;
+        return this.ref;
+    };
+
+    state = {
+        selectedDate: new Date(),
+    }
+    
+    handleDateChange = (date) => {
+        this.setState({ selectedDate: date });
+    }
+    render() { 
+        const { classes } = this.props;
+        const { selectedDate } = this.state;
+        const trueBool = true;
+        return (
+            <>
+                <div>
+                    <Field
+                        name="cantidad"
+                        component={TextFieldRedux}
+                        placeholder="Cantidad paquetes A"
+                        label="Cantidad de Paquetes A"
+                        type = {'number'}
+                        validate={[required, integer]}
+                        required
+                        ref={this.saveRef}
+                        className={classes.field}
+                    />
+                </div>
+                 <div>
+                    <FormControl className={classes.field}>
+                        <Field
+                            name = "fecha"
+                            component={DatePickerRedux}
+                            label="Fecha de Registro"
+                            readonly= {true}
+                        />
+                     </FormControl>
+                </div> 
+                <div>
+                    <FormControl className={classes.field}>
+                    <InputLabel htmlFor="selection">Lugar de Origen</InputLabel>
+                    <Field
+                    name="origen"
+                    component={SelectRedux}
+                    placeholder="Seleccionar"
+                    autoWidth={trueBool}
+                    >
+                    <MenuItem value="Lima">Lima</MenuItem>
+                    <MenuItem value="Arequipa">Arequipa</MenuItem>
+                    <MenuItem value="Cuzco">Cuzco</MenuItem>
+                    </Field>
+                </FormControl>
+                </div>
+                <div>
+                    <FormControl className={classes.field}>
+                    <InputLabel htmlFor="selection">Destino</InputLabel>
+                    <Field
+                    name="destino"
+                    component={SelectRedux}
+                    placeholder="Seleccionar"
+                    autoWidth={trueBool}
+                    >
+                    <MenuItem value="Lima">Lima</MenuItem>
+                    <MenuItem value="Arequipa">Arequipa</MenuItem>
+                    <MenuItem value="Cuzco">Cuzco</MenuItem>
+                    </Field>
+                </FormControl>
+                </div>
+                <div>
+                    <Field
+                        name="plazo_entrega"
+                        component={TextFieldRedux}
+                        placeholder="Plazo entrega"
+                        label="Plazo de Entrega"
+                        ref={this.saveRef}
+                        className={classes.field}
+                    />
+                </div>
+                <div>
+                    <Field
+                        name="nombre"
+                        component={TextFieldRedux}
+                        placeholder="Ingrese el nombre"
+                        label="Nombre del Cliente"
+                        validate={required}
+                        required
+                        ref={this.saveRef}
+                        className={classes.field}
+                    />
+                </div>
+                <div>
+                    <Field
+                        name="dni"
+                        component={TextFieldRedux}
+                        placeholder="Ingrese el dni"
+                        label="DNI del Cliente"
+                        validate={required}
+                        required
+                        ref={this.saveRef}
+                        className={classes.field}
+                    />
+                </div>
+                <div>
+                    <Field
+                        name="correo"
+                        component={TextFieldRedux}
+                        placeholder="Ingrese el correo"
+                        label="Correo del Cliente"
+                        validate={required}
+                        required
+                        ref={this.saveRef}
+                        className={classes.field}
+                    />
+                </div>
+            </>
+        );
+    }
+}
+
+FormPedido.propTypes = {
+    classes: PropTypes.object.isRequired,
+  };
+
+export default withStyles(styles)(FormPedido);
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/Pedidos/table/index.js b/front/odiparpack/app/containers/Odipar/Pedidos/table/index.js
new file mode 100644
index 0000000..48f7c9e
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Pedidos/table/index.js
@@ -0,0 +1 @@
+export CrudPedido from "./CrudPedido";
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/Pedidos/table/sampleData.js b/front/odiparpack/app/containers/Odipar/Pedidos/table/sampleData.js
new file mode 100644
index 0000000..2e2b003
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Pedidos/table/sampleData.js
@@ -0,0 +1,88 @@
+export const anchorTable = [
+  {
+    name: 'id',
+    label: 'Id',
+    initialValue: '',
+    hidden: true,
+    type: 'texto'
+  }, {
+    name: 'cantidad',
+    label: 'Cantidad',
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'fecha',
+    label: 'Fecha de pedido',
+    initialValue: new Date(),
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'origen',
+    label: 'Origen',
+    initialValue: 'option1',
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'destino',
+    label: 'Destino',
+    initialValue: 'option1',
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'plazo_entrega',
+    label: 'Plazo de entrega',
+    initialValue: true,
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'nombre',
+    label: 'Cliente',
+    initialValue: true,
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'estado',
+    label: 'Estado',
+    initialValue: 0,
+    width: 'auto',
+    hidden: false,
+    type: 'etiq_pedido'
+  }, {
+    name: 'action',
+    label: 'Action',
+    initialValue: '',
+    hidden: false
+  },
+];
+
+export const dataApi = [
+  {
+    id: '1',
+    cantidad: 30,
+    fecha: '24/05/2022 11:28 AM',
+    origen: 'Arequipa',
+    destino: 'Cuzco',
+    plazo_entrega: '24 horas',
+    nombre: 'Juan',
+    estado: 0,
+    correo: '[email protected]',
+    dni: '123456'
+  }, {
+    id: '2',
+    cantidad: 30,
+    fecha: '24/05/2022 10:28 AM',
+    origen: 'Lima',
+    destino: 'Cuzco',
+    plazo_entrega: '24 horas',
+    nombre: 'Juan',
+    estado: 1,
+    correo: '[email protected]',
+    dni: '123456'
+  }
+];
diff --git a/front/odiparpack/app/containers/Templates/Dashboard.js b/front/odiparpack/app/containers/Templates/Dashboard.js
index 5f24777..f82d16d 100644
--- a/front/odiparpack/app/containers/Templates/Dashboard.js
+++ b/front/odiparpack/app/containers/Templates/Dashboard.js
@@ -66,7 +66,7 @@ function Dashboard(props) {
       <main className={classNames(classes.content, !sidebarOpen && classes.contentPadding)} id="mainContent">
         <div className={classes.bgbar} />
         <section className={classes.mainWrap}>
-          <BreadCrumb separator=" › " theme="light" location={history.location} />
+          <BreadCrumb separator=" › " theme="dark" location={history.location} />
           <Fade
             in={pageLoaded}
             mountOnEnter
diff --git a/front/odiparpack/app/containers/Templates/appStyles-jss.js b/front/odiparpack/app/containers/Templates/appStyles-jss.js
index f9175eb..741bccf 100644
--- a/front/odiparpack/app/containers/Templates/appStyles-jss.js
+++ b/front/odiparpack/app/containers/Templates/appStyles-jss.js
@@ -52,6 +52,8 @@ const styles = theme => ({
   },
   mainWrap: {
     position: 'relative',
+    backgroundColor: '#F1EEEE',
+    padding: 20,
     marginTop: theme.spacing(6),
     marginLeft: theme.spacing(1.5),
     height: '100%',
diff --git a/front/odiparpack/app/containers/pageListAsync.js b/front/odiparpack/app/containers/pageListAsync.js
index feff750..102bb97 100644
--- a/front/odiparpack/app/containers/pageListAsync.js
+++ b/front/odiparpack/app/containers/pageListAsync.js
@@ -1,6 +1,12 @@
 import Loadable from 'react-loadable';
 import Loading from 'ba-components/Loading';
 
+// 2.Pedidos
+export const Pedidos = Loadable({
+  loader: () => import('./Odipar/Pedidos/Pedidos'),
+  loading: Loading,
+});
+
 // Dashboard
 export const DashboardV1 = Loadable({
   loader: () => import('./Dashboard/Dashboard'),