diff options
Diffstat (limited to 'front/odiparpack/app/containers')
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'), |