fixed the naming scheme and made the AddNewItemForm more smarter

1 files changed, 138 insertions, 0 deletions

diff --git a/src/components/Form/AddNewItemForm.js b/src/components/Form/AddNewItemForm.js
new file mode 100644
index 0000000..8484724
--- /dev/null
+++ b/src/components/Form/AddNewItemForm.js
@@ -0,0 +1,138 @@
+import React, { useState } from "react";
+import "./Form.css";
+
+
+const AddNewItemForm = (props) => {
+  const [itemNameValue, setItemNameValue] = useState("");
+  const [itemDescValue, setItemDescValue] = useState("");
+  const [itemPriceValue, setItemPriceValue] = useState(0.00);
+  const [itemDiscountValue, setItemDiscountValue] = useState(0.00);
+  const [itemGSTValue, setItemGSTValue] = useState(18);
+  const [itemQtyValue, setItemQtyValue] = useState(1);
+
+  const enterItemNamePrompt = "Start typing here";
+  const registerItemPrompt = "add new";
+
+  const emptyItemNames = [enterItemNamePrompt, registerItemPrompt, ""];
+
+  // Extract the model names from savedItems
+  const savedItems = props.savedItems;
+  let savedItemNames = [];
+  for (let i = 0; i < savedItems.length; i++) {
+    savedItemNames.push(savedItems[i].Model);
+  }
+
+  const filteredItems = savedItemNames.filter(
+    (item) => {
+      // case insensitive
+      return item.toLowerCase().includes(itemNameValue.toLowerCase());
+    }
+  );
+
+  // set description and price
+  // when item is entered
+  const setItemInfo = (itemName) => {
+  for (let i = 0; i <= props.savedItems.length - 1; i++) {
+    const mod = props.savedItems[i].Model.toLowerCase();
+    const desc = props.savedItems[i].Description;
+    const price = props.savedItems[i].Price;
+
+    if (mod === itemName) {
+      setItemDescValue(desc);
+      setItemPriceValue(price);
+      break;
+      }
+    }
+  }
+
+  return (
+    <div className={"formContainer"}>
+      <form className={"addNewItemForm"} onSubmit={
+        (event) => {
+          event.preventDefault();
+          console.log(itemNameValue, itemDescValue, itemPriceValue);
+        }
+      }>
+        <div className={"textInputs"}>
+          <label>
+            Item:
+              <select
+                value={itemNameValue} 
+                onChange={
+                  (event) => {
+                    setItemNameValue(event.target.value);
+                    setItemInfo(event.target.value.toLowerCase());
+                  }
+              }>
+                <option key={enterItemNamePrompt}>{enterItemNamePrompt}</option>
+                {savedItemNames.map(
+                  (i) => {
+                    return <option key={i}>{i}</option>
+                  }
+                )}
+                <option key={registerItemPrompt}>{registerItemPrompt}</option>
+              </select>
+
+          </label>
+  
+          <label>
+            Description:<input type="text" min="0" step="0.1" value={itemDescValue} onChange={
+              (event) => {
+                setItemDescValue(event.target.value);
+              }
+            } />
+          </label>
+        </div>
+
+        <div className={"numericInputs"}>
+          <label>
+            Quantity: <input type="number" min="1" value={itemQtyValue} onChange={
+              (event) => {
+                setItemQtyValue(event.target.value);
+              }
+            } />
+          </label>
+
+          <label>
+            Price: <input type="number" min="0" value={itemPriceValue} onChange={
+              (event) => {
+                setItemPriceValue(event.target.value);
+              }
+            } />
+          </label>
+
+          <label>
+            Discount: <input type="number" min="0" value={itemDiscountValue} onChange={
+              (event) => {
+                setItemDiscountValue(event.target.value);
+              }
+            } />
+          </label>
+
+          <label>
+            GST: <input type="number" min="0" value={itemGSTValue} onChange={
+              (event) => {
+                setItemGSTValue(event.target.value);
+              }
+            } />
+          </label>
+
+        </div>
+
+        <div className={"menuButtons"}>
+          <input type="button" value="Placeholder1" />
+          <input type="button" value="Placeholder2" />
+          <input type="button" value="Placeholder3" />
+          <input type="button" value="Placeholder4" />
+            <input 
+              type="submit" 
+              value="add" 
+              disabled={ emptyItemNames.includes(itemNameValue) ? "disabled" : "" }
+            />
+        </div>
+      </form>
+    </div>
+  )
+}
+
+export default AddNewItemForm;