added back the menu buttons on RegisterItemForm now it works

3 files changed, 55 insertions, 81 deletions

diff --git a/src/components/Form/AddNewItemForm.js b/src/components/Form/AddNewItemForm.js
index 69a53f3..809de87 100644
--- a/src/components/Form/AddNewItemForm.js
+++ b/src/components/Form/AddNewItemForm.js
@@ -104,7 +104,7 @@ const AddNewItemForm = (props) => {
   
           <label>
             Description: 
-              <input className={"wideInputBox"} type="text" step="0.1" value={itemDescValue} 
+              <input className={"wideInputBox"} type="text" value={itemDescValue} 
                 onChange={
                   (event) => {
                     setItemDescValue(event.target.value);
diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss
index 43aee39..e0ec4f9 100644
--- a/src/components/Form/Form.scss
+++ b/src/components/Form/Form.scss
@@ -109,4 +109,15 @@ input {
   @include formWideLabel();
 }
 
+.floatingForm .menu {
+  position: absolute;
+
+  right: 0.5rem;
+  bottom: 0.5rem;
+}
+
+.floatingForm .menu * {
+  margin: 1rem;
+}
+
 
diff --git a/src/components/Form/RegisterItemForm.js b/src/components/Form/RegisterItemForm.js
index 30d23b6..8ce2161 100644
--- a/src/components/Form/RegisterItemForm.js
+++ b/src/components/Form/RegisterItemForm.js
@@ -12,7 +12,7 @@
 // TODO: Implement override protection
 
 import React, { useState } from "react";
-// import axios from "axios";
+import axios from "axios";
 import "./Form.scss";
 
 
@@ -30,15 +30,36 @@ const RegisterItemForm = (props) => {
   const closeOnBGClicked = (event) => 
     event.target.className === "floatingMenuBG" && hideSelf();
 
+  const postForm = (event) => {
+    event.preventDefault();
+
+  // TODO: show confirmation before being invisible
+    axios.post(
+      `/api/items/`
+      + `?model=${newItemNameValue}`
+      + `&desc=${newItemDescValue}`
+      + `&price=${newItemPriceValue}`
+      + `&hsn=${newItemHSNValue}`
+      + `&gst=${newItemGSTValue}`
+    )
+      .then((res) => {
+        console.log(res);
+        props.setVisibility(false);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+    props.updateItemsList();
+  }
+
+
   return (
     <div className={"floatingMenuBG"} onClick={closeOnBGClicked}>
       <div className={"floatingMenu"}>
         <div className={"formContainer"}>
-          <form className={"floatingForm"}>
+          <form className={"floatingForm"} onSubmit={postForm}>
             <div className={"twoPaneForm"}>
-
               <div className={"widePane"}>
-
                 <label>
                   Item/Service: <input className={"wideInputBox"} type="text" value={newItemNameValue} onChange={
                     (event) => {
@@ -56,9 +77,7 @@ const RegisterItemForm = (props) => {
                 </label>
 
               </div>
-
               <div className={"widePane"}>
-
                 <label>
                   Price: <input className={"smallInputBox"} type="number" min="0.00" step="0.001" value={newItemPriceValue} onChange={
                     (event) => {
@@ -85,87 +104,31 @@ const RegisterItemForm = (props) => {
                     }
                   } />
                 </label>
-
-              </div>
             </div>
-          </form>
-        </div>
-      </div>
-    </div>
-  );
-
-  /*
-  return (
-    <div className={"formContainer"}>
-      <form className={"threePaneForm"} onSubmit={
-          (event) => {
-            event.preventDefault();
-
-            // TODO: show confirmation before being invisible
-            axios.post(
-              `/api/items/`
-              + `?model=${newItemNameValue}`
-              + `&desc=${newItemDescValue}`
-              + `&price=${newItemPriceValue}`
-              + `&hsn=${newItemHSNValue}`
-              + `&gst=${newItemGSTValue}`
-            )
-              .then((res) => {
-                console.log(res);
-                props.setVisibility(false);
-              })
-              .catch((err) => {
-                console.log(err);
-              });
-            props.updateItemsList();
-          }
-        }>
-        <div className={"addNewItemForm RegisterItemForm"}>
-          <div className={"textInputs"}>
-            <label>
-              Item/Service: <input type="text" value={newItemNameValue} onChange={
-                (event) => {
-                  setNewItemNameValue(event.target.value);
-                }
-              } required />
-            </label>
+            </div>
 
-            <label>
-              Description: <input type="text" value={newItemDescValue} onChange={
-                (event) => {
-                  setNewItemDescValue(event.target.value);
+            <div className={"menu"}>
+              <input
+                type="button"
+                value="cancel"
+                onClick={
+                  () => {
+                    props.setVisibility(false);
+                  }
                 }
-              } />
-            </label>
-          </div>
-
-          <div className={"numericInputs"}>
+              />
 
-
-          </div>
-        </div>
-
-        <div className={"menu"}>
-          <input
-            type="button"
-            value="cancel"
-            onClick={
-              () => {
-                props.setVisibility(false);
-              }
-            }
-          />
-
-          <input
-            type="submit"
-            value="Register/Add"
-            disabled={newItemNameValue !== "" ? "" : "disabled"}
-          />
+              <input
+                type="submit"
+                value="Register/Add"
+                disabled={newItemNameValue !== "" ? "" : "disabled"}
+              />
+            </div>
+          </form>
         </div>
-      </form>
+      </div>
     </div>
   );
-          */
 }
 
 export default RegisterItemForm;