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/containers/Odipar/Pedidos/Pedidos.js       |  39 +++++
 .../containers/Odipar/Pedidos/table/CrudPedido.js  | 132 +++++++++++++++++
 .../containers/Odipar/Pedidos/table/FormPedido.js  | 164 +++++++++++++++++++++
 .../app/containers/Odipar/Pedidos/table/index.js   |   1 +
 .../containers/Odipar/Pedidos/table/sampleData.js  |  88 +++++++++++
 5 files changed, 424 insertions(+)
 create mode 100644 front/odiparpack/app/containers/Odipar/Pedidos/Pedidos.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Pedidos/table/CrudPedido.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Pedidos/table/FormPedido.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Pedidos/table/index.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Pedidos/table/sampleData.js

(limited to 'front/odiparpack/app/containers/Odipar')

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: 'mail@boss.com',
+    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: 'mail@boss.com',
+    dni: '123456'
+  }
+];
-- 
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
---
 .../app/containers/Odipar/Pedidos/Pedidos.js       |  5 +---
 .../containers/Odipar/Pedidos/table/CrudPedido.js  | 30 ++++++++++++++++++++--
 .../containers/Odipar/Pedidos/table/sampleData.js  | 16 +++++++-----
 3 files changed, 38 insertions(+), 13 deletions(-)

(limited to 'front/odiparpack/app/containers/Odipar')

diff --git a/front/odiparpack/app/containers/Odipar/Pedidos/Pedidos.js b/front/odiparpack/app/containers/Odipar/Pedidos/Pedidos.js
index c1539e0..a9baab8 100644
--- a/front/odiparpack/app/containers/Odipar/Pedidos/Pedidos.js
+++ b/front/odiparpack/app/containers/Odipar/Pedidos/Pedidos.js
@@ -3,7 +3,7 @@ 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,
@@ -19,9 +19,6 @@ class Pedidos extends Component {
             <Typography variant="h4">
                 {`Pedidos`}
             </Typography>
-            <div>
-              {etiqueta("etiq_pedido", 1)}
-            </div>
             <div>  
               <Paper className={classes.root}>
                 <CrudPedido title = "Historial de Pedidos"/>
diff --git a/front/odiparpack/app/containers/Odipar/Pedidos/table/CrudPedido.js b/front/odiparpack/app/containers/Odipar/Pedidos/table/CrudPedido.js
index b11881f..d1fd553 100644
--- a/front/odiparpack/app/containers/Odipar/Pedidos/table/CrudPedido.js
+++ b/front/odiparpack/app/containers/Odipar/Pedidos/table/CrudPedido.js
@@ -19,7 +19,8 @@ import {
 } from '@material-ui/core';
 import { anchorTable, dataApi } from './sampleData';
 import FormPedido from './FormPedido';
-
+//actions
+import { setPedidos, getPedidos } from '../../../../actions/pedido';
 
 const branch = 'crudPedido';
 
@@ -40,7 +41,25 @@ const styles = ({
 });
 
 class CrudPedido extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      dataReal: []
+    };
+
+    this.props.dispatch(getPedidos())
+    .then( res => {
+      console.log("aqui en el then ps", res)
+      this.setState({
+        dataReal: res
+      })
+    })
+    console.log("aqui en el then ps 2", this.props.pedidosLista)
+
+  }
+
   render() {
+    console.log("render ps")
     const {
       classes,
       fetchData,
@@ -56,6 +75,11 @@ class CrudPedido extends Component {
       messageNotif,
       title,
     } = this.props;
+    
+    const {dataReal} = this.state;
+    //console.log("render ps DATA", dataReal)
+    //console.log("original", dataApi)
+    
     return (
       <div>
         <Notification close={() => closeNotif(branch)} message={messageNotif} />
@@ -63,7 +87,7 @@ class CrudPedido extends Component {
           <CrudTableForm
             dataTable={dataTable}
             openForm={openForm}
-            dataInit={dataApi}
+            dataInit={dataReal}
             anchor={anchorTable}
             title={title}
             fetchData={fetchData}
@@ -112,6 +136,7 @@ const mapStateToProps = state => ({
   dataTable: state.getIn([branch, 'dataTable']),
   openForm: state.getIn([branch, 'showFrm']),
   messageNotif: state.getIn([branch, 'notifMsg']),
+  pedidosLista : state.getIn(['pedido','pedidos']),
 });
 
 const mapDispatchToProps = dispatch => ({
@@ -122,6 +147,7 @@ const mapDispatchToProps = dispatch => ({
   removeRow: bindActionCreators(removeAction, dispatch),
   editRow: bindActionCreators(editAction, dispatch),
   closeNotif: bindActionCreators(closeNotifAction, dispatch),
+  dispatch
 });
 
 const CrudPedidoMapped = connect(
diff --git a/front/odiparpack/app/containers/Odipar/Pedidos/table/sampleData.js b/front/odiparpack/app/containers/Odipar/Pedidos/table/sampleData.js
index 2e2b003..e16f7cc 100644
--- a/front/odiparpack/app/containers/Odipar/Pedidos/table/sampleData.js
+++ b/front/odiparpack/app/containers/Odipar/Pedidos/table/sampleData.js
@@ -4,10 +4,10 @@ export const anchorTable = [
     label: 'Id',
     initialValue: '',
     hidden: true,
-    type: 'texto'
   }, {
     name: 'cantidad',
     label: 'Cantidad',
+    initialValue: 0,
     width: 'auto',
     hidden: false,
     type: 'texto'
@@ -21,28 +21,28 @@ export const anchorTable = [
   }, {
     name: 'origen',
     label: 'Origen',
-    initialValue: 'option1',
+    initialValue: 'Lima',
     width: 'auto',
     hidden: false,
     type: 'texto'
   }, {
     name: 'destino',
     label: 'Destino',
-    initialValue: 'option1',
+    initialValue: 'Lima',
     width: 'auto',
     hidden: false,
     type: 'texto'
   }, {
     name: 'plazo_entrega',
     label: 'Plazo de entrega',
-    initialValue: true,
+    initialValue: 'aja',
     width: 'auto',
     hidden: false,
     type: 'texto'
   }, {
     name: 'nombre',
     label: 'Cliente',
-    initialValue: true,
+    initialValue: null,
     width: 'auto',
     hidden: false,
     type: 'texto'
@@ -53,7 +53,8 @@ export const anchorTable = [
     width: 'auto',
     hidden: false,
     type: 'etiq_pedido'
-  }, {
+  }, 
+  {
     name: 'action',
     label: 'Action',
     initialValue: '',
@@ -65,8 +66,9 @@ export const dataApi = [
   {
     id: '1',
     cantidad: 30,
-    fecha: '24/05/2022 11:28 AM',
+    
     origen: 'Arequipa',
+    fecha: '24/05/2022 11:28 AM',
     destino: 'Cuzco',
     plazo_entrega: '24 horas',
     nombre: 'Juan',
-- 
cgit v1.2.3


From 32fb17de8f78317b165b6f269a8bab2d4e852d0d Mon Sep 17 00:00:00 2001
From: gabrhr <73925454+gabrhr@users.noreply.github.com>
Date: Mon, 30 May 2022 20:08:04 -0500
Subject: Fix axios and add new
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- FIX logica de añadiir (ok)
- FIX axios y dispatch fuera de un componente (ok)
- Cambiar las notificaciones
---
 .../app/containers/Odipar/Pedidos/Pedidos.js       | 42 ++++++++++++++++++++--
 .../containers/Odipar/Pedidos/table/CrudPedido.js  | 33 +++++++----------
 .../containers/Odipar/Pedidos/table/sampleData.js  |  1 -
 3 files changed, 52 insertions(+), 24 deletions(-)

(limited to 'front/odiparpack/app/containers/Odipar')

diff --git a/front/odiparpack/app/containers/Odipar/Pedidos/Pedidos.js b/front/odiparpack/app/containers/Odipar/Pedidos/Pedidos.js
index a9baab8..27adce5 100644
--- a/front/odiparpack/app/containers/Odipar/Pedidos/Pedidos.js
+++ b/front/odiparpack/app/containers/Odipar/Pedidos/Pedidos.js
@@ -3,6 +3,11 @@ import { withStyles } from '@material-ui/core/styles';
 import PropTypes from 'prop-types';
 import { CrudPedido } from './table'
 import { Paper, Typography } from '@material-ui/core';
+import { connect } from 'react-redux';
+
+//
+import { getPedidos } from 'ba-actions/pedido';
+import pedido from '../../../redux/modules/pedido';
 
 const styles = ({
     root: {
@@ -12,7 +17,25 @@ const styles = ({
   });
 
 class Pedidos extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      dataRealF: []
+    };
+    this.props.dispatch(getPedidos()).then((res) => {
+      if (res) {
+          this.setState({
+            dataRealF: res.data,
+          });
+      }
+    })
+    //console.log("Pedido - LUEGO DE THEN ", this.state.dataRealF)
+  }
+
+
     render() {
+      const {dataRealF} = this.state;
+      //console.log ("aNTESZSSSS?", pedidosLista)
       const { classes } = this.props;
         return (
           <div>
@@ -21,7 +44,7 @@ class Pedidos extends Component {
             </Typography>
             <div>  
               <Paper className={classes.root}>
-                <CrudPedido title = "Historial de Pedidos"/>
+                <CrudPedido title = "Historial de Pedidos" dataReal={dataRealF}/>
               </Paper>
             </div>
           </div>
@@ -33,4 +56,19 @@ Pedidos.propTypes = {
   classes: PropTypes.object.isRequired,
 };
 
-export default withStyles(styles)(Pedidos);
\ No newline at end of file
+const reducer = 'pedido'
+const mapStateToProps = state => ({
+  force: state, // force state from reducer
+  pedidosLista : state.getIn([reducer]),
+});
+
+const mapDispatchToProps = dispatch => ({
+  dispatch
+});
+
+const PedidosMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Pedidos);
+
+export default withStyles(styles)(PedidosMapped);
\ 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
index d1fd553..c7a7a58 100644
--- a/front/odiparpack/app/containers/Odipar/Pedidos/table/CrudPedido.js
+++ b/front/odiparpack/app/containers/Odipar/Pedidos/table/CrudPedido.js
@@ -20,8 +20,7 @@ import {
 import { anchorTable, dataApi } from './sampleData';
 import FormPedido from './FormPedido';
 //actions
-import { setPedidos, getPedidos } from '../../../../actions/pedido';
-
+import { getPedidos } from '../../../../actions/pedido';
 const branch = 'crudPedido';
 
 const renderRadioGroup = ({ input, ...rest }) => (
@@ -41,25 +40,9 @@ const styles = ({
 });
 
 class CrudPedido extends Component {
-  constructor (props) {
-    super(props)
-    this.state = {
-      dataReal: []
-    };
-
-    this.props.dispatch(getPedidos())
-    .then( res => {
-      console.log("aqui en el then ps", res)
-      this.setState({
-        dataReal: res
-      })
-    })
-    console.log("aqui en el then ps 2", this.props.pedidosLista)
-
-  }
 
   render() {
-    console.log("render ps")
+    //console.log("render ps")
     const {
       classes,
       fetchData,
@@ -74,15 +57,17 @@ class CrudPedido extends Component {
       closeNotif,
       messageNotif,
       title,
+      dataReal,
+      dispatch,
+      editingId
     } = this.props;
     
-    const {dataReal} = this.state;
     //console.log("render ps DATA", dataReal)
     //console.log("original", dataApi)
     
     return (
       <div>
-        <Notification close={() => closeNotif(branch)} message={messageNotif} />
+        <Notification close={() => closeNotif(branch)} variant = "success" message={messageNotif} />
         <Paper className={classes.root}>
           <CrudTableForm
             dataTable={dataTable}
@@ -98,6 +83,11 @@ class CrudPedido extends Component {
             editRow={editRow}
             branch={branch}
             initValues={initValues}
+            addNewAPI={getPedidos}
+            removeRowAPI={getPedidos}
+            editRowAPI={getPedidos}
+            dispatch = {dispatch}
+            editingId = {editingId}
           >
             {/* Create Your own form, then arrange or custom it as You like */}
             <FormPedido/>
@@ -136,6 +126,7 @@ const mapStateToProps = state => ({
   dataTable: state.getIn([branch, 'dataTable']),
   openForm: state.getIn([branch, 'showFrm']),
   messageNotif: state.getIn([branch, 'notifMsg']),
+  editingId: state.getIn([branch, 'editingId']),
   pedidosLista : state.getIn(['pedido','pedidos']),
 });
 
diff --git a/front/odiparpack/app/containers/Odipar/Pedidos/table/sampleData.js b/front/odiparpack/app/containers/Odipar/Pedidos/table/sampleData.js
index e16f7cc..3a7556c 100644
--- a/front/odiparpack/app/containers/Odipar/Pedidos/table/sampleData.js
+++ b/front/odiparpack/app/containers/Odipar/Pedidos/table/sampleData.js
@@ -66,7 +66,6 @@ export const dataApi = [
   {
     id: '1',
     cantidad: 30,
-    
     origen: 'Arequipa',
     fecha: '24/05/2022 11:28 AM',
     destino: 'Cuzco',
-- 
cgit v1.2.3


From cbc7d7f7494508fda69e88c76702a878bebca0e2 Mon Sep 17 00:00:00 2001
From: gabrhr <73925454+gabrhr@users.noreply.github.com>
Date: Tue, 31 May 2022 03:58:23 -0500
Subject: Add Almacenes

- todo de almacenes, redux, pagina
- mejoro form de pedido (etiqueta estado, RUC)

#TODO
- Ver combobox con API
---
 .../app/containers/Odipar/Almacen/Almacenes.js     |  66 +++++++++
 .../containers/Odipar/Almacen/table/CrudAlmacen.js | 148 +++++++++++++++++++++
 .../containers/Odipar/Almacen/table/FormAlmacen.js | 124 +++++++++++++++++
 .../containers/Odipar/Almacen/table/dataAlmacen.js |  75 +++++++++++
 .../app/containers/Odipar/Almacen/table/index.js   |   1 +
 .../app/containers/Odipar/Pedidos/Pedidos.js       |   3 +-
 .../containers/Odipar/Pedidos/table/FormPedido.js  |  30 ++++-
 .../containers/Odipar/Pedidos/table/sampleData.js  |   5 +-
 8 files changed, 444 insertions(+), 8 deletions(-)
 create mode 100644 front/odiparpack/app/containers/Odipar/Almacen/Almacenes.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Almacen/table/CrudAlmacen.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Almacen/table/FormAlmacen.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Almacen/table/dataAlmacen.js
 create mode 100644 front/odiparpack/app/containers/Odipar/Almacen/table/index.js

(limited to 'front/odiparpack/app/containers/Odipar')

diff --git a/front/odiparpack/app/containers/Odipar/Almacen/Almacenes.js b/front/odiparpack/app/containers/Odipar/Almacen/Almacenes.js
new file mode 100644
index 0000000..31a3039
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Almacen/Almacenes.js
@@ -0,0 +1,66 @@
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import { CrudAlmacen } from './table'
+import { Paper, Typography } from '@material-ui/core';
+import { connect } from 'react-redux';
+
+//actions
+import { getAlmacenes } from '../../../actions/almacen';
+
+const styles = ({
+    root: {
+      flexGrow: 1,
+      marginTop: 30,
+    }
+  });
+
+class Almacenes extends Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      dataRealF: []
+    };
+    this.props.dispatch(getAlmacenes()).then((res) => {
+      if (res) {
+          this.setState({
+            dataRealF: res.data,
+          });
+      }
+    })
+    //console.log("Pedido - LUEGO DE THEN ", this.state.dataRealF)
+  }
+
+
+    render() {
+      const {dataRealF} = this.state;
+      //console.log ("aNTESZSSSS?")
+      const { classes } = this.props;
+        return (
+          <div>
+            <Typography variant="h4">
+                {`Almacenes`}
+            </Typography>
+            <div>  
+              <Paper className={classes.root}>
+                <CrudAlmacen title = "Lista de Almacenes" dataReal={dataRealF}/>
+              </Paper>
+            </div>
+          </div>
+        );
+    }
+}
+
+Almacenes.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+const mapDispatchToProps = dispatch => ({
+  dispatch
+});
+
+const AlmacenesMapped = connect(
+  mapDispatchToProps
+)(Almacenes);
+
+export default withStyles(styles)(AlmacenesMapped);
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/Almacen/table/CrudAlmacen.js b/front/odiparpack/app/containers/Odipar/Almacen/table/CrudAlmacen.js
new file mode 100644
index 0000000..887d603
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Almacen/table/CrudAlmacen.js
@@ -0,0 +1,148 @@
+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 './dataAlmacen';
+import FormAlmacen from './FormAlmacen';
+//actions
+import { getPedidos } from '../../../../actions/pedido';
+const branch = 'crudAlmacen';
+
+const renderRadioGroup = ({ input, ...rest }) => (
+  <RadioGroup
+    {...input}
+    {...rest}
+    valueselected={input.value}
+    onChange={(event, value) => input.onChange(value)}
+  />
+);
+
+
+const styles = ({
+  root: {
+    flexGrow: 1,
+  }
+});
+
+class CrudAlmacen extends Component {
+  render() {
+    //console.log("render ps")
+    const {
+      classes,
+      fetchData,
+      addNew,
+      closeForm,
+      submit,
+      removeRow,
+      editRow,
+      dataTable,
+      openForm,
+      initValues,
+      closeNotif,
+      messageNotif,
+      title,
+      dataReal,
+      dispatch,
+      editingId
+    } = this.props;
+    
+    //console.log("render ps DATA", dataReal)
+    //console.log("original", dataApi)
+    //console.log("original", anchorTable)
+    
+    return (
+      <div>
+        <Notification close={() => closeNotif(branch)} variant = "success" message={messageNotif} />
+        <Paper className={classes.root}>
+          <CrudTableForm
+            dataTable={dataTable}
+            openForm={openForm}
+            dataInit={dataReal}
+            anchor={anchorTable}
+            title={title}
+            fetchData={fetchData}
+            addNew={addNew}
+            closeForm={closeForm}
+            submit={submit}
+            removeRow={removeRow}
+            editRow={editRow}
+            branch={branch}
+            initValues={initValues}
+            addNewAPI={getPedidos}
+            removeRowAPI={getPedidos}
+            editRowAPI={getPedidos}
+            dispatch = {dispatch}
+            editingId = {editingId}
+          >
+            {/* Create Your own form, then arrange or custom it as You like */}
+            <FormAlmacen/>
+            {/* No need create button or submit, because that already made in this component */}
+          </CrudTableForm>
+        </Paper>
+      </div>
+    );
+  }
+}
+
+renderRadioGroup.propTypes = {
+  input: PropTypes.object.isRequired,
+};
+
+CrudAlmacen.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']),
+  editingId: state.getIn([branch, 'editingId']),
+});
+
+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),
+  dispatch
+});
+
+const CrudAlmacenMapped = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CrudAlmacen);
+
+export default withStyles(styles)(CrudAlmacenMapped);
diff --git a/front/odiparpack/app/containers/Odipar/Almacen/table/FormAlmacen.js b/front/odiparpack/app/containers/Odipar/Almacen/table/FormAlmacen.js
new file mode 100644
index 0000000..05cfda7
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Almacen/table/FormAlmacen.js
@@ -0,0 +1,124 @@
+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
+} 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 FormAlmacen extends Component {
+    saveRef = ref => {
+        this.ref = ref;
+        return this.ref;
+    };
+
+    render() { 
+        const { classes } = this.props;
+        const trueBool = true;
+        return (
+            <>
+                <div>
+                    <FormControl className={classes.field}>
+                    <InputLabel htmlFor="selection">Tipo de Almacen</InputLabel>
+                    <Field
+                    name="esPrincipal"
+                    component={SelectRedux}
+                    placeholder="Seleccionar"
+                    autoWidth={trueBool}
+                    >
+                    <MenuItem value={true}>Principal</MenuItem>
+                    <MenuItem value={false}>Pequeño</MenuItem>
+                    </Field>
+                </FormControl>
+                </div>
+                <div>
+                    <FormControl className={classes.field}>
+                    <InputLabel htmlFor="selection">Region</InputLabel>
+                    <Field
+                    name="region"
+                    component={SelectRedux}
+                    placeholder="Seleccionar"
+                    autoWidth={trueBool}
+                    >
+                    <MenuItem value="Costa">Costa</MenuItem>
+                    <MenuItem value="Sierra">Sierra</MenuItem>
+                    <MenuItem value="Selva">Selva</MenuItem>
+                    </Field>
+                </FormControl>
+                </div>
+                <div>
+                    <FormControl className={classes.field}>
+                    <InputLabel htmlFor="selection">Provincia</InputLabel>
+                    <Field
+                    name="provincia"
+                    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="latitud"
+                        component={TextFieldRedux}
+                        placeholder="Latitud"
+                        label="Latitud de Provincia"
+                        validate={required}
+                        disabled
+                        required
+                        ref={this.saveRef}
+                        className={classes.field}
+                    />
+                    <Field
+                        name="longitud"
+                        component={TextFieldRedux}
+                        placeholder="Longitud"
+                        label="Longitud de Provincia"
+                        validate={required}
+                        disabled
+                        required
+                        ref={this.saveRef}
+                        className={classes.field}
+                    />
+                </div>
+            </>
+        );
+    }
+}
+
+FormAlmacen.propTypes = {
+    classes: PropTypes.object.isRequired,
+  };
+
+export default withStyles(styles)(FormAlmacen);
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/Almacen/table/dataAlmacen.js b/front/odiparpack/app/containers/Odipar/Almacen/table/dataAlmacen.js
new file mode 100644
index 0000000..685df27
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Almacen/table/dataAlmacen.js
@@ -0,0 +1,75 @@
+export const anchorTable = [
+  {
+    name: 'id',
+    label: 'Identificador',
+    initialValue: '',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'esPrincipal',
+    label: 'Tipo de Almacen',
+    initialValue: true,
+    width: 'auto',
+    hidden: false,
+    type: 'etiq_alma'
+  }, {
+    name: 'region',
+    label: 'Region',
+    initialValue: 'Costa',
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'provincia',
+    label: 'Provincia',
+    initialValue: 'Lima',
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'latitud',
+    label: 'Latitud',
+    initialValue: 0,
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, {
+    name: 'longitud',
+    label: 'Longitud',
+    initialValue: 0,
+    width: 'auto',
+    hidden: false,
+    type: 'texto'
+  }, 
+  {
+    name: 'action',
+    label: 'Acciones',
+    initialValue: '',
+    hidden: false
+  },
+];
+
+export const dataApi = [
+  {
+    id: '1',
+    esPrincipal: false,
+    region: 'Costa',
+    provincia: 'Arequipa',
+    latitud: 24,
+    longitud: 50,
+    estado: 0,
+    correo: 'mail@boss.com',
+    dni: '123456'
+  }, {
+    id: '2',
+    esPrincipal: true,
+    region: 'Costa',
+    provincia: 'Lima',
+    latitud: 24,
+    longitud: 50,
+    nombre: 'Juan',
+    estado: 1,
+    correo: 'mail@boss.com',
+    dni: '123456'
+  }
+];
diff --git a/front/odiparpack/app/containers/Odipar/Almacen/table/index.js b/front/odiparpack/app/containers/Odipar/Almacen/table/index.js
new file mode 100644
index 0000000..38d22f6
--- /dev/null
+++ b/front/odiparpack/app/containers/Odipar/Almacen/table/index.js
@@ -0,0 +1 @@
+export CrudAlmacen from "./CrudAlmacen";
\ No newline at end of file
diff --git a/front/odiparpack/app/containers/Odipar/Pedidos/Pedidos.js b/front/odiparpack/app/containers/Odipar/Pedidos/Pedidos.js
index 27adce5..f617458 100644
--- a/front/odiparpack/app/containers/Odipar/Pedidos/Pedidos.js
+++ b/front/odiparpack/app/containers/Odipar/Pedidos/Pedidos.js
@@ -5,9 +5,8 @@ import { CrudPedido } from './table'
 import { Paper, Typography } from '@material-ui/core';
 import { connect } from 'react-redux';
 
-//
+//actions
 import { getPedidos } from 'ba-actions/pedido';
-import pedido from '../../../redux/modules/pedido';
 
 const styles = ({
     root: {
diff --git a/front/odiparpack/app/containers/Odipar/Pedidos/table/FormPedido.js b/front/odiparpack/app/containers/Odipar/Pedidos/table/FormPedido.js
index 40bc801..548f47b 100644
--- a/front/odiparpack/app/containers/Odipar/Pedidos/table/FormPedido.js
+++ b/front/odiparpack/app/containers/Odipar/Pedidos/table/FormPedido.js
@@ -6,12 +6,14 @@ import {required, integer} from 'ba-api/validation'
 import {
     SelectRedux,
     TextFieldRedux,
-    DatePickerRedux
+    DatePickerRedux,
+    EstadoRedux
 } from 'ba-components/Forms/ReduxFormMUI';
 import {
     MenuItem,
     InputLabel,
     FormControl,
+    Typography,
   } from '@material-ui/core';
 
 const styles = ({
@@ -53,6 +55,9 @@ class FormPedido extends Component {
         const trueBool = true;
         return (
             <>
+                <Typography variant="h5">
+                {`Datos de Pedido`}
+                </Typography>
                 <div>
                     <Field
                         name="cantidad"
@@ -76,9 +81,20 @@ class FormPedido extends Component {
                         />
                      </FormControl>
                 </div> 
+                <div> 
+                <InputLabel htmlFor="selection" style={{fontSize:12.5, marginBottom: 5}}>Estado</InputLabel>
+                    <Field
+                        name = "estado"
+                        component={EstadoRedux}
+                    />
+                
+                </div> 
+                <Typography variant="h5" style={{marginTop: 5}}>
+                {`Datos de Entrega`}
+                </Typography>
                 <div>
                     <FormControl className={classes.field}>
-                    <InputLabel htmlFor="selection">Lugar de Origen</InputLabel>
+                    <InputLabel htmlFor="selection">Origen</InputLabel>
                     <Field
                     name="origen"
                     component={SelectRedux}
@@ -113,9 +129,15 @@ class FormPedido extends Component {
                         placeholder="Plazo entrega"
                         label="Plazo de Entrega"
                         ref={this.saveRef}
+                        disabled
                         className={classes.field}
                     />
                 </div>
+
+                <Typography variant="h5">
+                {`Datos de Cliente`}
+                </Typography>
+
                 <div>
                     <Field
                         name="nombre"
@@ -132,8 +154,8 @@ class FormPedido extends Component {
                     <Field
                         name="dni"
                         component={TextFieldRedux}
-                        placeholder="Ingrese el dni"
-                        label="DNI del Cliente"
+                        placeholder="Ingrese el RUC"
+                        label="RUC del Cliente"
                         validate={required}
                         required
                         ref={this.saveRef}
diff --git a/front/odiparpack/app/containers/Odipar/Pedidos/table/sampleData.js b/front/odiparpack/app/containers/Odipar/Pedidos/table/sampleData.js
index 3a7556c..4972669 100644
--- a/front/odiparpack/app/containers/Odipar/Pedidos/table/sampleData.js
+++ b/front/odiparpack/app/containers/Odipar/Pedidos/table/sampleData.js
@@ -1,9 +1,10 @@
 export const anchorTable = [
   {
     name: 'id',
-    label: 'Id',
+    label: 'Identificador',
     initialValue: '',
-    hidden: true,
+    hidden: false,
+    type: 'texto'
   }, {
     name: 'cantidad',
     label: 'Cantidad',
-- 
cgit v1.2.3