From d105cf0f6dd91d7d7a38eb7fe9193f6c0e5d1f7f Mon Sep 17 00:00:00 2001
From: MikunoNaka <bokuwakanojogahoshii@yahoo.com>
Date: Fri, 16 Apr 2021 16:21:24 +0530
Subject: fixed the naming scheme and made the AddNewItemForm more smarter

---
 src/components/BillingPage.js         |  12 ++-
 src/components/Form/AddNewItemForm.js | 138 ++++++++++++++++++++++++++++++++++
 src/components/Form/Form.js           | 118 -----------------------------
 3 files changed, 148 insertions(+), 120 deletions(-)
 create mode 100644 src/components/Form/AddNewItemForm.js
 delete mode 100644 src/components/Form/Form.js

(limited to 'src')

diff --git a/src/components/BillingPage.js b/src/components/BillingPage.js
index 6e76cf0..066b30b 100644
--- a/src/components/BillingPage.js
+++ b/src/components/BillingPage.js
@@ -1,5 +1,5 @@
 import React from "react";
-import BillingForm from "./Form/Form.js";
+import AddNewItemForm from "./Form/AddNewItemForm.js";
 
 
 const sampleData = [
@@ -13,13 +13,21 @@ const sampleData = [
     "Description": "Even better chair",
     "Price": "2134983",
     "Discount": ""
+  }, {
+    "Model": "Action Houseware",
+    "Description": "Not a chair",
+    "Price": "69",
+    "Discount": ""
   }
 ];
 
 const BillingPage = () => {
   return (
     <>
-      <BillingForm savedItems={sampleData} />
+      <AddNewItemForm savedItems={sampleData} />
+      <AddNewItemForm savedItems={sampleData} />
+      <AddNewItemForm savedItems={sampleData} />
+      <AddNewItemForm savedItems={sampleData} />
     </>
   );
 }
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;
diff --git a/src/components/Form/Form.js b/src/components/Form/Form.js
deleted file mode 100644
index 094f881..0000000
--- a/src/components/Form/Form.js
+++ /dev/null
@@ -1,118 +0,0 @@
-import React, { useState } from "react";
-import "./Form.css";
-
-
-const BillingForm = (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);
-
-  // 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());
-    }
-  );
-
-  return (
-    <div className={"formContainer"}>
-      <form className={"addNewItemForm"} onSubmit={
-        (event) => {
-          event.preventDefault();
-          console.log(itemNameValue, itemDescValue, itemPriceValue);
-        }
-      }>
-        <div className={"textInputs"}>
-          <label>
-            Item:<input type="text" value={itemNameValue} onChange={
-              (event) => {
-                setItemNameValue(event.target.value);
-                // set description and price value
-                for (let i = 0; i <= props.savedItems.length - 1; i++) {
-                  const mod = props.savedItems[i].Model;
-                  const desc = props.savedItems[i].Description;
-                  const price = props.savedItems[i].Price;
-                  if (mod === event.target.value) {
-                    setItemDescValue(desc);
-                    setItemPriceValue(price);
-                    break;
-                  }
-                }
-              }
-            } />
-          </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>
-            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>
-
-          <label>
-            Quantity: <input type="number" min="1" value={itemQtyValue} onChange={
-              (event) => {
-                setItemQtyValue(event.target.value);
-              }
-            } />
-          </label>
-        </div>
-
-        <div className={"menuButtons"}>
-          <input type="submit" value="Placeholder1" />
-          <input type="submit" value="Placeholder2" />
-          <input type="submit" value="Placeholder3" />
-          <input type="submit" value="Placeholder4" />
-          <input type="submit" value="add" />
-        </div>
-      </form>
-
-      <ul>
-        {filteredItems.map(
-          (i) => {
-            return <li key={i}>{i}</li>
-          }
-        )}
-      </ul>
-    </div>
-  )
-}
-
-export default BillingForm;
-- 
cgit v1.2.3