diff options
17 files changed, 235 insertions, 88 deletions
diff --git a/front/odiparpack/app/actions/pedido.js b/front/odiparpack/app/actions/pedido.js index 15382fe..f8e95d6 100644 --- a/front/odiparpack/app/actions/pedido.js +++ b/front/odiparpack/app/actions/pedido.js @@ -9,18 +9,12 @@ export const setPedidos = (payload) => ({ payload }); -export const getPedidos = () => { - return dispatch => { - return new Promise( - (resolve, reject) => { - console.log("entreeeeeeeeee") - addMessageCurry(getPedidosAPI(), dispatch, '',"aaaaaaaaa") - .then(pedidos => { - dispatch(setPedidos({pedidos})); - resolve(pedidos) - console.log(pedidos) - }) - } - ) +export const getPedidos = () => async dispatch => { + try{ + const res = await getPedidosAPI(); + dispatch(setPedidos({res})) + return res; + }catch(e){ + console.log(e) } -}
\ No newline at end of file +} diff --git a/front/odiparpack/app/api/notifMessage.js b/front/odiparpack/app/api/notifMessage.js index 2d2b48b..bc7a60c 100644 --- a/front/odiparpack/app/api/notifMessage.js +++ b/front/odiparpack/app/api/notifMessage.js @@ -1,10 +1,10 @@ module.exports = { - saved: 'Data has been saved', - updated: 'Data has been updated', - removed: 'Item has been removed', + saved: 'Se ha guardado correctamente', + updated: 'Se ha actualizado correctamente', + removed: 'Se ha eliminado correctamente', posted: 'Your post has been submitted', commented: 'Your comment has been submitted', - discard: 'Action canceled', + discard: 'Cancelado', addCart: 'Item added to cart', checkout: 'Thank you for shopping', sent: 'Email sent', diff --git a/front/odiparpack/app/api/pedido.js b/front/odiparpack/app/api/pedido.js index 7cfb3f7..63d6e2e 100644 --- a/front/odiparpack/app/api/pedido.js +++ b/front/odiparpack/app/api/pedido.js @@ -1,6 +1,18 @@ -import { apiPost, apiGet, apiDelete, apiPut } from "odi-utils/api"; +import axios from 'axios'; +import { apiGet } from '../utils/odipar/api'; //GET APIS -export const getPedidosAPI = () => { - return apiGet('ayuda/') +export const getPedidosAPI = async () => { + return await apiGet(`ayuda/`) +} + +export function getAPi(){ + axios.get( + `http://localhost:8083/ayuda/`, //TODO: check currentTimeStamp + { + headers: { + 'Content-type': 'application/json', + }, + } + ) }
\ No newline at end of file diff --git a/front/odiparpack/app/app.js b/front/odiparpack/app/app.js index 6845268..34f6a9f 100644 --- a/front/odiparpack/app/app.js +++ b/front/odiparpack/app/app.js @@ -34,9 +34,13 @@ import { translationMessages } from './i18n'; // Create redux store with history const initialState = {}; -const store = configureStore(initialState, history); +//const store = configureStore(initialState, history); const MOUNT_NODE = document.getElementById('app'); +//New store +import { confStore } from './redux/configureStore'; +const store = confStore() + const render = messages => { ReactDOM.render( <Provider store={store}> diff --git a/front/odiparpack/app/components/Notification/Notification.js b/front/odiparpack/app/components/Notification/Notification.js index 7e73896..fcc53a4 100644 --- a/front/odiparpack/app/components/Notification/Notification.js +++ b/front/odiparpack/app/components/Notification/Notification.js @@ -2,8 +2,13 @@ import React from 'react'; import PropTypes from 'prop-types'; import { withStyles } from '@material-ui/core/styles'; import CloseIcon from '@material-ui/icons/Close'; +import classNames from 'classnames'; +import CheckCircleOutlinedIcon from '@material-ui/icons/CheckCircleOutlined'; +import ErrorOutlineOutlinedIcon from '@material-ui/icons/ErrorOutlineOutlined'; +import InfoOutlinedIcon from '@material-ui/icons/InfoOutlined'; +import ReportProblemOutlinedIcon from '@material-ui/icons/ReportProblemOutlined'; -import { Snackbar, IconButton } from '@material-ui/core'; +import { Snackbar, IconButton, SnackbarContent } from '@material-ui/core'; const styles = theme => ({ close: { @@ -11,6 +16,41 @@ const styles = theme => ({ }, }); +const variantIcon = { + success: CheckCircleOutlinedIcon, + warning: ReportProblemOutlinedIcon, + error: ErrorOutlineOutlinedIcon, + info: InfoOutlinedIcon, +}; + +const styles1 = theme => ({ + success: { + backgroundColor: '#b6f8c4', + }, + error: { + backgroundColor: '#faabab', + }, + info: { + backgroundColor: '#b2e7f5', + }, + warning: { + backgroundColor: '#f5ea9f', + }, + icon: { + fontSize: 20, + color: 'black' + }, + iconVariant: { + opacity: 0.9, + marginRight: theme.spacing(1), + }, + message: { + display: 'flex', + alignItems: 'center', + color: 'black' + }, +}); + class Notification extends React.Component { handleClose = (event, reason) => { if (reason === 'clickaway') { @@ -20,20 +60,30 @@ class Notification extends React.Component { }; render() { - const { classes, message } = this.props; + const { classes, message, variant } = this.props; + const Icon = variantIcon[variant]; return ( <Snackbar - anchorOrigin={{ - vertical: 'bottom', - horizontal: 'left', - }} open={message !== ''} autoHideDuration={3000} onClose={() => this.handleClose()} ContentProps={{ 'aria-describedby': 'message-id', }} - message={message} + anchorOrigin={{ + vertical: 'top', + horizontal: 'right', + }} + + > + <SnackbarContent + className={classNames(classes[variant])} + message={( + <span id="client-snackbar" className={classes.message}> + <Icon className={classNames(classes.icon, classes.iconVariant)} /> + {message} + </span> + )} action={[ <IconButton key="close" @@ -42,10 +92,11 @@ class Notification extends React.Component { className={classes.close} onClick={() => this.handleClose()} > - <CloseIcon /> + <CloseIcon className={classes.icon}/> </IconButton>, ]} /> + </Snackbar> ); } } @@ -56,4 +107,4 @@ Notification.propTypes = { message: PropTypes.string.isRequired, }; -export default withStyles(styles)(Notification); +export default withStyles(styles1)(Notification); diff --git a/front/odiparpack/app/components/Tables/CrudTableForm.js b/front/odiparpack/app/components/Tables/CrudTableForm.js index 219fcd2..0ba5264 100644 --- a/front/odiparpack/app/components/Tables/CrudTableForm.js +++ b/front/odiparpack/app/components/Tables/CrudTableForm.js @@ -5,15 +5,39 @@ import MainTableForm from './tableParts/MainTableForm'; import FloatingPanel from './../Panel/FloatingPanel'; class CrudTableForm extends React.Component { - componentDidMount() { - console.log("en el FORM",this.props.dataInit) - 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() { @@ -28,12 +52,13 @@ class CrudTableForm extends React.Component { anchor, children, branch, - initValues + initValues, + removeRowAPI } = this.props; return ( <div> - <FloatingPanel openForm={openForm} branch={branch} closeForm={closeForm}> + <FloatingPanel openForm={openForm} branch={branch} closeForm={closeForm} title = {this.getTitle()}> <Form onSubmit={this.sendValues} initValues={initValues} branch={branch}> {children} </Form> @@ -46,6 +71,7 @@ class CrudTableForm extends React.Component { editRow={editRow} anchor={anchor} branch={branch} + removeRowAPI={removeRowAPI} /> </div> ); diff --git a/front/odiparpack/app/components/Tables/tableParts/Form.js b/front/odiparpack/app/components/Tables/tableParts/Form.js index da66966..66188c7 100644 --- a/front/odiparpack/app/components/Tables/tableParts/Form.js +++ b/front/odiparpack/app/components/Tables/tableParts/Form.js @@ -31,14 +31,14 @@ class Form extends Component { </section> <div className={css.buttonArea}> <Button variant="contained" color="secondary" type="submit" disabled={submitting}> - Submit + Guardar </Button> <Button type="button" disabled={pristine || submitting} onClick={reset} > - Reset + Limpiar </Button> </div> </form> diff --git a/front/odiparpack/app/components/Tables/tableParts/MainTableForm.js b/front/odiparpack/app/components/Tables/tableParts/MainTableForm.js index 8869212..1437fa8 100644 --- a/front/odiparpack/app/components/Tables/tableParts/MainTableForm.js +++ b/front/odiparpack/app/components/Tables/tableParts/MainTableForm.js @@ -29,7 +29,8 @@ class MainTableForm extends React.Component { editRow, addNew, anchor, - branch + branch, + removeRowAPI } = this.props; const getItems = dataArray => dataArray.map(item => ( <RowReadOnly @@ -39,6 +40,7 @@ class MainTableForm extends React.Component { editRow={() => editRow(item, branch)} anchor={anchor} branch={branch} + removeRowAPI = {removeRowAPI} /> )); diff --git a/front/odiparpack/app/components/Tables/tableParts/RowReadOnly.js b/front/odiparpack/app/components/Tables/tableParts/RowReadOnly.js index 2f4a519..d060d02 100644 --- a/front/odiparpack/app/components/Tables/tableParts/RowReadOnly.js +++ b/front/odiparpack/app/components/Tables/tableParts/RowReadOnly.js @@ -8,6 +8,7 @@ import EditIcon from '@material-ui/icons/BorderColor'; import { etiqueta } from 'ba-components/Odipar/common'; import { TableCell, IconButton, LinearProgress } from '@material-ui/core'; +import { connect } from 'react-redux'; const styles = theme => ({ button: { @@ -23,10 +24,16 @@ class RowReadOnly extends React.Component { item, removeRow, editRow, - branch + branch, + removeRowAPI } = this.props; const eventDel = () => { removeRow(item, branch); + this.props.dispatch(removeRowAPI()).then((res) => { + if (res) { + console.log("REMOVE READ ONLY ", res) + } + }) }; const eventEdit = () => { editRow(item, branch); @@ -86,5 +93,11 @@ RowReadOnly.propTypes = { editRow: PropTypes.func.isRequired, branch: PropTypes.string.isRequired, }; +const mapDispatchToProps = dispatch => ({ + dispatch +}); -export default withStyles(styles)(RowReadOnly); +const RowReadOnlyMapped = connect( + mapDispatchToProps +)(RowReadOnly); +export default withStyles(styles)(RowReadOnlyMapped); diff --git a/front/odiparpack/app/containers/Odipar/Pedidos/Pedidos.js b/front/odiparpack/app/containers/Odipar/Pedidos/Pedidos.js index a9baab8..27adce5 100644 --- a/front/odiparpack/app/containers/Odipar/Pedidos/Pedidos.js +++ b/front/odiparpack/app/containers/Odipar/Pedidos/Pedidos.js @@ -3,6 +3,11 @@ import { withStyles } from '@material-ui/core/styles'; import PropTypes from 'prop-types'; import { CrudPedido } from './table' import { Paper, Typography } from '@material-ui/core'; +import { connect } from 'react-redux'; + +// +import { getPedidos } from 'ba-actions/pedido'; +import pedido from '../../../redux/modules/pedido'; const styles = ({ root: { @@ -12,7 +17,25 @@ const styles = ({ }); class Pedidos extends Component { + constructor (props) { + super(props) + this.state = { + dataRealF: [] + }; + this.props.dispatch(getPedidos()).then((res) => { + if (res) { + this.setState({ + dataRealF: res.data, + }); + } + }) + //console.log("Pedido - LUEGO DE THEN ", this.state.dataRealF) + } + + render() { + const {dataRealF} = this.state; + //console.log ("aNTESZSSSS?", pedidosLista) const { classes } = this.props; return ( <div> @@ -21,7 +44,7 @@ class Pedidos extends Component { </Typography> <div> <Paper className={classes.root}> - <CrudPedido title = "Historial de Pedidos"/> + <CrudPedido title = "Historial de Pedidos" dataReal={dataRealF}/> </Paper> </div> </div> @@ -33,4 +56,19 @@ Pedidos.propTypes = { classes: PropTypes.object.isRequired, }; -export default withStyles(styles)(Pedidos);
\ No newline at end of file +const reducer = 'pedido' +const mapStateToProps = state => ({ + force: state, // force state from reducer + pedidosLista : state.getIn([reducer]), +}); + +const mapDispatchToProps = dispatch => ({ + dispatch +}); + +const PedidosMapped = connect( + mapStateToProps, + mapDispatchToProps +)(Pedidos); + +export default withStyles(styles)(PedidosMapped);
\ No newline at end of file diff --git a/front/odiparpack/app/containers/Odipar/Pedidos/table/CrudPedido.js b/front/odiparpack/app/containers/Odipar/Pedidos/table/CrudPedido.js index d1fd553..c7a7a58 100644 --- a/front/odiparpack/app/containers/Odipar/Pedidos/table/CrudPedido.js +++ b/front/odiparpack/app/containers/Odipar/Pedidos/table/CrudPedido.js @@ -20,8 +20,7 @@ import { import { anchorTable, dataApi } from './sampleData'; import FormPedido from './FormPedido'; //actions -import { setPedidos, getPedidos } from '../../../../actions/pedido'; - +import { getPedidos } from '../../../../actions/pedido'; const branch = 'crudPedido'; const renderRadioGroup = ({ input, ...rest }) => ( @@ -41,25 +40,9 @@ const styles = ({ }); class CrudPedido extends Component { - constructor (props) { - super(props) - this.state = { - dataReal: [] - }; - - this.props.dispatch(getPedidos()) - .then( res => { - console.log("aqui en el then ps", res) - this.setState({ - dataReal: res - }) - }) - console.log("aqui en el then ps 2", this.props.pedidosLista) - - } render() { - console.log("render ps") + //console.log("render ps") const { classes, fetchData, @@ -74,15 +57,17 @@ class CrudPedido extends Component { closeNotif, messageNotif, title, + dataReal, + dispatch, + editingId } = this.props; - const {dataReal} = this.state; //console.log("render ps DATA", dataReal) //console.log("original", dataApi) return ( <div> - <Notification close={() => closeNotif(branch)} message={messageNotif} /> + <Notification close={() => closeNotif(branch)} variant = "success" message={messageNotif} /> <Paper className={classes.root}> <CrudTableForm dataTable={dataTable} @@ -98,6 +83,11 @@ class CrudPedido extends Component { editRow={editRow} branch={branch} initValues={initValues} + addNewAPI={getPedidos} + removeRowAPI={getPedidos} + editRowAPI={getPedidos} + dispatch = {dispatch} + editingId = {editingId} > {/* Create Your own form, then arrange or custom it as You like */} <FormPedido/> @@ -136,6 +126,7 @@ const mapStateToProps = state => ({ dataTable: state.getIn([branch, 'dataTable']), openForm: state.getIn([branch, 'showFrm']), messageNotif: state.getIn([branch, 'notifMsg']), + editingId: state.getIn([branch, 'editingId']), pedidosLista : state.getIn(['pedido','pedidos']), }); diff --git a/front/odiparpack/app/containers/Odipar/Pedidos/table/sampleData.js b/front/odiparpack/app/containers/Odipar/Pedidos/table/sampleData.js index e16f7cc..3a7556c 100644 --- a/front/odiparpack/app/containers/Odipar/Pedidos/table/sampleData.js +++ b/front/odiparpack/app/containers/Odipar/Pedidos/table/sampleData.js @@ -66,7 +66,6 @@ export const dataApi = [ { id: '1', cantidad: 30, - origen: 'Arequipa', fecha: '24/05/2022 11:28 AM', destino: 'Cuzco', diff --git a/front/odiparpack/app/redux/configureStore.js b/front/odiparpack/app/redux/configureStore.js index 80c84c0..767af03 100644 --- a/front/odiparpack/app/redux/configureStore.js +++ b/front/odiparpack/app/redux/configureStore.js @@ -8,14 +8,15 @@ import { routerMiddleware } from 'connected-react-router/immutable'; import createSagaMiddleware from 'redux-saga'; import createReducer from './reducers'; import thunk from 'redux-thunk'; +import { composeWithDevTools } from "redux-devtools-extension"; const sagaMiddleware = createSagaMiddleware(); -export default function configureStore(initialState = {}, history) { +export function configureStore(initialState = {}, history) { // Create the store with two middlewares // 1. sagaMiddleware: Makes redux-sagas work // 2. routerMiddleware: Syncs the location/URL path to the state - const middlewares = [thunk,sagaMiddleware, routerMiddleware(history)]; + const middlewares = [thunk, routerMiddleware(history)]; const enhancers = [applyMiddleware(...middlewares)]; @@ -35,13 +36,13 @@ export default function configureStore(initialState = {}, history) { const store = createStore( createReducer(), fromJS(initialState), - composeEnhancers(...enhancers) + composeWithDevTools(applyMiddleware(thunk)) ); // Extensions - store.runSaga = sagaMiddleware.run; + //store.runSaga = sagaMiddleware.run; store.injectedReducers = {}; // Reducer registry - store.injectedSagas = {}; // Saga registry + //store.injectedSagas = {}; // Saga registry // Make reducers hot reloadable, see http://mxs.is/googmo /* istanbul ignore next */ @@ -53,3 +54,12 @@ export default function configureStore(initialState = {}, history) { return store; } + +export function confStore (){ + const store = createStore( + createReducer(), + composeWithDevTools(applyMiddleware(thunk)) + ); + store.injectedReducers = {}; + return store; +} diff --git a/front/odiparpack/app/redux/modules/crudTableForm.js b/front/odiparpack/app/redux/modules/crudTableForm.js index 29b9813..acf9abd 100644 --- a/front/odiparpack/app/redux/modules/crudTableForm.js +++ b/front/odiparpack/app/redux/modules/crudTableForm.js @@ -31,6 +31,19 @@ const initialItem = (keyTemplate, anchor) => { return Map(staticKey); }; + +const initialItemNew = (anchor) => { + const [...rawKey] = anchor.map((e) => e.name); + const staticKey = {}; + for (let i = 0; i < rawKey.length; i += 1) { + if (rawKey[i] !== 'id') { + staticKey[rawKey[i]] = anchor[i].initialValue; + } + } + + return Map(staticKey); +}; + let editingIndex = 0; const initialImmutableState = fromJS(initialState); @@ -46,7 +59,7 @@ export default function reducer(state = initialImmutableState, action = {}) { case `${branch}/${ADD_NEW}`: return state.withMutations((mutableState) => { const raw = state.get('dataTable').last(); - const initial = initialItem(raw, action.anchor); + const initial = initialItemNew(action.anchor); mutableState.set('formValues', initial); mutableState.set('showFrm', true); }); diff --git a/front/odiparpack/app/utils/odipar/api.js b/front/odiparpack/app/utils/odipar/api.js index ea5e617..50c2beb 100644 --- a/front/odiparpack/app/utils/odipar/api.js +++ b/front/odiparpack/app/utils/odipar/api.js @@ -1,4 +1,4 @@ -import Axios from 'axios' +import axios from 'axios' import {apiUrl} from './constants'; import qs from "query-string"; import { openSuccessMessage, openErrorMessage } from 'ba-actions/message'; @@ -28,8 +28,7 @@ export function saveSession(value) { } export function apiReq(endPoint, data, method, headers, requestOptions = {}) { - return new Promise((res, rej) => { - + //console.log("apiReq - ANTES DE PROMESA") headers = { ...headers } @@ -44,18 +43,7 @@ export function apiReq(endPoint, data, method, headers, requestOptions = {}) { } } - Axios[method](endPoint, data, { headers }).then((result) => { - let { data } = result; - console.log("aca en la promesa ps") - if (data.status === false) { - return rej(data); - } - - return res(data); - }).catch((err) => { - return rej(err); - }); - }) + return axios[method](endPoint, data, { headers }) } export function generateUrl(path) { @@ -87,7 +75,7 @@ export function addMessageCurry(promise, dispatch, errorMsg = '', successMsg = ' .then(response => { if (successMsg) { - console.log("mensajitooooo=?????") + console.log("addMessageCurry -SUCCESS MSG") dispatch( openSuccessMessage(successMsg) ) diff --git a/front/odiparpack/package-lock.json b/front/odiparpack/package-lock.json index ff64c1f..2b4b0e5 100644 --- a/front/odiparpack/package-lock.json +++ b/front/odiparpack/package-lock.json @@ -19244,6 +19244,11 @@ "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz", "integrity": "sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng==" }, + "when": { + "version": "3.7.8", + "resolved": "https://registry.npmjs.org/when/-/when-3.7.8.tgz", + "integrity": "sha1-xxMLan6gRpPoQs3J56Hyqjmjn4I=" + }, "which": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", diff --git a/front/odiparpack/package.json b/front/odiparpack/package.json index 480d0a7..d2cde1e 100644 --- a/front/odiparpack/package.json +++ b/front/odiparpack/package.json @@ -182,7 +182,8 @@ "serve-favicon": "^2.4.5", "slick-carousel": "^1.8.1", "warning": "4.0.2", - "whatwg-fetch": "2.0.4" + "whatwg-fetch": "2.0.4", + "when": "^3.7.8" }, "devDependencies": { "@babel/cli": "7.4.3", |