added a form to manipulate some data about the document and the client info

6 files changed, 175 insertions, 79 deletions

diff --git a/src/components/BillingPage.js b/src/components/BillingPage.js
index 40917e5..73778a1 100644
--- a/src/components/BillingPage.js
+++ b/src/components/BillingPage.js
@@ -50,8 +50,11 @@ const BillingPage = () => {
 
   // get data from server on startup
   useEffect(() => {
+    async function fetchdata() {
     getRegisteredItems();
     getRegisteredPeople();
+    }
+    fetchdata()
   }, []);
   // TODO: to be handled by backend
   const defGSTValue = 18;
diff --git a/src/components/Display/ClientInfoDisplay.js b/src/components/Display/ClientInfoDisplay.js
new file mode 100644
index 0000000..48e8c6d
--- /dev/null
+++ b/src/components/Display/ClientInfoDisplay.js
@@ -0,0 +1,20 @@
+/*
+ * OpenBills - Self hosted browser app to generate and keep track of simple invoices
+ * Version - 0
+ * Licensed under the MIT license - https://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2021 Vidhu Kant Sharma
+*/
+
+import React from "react";
+import "./Display.scss";
+
+const ClientInfoDisplay = (props) => {
+  return (
+    <div>
+      clientID: {props.clientID}
+    </div>
+  );
+}
+
+export default ClientInfoDisplay;
diff --git a/src/components/Form/Document/DocumentInfoForm.js b/src/components/Form/Document/DocumentInfoForm.js
index 0b133c6..86837ed 100644
--- a/src/components/Form/Document/DocumentInfoForm.js
+++ b/src/components/Form/Document/DocumentInfoForm.js
@@ -6,87 +6,33 @@
  * Copyright (c) 2021 Vidhu Kant Sharma
 */
 
-import React, { useState } from "react";
+import React/*, { useState }*/ from "react";
 import "./../Form.scss";
 
-
-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 selectPersonPrompt = "start typing here";
-  const registerPersonPrompt = "add new";
-
-  // const emptyPersonNames = [enterItemNamePrompt, registerItemPrompt, ""];
-
-  // Extract the model names from savedItems
-  let savedPeopleNames = [];
-  if (props.savedItems !== null) {
-    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();
-      const desc = props.savedItems[i].Description;
-      const price = props.savedItems[i].Price;
-      const hsn = props.savedItems[i].HSN;
-      const gst = props.savedItems[i].GST;
-
-      if (mod === itemName) {
-        setItemDescValue(desc);
-        setItemPriceValue(price);
-        setItemHSNValue(hsn);
-        setItemGSTValue(gst);
-        break;
-      }
-    }
-  }
-    */
-
-  /*
-  const resetAllValues = () => {
-    setItemNameValue("");
-    setItemDescValue("");
-    setItemQtyValue(1);
-    setItemPriceValue(1);
-    setItemDiscountValue(0);
-    setItemHSNValue(0);
-    setItemGSTValue(props.defGSTValue);
-  }
-  */
-
+import SelectClientForm from "./../People/SelectClientForm";
+
+
+const DocumentInfoForm = (/*props*/) => {
+  const savedPeople = [
+    {
+      ID: 1,
+      Name: "one"
+    },
+    {
+      ID: 2,
+      Name: "two"
+    },
+    {
+      ID: 3,
+      Name: "three"
+    },
+  ]
   return (
-    <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>
-            }
-          )}
-          <option key={registerPersonPrompt}>{registerPersonPrompt}</option>
-        </select>
-    </label>
+    <div className={"DocumentInfoForm"}>
+      <SelectClientForm 
+        savedPeople={savedPeople}
+      />
+    </div>
   );
 }
 
diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss
index 09dfc16..b4490a1 100644
--- a/src/components/Form/Form.scss
+++ b/src/components/Form/Form.scss
@@ -38,7 +38,7 @@ input[type=number] {
 
   border-bottom: 1px dotted $underline1;
   padding: 0.8rem 0;
-  font-size: 1.5rem;
+  font-size: $fontSize2;
 }
 
 @mixin formFlex($justify) {
@@ -122,6 +122,20 @@ input {
   margin: 1rem;
 }
 
+.DocumentInfoForm {
+  @include formPane();
+  width: 100%;
+  min-height: 10rem;
+}
+
+.DocumentInfoForm .DocumentInfoChild {
+  border: 1px solid white;
+  width: 40%;
+  height: 10rem;
+  font-size: $fontSize2;
+}
+
+
 /* */
 .MetaInfoForm {
   width: 60%;
diff --git a/src/components/Form/People/SelectClientForm.js b/src/components/Form/People/SelectClientForm.js
new file mode 100644
index 0000000..139ffdd
--- /dev/null
+++ b/src/components/Form/People/SelectClientForm.js
@@ -0,0 +1,107 @@
+/*
+ * OpenBills - Self hosted browser app to generate and keep track of simple invoices
+ * Version - 0
+ * Licensed under the MIT license - https://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2021 Vidhu Kant Sharma
+*/
+
+import React, { useState } from "react";
+import "./../Form.scss";
+
+import ClientInfoDisplay from "./../../Display/ClientInfoDisplay";
+
+
+const DocumentInfoForm = (props) => {
+  const [clientID, setClientID] = useState("");
+  /* 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 selectPersonPrompt = "start typing here";
+  const registerPersonPrompt = "add new";
+
+  // const emptyPersonNames = [enterItemNamePrompt, registerItemPrompt, ""];
+
+  // No need for this code but just in case
+  // Extract the model names from savedItems
+  /*
+  let savedPeopleNames = [];
+  if (props.savedPeople !== null) {
+    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();
+      const desc = props.savedItems[i].Description;
+      const price = props.savedItems[i].Price;
+      const hsn = props.savedItems[i].HSN;
+      const gst = props.savedItems[i].GST;
+
+      if (mod === itemName) {
+        setItemDescValue(desc);
+        setItemPriceValue(price);
+        setItemHSNValue(hsn);
+        setItemGSTValue(gst);
+        break;
+      }
+    }
+  }
+    */
+
+  /*
+  const resetAllValues = () => {
+    setItemNameValue("");
+    setItemDescValue("");
+    setItemQtyValue(1);
+    setItemPriceValue(1);
+    setItemDiscountValue(0);
+    setItemHSNValue(0);
+    setItemGSTValue(props.defGSTValue);
+  }
+  */
+
+  return (
+    <div className={"SelectClientForm DocumentInfoChild"}>
+      <label>
+        Client Name:
+          <select
+            className={"selectInputBox"}
+            value={clientID}
+            onChange={
+              (event) => {
+                setClientID(event.target.value);
+                // setItemInfo(event.target.value.toLowerCase());
+              }
+          }>
+            <option>{selectPersonPrompt}</option>
+            {props.savedPeople.map(
+              (i) => {
+                return (
+                  // the className helps determine the id of the option
+                  // TODO: find another way to show this selection box
+                  // such that the user can enter name and it chooses the id
+                  // most likely it needs to be a different component
+                  <option key={i.ID}>
+                    {i.Name}
+                  </option>
+                );
+              }
+            )}
+            <option key={registerPersonPrompt}>{registerPersonPrompt}</option>
+          </select>
+      </label>
+      <ClientInfoDisplay clientID={clientID}/>
+    </div>
+  );
+}
+
+export default DocumentInfoForm;
diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss
index b2ca97b..09c90d5 100644
--- a/src/styles/_theme.scss
+++ b/src/styles/_theme.scss
@@ -37,6 +37,12 @@ $defFont: 'Quicksand', sans-serif;
 /* main dark theme inspired by dracula */
 /* my personal favourite */
 /* I name it dorakura (ドラクラー) */
+
+$fontSize1: 1rem;
+$fontSize2: 1.5rem;
+$fontSize3: 2rem;
+$fontSize4: 2.5rem;
+
 $disabledColor: gray;
 $warningColor: red;
 $shadowColor: #232627;