1 files changed, 82 insertions, 0 deletions
diff --git a/front/odiparpack/app/components/Contact/AddContact.js b/front/odiparpack/app/components/Contact/AddContact.js
new file mode 100644
index 0000000..2690f1d
--- /dev/null
+++ b/front/odiparpack/app/components/Contact/AddContact.js
@@ -0,0 +1,82 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Add from '@material-ui/icons/Add';
+import { Tooltip, Fab } from '@material-ui/core';
+import AddContactForm from './AddContactForm';
+import FloatingPanel from '../Panel/FloatingPanel';
+import styles from './contact-jss';
+
+
+class AddContact extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      img: '',
+      files: []
+    };
+    this.onDrop = this.onDrop.bind(this);
+  }
+
+  onDrop(filesVal) {
+    const { files } = this.state;
+    const filesLimit = 1;
+    let oldFiles = files;
+    oldFiles = oldFiles.concat(filesVal);
+    if (oldFiles.length > filesLimit) {
+      console.log('Cannot upload more than ' + filesLimit + ' items.');
+    } else {
+      this.setState({ img: filesVal[0] });
+    }
+  }
+
+  sendValues = (values) => {
+    const { submit } = this.props;
+    const { img } = this.state;
+    const { avatarInit } = this.props;
+    const avatar = img === null ? avatarInit : img;
+    setTimeout(() => {
+      submit(values, avatar);
+      this.setState({ img: null });
+    }, 500);
+  }
+
+  render() {
+    const {
+      classes,
+      openForm,
+      closeForm,
+      avatarInit,
+      addContact
+    } = this.props;
+    const { img } = this.state;
+    const branch = '';
+    return (
+      <div>
+        <Tooltip title="Add New Contact">
+          <Fab color="secondary" onClick={() => addContact()} className={classes.addBtn}>
+            <Add />
+          </Fab>
+        </Tooltip>
+        <FloatingPanel openForm={openForm} branch={branch} closeForm={closeForm}>
+          <AddContactForm
+            onSubmit={this.sendValues}
+            onDrop={this.onDrop}
+            imgAvatar={img === null ? avatarInit : img}
+          />
+        </FloatingPanel>
+      </div>
+    );
+  }
+}
+
+AddContact.propTypes = {
+  classes: PropTypes.object.isRequired,
+  submit: PropTypes.func.isRequired,
+  addContact: PropTypes.func.isRequired,
+  openForm: PropTypes.bool.isRequired,
+  avatarInit: PropTypes.string.isRequired,
+  closeForm: PropTypes.func.isRequired,
+};
+
+export default withStyles(styles)(AddContact);