added some features and many bugs to DocumentInfoForm

3 files changed, 61 insertions, 157 deletions

diff --git a/src/components/BillingPage.js b/src/components/BillingPage.js
index be2e299..40917e5 100644
--- a/src/components/BillingPage.js
+++ b/src/components/BillingPage.js
@@ -14,6 +14,7 @@ import RegisterItemForm from "./Form/Items/RegisterItemForm";
 
 import RegisterPersonForm from "./Form/People/RegisterPersonForm";
 
+import DocumentInfoForm from "./Form/Document/DocumentInfoForm";
 import MetaInfoForm from "./Form/MetaInfoForm";
 
 import ItemsDisplay from "./Display/ItemsDisplay";
@@ -21,6 +22,7 @@ import SummaryDisplay from "./Display/SummaryDisplay";
 
 const BillingPage = () => {
   const [savedItems, getSavedItems] = useState([]);
+  const [savedPeople, getSavedPeople] = useState([]);
   const [registerItemFormVisibility, setRegisterItemFormVisibility] = useState(false);
   const [registerPersonFormVisibility, setRegisterPersonFormVisibility] = useState(false);
 
@@ -35,9 +37,21 @@ const BillingPage = () => {
       })
   }
 
+  const getRegisteredPeople = () => {
+    axios.get(`/api/people`)
+      .then((res) => {
+        getSavedPeople(res.data);
+      })
+      .catch((res) => {
+        alert("The promise returned an error idk what to do");
+        console.log(res);
+      })
+  }
+
   // get data from server on startup
   useEffect(() => {
     getRegisteredItems();
+    getRegisteredPeople();
   }, []);
   // TODO: to be handled by backend
   const defGSTValue = 18;
@@ -62,12 +76,15 @@ const BillingPage = () => {
 
       {registerPersonFormVisibility &&
         <RegisterPersonForm 
-          defGSTValue={defGSTValue}
           updateItemsList={getRegisteredItems} 
           setVisibility={setRegisterPersonFormVisibility}
         />
       }
 
+      <DocumentInfoForm 
+        savedPeople={savedPeople}
+      />
+
       <AddNewItemForm 
         savedItems={savedItems} 
         addItem={getItems} 
diff --git a/src/components/Form/Document/DocumentInfoForm.js b/src/components/Form/Document/DocumentInfoForm.js
index a3f70b7..0b133c6 100644
--- a/src/components/Form/Document/DocumentInfoForm.js
+++ b/src/components/Form/Document/DocumentInfoForm.js
@@ -10,31 +10,30 @@ import React, { useState } from "react";
 import "./../Form.scss";
 
 
-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(props.defGSTValue);
-  const [itemQtyValue, setItemQtyValue] = useState(1);
-  const [itemHSNValue, setItemHSNValue] = useState(0);
+const DocumentInfoForm = (props) => {
+  const [clientName, setClientName] = useState(0);
+  /* TODO: implement a way such that the database also 
+    * gives the ID of the client and all the functions
+    * are carried out from the ID because if two people 
+    * with same name are added then this shit is done for
+  */
 
-  const [itemToAdd, setItemToAdd] = useState({});
+  const selectPersonPrompt = "start typing here";
+  const registerPersonPrompt = "add new";
 
-  const enterItemNamePrompt = "start typing here";
-  const registerItemPrompt = "add new";
-  const emptyItemNames = [enterItemNamePrompt, registerItemPrompt, ""];
+  // const emptyPersonNames = [enterItemNamePrompt, registerItemPrompt, ""];
 
   // Extract the model names from savedItems
-  let savedItemNames= [];
+  let savedPeopleNames = [];
   if (props.savedItems !== null) {
-    for (let i = 0; i < props.savedItems.length; i++) {
-      savedItemNames.push(props.savedItems[i].Model);
+    for (let i = 0; i < props.savedPeople.length; i++) {
+      savedPeopleNames.push(props.savedPeople[i].Name);
     }
   }
   
   // set description and price
   // when item is entered
+  /*
   const setItemInfo = (itemName) => {
     for (let i = 0; i < props.savedItems.length; i++) {
       const mod = props.savedItems[i].Model.toLowerCase();
@@ -52,7 +51,9 @@ const AddNewItemForm = (props) => {
       }
     }
   }
+    */
 
+  /*
   const resetAllValues = () => {
     setItemNameValue("");
     setItemDescValue("");
@@ -62,145 +63,31 @@ const AddNewItemForm = (props) => {
     setItemHSNValue(0);
     setItemGSTValue(props.defGSTValue);
   }
+  */
 
   return (
-    <div className={"formContainer"}>
-      <form className={"threePaneForm"} onSubmit={
-        (event) => {
-          event.preventDefault();
-          const newInvoiceItem = {
-            "Model": itemNameValue,
-            "Description": itemDescValue,
-            "Quantity": parseInt(itemQtyValue),
-            "UnitPrice": parseFloat(itemPriceValue),
-            "TotalPrice": parseFloat(itemPriceValue * itemQtyValue),
-            "Discount": parseInt(itemDiscountValue),
-            "HSN": parseInt(itemHSNValue),
-            "GST": parseInt(itemGSTValue)
-          };
-          props.addItem(newInvoiceItem);
-          resetAllValues();
-        }
-      }>
-        <div className={"widePane"}>
-          <label>
-            Item/Service: 
-              <select
-                className={"selectInputBox"}
-                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 className={"wideInputBox"} type="text" value={itemDescValue} 
-                onChange={
-                  (event) => {
-                    setItemDescValue(event.target.value);
-                  }
-                } 
-              />
-          </label>
-        </div>
-
-        <div className={"widePane"}>
-          <label>
-            Quantity: 
-              <input className={"smallInputBox"} type="number" min="1" value={itemQtyValue} 
-                onInput={
-                  (event) => {
-                    const value = event.target.value;
-                    setItemQtyValue(value);
-                  }
-                } 
-              required />
-          </label>
-
-          <label>
-            Price: 
-              <input className={"smallInputBox"} type="number" min="1.00" step="0.001" value={itemPriceValue} 
-                onChange={
-                  (event) => {
-                    const value = event.target.value;
-                    setItemPriceValue(value);
-                  }
-                } 
-              required />
-          </label>
-
-          <label>
-            Discount: 
-              <input className={"smallInputBox"} type="number" min="0" step="0.001" value={itemDiscountValue} 
-                onChange={
-                  (event) => {
-                    const value = event.target.value;
-                    setItemDiscountValue(value);
-                  }
-                }
-              />
-          </label>
-
-          <label>
-            HSN: 
-              <input className={"smallInputBox"} type="number" min="0" value={itemHSNValue} 
-                onChange={
-                  (event) => {
-                    const value = event.target.value;
-                    setItemHSNValue(value);
-                  }
-                } 
-              required />
-          </label>
-
-          <label>
-            GST: 
-              <input className={"smallInputBox"} type="number" min="0" value={itemGSTValue} 
-                onChange={
-                  (event) => {
-                    const value = event.target.value;
-                    setItemGSTValue(value);
-                  }
-                } 
-              required />
-          </label>
-        </div>
-
-        <div className={"smallPane"}>
-          <input type="button" 
-            value="Register New Item" 
-            onClick={() => props.registerFormVisibility(true)}
-          />
-
-          <input type="button" value="Placeholder1" />
-          <input type="button" value="Placeholder2" />
-          <input type="submit" value="Force Add" />
-
-          <input type="submit" value="add" 
-            disabled={ 
-              (emptyItemNames.includes(itemNameValue)
-              || itemQtyValue <= 0
-              || itemPriceValue <= 0
-              || itemGSTValue <= 0
-              ) ? "disabled" : ""
+    <label>
+      Client Name:
+        <select
+          className={"selectInputBox"}
+          value={clientName}
+          onChange={
+            (event) => {
+              alert(event.target.value);
+              setClientName(event.target.value);
+              // setItemInfo(event.target.value.toLowerCase());
+            }
+        }>
+          <option key={selectPersonPrompt}>{selectPersonPrompt}</option>
+          {savedPeopleNames.map(
+            (i) => {
+              return <option key={i}>{i}</option>
             }
-          />
-        </div>
-      </form>
-    </div>
-  )
+          )}
+          <option key={registerPersonPrompt}>{registerPersonPrompt}</option>
+        </select>
+    </label>
+  );
 }
 
-export default AddNewItemForm;
+export default DocumentInfoForm;
diff --git a/src/components/Form/Items/AddNewItemForm.js b/src/components/Form/Items/AddNewItemForm.js
index 4eaea7d..78d1437 100644
--- a/src/components/Form/Items/AddNewItemForm.js
+++ b/src/components/Form/Items/AddNewItemForm.js
@@ -181,13 +181,13 @@ const AddNewItemForm = (props) => {
 
         <div className={"smallPane"}>
           <input type="button" 
-            value="Register New Item" 
-            onClick={() => props.registerItemFormVisibility(true)}
+            value="Register New Client" 
+            onClick={() => props.registerPersonFormVisibility(true)}
           />
 
           <input type="button" 
-            value="Register New Person" 
-            onClick={() => props.registerPersonFormVisibility(true)}
+            value="Register New Item" 
+            onClick={() => props.registerItemFormVisibility(true)}
           />
 
           <input type="button" value="Placeholder1" />