Added more basic functionality for BillingForm

2 files changed, 57 insertions, 22 deletions

diff --git a/src/components/App.js b/src/components/App.js
index 3d184b2..c1bae4f 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -5,21 +5,17 @@ import BillingForm from "./Form/Form.js";
 const sampleData = [
   {
     "Model": "Kisan Chair",
-    "Description":"Very good chair",
-    "Price":"10000",
-    "Discount":"3%",},
-  {
+    "Description": "Very good chair",
+    "Price": "10000",
+    "Discount": ""}
+  , {
     "Model": "Supreme Chair",
-    "Description":"Even better chair",
-    "Price":"2134983",
-    "Discount":"9%",
+    "Description": "Even better chair",
+    "Price": "2134983",
+    "Discount": ""
   }
 ]
 
-console.log("sample data:", sampleData);
-
-
-
 const App = () => {
 	return (
 		<>
diff --git a/src/components/Form/Form.js b/src/components/Form/Form.js
index 3285548..5cb5675 100644
--- a/src/components/Form/Form.js
+++ b/src/components/Form/Form.js
@@ -3,43 +3,82 @@ import "./Form.css";
 
 
 const BillingForm = (props) => {
-  const [itemValue, setItemValue] = useState("");
-  const [descValue, setDescValue] = useState("");
+  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);
 
+  // Extract the model names from savedItems
   const savedItems = props.savedItems;
-  let savedItemNames = []
+  let savedItemNames = [];
   for (let i = 0; i < savedItems.length; i++) {
-    savedItemNames.push(savedItems[i].Model)
+    savedItemNames.push(savedItems[i].Model);
   }
 
   const filteredItems = savedItemNames.filter(
     (item) => {
       // case insensitive
-      return item.toLowerCase().includes(itemValue.toLowerCase());
+      return item.toLowerCase().includes(itemNameValue.toLowerCase());
     }
   );
-  
+
   return (
     <div>
       <form onSubmit={
         (event) => {
           event.preventDefault();
-          console.log(itemValue, descValue);
+          console.log(itemNameValue, itemDescValue, itemPriceValue);
         }
       }>
   
         <label>
-          Item: <input type="text" value={itemValue} onChange={
+          Item: <input type="text" value={itemNameValue} onChange={
             (event) => {
-              setItemValue(event.target.value);
+              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" value={descValue} onChange={
+          Description: <input type="text" min="0" step="0.1" value={itemDescValue} onChange={
+            (event) => {
+              setItemDescValue(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) => {
-              setDescValue(event.target.value);
+              setItemGSTValue(event.target.value);
             }
           } />
         </label>