cleaned up the code and redesigned RegisterItemForm and added more functionality

2 files changed, 73 insertions, 73 deletions

diff --git a/src/components/Form/AddNewItemForm.js b/src/components/Form/AddNewItemForm.js
index 81cbd3f..69a53f3 100644
--- a/src/components/Form/AddNewItemForm.js
+++ b/src/components/Form/AddNewItemForm.js
@@ -104,11 +104,7 @@ const AddNewItemForm = (props) => {
   
           <label>
             Description: 
-              <input 
-                className={"wideInputBox"}
-                type="text" 
-                step="0.1" 
-                value={itemDescValue} 
+              <input className={"wideInputBox"} type="text" step="0.1" value={itemDescValue} 
                 onChange={
                   (event) => {
                     setItemDescValue(event.target.value);
@@ -121,11 +117,7 @@ const AddNewItemForm = (props) => {
         <div className={"widePane"}>
           <label>
             Quantity: 
-              <input 
-                className={"smallInputBox"}
-                type="number" 
-                min="1" 
-                value={itemQtyValue} 
+              <input className={"smallInputBox"} type="number" min="1" value={itemQtyValue} 
                 onInput={
                   (event) => {
                     const value = event.target.value;
@@ -137,12 +129,7 @@ const AddNewItemForm = (props) => {
 
           <label>
             Price: 
-              <input 
-                className={"smallInputBox"}
-                type="number" 
-                min="1.00" 
-                step="0.001" 
-                value={itemPriceValue} 
+              <input className={"smallInputBox"} type="number" min="1.00" step="0.001" value={itemPriceValue} 
                 onChange={
                   (event) => {
                     const value = event.target.value;
@@ -154,12 +141,7 @@ const AddNewItemForm = (props) => {
 
           <label>
             Discount: 
-              <input 
-                className={"smallInputBox"}
-                type="number"
-                min="0" 
-                step="0.001" 
-                value={itemDiscountValue} 
+              <input className={"smallInputBox"} type="number" min="0" step="0.001" value={itemDiscountValue} 
                 onChange={
                   (event) => {
                     const value = event.target.value;
@@ -171,11 +153,7 @@ const AddNewItemForm = (props) => {
 
           <label>
             HSN: 
-              <input 
-                className={"smallInputBox"}
-                type="number" 
-                min="0" 
-                value={itemHSNValue} 
+              <input className={"smallInputBox"} type="number" min="0" value={itemHSNValue} 
                 onChange={
                   (event) => {
                     const value = event.target.value;
@@ -187,11 +165,7 @@ const AddNewItemForm = (props) => {
 
           <label>
             GST: 
-              <input 
-                className={"smallInputBox"}
-                type="number" 
-                min="0" 
-                value={itemGSTValue} 
+              <input className={"smallInputBox"} type="number" min="0" value={itemGSTValue} 
                 onChange={
                   (event) => {
                     const value = event.target.value;
@@ -212,9 +186,7 @@ const AddNewItemForm = (props) => {
           <input type="button" value="Placeholder2" />
           <input type="submit" value="Force Add" />
 
-          <input 
-            type="submit" 
-            value="add" 
+          <input type="submit" value="add" 
             disabled={ 
               (emptyItemNames.includes(itemNameValue)
               || itemQtyValue <= 0
diff --git a/src/components/Form/RegisterItemForm.js b/src/components/Form/RegisterItemForm.js
index fca0916..30d23b6 100644
--- a/src/components/Form/RegisterItemForm.js
+++ b/src/components/Form/RegisterItemForm.js
@@ -11,30 +11,82 @@
 
 // TODO: Implement override protection
 
-import React/*, { useState }*/ from "react";
+import React, { useState } from "react";
 // import axios from "axios";
 import "./Form.scss";
 
 
-const RegisterItemForm = (/*props*/) => {
-//   const [newItemNameValue, setNewItemNameValue] = useState("");
-//   const [newItemDescValue, setNewItemDescValue] = useState("");
-//   const [newItemPriceValue, setNewItemPriceValue] = useState(0.00);
-//   const [newItemHSNValue, setNewItemHSNValue] = useState("");
-//   const [newItemGSTValue, setNewItemGSTValue] = useState(props.defGSTValue);
+const RegisterItemForm = (props) => {
+  const [newItemNameValue, setNewItemNameValue] = useState("");
+  const [newItemDescValue, setNewItemDescValue] = useState("");
+  const [newItemPriceValue, setNewItemPriceValue] = useState(0.00);
+  const [newItemHSNValue, setNewItemHSNValue] = useState("");
+  const [newItemGSTValue, setNewItemGSTValue] = useState(props.defGSTValue);
   // const [newItemBrandValue, setNewItemBrandValue] = useState("");
   // const [newItemTypeValue, setNewItemTypeValue] = useState("");
 
+  const hideSelf = () => props.setVisibility(false);
+
+  const closeOnBGClicked = (event) => 
+    event.target.className === "floatingMenuBG" && hideSelf();
 
   return (
-    <div className={"FloatingMenuBG"}>
-      <div className={"FloatingMenu"}>
+    <div className={"floatingMenuBG"} onClick={closeOnBGClicked}>
+      <div className={"floatingMenu"}>
         <div className={"formContainer"}>
-          <form className={"twoPaneForm"}>
-            <div className={""}>
-            </div>
-
-            <div className={""}>
+          <form className={"floatingForm"}>
+            <div className={"twoPaneForm"}>
+
+              <div className={"widePane"}>
+
+                <label>
+                  Item/Service: <input className={"wideInputBox"} type="text" value={newItemNameValue} onChange={
+                    (event) => {
+                      setNewItemNameValue(event.target.value);
+                    }
+                  } required />
+                </label>
+
+                <label>
+                  Description: <input className={"wideInputBox"} type="text" value={newItemDescValue} onChange={
+                    (event) => {
+                      setNewItemDescValue(event.target.value);
+                    }
+                  } />
+                </label>
+
+              </div>
+
+              <div className={"widePane"}>
+
+                <label>
+                  Price: <input className={"smallInputBox"} type="number" min="0.00" step="0.001" value={newItemPriceValue} onChange={
+                    (event) => {
+                      const value = event.target.value;
+                      setNewItemPriceValue(value);
+                    }
+                  } />
+                </label>
+
+                <label>
+                  HSN: <input className={"smallInputBox"} type="number" min="0" value={newItemHSNValue} onChange={
+                    (event) => {
+                      const value = event.target.value;
+                      setNewItemHSNValue(value);
+                    }
+                  } />
+                </label>
+
+                <label>
+                  GST: <input className={"smallInputBox"} type="number" min="0" value={newItemGSTValue} onChange={
+                    (event) => {
+                      const value = event.target.value;
+                      setNewItemGSTValue(value);
+                    }
+                  } />
+                </label>
+
+              </div>
             </div>
           </form>
         </div>
@@ -88,32 +140,8 @@ const RegisterItemForm = (/*props*/) => {
           </div>
 
           <div className={"numericInputs"}>
-            <label>
-              Price: <input type="number" min="0.00" step="0.001" value={newItemPriceValue} onChange={
-                (event) => {
-                  const value = event.target.value;
-                  setNewItemPriceValue(value);
-                }
-              } />
-            </label>
 
-            <label>
-              HSN: <input type="number" min="0" value={newItemHSNValue} onChange={
-                (event) => {
-                  const value = event.target.value;
-                  setNewItemHSNValue(value);
-                }
-              } />
-            </label>
 
-            <label>
-              GST: <input type="number" min="0" value={newItemGSTValue} onChange={
-                (event) => {
-                  const value = event.target.value;
-                  setNewItemGSTValue(value);
-                }
-              } />
-            </label>
           </div>
         </div>