From 55c0f57d42d82f1f1f5809e9c7d6845b6e0b68af Mon Sep 17 00:00:00 2001 From: gabrhr <73925454+gabrhr@users.noreply.github.com> Date: Wed, 25 May 2022 15:36:35 -0500 Subject: Add PedidoPage - cambio de esqueleto segun figma - componente de etiquetas - tabla y form de Pedido #TODO - estetica de etiquetas - redux y crear end points --- .../app/components/Forms/ReduxFormMUI.js | 21 +++++ front/odiparpack/app/components/Header/Header.js | 6 +- .../app/components/Odipar/EtiquetaData.js | 73 ++++++++++++++++ front/odiparpack/app/components/Odipar/common.js | 38 +++++++++ .../app/components/Panel/FloatingPanel.js | 2 +- .../app/components/Sidebar/MainMenuSimple.js | 98 ++++++++++++++++++++++ front/odiparpack/app/components/Sidebar/Sidebar.js | 14 ++-- .../app/components/Sidebar/sidebar-jss.js | 18 ++-- .../components/Tables/tableParts/MainTableForm.js | 2 +- .../components/Tables/tableParts/RowReadOnly.js | 26 ++++-- front/odiparpack/app/components/index.js | 2 + 11 files changed, 276 insertions(+), 24 deletions(-) create mode 100644 front/odiparpack/app/components/Odipar/EtiquetaData.js create mode 100644 front/odiparpack/app/components/Odipar/common.js create mode 100644 front/odiparpack/app/components/Sidebar/MainMenuSimple.js (limited to 'front/odiparpack/app/components') diff --git a/front/odiparpack/app/components/Forms/ReduxFormMUI.js b/front/odiparpack/app/components/Forms/ReduxFormMUI.js index 383a717..e3f5c33 100644 --- a/front/odiparpack/app/components/Forms/ReduxFormMUI.js +++ b/front/odiparpack/app/components/Forms/ReduxFormMUI.js @@ -4,6 +4,12 @@ import TextField from '@material-ui/core/TextField'; import Select from '@material-ui/core/Select'; import Checkbox from '@material-ui/core/Checkbox'; import Switch from '@material-ui/core/Switch'; +import { DateTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers'; + +import MomentUtils from '@date-io/moment'; +import moment from 'moment' +import 'moment/locale/es' +moment.locale('es'); /* Textfield */ export const TextFieldRedux = ({ meta: { touched, error }, input, ...rest }) => ( @@ -67,3 +73,18 @@ SwitchRedux.propTypes = { input: PropTypes.object.isRequired, }; /* End */ + +export const DatePickerRedux = ({ input, label, readonly}) => ( + + + input.onChange(moment(date).format("DD/MM/YYYY hh:mm A"))} + value={input.value ? moment(input.value,"DD/MM/YYYY hh:mm A"): null} + label={label} + readOnly = {readonly} + disabled = {readonly} + /> + +); diff --git a/front/odiparpack/app/components/Header/Header.js b/front/odiparpack/app/components/Header/Header.js index e1d0bf5..2b86b41 100644 --- a/front/odiparpack/app/components/Header/Header.js +++ b/front/odiparpack/app/components/Header/Header.js @@ -36,7 +36,7 @@ function Header(props) { > -
+ {/*
@@ -46,8 +46,8 @@ function Header(props) {
- - + + */} ); diff --git a/front/odiparpack/app/components/Odipar/EtiquetaData.js b/front/odiparpack/app/components/Odipar/EtiquetaData.js new file mode 100644 index 0000000..4a2a37c --- /dev/null +++ b/front/odiparpack/app/components/Odipar/EtiquetaData.js @@ -0,0 +1,73 @@ +//Pedido +export const pedido = { + entregado: { + text: "Entregado", + color: "#81C784", + icon: false + }, + pendiente:{ + text: "Pendiente", + color: "#FFB74D", + icon: false + }, + enCamino: { + text: "En Camino", + color: "#64B5F6", + icon: false + }, + cancelado: { + text: "Cancelado", + color: "#E57373", + icon: false + } + } + + //Camion + export const camion = { + entregado: { + text: "Entregado", + color: "#81C784", + icon: false + }, + pendiente:{ + text: "Pendiente", + color: "#FFB74D", + icon: false + }, + enCamino: { + text: "En Camino", + color: "#64B5F6", + icon: false + }, + cancelado: { + text: "Cancelado", + color: "#E57373", + icon: false + } + } + + export const bloqueo = { + desbloqueado: { + text: "Entregado", + color: "#81C784", + icon: false + }, + bloqueado:{ + text: "Pendiente", + color: "#FFB74D", + icon: false + } + } + + export const almacen = { + noPrincipal: { + text: "Pequeño", + color: "#81C784", + icon: false + }, + principal:{ + text: "Principal", + color: "#FFB74D", + icon: false + } + } \ No newline at end of file diff --git a/front/odiparpack/app/components/Odipar/common.js b/front/odiparpack/app/components/Odipar/common.js new file mode 100644 index 0000000..c66b792 --- /dev/null +++ b/front/odiparpack/app/components/Odipar/common.js @@ -0,0 +1,38 @@ +import React from "react" +import { Chip } from "@material-ui/core"; +import {pedido, camion, bloqueo, almacen} from './EtiquetaData' + +const etiquetaStyle = color => ({ + fontWeight: 'bold', + color: '#FFF', + backgroundColor: color +}); + + +//Etiquetas +export function etiqueta(tipo , estado) { // eslint-disable-line + let {color, text} = "" + switch(tipo){ + case 'etiq_pedido': + text = pedido[Object.keys(pedido)[estado]].text + color = pedido[Object.keys(pedido)[estado]].color + break; + case 'etiq_camion': + text = camion[Object.keys(camion)[estado]].text + color = camion[Object.keys(camion)[estado]].color + break; + case 'etiq_bloqueo': + text = bloqueo[Object.keys(bloqueo)[estado]].text + 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 + break; + } + + return ( + + ) +} \ No newline at end of file diff --git a/front/odiparpack/app/components/Panel/FloatingPanel.js b/front/odiparpack/app/components/Panel/FloatingPanel.js index 675166a..f0a0e6b 100644 --- a/front/odiparpack/app/components/Panel/FloatingPanel.js +++ b/front/odiparpack/app/components/Panel/FloatingPanel.js @@ -82,7 +82,7 @@ FloatingPanel.propTypes = { }; FloatingPanel.defaultProps = { - title: 'Add New Item', + title: 'Añadir nuevo', extraSize: false, }; diff --git a/front/odiparpack/app/components/Sidebar/MainMenuSimple.js b/front/odiparpack/app/components/Sidebar/MainMenuSimple.js new file mode 100644 index 0000000..f7634ca --- /dev/null +++ b/front/odiparpack/app/components/Sidebar/MainMenuSimple.js @@ -0,0 +1,98 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import classNames from 'classnames'; +import { bindActionCreators } from 'redux'; +import { connect } from 'react-redux'; +import { NavLink } from 'react-router-dom'; +import ExpandLess from '@material-ui/icons/ExpandLess'; +import ExpandMore from '@material-ui/icons/ExpandMore'; +// Menu Object +import MenuContent from 'ba-api/menu'; +import { List, ListItem, ListItemIcon, ListItemText, Collapse, Icon } from '@material-ui/core'; +import styles from './sidebar-jss'; + +function sortByKey(array, key) { + return array.sort((a, b) => { + const x = a[key]; const y = b[key]; + return ((x < y) ? -1 : ((x > y) ? 1 : 0)); + }); +} + +const LinkBtn = React.forwardRef(function LinkBtn(props, ref) { // eslint-disable-line + return ; // eslint-disable-line +}); + +function MainMenuSimple(props) { + const { + classes, + toggleDrawerOpen, + loadTransition, + openSubMenu, + open, + } = props; + + const handleClick = () => { + //toggleDrawerOpen(); + loadTransition(false); + }; + + const getMenus = menuArray => menuArray.map((item, index) => { + return ( +
+ -1 ? classes.opened : '')} + activeClassName={classes.active} + component={LinkBtn} + to={item.link} + onClick={handleClick} + timeout="auto" + unmountOnExit + > + {item.icon + && ( + + {item.icon} + + ) + } + + +
+ ); + }); + return ( +
+ {getMenus(MenuContent)} +
+ ); +} + +MainMenuSimple.propTypes = { + classes: PropTypes.object.isRequired, + open: PropTypes.object.isRequired, + openSubMenu: PropTypes.func.isRequired, + toggleDrawerOpen: PropTypes.func.isRequired, + loadTransition: PropTypes.func.isRequired, +}; + +const openAction = (key, keyParent) => ({ type: 'OPEN_SUBMENU', key, keyParent }); +const reducer = 'ui'; + +const mapStateToProps = state => ({ + force: state, // force active class for sidebar menu + open: state.getIn([reducer, 'subMenuOpen']) +}); + +const mapDispatchToProps = dispatch => ({ + openSubMenu: bindActionCreators(openAction, dispatch) +}); + +const MainMenuMapped = connect( + mapStateToProps, + mapDispatchToProps +)(MainMenuSimple); + +export default withStyles(styles)(MainMenuMapped); diff --git a/front/odiparpack/app/components/Sidebar/Sidebar.js b/front/odiparpack/app/components/Sidebar/Sidebar.js index 01de4ec..b4f5626 100644 --- a/front/odiparpack/app/components/Sidebar/Sidebar.js +++ b/front/odiparpack/app/components/Sidebar/Sidebar.js @@ -4,10 +4,10 @@ import { withStyles } from '@material-ui/core/styles'; import classNames from 'classnames'; import brand from 'ba-api/brand'; import dummy from 'ba-api/dummyContents'; -import logo from 'ba-images/logo.svg'; -import { Hidden, Drawer, SwipeableDrawer, List, Divider, Avatar } from '@material-ui/core'; -import MainMenu from './MainMenu'; -import OtherMenu from './OtherMenu'; +import logo from 'ba-images/logo.png'; +import { Hidden, Drawer, SwipeableDrawer, Avatar } from '@material-ui/core'; +import MainMenuSimple from './MainMenuSimple'; +//import OtherMenu from './OtherMenu'; import styles from './sidebar-jss'; const MenuContent = props => { @@ -38,11 +38,11 @@ const MenuContent = props => {
- - + + {/* - + */}
); diff --git a/front/odiparpack/app/components/Sidebar/sidebar-jss.js b/front/odiparpack/app/components/Sidebar/sidebar-jss.js index e9bf4f6..95fb2b2 100644 --- a/front/odiparpack/app/components/Sidebar/sidebar-jss.js +++ b/front/odiparpack/app/components/Sidebar/sidebar-jss.js @@ -76,11 +76,14 @@ const styles = theme => ({ } }, avatar: { - margin: 10, + marginBottom: 10, + marginTop: 10, + marginLeft: 6, + marginRight: 10 }, bigAvatar: { - width: 80, - height: 80, + width: 55, + height: 55, }, brandBar: { transition: theme.transitions.create(['width', 'margin', 'background'], { @@ -168,16 +171,19 @@ const styles = theme => ({ fontSize: 14, padding: 10, alignItems: 'center', + justifyContent: 'flex-start', '& h4': { - fontSize: 18, + fontSize: 19, marginBottom: 0, textOverflow: 'ellipsis', + display: 'flex', overflow: 'hidden', whiteSpace: 'nowrap', - width: 110 + wordBreak:'break-all', + width: 180, }, '& span': { - fontSize: 12, + fontSize: 14, textOverflow: 'ellipsis', whiteSpace: 'nowrap', width: 110, diff --git a/front/odiparpack/app/components/Tables/tableParts/MainTableForm.js b/front/odiparpack/app/components/Tables/tableParts/MainTableForm.js index ccf0e4a..8869212 100644 --- a/front/odiparpack/app/components/Tables/tableParts/MainTableForm.js +++ b/front/odiparpack/app/components/Tables/tableParts/MainTableForm.js @@ -61,7 +61,7 @@ class MainTableForm extends React.Component { diff --git a/front/odiparpack/app/components/Tables/tableParts/RowReadOnly.js b/front/odiparpack/app/components/Tables/tableParts/RowReadOnly.js index 7da655f..2f4a519 100644 --- a/front/odiparpack/app/components/Tables/tableParts/RowReadOnly.js +++ b/front/odiparpack/app/components/Tables/tableParts/RowReadOnly.js @@ -5,8 +5,9 @@ import classNames from 'classnames'; import css from 'ba-styles/Table.scss'; import DeleteIcon from '@material-ui/icons/Delete'; import EditIcon from '@material-ui/icons/BorderColor'; +import { etiqueta } from 'ba-components/Odipar/common'; -import { TableCell, IconButton } from '@material-ui/core'; +import { TableCell, IconButton, LinearProgress } from '@material-ui/core'; const styles = theme => ({ button: { @@ -32,11 +33,24 @@ class RowReadOnly extends React.Component { }; const renderCell = dataArray => dataArray.map((itemCell, index) => { if (itemCell.name !== 'action' && !itemCell.hidden) { - return ( - - {item.get(itemCell.name) !== undefined ? item.get(itemCell.name).toString() : ''} - - ); + const inputType = anchor[index].type; + switch (inputType) { + case 'etiq_pedido': + case 'etiq_camion': + case 'etiq_bloqueo': + case 'etiq_alma': + return ( + + {etiqueta(inputType, item.get(itemCell.name))} + + ); + case 'texto': + return ( + + {item.get(itemCell.name) !== undefined ? item.get(itemCell.name).toString() : ''} + + ); + } } return false; }); diff --git a/front/odiparpack/app/components/index.js b/front/odiparpack/app/components/index.js index 9d7bdb3..123b48c 100644 --- a/front/odiparpack/app/components/index.js +++ b/front/odiparpack/app/components/index.js @@ -3,6 +3,8 @@ export Sidebar from './Sidebar/Sidebar'; export BreadCrumb from './BreadCrumb/BreadCrumb'; export SourceReader from './SourceReader/SourceReader'; export PapperBlock from './PapperBlock/PapperBlock'; +//Odipar + // Dashboard and Widget export CounterWidget from './Counter/CounterWidget'; export SliderWidget from './Widget/SliderWidget'; -- cgit v1.2.3 From 9c396976bb42a9d41407358ce1a1d37242230f21 Mon Sep 17 00:00:00 2001 From: gabrhr <73925454+gabrhr@users.noreply.github.com> Date: Fri, 27 May 2022 12:50:13 -0500 Subject: Add redux, dispatch and etiquetas MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - estetica de etiquetas (ok) - add message, pedido Reducer - add dispatch en Componentes con connect - add api reducer que obtienen el JSON todo ok #TODO - FIX logica de añadiir - FIX axios y dispatch fuera de un componente --- .../app/components/Odipar/EtiquetaData.js | 53 ++++++++++++---------- front/odiparpack/app/components/Odipar/common.js | 10 ++-- .../app/components/Sidebar/MainMenuSimple.js | 4 +- .../app/components/Tables/CrudTableForm.js | 2 + 4 files changed, 40 insertions(+), 29 deletions(-) (limited to 'front/odiparpack/app/components') diff --git a/front/odiparpack/app/components/Odipar/EtiquetaData.js b/front/odiparpack/app/components/Odipar/EtiquetaData.js index 4a2a37c..a2f262d 100644 --- a/front/odiparpack/app/components/Odipar/EtiquetaData.js +++ b/front/odiparpack/app/components/Odipar/EtiquetaData.js @@ -1,10 +1,5 @@ //Pedido export const pedido = { - entregado: { - text: "Entregado", - color: "#81C784", - icon: false - }, pendiente:{ text: "Pendiente", color: "#FFB74D", @@ -15,59 +10,71 @@ export const pedido = { color: "#64B5F6", icon: false }, + entregado: { + text: "Entregado", + color: "#81C784", + icon: false + }, cancelado: { text: "Cancelado", color: "#E57373", icon: false - } + }, + pendienteAveria:{ + text: "Pendiente por Averia", + color: "#FFB74D", + icon: false + } } //Camion export const camion = { - entregado: { - text: "Entregado", + disponible : { + text: "Disponible", color: "#81C784", icon: false }, - pendiente:{ - text: "Pendiente", - color: "#FFB74D", + enReparto: { + text: "En Reparto", + color: "#64B5F6", icon: false }, - enCamino: { - text: "En Camino", - color: "#64B5F6", + mantenimiento:{ + text: "Mantenimiento", + color: "#FFB74D", icon: false }, cancelado: { - text: "Cancelado", + text: "Inhabilitado", color: "#E57373", icon: false } } + //Bloqueos export const bloqueo = { desbloqueado: { - text: "Entregado", + text: "Disponible", color: "#81C784", icon: false }, bloqueado:{ - text: "Pendiente", - color: "#FFB74D", + text: "Bloqueado", + color: "#E57373", icon: false } } - + + //Almacen export const almacen = { noPrincipal: { text: "Pequeño", - color: "#81C784", - icon: false + color: "#DED8D8", + icon: 10 }, principal:{ text: "Principal", - color: "#FFB74D", - icon: false + color: "#DED8D8", + icon: 16 } } \ No newline at end of file diff --git a/front/odiparpack/app/components/Odipar/common.js b/front/odiparpack/app/components/Odipar/common.js index c66b792..39ba76a 100644 --- a/front/odiparpack/app/components/Odipar/common.js +++ b/front/odiparpack/app/components/Odipar/common.js @@ -1,6 +1,7 @@ import React from "react" import { Chip } from "@material-ui/core"; -import {pedido, camion, bloqueo, almacen} from './EtiquetaData' +import { pedido, camion, bloqueo, almacen } from './EtiquetaData' +import Brightness1Icon from '@material-ui/icons/Brightness1'; const etiquetaStyle = color => ({ fontWeight: 'bold', @@ -11,7 +12,7 @@ const etiquetaStyle = color => ({ //Etiquetas export function etiqueta(tipo , estado) { // eslint-disable-line - let {color, text} = "" + let {color, text, icon} = "" switch(tipo){ case 'etiq_pedido': text = pedido[Object.keys(pedido)[estado]].text @@ -29,10 +30,13 @@ export function etiqueta(tipo , estado) { // eslint-disable-line console.log("entre?") text = almacen[Object.keys(almacen)[estado]].text color = almacen[Object.keys(almacen)[estado]].color + icon = almacen[Object.keys(almacen)[estado]].icon break; } return ( - + tipo == "etiq_alma" ? + } style={{fontWeight: 'bold', backgroundColor: color}}/> : + ) } \ No newline at end of file diff --git a/front/odiparpack/app/components/Sidebar/MainMenuSimple.js b/front/odiparpack/app/components/Sidebar/MainMenuSimple.js index f7634ca..18ac8fd 100644 --- a/front/odiparpack/app/components/Sidebar/MainMenuSimple.js +++ b/front/odiparpack/app/components/Sidebar/MainMenuSimple.js @@ -5,10 +5,8 @@ import classNames from 'classnames'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import { NavLink } from 'react-router-dom'; -import ExpandLess from '@material-ui/icons/ExpandLess'; -import ExpandMore from '@material-ui/icons/ExpandMore'; // Menu Object -import MenuContent from 'ba-api/menu'; +import MenuContent from 'odi-utils/menu'; import { List, ListItem, ListItemIcon, ListItemText, Collapse, Icon } from '@material-ui/core'; import styles from './sidebar-jss'; diff --git a/front/odiparpack/app/components/Tables/CrudTableForm.js b/front/odiparpack/app/components/Tables/CrudTableForm.js index d2d2ea8..219fcd2 100644 --- a/front/odiparpack/app/components/Tables/CrudTableForm.js +++ b/front/odiparpack/app/components/Tables/CrudTableForm.js @@ -6,6 +6,7 @@ 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); } @@ -31,6 +32,7 @@ class CrudTableForm extends React.Component { } = this.props; return (
+
{children} -- cgit v1.2.3 From 32fb17de8f78317b165b6f269a8bab2d4e852d0d Mon Sep 17 00:00:00 2001 From: gabrhr <73925454+gabrhr@users.noreply.github.com> Date: Mon, 30 May 2022 20:08:04 -0500 Subject: Fix axios and add new MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - FIX logica de añadiir (ok) - FIX axios y dispatch fuera de un componente (ok) - Cambiar las notificaciones --- .../app/components/Notification/Notification.js | 69 +++++++++++++++++++--- .../app/components/Tables/CrudTableForm.js | 36 +++++++++-- .../app/components/Tables/tableParts/Form.js | 4 +- .../components/Tables/tableParts/MainTableForm.js | 4 +- .../components/Tables/tableParts/RowReadOnly.js | 17 +++++- 5 files changed, 111 insertions(+), 19 deletions(-) (limited to 'front/odiparpack/app/components') 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 ( this.handleClose()} ContentProps={{ 'aria-describedby': 'message-id', }} - message={message} + anchorOrigin={{ + vertical: 'top', + horizontal: 'right', + }} + + > + + + {message} + + )} action={[ this.handleClose()} > - + , ]} /> + ); } } @@ -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 (
- + {children} @@ -46,6 +71,7 @@ class CrudTableForm extends React.Component { editRow={editRow} anchor={anchor} branch={branch} + removeRowAPI={removeRowAPI} />
); 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 {
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 => ( 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); -- cgit v1.2.3 From cbc7d7f7494508fda69e88c76702a878bebca0e2 Mon Sep 17 00:00:00 2001 From: gabrhr <73925454+gabrhr@users.noreply.github.com> Date: Tue, 31 May 2022 03:58:23 -0500 Subject: Add Almacenes - todo de almacenes, redux, pagina - mejoro form de pedido (etiqueta estado, RUC) #TODO - Ver combobox con API --- front/odiparpack/app/components/Forms/ReduxFormMUI.js | 7 +++++++ front/odiparpack/app/components/Odipar/common.js | 11 ++++++----- front/odiparpack/app/components/Tables/CrudTableForm.js | 5 ++++- 3 files changed, 17 insertions(+), 6 deletions(-) (limited to 'front/odiparpack/app/components') 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); } } -- cgit v1.2.3