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 --- front/odiparpack/app/actions/actionTypes.js | 6 +- front/odiparpack/app/actions/almacen.js | 19 +++ front/odiparpack/app/actions/pedido.js | 1 - front/odiparpack/app/api/almacen.js | 6 + front/odiparpack/app/api/themePalette.js | 17 ++- .../app/components/Forms/ReduxFormMUI.js | 7 + front/odiparpack/app/components/Odipar/common.js | 11 +- .../app/components/Tables/CrudTableForm.js | 5 +- front/odiparpack/app/containers/App/Application.js | 4 +- .../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 +- front/odiparpack/app/containers/pageListAsync.js | 8 ++ front/odiparpack/app/redux/modules/almacen.js | 16 +++ front/odiparpack/app/redux/reducers.js | 3 + .../odiparpack/app/styles/layout/_typography.scss | 4 +- front/odiparpack/app/utils/odipar/menu.js | 2 +- 22 files changed, 539 insertions(+), 22 deletions(-) create mode 100644 front/odiparpack/app/actions/almacen.js create mode 100644 front/odiparpack/app/api/almacen.js 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 create mode 100644 front/odiparpack/app/redux/modules/almacen.js diff --git a/front/odiparpack/app/actions/actionTypes.js b/front/odiparpack/app/actions/actionTypes.js index 5aaa47a..8fd305f 100644 --- a/front/odiparpack/app/actions/actionTypes.js +++ b/front/odiparpack/app/actions/actionTypes.js @@ -87,5 +87,7 @@ export const CLOSE_NOTIF = 'CLOSE_NOTIF'; //Odi Message export const CLOSE_MESSAGE = 'CLOSE_MESSAGE'; export const OPEN_MESSAGE = 'OPEN_MESSAGE'; - -export const LISTA_PEDIDO = 'SAVE_PEDIDO'; \ No newline at end of file +//Odi Pedido +export const LISTA_PEDIDO = 'LISTA_PEDIDO'; +//Odi Almacen +export const LISTA_ALMACEN = 'LISTA_ALMACEN'; \ No newline at end of file diff --git a/front/odiparpack/app/actions/almacen.js b/front/odiparpack/app/actions/almacen.js new file mode 100644 index 0000000..b5694cd --- /dev/null +++ b/front/odiparpack/app/actions/almacen.js @@ -0,0 +1,19 @@ +import { + getAlmacenesAPI +} from 'ba-api/almacen'; +import * as types from './actionTypes' + +export const setAlmacenes = (payload) => ({ + type: types.LISTA_ALMACEN, + payload +}); + +export const getAlmacenes = () => async dispatch => { + try{ + const res = await getAlmacenesAPI(); + dispatch(setAlmacenes({res})) + return res; + }catch(e){ + console.log(e) + } +} \ No newline at end of file diff --git a/front/odiparpack/app/actions/pedido.js b/front/odiparpack/app/actions/pedido.js index f8e95d6..8a011f0 100644 --- a/front/odiparpack/app/actions/pedido.js +++ b/front/odiparpack/app/actions/pedido.js @@ -1,7 +1,6 @@ import { getPedidosAPI } from 'ba-api/pedido'; -import { addMessageCurry } from 'odi-utils/api'; import * as types from './actionTypes' export const setPedidos = (payload) => ({ diff --git a/front/odiparpack/app/api/almacen.js b/front/odiparpack/app/api/almacen.js new file mode 100644 index 0000000..dcc629b --- /dev/null +++ b/front/odiparpack/app/api/almacen.js @@ -0,0 +1,6 @@ +import { apiGet } from 'odi-utils/api'; + +//GET APIS +export const getAlmacenesAPI = async () => { + return await apiGet(`ayuda/almacen`) +} \ No newline at end of file diff --git a/front/odiparpack/app/api/themePalette.js b/front/odiparpack/app/api/themePalette.js index c7971b3..eaec9e7 100644 --- a/front/odiparpack/app/api/themePalette.js +++ b/front/odiparpack/app/api/themePalette.js @@ -200,7 +200,22 @@ const themePalette = (color) => ({ secondary: palette[color].palette.secondary, }, typography: { - useNextVariants: true, + h5: { + fontSize: 18, + fontWeight: 600, + color: "#202A75", + margin: "5px 0 10px", + }, + h4: { + fontSize: 25, + fontWeight: 500, + margin: "10px 0 5px", + }, + h6: { + fontSize: 17, + fontWeight: 420, + margin: "0px 0 0px", + }, }, }); diff --git a/front/odiparpack/app/components/Forms/ReduxFormMUI.js b/front/odiparpack/app/components/Forms/ReduxFormMUI.js index e3f5c33..285543f 100644 --- a/front/odiparpack/app/components/Forms/ReduxFormMUI.js +++ b/front/odiparpack/app/components/Forms/ReduxFormMUI.js @@ -6,6 +6,8 @@ import Checkbox from '@material-ui/core/Checkbox'; import Switch from '@material-ui/core/Switch'; import { DateTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers'; +import { etiqueta } from '../Odipar/common'; +import { Chip } from '@material-ui/core'; import MomentUtils from '@date-io/moment'; import moment from 'moment' import 'moment/locale/es' @@ -88,3 +90,8 @@ export const DatePickerRedux = ({ input, label, readonly}) => ( /> ); + +export const EstadoRedux = ({input, label}) => { + const value = input.value? input.value : 0 + return etiqueta("etiq_pedido", value) +} diff --git a/front/odiparpack/app/components/Odipar/common.js b/front/odiparpack/app/components/Odipar/common.js index 39ba76a..b6fb49d 100644 --- a/front/odiparpack/app/components/Odipar/common.js +++ b/front/odiparpack/app/components/Odipar/common.js @@ -3,7 +3,7 @@ import { Chip } from "@material-ui/core"; import { pedido, camion, bloqueo, almacen } from './EtiquetaData' import Brightness1Icon from '@material-ui/icons/Brightness1'; -const etiquetaStyle = color => ({ +export const etiquetaStyle = color => ({ fontWeight: 'bold', color: '#FFF', backgroundColor: color @@ -27,10 +27,11 @@ export function etiqueta(tipo , estado) { // eslint-disable-line color = bloqueo[Object.keys(bloqueo)[estado]].color break; case 'etiq_alma': - console.log("entre?") - text = almacen[Object.keys(almacen)[estado]].text - color = almacen[Object.keys(almacen)[estado]].color - icon = almacen[Object.keys(almacen)[estado]].icon + let {estadoNum} = 2 + estado === false? estadoNum = 0 : estadoNum = 1 + text = almacen[Object.keys(almacen)[estadoNum]].text + color = almacen[Object.keys(almacen)[estadoNum]].color + icon = almacen[Object.keys(almacen)[estadoNum]].icon break; } diff --git a/front/odiparpack/app/components/Tables/CrudTableForm.js b/front/odiparpack/app/components/Tables/CrudTableForm.js index 0ba5264..017a3fc 100644 --- a/front/odiparpack/app/components/Tables/CrudTableForm.js +++ b/front/odiparpack/app/components/Tables/CrudTableForm.js @@ -5,10 +5,13 @@ 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) + //console.log("en el FORM",this.props.dataInit)} this.props.fetchData(this.props.dataInit, this.props.branch); } } diff --git a/front/odiparpack/app/containers/App/Application.js b/front/odiparpack/app/containers/App/Application.js index 21c7a76..8a30720 100644 --- a/front/odiparpack/app/containers/App/Application.js +++ b/front/odiparpack/app/containers/App/Application.js @@ -26,7 +26,8 @@ import { Photos, Error, Settings, HelpSupport, MapMarker, MapDirection, SearchMap, TrafficIndicator, StreetViewMap, NotFound, - Pedidos + Pedidos, + Almacenes } from '../pageListAsync'; function Application(props) { @@ -39,6 +40,7 @@ function Application(props) { {/* Pedidos */} + { /* Layout */ } 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 ( +
+ + {`Almacenes`} + +
+ + + +
+
+ ); + } +} + +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 }) => ( + 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 ( +
+ closeNotif(branch)} variant = "success" message={messageNotif} /> + + + {/* Create Your own form, then arrange or custom it as You like */} + + {/* No need create button or submit, because that already made in this component */} + + +
+ ); + } +} + +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 ( + <> +
+ + Tipo de Almacen + + Principal + Pequeño + + +
+
+ + Region + + Costa + Sierra + Selva + + +
+
+ + Provincia + + Lima + Arequipa + Cuzco + + +
+
+ + +
+ + ); + } +} + +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 ( <> + + {`Datos de Pedido`} +
+
+ Estado + + +
+ + {`Datos de Entrega`} +
- Lugar de Origen + Origen
+ + + {`Datos de Cliente`} + +
import('./Odipar/Almacen/Almacenes'), + loading: Loading, +}); + + + // Dashboard export const DashboardV1 = Loadable({ loader: () => import('./Dashboard/Dashboard'), diff --git a/front/odiparpack/app/redux/modules/almacen.js b/front/odiparpack/app/redux/modules/almacen.js new file mode 100644 index 0000000..bb9b7d6 --- /dev/null +++ b/front/odiparpack/app/redux/modules/almacen.js @@ -0,0 +1,16 @@ +import { LISTA_ALMACEN } from 'ba-actions/actionTypes'; + +const initState = { + almacenes : [] +} + +const almacen = (state = initState, action) => { + switch (action.type) { + case LISTA_ALMACEN: + return { ...state, pedidos: action.payload } + default : + return state + } +} + +export default almacen; \ No newline at end of file diff --git a/front/odiparpack/app/redux/reducers.js b/front/odiparpack/app/redux/reducers.js index e0e2547..0c2e9b8 100644 --- a/front/odiparpack/app/redux/reducers.js +++ b/front/odiparpack/app/redux/reducers.js @@ -23,6 +23,7 @@ import initval from './modules/initForm'; //Odipar import pedido from './modules/pedido'; import message from './modules/message' +import almacen from './modules/almacen'; /** * Branching reducers to use one reducer for many components @@ -60,7 +61,9 @@ export default function createReducer(injectedReducers) { crudTableForm, crudTbFrmDemo: branchReducer(crudTableForm, 'crudTbFrmDemo'), crudPedido: branchReducer(crudTableForm, 'crudPedido'), + crudAlmacen: branchReducer(crudTableForm, 'crudAlmacen'), pedido, + almacen, message, language: languageProviderReducer, router: connectRouter(history), diff --git a/front/odiparpack/app/styles/layout/_typography.scss b/front/odiparpack/app/styles/layout/_typography.scss index 49a10c6..247921b 100644 --- a/front/odiparpack/app/styles/layout/_typography.scss +++ b/front/odiparpack/app/styles/layout/_typography.scss @@ -13,14 +13,14 @@ h3, h4, h6 { font-family: $heading-font-family; - font-size: modular-scale(1); + font-size: modular-scale(0.5); line-height: $heading-line-height; margin: 0 0 $small-spacing; } h5 { font-family: $heading-font-family; - font-size: modular-scale(1); + font-size: 1; line-height: $base-line-height; font-weight: 600; color: #202A75; diff --git a/front/odiparpack/app/utils/odipar/menu.js b/front/odiparpack/app/utils/odipar/menu.js index eca2600..1b280b8 100644 --- a/front/odiparpack/app/utils/odipar/menu.js +++ b/front/odiparpack/app/utils/odipar/menu.js @@ -24,7 +24,7 @@ module.exports = [ key: 'almacenes', name: 'Almacenes', icon: 'warehouse', - link: '/app/tables/crud-table', + link: '/app/almacenes', child: [ ] }, { -- cgit v1.2.3