diff options
Diffstat (limited to 'front')
37 files changed, 2027 insertions, 23 deletions
diff --git a/front/odiparpack/app/components/Odipar/EtiquetaData.js b/front/odiparpack/app/components/Odipar/EtiquetaData.js index a2f262d..e005f4d 100644 --- a/front/odiparpack/app/components/Odipar/EtiquetaData.js +++ b/front/odiparpack/app/components/Odipar/EtiquetaData.js @@ -51,8 +51,8 @@ export const pedido = { } } - //Bloqueos - export const bloqueo = { + //Rutas + export const ruta = { desbloqueado: { text: "Disponible", color: "#81C784", @@ -65,6 +65,25 @@ export const pedido = { } } + //Bloqueos + export const bloqueo = { + pendiente:{ + text: "Pendiente", + color: "#FFB74D", + icon: false + }, + bloqueado:{ + text: "Bloqueado", + color: "#E57373", + icon: false + }, + finalizado: { + text: "Finalizado", + color: "#81C784", + icon: false + } + } + //Almacen export const almacen = { noPrincipal: { @@ -77,4 +96,41 @@ export const pedido = { color: "#DED8D8", icon: 16 } - }
\ No newline at end of file + } + + //Averia - tipo + export const tipoAveria = { + moderada: { + text: "Moderada", + color: "#ff8b55", + icon: false + }, + fuerte:{ + text: "Fuerte", + color: "#ff3816", + icon: false + }, + siniestra:{ + text: "Siniestra", + color: "#c20000", + icon: false + } + } +// Averia - estado + export const estadoAveria = { + pendiente:{ + text: "Pendiente", + color: "#FFB74D", + icon: false + }, + bloqueado:{ + text: "Bloqueado", + color: "#E57373", + icon: false + }, + finalizado: { + text: "Finalizado", + color: "#81C784", + icon: false + } + } diff --git a/front/odiparpack/app/components/Odipar/common.js b/front/odiparpack/app/components/Odipar/common.js index b6fb49d..77f937d 100644 --- a/front/odiparpack/app/components/Odipar/common.js +++ b/front/odiparpack/app/components/Odipar/common.js @@ -1,6 +1,6 @@ import React from "react" import { Chip } from "@material-ui/core"; -import { pedido, camion, bloqueo, almacen } from './EtiquetaData' +import { pedido, camion, bloqueo, almacen, ruta, tipoAveria, estadoAveria } from './EtiquetaData' import Brightness1Icon from '@material-ui/icons/Brightness1'; export const etiquetaStyle = color => ({ @@ -26,6 +26,18 @@ export function etiqueta(tipo , estado) { // eslint-disable-line text = bloqueo[Object.keys(bloqueo)[estado]].text color = bloqueo[Object.keys(bloqueo)[estado]].color break; + case 'etiq_ruta': + text = ruta[Object.keys(ruta)[estado]].text + color = ruta[Object.keys(ruta)[estado]].color + break; + case 'etiq_tipoAveria': + text = tipoAveria[Object.keys(tipoAveria)[estado]].text + color = tipoAveria[Object.keys(tipoAveria)[estado]].color + break; + case 'etiq_estadoAveria': + text = estadoAveria[Object.keys(estadoAveria)[estado]].text + color = estadoAveria[Object.keys(estadoAveria)[estado]].color + break; case 'etiq_alma': let {estadoNum} = 2 estado === false? estadoNum = 0 : estadoNum = 1 diff --git a/front/odiparpack/app/components/Tables/CrudTableForm.js b/front/odiparpack/app/components/Tables/CrudTableForm.js index 017a3fc..8b7e6d5 100644 --- a/front/odiparpack/app/components/Tables/CrudTableForm.js +++ b/front/odiparpack/app/components/Tables/CrudTableForm.js @@ -5,16 +5,16 @@ import MainTableForm from './tableParts/MainTableForm'; import FloatingPanel from './../Panel/FloatingPanel'; class CrudTableForm extends React.Component { - /* componentDidMount(){ + componentDidMount(){ this.props.fetchData(this.props.dataInit, this.props.branch); - } */ + } - componentDidUpdate(previousProps) { + /* componentDidUpdate(previousProps) { if (previousProps.dataInit !== this.props.dataInit) { //console.log("en el FORM",this.props.dataInit)} this.props.fetchData(this.props.dataInit, this.props.branch); } - } + } */ sendValues = (values) => { setTimeout(() => { diff --git a/front/odiparpack/app/components/Tables/CrudTableForm2.js b/front/odiparpack/app/components/Tables/CrudTableForm2.js new file mode 100644 index 0000000..dd24aec --- /dev/null +++ b/front/odiparpack/app/components/Tables/CrudTableForm2.js @@ -0,0 +1,101 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import Form from './tableParts/Form'; +import MainTableForm from './tableParts/MainTableForm'; +import FloatingPanel from '../Panel/FloatingPanel'; + +class CrudTableForm extends React.Component { + /* componentDidMount(){ + this.props.fetchData(this.props.dataInit, this.props.branch); + } */ + + componentDidUpdate(previousProps) { + if (previousProps.dataInit !== this.props.dataInit) { + //console.log("en el FORM",this.props.dataInit)} + this.props.fetchData(this.props.dataInit, this.props.branch); + } + } + + sendValues = (values) => { + setTimeout(() => { + this.props.submit(values, this.props.branch); + }, 500); + if (this.props.editingId === this.props.initValues.get('id')) { + this.props.dispatch(this.props.editRowAPI()).then((res) => { + if (res) { + console.log("EDIT RO ", res) + } + }) + } else { + this.props.dispatch(this.props.addNewAPI()).then((res) => { + if (res) { + console.log("ADD NEW FORM ", res) + } + }) + } + + } + + getTitle( ){ + if (this.props.editingId === this.props.initValues.get(this.props.anchor[0].name)) { + return "Editar" + } + return "Añadir nuevo" + } + + render() { + const { + title, + dataTable, + openForm, + closeForm, + removeRow, + addNew, + editRow, + anchor, + children, + branch, + initValues, + removeRowAPI + } = this.props; + return ( + <div> + + <FloatingPanel openForm={openForm} branch={branch} closeForm={closeForm} title = {this.getTitle()}> + <Form onSubmit={this.sendValues} initValues={initValues} branch={branch}> + {children} + </Form> + </FloatingPanel> + <MainTableForm + title={title} + addNew={addNew} + items={dataTable} + removeRow={removeRow} + editRow={editRow} + anchor={anchor} + branch={branch} + removeRowAPI={removeRowAPI} + /> + </div> + ); + } +} + +CrudTableForm.propTypes = { + title: PropTypes.string.isRequired, + anchor: PropTypes.array.isRequired, + dataInit: PropTypes.array.isRequired, + dataTable: PropTypes.object.isRequired, + fetchData: PropTypes.func.isRequired, + submit: PropTypes.func.isRequired, + addNew: PropTypes.func.isRequired, + openForm: PropTypes.bool.isRequired, + closeForm: PropTypes.func.isRequired, + removeRow: PropTypes.func.isRequired, + editRow: PropTypes.func.isRequired, + children: PropTypes.node.isRequired, + initValues: PropTypes.object.isRequired, + branch: PropTypes.string.isRequired, +}; + +export default CrudTableForm; diff --git a/front/odiparpack/app/components/Tables/tableParts/RowReadOnly.js b/front/odiparpack/app/components/Tables/tableParts/RowReadOnly.js index d060d02..f6be3fd 100644 --- a/front/odiparpack/app/components/Tables/tableParts/RowReadOnly.js +++ b/front/odiparpack/app/components/Tables/tableParts/RowReadOnly.js @@ -46,6 +46,9 @@ class RowReadOnly extends React.Component { case 'etiq_camion': case 'etiq_bloqueo': case 'etiq_alma': + case 'etiq_ruta': + case 'etiq_tipoAveria': + case 'etiq_estadoAveria': return ( <TableCell padding="none" key={index.toString()}> {etiqueta(inputType, item.get(itemCell.name))} @@ -57,6 +60,13 @@ class RowReadOnly extends React.Component { {item.get(itemCell.name) !== undefined ? item.get(itemCell.name).toString() : ''} </TableCell> ); + case 'averia_ubicacion': + return ( + <TableCell padding="none" key={index.toString()}> + Longitud: {item.get('longitud') !== undefined ? item.get('longitud').toString() : ''} + {'\u00A0'} Latitud: {item.get('latitud') !== undefined ? item.get('latitud').toString() : ''} + </TableCell> + ); } } return false; diff --git a/front/odiparpack/app/components/Tables/tableParts/tableStyle-jss.js b/front/odiparpack/app/components/Tables/tableParts/tableStyle-jss.js index bede0b8..bef1ac7 100644 --- a/front/odiparpack/app/components/Tables/tableParts/tableStyle-jss.js +++ b/front/odiparpack/app/components/Tables/tableParts/tableStyle-jss.js @@ -6,7 +6,7 @@ const styles = theme => ({ rootTable: { width: '100%', marginTop: theme.spacing(3), - overflowX: 'auto', + overflowX: 'hidden', }, highlight: theme.palette.type === 'light' ? { diff --git a/front/odiparpack/app/components/index.js b/front/odiparpack/app/components/index.js index 123b48c..e1903fc 100644 --- a/front/odiparpack/app/components/index.js +++ b/front/odiparpack/app/components/index.js @@ -23,6 +23,7 @@ export MapWidget from './Widget/MapWidget'; export TreeTable from './Tables/TreeTable'; export CrudTable from './Tables/CrudTable'; export CrudTableForm from './Tables/CrudTableForm'; +export CrudTableForm2 from './Tables/CrudTableForm2'; export AdvTable from './Tables/AdvTable'; export EmptyData from './Tables/EmptyData'; // Form diff --git a/front/odiparpack/app/containers/App/Application.js b/front/odiparpack/app/containers/App/Application.js index 8a30720..6ab9d34 100644 --- a/front/odiparpack/app/containers/App/Application.js +++ b/front/odiparpack/app/containers/App/Application.js @@ -27,7 +27,9 @@ import { HelpSupport, MapMarker, MapDirection, SearchMap, TrafficIndicator, StreetViewMap, NotFound, Pedidos, - Almacenes + Almacenes, + Camiones, + Tramos } from '../pageListAsync'; function Application(props) { @@ -38,9 +40,11 @@ function Application(props) { <Switch> <Route exact path="/app" component={DashboardV1} /> <Route exact path="/app/dashboard-v2" component={DashboardV2} /> - {/* Pedidos */} + {/* OdiparPack */} <Route exact path="/app/pedidos" component={Pedidos}/> <Route exact path="/app/almacenes" component={Almacenes}/> + <Route exact path="/app/camiones" component={Camiones}/> + <Route exact path="/app/tramos" component={Tramos}/> { /* Layout */ } <Route exact path="/app/layouts" component={Parent} /> <Route path="/app/layouts/grid" component={Grid} /> diff --git a/front/odiparpack/app/containers/Odipar/Almacen/table/CrudAlmacen.js b/front/odiparpack/app/containers/Odipar/Almacen/table/CrudAlmacen.js index 887d603..c56a9a9 100644 --- a/front/odiparpack/app/containers/Odipar/Almacen/table/CrudAlmacen.js +++ b/front/odiparpack/app/containers/Odipar/Almacen/table/CrudAlmacen.js @@ -12,7 +12,7 @@ import { editAction, closeNotifAction } from 'ba-actions/CrudTbFrmActions'; -import { CrudTableForm, Notification } from 'ba-components'; +import { CrudTableForm2, Notification } from 'ba-components'; import { Paper, RadioGroup, @@ -69,7 +69,7 @@ class CrudAlmacen extends Component { <div> <Notification close={() => closeNotif(branch)} variant = "success" message={messageNotif} /> <Paper className={classes.root}> - <CrudTableForm + <CrudTableForm2 dataTable={dataTable} openForm={openForm} dataInit={dataReal} @@ -92,7 +92,7 @@ class CrudAlmacen extends Component { {/* 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> + </CrudTableForm2> </Paper> </div> ); diff --git a/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/AveriaTab.js b/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/AveriaTab.js new file mode 100644 index 0000000..b7ee4fd --- /dev/null +++ b/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/AveriaTab.js @@ -0,0 +1,64 @@ +import React, { Component } from 'react'; +import { withStyles } from '@material-ui/core/styles'; +import PropTypes from 'prop-types'; +import { CrudAveriaTab } from './table' +import { Paper, Typography } from '@material-ui/core'; +import { connect } from 'react-redux'; + +//actions +import { getPedidos } from 'ba-actions/pedido'; + +const styles = ({ + root: { + flexGrow: 1, + marginTop: 30, + } + }); + +class AveriaTab extends Component { + constructor (props) { + super(props) + this.state = { + dataRealF: [] + }; + this.props.dispatch(getPedidos()).then((res) => { + if (res) { + this.setState({ + dataRealF: res.data, + }); + } + }) + } + + + render() { + const {dataRealF} = this.state; + const { classes } = this.props; + return ( + + <CrudAveriaTab title = "Listado de Camiones" dataReal={dataRealF}/> + + ); + } +} + +AveriaTab.propTypes = { + classes: PropTypes.object.isRequired, +}; + +const reducer = 'pedido' +const mapStateToProps = state => ({ + force: state, // force state from reducer + pedidosLista : state.getIn([reducer]), +}); + +const mapDispatchToProps = dispatch => ({ + dispatch +}); + +const AveriaTabMapped = connect( + mapStateToProps, + mapDispatchToProps +)(AveriaTab); + +export default withStyles(styles)(AveriaTabMapped);
\ No newline at end of file diff --git a/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/CrudAveriaTab.js b/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/CrudAveriaTab.js new file mode 100644 index 0000000..15dbd1c --- /dev/null +++ b/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/CrudAveriaTab.js @@ -0,0 +1,149 @@ +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 './dataAveria'; +import FormAveriaTab from './FormAveriaTab'; +//actions +import { getPedidos } from 'ba-actions/pedido'; +const branch = 'crudAveria'; + +const renderRadioGroup = ({ input, ...rest }) => ( + <RadioGroup + {...input} + {...rest} + valueselected={input.value} + onChange={(event, value) => input.onChange(value)} + /> +); + + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class CrudAveriaTab 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) + + return ( + <div> + <Notification close={() => closeNotif(branch)} variant = "success" 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} + addNewAPI={getPedidos} + removeRowAPI={getPedidos} + editRowAPI={getPedidos} + dispatch = {dispatch} + editingId = {editingId} + > + {/* Create Your own form, then arrange or custom it as You like */} + <FormAveriaTab/> + {/* No need create button or submit, because that already made in this component */} + </CrudTableForm> + </Paper> + </div> + ); + } +} + +renderRadioGroup.propTypes = { + input: PropTypes.object.isRequired, +}; + +CrudAveriaTab.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']), + pedidosLista : state.getIn(['pedido','pedidos']), +}); + +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 CrudAveriaTabMapped = connect( + mapStateToProps, + mapDispatchToProps +)(CrudAveriaTab); + +export default withStyles(styles)(CrudAveriaTabMapped); diff --git a/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/FormAveriaTab.js b/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/FormAveriaTab.js new file mode 100644 index 0000000..65ad519 --- /dev/null +++ b/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/FormAveriaTab.js @@ -0,0 +1,153 @@ +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, + EstadoRedux +} from 'ba-components/Forms/ReduxFormMUI'; +import { + MenuItem, + InputLabel, + FormControl, + Typography, + } 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 FormAveriaTab 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="codigo" + component={TextFieldRedux} + placeholder="Código de Camión" + label="Código de Camión" + validate={[required]} + 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">Tipo de Avería</InputLabel> + <Field + name="tipo" + component={SelectRedux} + placeholder="Seleccionar" + autoWidth={trueBool} + > + <MenuItem value={0}>Moderada</MenuItem> + <MenuItem value={1}>Fuerte</MenuItem> + <MenuItem value={2}>Siniestra</MenuItem> + </Field> + </FormControl> + </div> + <div> + <Field + name="latidud" + component={TextFieldRedux} + placeholder="Latitud" + label="Latitud" + validate={[required]} + required + ref={this.saveRef} + className={classes.field} + /> + </div> + <div> + <Field + name="longitud" + component={TextFieldRedux} + placeholder="Longitud" + label="Longitud" + validate={[required]} + required + ref={this.saveRef} + className={classes.field} + /> + </div> + <div> + <FormControl className={classes.field}> + <Field + name = "fecha" + component={DatePickerRedux} + label="Fecha de Registro" + readonly= {false} + /> + </FormControl> + </div> + <div> + <FormControl className={classes.field}> + <InputLabel htmlFor="selection">Tipo de Avería</InputLabel> + <Field + name="estado" + component={SelectRedux} + placeholder="Seleccionar" + autoWidth={trueBool} + > + <MenuItem value={0}>Pendiente</MenuItem> + <MenuItem value={1}>Bloqueado</MenuItem> + <MenuItem value={2}>Finalizado</MenuItem> + </Field> + </FormControl> + </div> + </> + ); + } +} + +FormAveriaTab.propTypes = { + classes: PropTypes.object.isRequired, + }; + +export default withStyles(styles)(FormAveriaTab);
\ No newline at end of file diff --git a/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/dataAveria.js b/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/dataAveria.js new file mode 100644 index 0000000..e935530 --- /dev/null +++ b/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/dataAveria.js @@ -0,0 +1,88 @@ +export const anchorTable = [ + { + name: 'id', + label: 'Número Avería', + initialValue: '', + hidden: false, + type: 'texto' + }, { + name: 'codigo', + label: 'Código de camión', + initialValue: '', + width: 'auto', + hidden: false, + type: 'texto' + }, { + name: 'fecha', + label: 'Fecha de registro', + initialValue: new Date(), + width: 'auto', + hidden: false, + type: 'texto' + }, { + name: 'tipo', + label: 'Tipo de Avería', + initialValue: 0, + width: 'auto', + hidden: false, + type: 'etiq_tipoAveria' + }, { + name: 'ubicacion', + label: 'Ubicación', + initialValue: '', + width: 'auto', + hidden: false, + type: 'texto' + }, { + name: 'estimado', + label: 'Tiempo de finalización estimado', + initialValue: new Date(), + width: 'auto', + hidden: false, + type: 'texto' + }, { + name: 'estado', + label: 'Estado', + initialValue: 0, + width: 'auto', + hidden: false, + type: 'etiq_estadoAveria' + }, + { + name: 'action', + label: 'Action', + initialValue: '', + hidden: false + }, +]; + +export const dataApi = [ + { + id: '1', + codigo: 'A001', + fecha: '24/05/2022 11:28 AM', + tipo: 0, + latitud: 50, + longitud: 23, + estimado: '24/05/2022 11:28 AM', + estado: 0, + }, { + id: '2', + codigo: 'A002', + fecha: '24/05/2022 11:28 AM', + tipo: 1, + latitud: 50, + longitud: 23, + estimado: '24/05/2022 11:28 AM', + estado: 0, + }, { + id: '3', + codigo: 'A002', + fecha: '24/05/2022 11:28 AM', + tipo: 2, + latitud: 50, + longitud: 23, + estimado: '24/05/2022 11:28 AM', + estado: 1, + } +]; diff --git a/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/index.js b/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/index.js new file mode 100644 index 0000000..4e9b692 --- /dev/null +++ b/front/odiparpack/app/containers/Odipar/Camiones/AveriaTab/table/index.js @@ -0,0 +1 @@ +export CrudAveriaTab from "./CrudAveriaTab"; diff --git a/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/CamionTab.js b/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/CamionTab.js new file mode 100644 index 0000000..2f9862e --- /dev/null +++ b/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/CamionTab.js @@ -0,0 +1,64 @@ +import React, { Component } from 'react'; +import { withStyles } from '@material-ui/core/styles'; +import PropTypes from 'prop-types'; +import { CrudCamionTab } from './table' +import { Paper, Typography } from '@material-ui/core'; +import { connect } from 'react-redux'; + +//actions +import { getPedidos } from 'ba-actions/pedido'; + +const styles = ({ + root: { + flexGrow: 1, + marginTop: 30, + } + }); + +class CamionTab extends Component { + constructor (props) { + super(props) + this.state = { + dataRealF: [] + }; + this.props.dispatch(getPedidos()).then((res) => { + if (res) { + this.setState({ + dataRealF: res.data, + }); + } + }) + } + + + render() { + const {dataRealF} = this.state; + const { classes } = this.props; + return ( + + <CrudCamionTab title = "Listado de Camiones" dataReal={dataRealF}/> + + ); + } +} + +CamionTab.propTypes = { + classes: PropTypes.object.isRequired, +}; + +const reducer = 'pedido' +const mapStateToProps = state => ({ + force: state, // force state from reducer + pedidosLista : state.getIn([reducer]), +}); + +const mapDispatchToProps = dispatch => ({ + dispatch +}); + +const CamionTabMapped = connect( + mapStateToProps, + mapDispatchToProps +)(CamionTab); + +export default withStyles(styles)(CamionTabMapped);
\ No newline at end of file diff --git a/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/CrudCamionTab.js b/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/CrudCamionTab.js new file mode 100644 index 0000000..5a1783c --- /dev/null +++ b/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/CrudCamionTab.js @@ -0,0 +1,149 @@ +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 './dataCamion'; +import FormCamionTab from './FormCamionTab'; +//actions +import { getPedidos } from 'ba-actions/pedido'; +const branch = 'crudCamion'; + +const renderRadioGroup = ({ input, ...rest }) => ( + <RadioGroup + {...input} + {...rest} + valueselected={input.value} + onChange={(event, value) => input.onChange(value)} + /> +); + + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class CrudCamionTab 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) + + return ( + <div> + <Notification close={() => closeNotif(branch)} variant = "success" 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} + addNewAPI={getPedidos} + removeRowAPI={getPedidos} + editRowAPI={getPedidos} + dispatch = {dispatch} + editingId = {editingId} + > + {/* Create Your own form, then arrange or custom it as You like */} + <FormCamionTab/> + {/* No need create button or submit, because that already made in this component */} + </CrudTableForm> + </Paper> + </div> + ); + } +} + +renderRadioGroup.propTypes = { + input: PropTypes.object.isRequired, +}; + +CrudCamionTab.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']), + pedidosLista : state.getIn(['pedido','pedidos']), +}); + +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 CrudCamionTabMapped = connect( + mapStateToProps, + mapDispatchToProps +)(CrudCamionTab); + +export default withStyles(styles)(CrudCamionTabMapped); diff --git a/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/FormCamionTab.js b/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/FormCamionTab.js new file mode 100644 index 0000000..25d107c --- /dev/null +++ b/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/FormCamionTab.js @@ -0,0 +1,121 @@ +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, + EstadoRedux +} from 'ba-components/Forms/ReduxFormMUI'; +import { + MenuItem, + InputLabel, + FormControl, + Typography, + } 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 FormCamionTab 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="placa" + component={TextFieldRedux} + placeholder="Placa" + label="Placa" + validate={[required]} + ref={this.saveRef} + className={classes.field} + /> + </div> + <div> + <FormControl className={classes.field}> + <InputLabel htmlFor="selection">Tipo de Camión</InputLabel> + <Field + name="tipo" + component={SelectRedux} + placeholder="Seleccionar" + autoWidth={trueBool} + > + <MenuItem value="A">A</MenuItem> + <MenuItem value="B">B</MenuItem> + </Field> + </FormControl> + </div> + <div> + <FormControl className={classes.field}> + <InputLabel htmlFor="selection">Provincia 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">Estado</InputLabel> + <Field + name="estado" + component={SelectRedux} + placeholder="Seleccionar" + autoWidth={trueBool} + > + <MenuItem value={0}>Disponible</MenuItem> + <MenuItem value={1}>En camino</MenuItem> + </Field> + </FormControl> + </div> + </> + ); + } +} + +FormCamionTab.propTypes = { + classes: PropTypes.object.isRequired, + }; + +export default withStyles(styles)(FormCamionTab);
\ No newline at end of file diff --git a/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/dataCamion.js b/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/dataCamion.js new file mode 100644 index 0000000..2d9952a --- /dev/null +++ b/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/dataCamion.js @@ -0,0 +1,77 @@ +export const anchorTable = [ + { + name: 'id', + label: 'Id', + initialValue: '', + hidden: true, + type: 'texto' + }, { + name: 'codigo', + label: 'Código de camión', + initialValue: '', + width: 'auto', + hidden: false, + type: 'texto' + }, { + name: 'placa', + label: 'Placa', + initialValue: '', + width: 'auto', + hidden: false, + type: 'texto' + }, { + name: 'tipo', + label: 'Tipo', + initialValue: 'A', + width: 'auto', + hidden: false, + type: 'texto' + }, { + name: 'capacidad', + label: 'Capacidad', + initialValue: '', + width: 'auto', + hidden: false, + type: 'texto' + }, { + name: 'origen', + label: 'Provincia Origen', + initialValue: 'Lima', + width: 'auto', + hidden: false, + type: 'texto' + }, { + name: 'estado', + label: 'Estado', + initialValue: 0, + width: 'auto', + hidden: false, + type: 'etiq_camion' + }, + { + name: 'action', + label: 'Action', + initialValue: '', + hidden: false + }, +]; + +export const dataApi = [ + { + id: '1', + codigo: 'A001', + placa: 'ABC-831', + origen: 'Lima', + tipo: 'A', + estado: 0, + capacidad: 23, + }, { + id: '2', + codigo: 'A002', + placa: 'ABD-836', + origen: 'Lima', + tipo: 'A', + estado: 1, + capacidad: 50 + } +]; diff --git a/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/index.js b/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/index.js new file mode 100644 index 0000000..80c4abb --- /dev/null +++ b/front/odiparpack/app/containers/Odipar/Camiones/CamionTab/table/index.js @@ -0,0 +1 @@ +export CrudCamionTab from "./CrudCamionTab";
\ No newline at end of file diff --git a/front/odiparpack/app/containers/Odipar/Camiones/CamionesMain.js b/front/odiparpack/app/containers/Odipar/Camiones/CamionesMain.js new file mode 100644 index 0000000..6298da6 --- /dev/null +++ b/front/odiparpack/app/containers/Odipar/Camiones/CamionesMain.js @@ -0,0 +1,101 @@ +import React, { Component } from 'react'; +import { withStyles } from '@material-ui/core/styles'; +import PropTypes from 'prop-types'; +import { AppBar, Tabs, Tab, Paper, Typography } from '@material-ui/core'; +import { connect } from 'react-redux'; + +import CamionTab from './CamionTab/CamionTab'; +import FlotaTab from './FlotaTab/FlotaTab'; +import AveriaTab from './AveriaTab/AveriaTab'; + +//actions + + +function TabContainer(props) { + return ( + <Typography component="div" style={{ padding: 8 * 3 }}> + {props.children} + </Typography> + ); + } + + TabContainer.propTypes = { + children: PropTypes.node.isRequired, + }; + +const styles = ({ + root: { + flexGrow: 1, + marginTop: 30, + } + }); + +class CamionesMain extends Component { + constructor (props) { + + super(props) + this.state = { + value: 0 + }; + + } + + handleChange = (event, value) => { + this.setState({ value }); + }; + + render() { + const {value} = this.state; + const { classes } = this.props; + return ( + <div> + <Typography variant="h4"> + {`Camiones`} + </Typography> + <div> + <Paper className={classes.root}> + <AppBar position="static"> + <Tabs value={value} onChange={this.handleChange}> + <Tab label="Camiones" /> + <Tab label="Flota" /> + <Tab label="Averías" /> + </Tabs> + </AppBar> + {value === 0 && + <TabContainer> + <CamionTab/> + </TabContainer>} + {value === 1 && + <TabContainer> + <FlotaTab/> + </TabContainer>} + {value === 2 && + <TabContainer> + <AveriaTab/> + </TabContainer>} + </Paper> + </div> + </div> + ); + } +} + +CamionesMain.propTypes = { + classes: PropTypes.object.isRequired, +}; + +const reducer = 'pedido' +const mapStateToProps = state => ({ + force: state, // force state from reducer +}); + +const mapDispatchToProps = dispatch => ({ + dispatch +}); + +const CamionesMainMapped = connect( + mapStateToProps, + mapDispatchToProps +)(CamionesMain); + +export default withStyles(styles)(CamionesMainMapped);
\ No newline at end of file diff --git a/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/FlotaTab.js b/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/FlotaTab.js new file mode 100644 index 0000000..f8072f5 --- /dev/null +++ b/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/FlotaTab.js @@ -0,0 +1,59 @@ +import React, { Component } from 'react'; +import { withStyles } from '@material-ui/core/styles'; +import PropTypes from 'prop-types'; +import { CrudFlotaTab } from './table' +import { Paper, Typography } from '@material-ui/core'; +import { connect } from 'react-redux'; + +//actions +import { getPedidos } from 'ba-actions/pedido'; + +const styles = ({ + root: { + flexGrow: 1, + marginTop: 30, + } + }); + +class FlotaTab extends Component { + constructor (props) { + super(props) + this.state = { + dataRealF: [] + }; + this.props.dispatch(getPedidos()).then((res) => { + if (res) { + this.setState({ + dataRealF: res.data, + }); + } + }) + } + + + render() { + const {dataRealF} = this.state; + return ( + <CrudFlotaTab title = "Listado de Camiones" dataReal={dataRealF}/> + ); + } +} + +FlotaTab.propTypes = { + classes: PropTypes.object.isRequired, +}; + +const mapStateToProps = state => ({ + force: state, // force state from reducer +}); + +const mapDispatchToProps = dispatch => ({ + dispatch +}); + +const FlotaTabMapped = connect( + mapStateToProps, + mapDispatchToProps +)(FlotaTab); + +export default withStyles(styles)(FlotaTabMapped);
\ No newline at end of file diff --git a/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/CrudFlotaTab.js b/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/CrudFlotaTab.js new file mode 100644 index 0000000..c824c5b --- /dev/null +++ b/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/CrudFlotaTab.js @@ -0,0 +1,149 @@ +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 './dataFlota'; +import FormFlotaTab from './FormFlotaTab'; +//actions +import { getPedidos } from 'ba-actions/pedido'; +const branch = 'crudFlota'; + +const renderRadioGroup = ({ input, ...rest }) => ( + <RadioGroup + {...input} + {...rest} + valueselected={input.value} + onChange={(event, value) => input.onChange(value)} + /> +); + + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class CrudFlotaTab 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) + + return ( + <div> + <Notification close={() => closeNotif(branch)} variant = "success" 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} + addNewAPI={getPedidos} + removeRowAPI={getPedidos} + editRowAPI={getPedidos} + dispatch = {dispatch} + editingId = {editingId} + > + {/* Create Your own form, then arrange or custom it as You like */} + <FormFlotaTab/> + {/* No need create button or submit, because that already made in this component */} + </CrudTableForm> + </Paper> + </div> + ); + } +} + +renderRadioGroup.propTypes = { + input: PropTypes.object.isRequired, +}; + +CrudFlotaTab.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']), + pedidosLista : state.getIn(['pedido','pedidos']), +}); + +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 CrudFlotaTabMapped = connect( + mapStateToProps, + mapDispatchToProps +)(CrudFlotaTab); + +export default withStyles(styles)(CrudFlotaTabMapped); diff --git a/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/FormFlotaTab.js b/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/FormFlotaTab.js new file mode 100644 index 0000000..54c2369 --- /dev/null +++ b/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/FormFlotaTab.js @@ -0,0 +1,100 @@ +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 FormFlotaTab 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> + <FormControl className={classes.field}> + <InputLabel htmlFor="selection">Tipo de Camión</InputLabel> + <Field + name="tipo" + component={SelectRedux} + placeholder="Seleccionar" + autoWidth={trueBool} + > + <MenuItem value="A">A</MenuItem> + <MenuItem value="B">B</MenuItem> + </Field> + </FormControl> + </div> + <div> + <Field + name="capacidad" + component={TextFieldRedux} + placeholder="Capacidad de paquetes" + label="Capacidad de paquetes" + validate={[required]} + ref={this.saveRef} + className={classes.field} + /> + </div> + <div> + <Field + name="velocidad" + component={TextFieldRedux} + placeholder="Velocidad (km/h)" + label="Velocidad (km/h)" + validate={[required]} + ref={this.saveRef} + className={classes.field} + /> + </div> + </> + ); + } +} + +FormFlotaTab.propTypes = { + classes: PropTypes.object.isRequired, + }; + +export default withStyles(styles)(FormFlotaTab);
\ No newline at end of file diff --git a/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/dataFlota.js b/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/dataFlota.js new file mode 100644 index 0000000..8cc5dae --- /dev/null +++ b/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/dataFlota.js @@ -0,0 +1,50 @@ +export const anchorTable = [ + { + name: 'id', + label: 'Id', + initialValue: '', + hidden: true, + type: 'texto' + }, { + name: 'tipo', + label: 'Tipo de camión', + initialValue: 'A', + width: 'auto', + hidden: false, + type: 'texto' + }, { + name: 'capacidad', + label: 'Capacidad de paquetes', + initialValue: 0, + width: 'auto', + hidden: false, + type: 'texto' + }, { + name: 'velocidad', + label: 'Velocidad (km/h)', + initialValue: 0, + width: 'auto', + hidden: false, + type: 'texto' + }, + { + name: 'action', + label: 'Action', + initialValue: '', + hidden: false + }, +]; + +export const dataApi = [ + { + id: '1', + tipo: 'A', + velocidad: 50, + capacidad: 23, + }, { + id: '2', + tipo: 'A', + velocidad: 60, + capacidad: 50 + } +]; diff --git a/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/index.js b/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/index.js new file mode 100644 index 0000000..d799225 --- /dev/null +++ b/front/odiparpack/app/containers/Odipar/Camiones/FlotaTab/table/index.js @@ -0,0 +1 @@ +export CrudFlotaTab from "./CrudFlotaTab"; diff --git a/front/odiparpack/app/containers/Odipar/Pedidos/table/CrudPedido.js b/front/odiparpack/app/containers/Odipar/Pedidos/table/CrudPedido.js index c7a7a58..c2f023b 100644 --- a/front/odiparpack/app/containers/Odipar/Pedidos/table/CrudPedido.js +++ b/front/odiparpack/app/containers/Odipar/Pedidos/table/CrudPedido.js @@ -12,7 +12,7 @@ import { editAction, closeNotifAction } from 'ba-actions/CrudTbFrmActions'; -import { CrudTableForm, Notification } from 'ba-components'; +import { CrudTableForm2, Notification } from 'ba-components'; import { Paper, RadioGroup, @@ -69,7 +69,7 @@ class CrudPedido extends Component { <div> <Notification close={() => closeNotif(branch)} variant = "success" message={messageNotif} /> <Paper className={classes.root}> - <CrudTableForm + <CrudTableForm2 dataTable={dataTable} openForm={openForm} dataInit={dataReal} @@ -92,7 +92,7 @@ class CrudPedido extends Component { {/* 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> + </CrudTableForm2> </Paper> </div> ); diff --git a/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/RutaTab.js b/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/RutaTab.js new file mode 100644 index 0000000..b35259a --- /dev/null +++ b/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/RutaTab.js @@ -0,0 +1,72 @@ +import React, { Component } from 'react'; +import { withStyles } from '@material-ui/core/styles'; +import PropTypes from 'prop-types'; +import { CrudRutaTab } from './table' +import { Grid, Paper, Typography } from '@material-ui/core'; +import { connect } from 'react-redux'; +import { Direction } from 'ba-containers/Maps/demos' + +//actions +import { getPedidos } from 'ba-actions/pedido'; + +const styles = ({ + root: { + flexGrow: 1, + marginTop: 30, + } + }); + +class RutaTab extends Component { + constructor (props) { + super(props) + this.state = { + dataRealF: [] + }; + this.props.dispatch(getPedidos()).then((res) => { + if (res) { + this.setState({ + dataRealF: res.data, + }); + } + }) + } + + + render() { + const {dataRealF} = this.state; + const { classes } = this.props; + return ( + <Grid container> + <Grid item xs={12} sm={6}> + <CrudRutaTab title = "" dataReal={dataRealF}/> + </Grid> + <Grid item xs={12} sm={6}> + <Paper className={classes.paper} style={{marginLeft: "10px"}}> + <Direction/> + </Paper> + </Grid> + </Grid> + ); + } +} + +RutaTab.propTypes = { + classes: PropTypes.object.isRequired, +}; + +const reducer = 'pedido' +const mapStateToProps = state => ({ + force: state, // force state from reducer + pedidosLista : state.getIn([reducer]), +}); + +const mapDispatchToProps = dispatch => ({ + dispatch +}); + +const RutaTabMapped = connect( + mapStateToProps, + mapDispatchToProps +)(RutaTab); + +export default withStyles(styles)(RutaTabMapped);
\ No newline at end of file diff --git a/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/CrudRutaTab.js b/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/CrudRutaTab.js new file mode 100644 index 0000000..b3cea2a --- /dev/null +++ b/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/CrudRutaTab.js @@ -0,0 +1,149 @@ +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 './dataRuta'; +import FormRutaTab from './FormRutaTab'; +//actions +import { getPedidos } from 'ba-actions/pedido'; +const branch = 'crudRuta'; + +const renderRadioGroup = ({ input, ...rest }) => ( + <RadioGroup + {...input} + {...rest} + valueselected={input.value} + onChange={(event, value) => input.onChange(value)} + /> +); + + +const styles = ({ + root: { + flexGrow: 1, + } +}); + +class CrudRutaTab 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) + + return ( + <div> + <Notification close={() => closeNotif(branch)} variant = "success" 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} + addNewAPI={getPedidos} + removeRowAPI={getPedidos} + editRowAPI={getPedidos} + dispatch = {dispatch} + editingId = {editingId} + > + {/* Create Your own form, then arrange or custom it as You like */} + <FormRutaTab/> + {/* No need create button or submit, because that already made in this component */} + </CrudTableForm> + </Paper> + </div> + ); + } +} + +renderRadioGroup.propTypes = { + input: PropTypes.object.isRequired, +}; + +CrudRutaTab.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']), + pedidosLista : state.getIn(['pedido','pedidos']), +}); + +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 CrudRutaTabMapped = connect( + mapStateToProps, + mapDispatchToProps +)(CrudRutaTab); + +export default withStyles(styles)(CrudRutaTabMapped); diff --git a/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/FormRutaTab.js b/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/FormRutaTab.js new file mode 100644 index 0000000..60ba534 --- /dev/null +++ b/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/FormRutaTab.js @@ -0,0 +1,108 @@ +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, + EstadoRedux +} from 'ba-components/Forms/ReduxFormMUI'; +import { + MenuItem, + InputLabel, + FormControl, + Typography, + } 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 FormAveriaTab 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 trueBool = true; + return ( + <> + <div> + <FormControl className={classes.field}> + <InputLabel htmlFor="selection">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="distancia" + component={TextFieldRedux} + placeholder="Distancia" + label="Distancia (km)" + validate={[required]} + required + ref={this.saveRef} + className={classes.field} + /> + </div> + </> + ); + } +} + +FormAveriaTab.propTypes = { + classes: PropTypes.object.isRequired, + }; + +export default withStyles(styles)(FormAveriaTab);
\ No newline at end of file diff --git a/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/dataRuta.js b/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/dataRuta.js new file mode 100644 index 0000000..762fb8f --- /dev/null +++ b/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/dataRuta.js @@ -0,0 +1,59 @@ +export const anchorTable = [ + { + name: 'id', + label: 'Número Avería', + initialValue: '', + hidden: true, + type: 'texto' + }, { + name: 'origen', + label: 'Provincia origen', + initialValue: 'Lima', + width: '13%', + hidden: false, + type: 'texto' + }, { + name: 'destino', + label: 'Provincia destino', + initialValue: 'Arequipa', + width: '13%', + hidden: false, + type: 'texto' + }, { + name: 'distancia', + label: 'Distancia (km)', + initialValue: 0, + width: '10%', + hidden: false, + type: 'texto' + }, { + name: 'estado', + label: 'Estado', + initialValue: 0, + width: '10%', + hidden: false, + type: 'etiq_ruta' + }, + { + name: 'action', + label: 'Action', + initialValue: '', + hidden: false + }, +]; + +export const dataApi = [ + { + id: '1', + origen: 'Lima', + destino: 'Arequipa', + distancia: 234, + estado: 0, + }, { + id: '2', + origen: 'Lima', + destino: 'Cuzco', + distancia: 234, + estado: 1, + } +]; diff --git a/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/index.js b/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/index.js new file mode 100644 index 0000000..31656fe --- /dev/null +++ b/front/odiparpack/app/containers/Odipar/RedTramos/RutaTab/table/index.js @@ -0,0 +1 @@ +export CrudRutaTab from "./CrudRutaTab"; diff --git a/front/odiparpack/app/containers/Odipar/RedTramos/TramosMain.js b/front/odiparpack/app/containers/Odipar/RedTramos/TramosMain.js new file mode 100644 index 0000000..4d0ecea --- /dev/null +++ b/front/odiparpack/app/containers/Odipar/RedTramos/TramosMain.js @@ -0,0 +1,89 @@ +import React, { Component } from 'react'; +import { withStyles } from '@material-ui/core/styles'; +import PropTypes from 'prop-types'; +import { AppBar, Tabs, Tab, Paper, Typography } from '@material-ui/core'; +import { connect } from 'react-redux'; +import RutaTab from './RutaTab/RutaTab'; +//actions + + +function TabContainer(props) { + return ( + <Typography component="div" style={{ padding: 8 * 3 }}> + {props.children} + </Typography> + ); + } + + TabContainer.propTypes = { + children: PropTypes.node.isRequired, + }; + +const styles = ({ + root: { + flexGrow: 1, + marginTop: 30, + } + }); + +class CamionesMain extends Component { + constructor (props) { + + super(props) + this.state = { + value: 0 + }; + + } + + handleChange = (event, value) => { + this.setState({ value }); + }; + + render() { + const {value} = this.state; + const { classes } = this.props; + return ( + <div> + <div> + <Paper className={classes.root}> + <AppBar position="static"> + <Tabs value={value} onChange={this.handleChange}> + <Tab label="Rutas" /> + <Tab label="Bloqueos" /> + </Tabs> + </AppBar> + {value === 0 && + <TabContainer> + <RutaTab/> + </TabContainer>} + {value === 1 && + <TabContainer> + bbbb + </TabContainer>} + </Paper> + </div> + </div> + ); + } +} + +CamionesMain.propTypes = { + classes: PropTypes.object.isRequired, +}; + +const reducer = 'pedido' +const mapStateToProps = state => ({ + force: state, // force state from reducer +}); + +const mapDispatchToProps = dispatch => ({ + dispatch +}); + +const CamionesMainMapped = connect( + mapStateToProps, + mapDispatchToProps +)(CamionesMain); + +export default withStyles(styles)(CamionesMainMapped);
\ No newline at end of file diff --git a/front/odiparpack/app/containers/pageListAsync.js b/front/odiparpack/app/containers/pageListAsync.js index 14381b1..b64c622 100644 --- a/front/odiparpack/app/containers/pageListAsync.js +++ b/front/odiparpack/app/containers/pageListAsync.js @@ -7,12 +7,24 @@ export const Pedidos = Loadable({ loading: Loading, }); +// 3.Camiones +export const Camiones = Loadable({ + loader: () => import('./Odipar/Camiones/CamionesMain'), + loading: Loading, +}); + // 4. Almacenes export const Almacenes = Loadable({ loader: () => import('./Odipar/Almacen/Almacenes'), loading: Loading, }); +// 5. Tramos +export const Tramos = Loadable({ + loader: () => import('./Odipar/RedTramos/TramosMain'), + loading: Loading, +}); + // Dashboard diff --git a/front/odiparpack/app/redux/reducers.js b/front/odiparpack/app/redux/reducers.js index 0c2e9b8..0501270 100644 --- a/front/odiparpack/app/redux/reducers.js +++ b/front/odiparpack/app/redux/reducers.js @@ -62,6 +62,10 @@ export default function createReducer(injectedReducers) { crudTbFrmDemo: branchReducer(crudTableForm, 'crudTbFrmDemo'), crudPedido: branchReducer(crudTableForm, 'crudPedido'), crudAlmacen: branchReducer(crudTableForm, 'crudAlmacen'), + crudCamion: branchReducer(crudTableForm, 'crudCamion'), + crudFlota: branchReducer(crudTableForm, 'crudFlota'), + crudAveria: branchReducer(crudTableForm, 'crudAveria'), + crudRuta: branchReducer(crudTableForm, 'crudRuta'), pedido, almacen, message, diff --git a/front/odiparpack/app/styles/components/Table.scss b/front/odiparpack/app/styles/components/Table.scss index 04209f0..464c449 100644 --- a/front/odiparpack/app/styles/components/Table.scss +++ b/front/odiparpack/app/styles/components/Table.scss @@ -79,10 +79,9 @@ table.big{ } .tableCrud{ - table-layout: fixed; + table-layout: auto; .hiddenField{ opacity: 0; - position: absolute; } .editing{ background: material-color('lime', '50'); diff --git a/front/odiparpack/app/utils/odipar/menu.js b/front/odiparpack/app/utils/odipar/menu.js index 1b280b8..cf032e9 100644 --- a/front/odiparpack/app/utils/odipar/menu.js +++ b/front/odiparpack/app/utils/odipar/menu.js @@ -17,7 +17,7 @@ module.exports = [ key: 'camiones', name: 'Camiones', icon: 'local_shipping', - link: '/app/layouts/grid', + link: '/app/camiones', child: [ ] }, { @@ -31,7 +31,7 @@ module.exports = [ key: 'red_tramos', name: 'Red de Tramos', icon: 'location_on', - link: '/app/forms/reduxform', + link: '/app/tramos', child: [ ] }, { diff --git a/front/odiparpack/package-lock.json b/front/odiparpack/package-lock.json index 2b4b0e5..28b80be 100644 --- a/front/odiparpack/package-lock.json +++ b/front/odiparpack/package-lock.json @@ -4351,7 +4351,7 @@ "can-use-dom": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/can-use-dom/-/can-use-dom-0.1.0.tgz", - "integrity": "sha1-IsxKNKCrxDlQ9CxkEQJKP2NmtFo=" + "integrity": "sha512-ceOhN1DL7Y4O6M0j9ICgmTYziV89WMd96SvSl0REd8PMgrY0B/WBOPoed5S1KUmJqXgUXh8gzSe6E3ae27upsQ==" }, "caniuse-lite": { "version": "1.0.30001015", @@ -11238,7 +11238,7 @@ "marker-clusterer-plus": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/marker-clusterer-plus/-/marker-clusterer-plus-2.1.4.tgz", - "integrity": "sha1-+O/3TVmdqzt9Dj/tUmTqDnBPXWc=" + "integrity": "sha512-4WLZnYCkgsUfSC0pftldd0YrLNupSqVIEdxL979f3sXVMBHTUOF3gDa6cEuOk2z8UGyVGcANiNZgvVc333mrHA==" }, "markerwithlabel": { "version": "2.0.2", |