Fix axios and add new

- FIX logica de añadiir (ok)
- FIX axios y dispatch fuera de un componente (ok)
- Cambiar las notificaciones

5 files changed, 111 insertions, 19 deletions

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);