Added better support for saving client data

3 files changed, 131 insertions, 53 deletions

diff --git a/src/components/Form/Document/DocumentInfoForm.tsx b/src/components/Form/Document/DocumentInfoForm.tsx
index 6135b33..2d7dcd9 100644
--- a/src/components/Form/Document/DocumentInfoForm.tsx
+++ b/src/components/Form/Document/DocumentInfoForm.tsx
@@ -25,12 +25,31 @@ interface Props {
 }
 
 const DocumentInfoForm: React.FC<Props> = (props) => {
+  const dummyPerson: Person = {
+    Name: "",
+    Address: "",
+    Phone: "",
+    Email: "",
+    
+    BillAddress: {
+      AddressLine: "",
+      City: "",
+      State: "",
+      PINCode: "",
+      Country: "India" // TODO: Get default from server
+    }
+  }
+
   const [invoiceNumber, setInvoiceNumber] = useState<number>(props.invoiceNumber);
   const [invoiceDate, setInvoiceDate] = useState(new Date());
+  const [selectedClient, setSelectedClient] = useState<Person>(dummyPerson);
+
   return (
     <div className={"DocumentInfoForm"}>
       <SelectClientForm 
         savedPeople={props.savedPeople}
+        selectedClient={selectedClient}
+        setSelectedClient={setSelectedClient}
       />
 
       <div className={"documentInfoChild"}>
diff --git a/src/components/Form/People/RegisterPersonForm.tsx b/src/components/Form/People/RegisterPersonForm.tsx
index 9e3b155..3922975 100644
--- a/src/components/Form/People/RegisterPersonForm.tsx
+++ b/src/components/Form/People/RegisterPersonForm.tsx
@@ -8,7 +8,7 @@
 
 import React, { useState } from "react";
 import "./../Form.scss";
-import { Person } from "./../../../interfaces"
+import { Person, Address } from "./../../../interfaces"
 import axios from "axios";
 
 interface props {
@@ -18,9 +18,14 @@ interface props {
 
 const RegisterPersonForm: React.FC<props> = (props) => {
   const [newPersonName, setNewPersonName] = useState<string>("");
-  const [newPersonAddress, setNewPersonAddress] = useState<string>("");
-  const [newPersonEmail, setNewPersonEmail] = useState<string>("");
   const [newPersonPhone, setNewPersonPhone] = useState<string>("");
+  const [newPersonEmail, setNewPersonEmail] = useState<string>("");
+
+  const [newPersonBillAddressLine, setNewPersonBillAddressLine] = useState<string>("");
+  const [newPersonBillCity, setNewPersonBillCity] = useState<string>("");
+  const [newPersonBillState, setNewPersonBillState] = useState<string>("");
+  const [newPersonBillPINCode, setNewPersonBillPINCode] = useState<string>("");
+  const [newPersonBillCountry, setNewPersonBillCountry] = useState<string>("");
 
   const hideSelf = () => props.setVisibility(false);
 
@@ -32,9 +37,25 @@ const RegisterPersonForm: React.FC<props> = (props) => {
 
     const newClient: Person =  {
       Name: newPersonName,
-      Address: newPersonAddress,
       Phone: newPersonPhone,
-      Email: newPersonEmail
+      Email: newPersonEmail,
+
+      BillAddress: {
+        AddressLine: newPersonBillAddressLine,
+        City: newPersonBillCity,
+        State: newPersonBillState,
+        PINCode: newPersonBillPINCode,
+        Country: newPersonBillCountry
+      },
+
+      // currently same as BillAddress
+      ShipAddress: {
+        AddressLine: newPersonBillAddressLine,
+        City: newPersonBillCity,
+        State: newPersonBillState,
+        PINCode: newPersonBillPINCode,
+        Country: newPersonBillCountry
+      },
     }
 
     // TODO: show confirmation before being invisible
@@ -57,46 +78,84 @@ const RegisterPersonForm: React.FC<props> = (props) => {
       <div className={"floatingMenu"}>
         <div className={"formContainer"}>
           <form className={"floatingForm"} onSubmit={postForm}>
-            <div className={"wideForm"}>
-              <label>
-                Name: <input className={"wideInputBox"} 
-                  type="text" value={newPersonName} onChange={
-                    (event) => setNewPersonName(event.target.value)
-                  }
-                required />
-              </label>
-
-              <label>
-                Phone: <input className={"wideInputBox"} 
-                  type="text" value={newPersonPhone} onChange={
-                    (event) => setNewPersonPhone(event.target.value)
-                  }
-                required />
-              </label>
-
-              <label>
-                Email: <input className={"wideInputBox"} 
-                  type="text" value={newPersonEmail} onChange={
-                    (event) => setNewPersonEmail(event.target.value)
-                  }
-                required />
-              </label>
-
-              <label>
-                Address: <input className={"wideInputBox"} 
-                  type="text" value={newPersonAddress} onChange={
-                    (event) => setNewPersonAddress(event.target.value)
-                  }
-                required />
-              </label>
-            </div>
-
-            <div className={"menu"}>
-              <input type="button" value="cancel" 
-              onClick={() => hideSelf()} />
-
-              <input type="submit" value="Register/Add" 
-              disabled={newPersonName === "" ? true : false} />
+            <div className={"twoPaneForm"}>
+              <div className={"widePane formPane"}>
+                <label>
+                  Name: <input className={"wideInputBox"} 
+                    type="text" value={newPersonName} onChange={
+                      (event) => setNewPersonName(event.target.value)
+                    }
+                  required />
+                </label>
+
+                <label>
+                  Phone: <input className={"wideInputBox"} 
+                    type="text" value={newPersonPhone} onChange={
+                      (event) => setNewPersonPhone(event.target.value)
+                    }
+                  required />
+                </label>
+
+                <label>
+                  Email: <input className={"wideInputBox"} 
+                    type="text" value={newPersonEmail} onChange={
+                      (event) => setNewPersonEmail(event.target.value)
+                    }
+                  required />
+                </label>
+              </div>
+
+              <div className={"widePane formPane"}>
+                <h3>Billing Address</h3>
+
+                <label>
+                  Address: <input className={"wideInputBox"} 
+                    type="text" value={newPersonBillAddressLine} onChange={
+                      (event) => setNewPersonBillAddressLine(event.target.value)
+                    }
+                  required />
+                </label>
+
+                <label>
+                  City: <input className={"wideInputBox"} 
+                    type="text" value={newPersonBillCity} onChange={
+                      (event) => setNewPersonBillCity(event.target.value)
+                    }
+                  required />
+                </label>
+
+                <label>
+                  State: <input className={"wideInputBox"} 
+                    type="text" value={newPersonBillState} onChange={
+                      (event) => setNewPersonBillState(event.target.value)
+                    }
+                  required />
+                </label>
+
+                <label>
+                  PIN Code: <input className={"wideInputBox"} 
+                    type="text" value={newPersonBillPINCode} onChange={
+                      (event) => setNewPersonBillPINCode(event.target.value)
+                    }
+                  required />
+                </label>
+
+                <label>
+                  Country: <input className={"wideInputBox"} 
+                    type="text" value={newPersonBillCountry} onChange={
+                      (event) => setNewPersonBillCountry(event.target.value)
+                    }
+                  required />
+                </label>
+              </div>
+
+              <div className={"menu"}>
+                <input type="button" value="cancel" 
+                onClick={() => hideSelf()} />
+
+                <input type="submit" value="Register/Add" 
+                disabled={newPersonName === "" ? true : false} />
+              </div>
             </div>
           </form>
         </div>
diff --git a/src/components/Form/People/SelectClientForm.tsx b/src/components/Form/People/SelectClientForm.tsx
index f91bf41..ca984ca 100644
--- a/src/components/Form/People/SelectClientForm.tsx
+++ b/src/components/Form/People/SelectClientForm.tsx
@@ -6,7 +6,7 @@
  * Copyright (c) 2021 Vidhu Kant Sharma
 */
 
-import React, { useState } from "react";
+import React, { Dispatch, SetStateAction } from "react";
 import { Person } from "./../../../interfaces";
 import "./../Form.scss";
 
@@ -14,19 +14,19 @@ import ClientInfoDisplay from "../../Display/ClientInfoDisplay";
 
 interface Props {
   savedPeople: Person[]
+  selectedClient: Person
+  setSelectedClient: Dispatch<SetStateAction<Person>>
 }
 
 const SelectClientForm: React.FC<Props> = (props) => {
-  // TODO: fix the default selectedClient
-  const [selectedClient, setSelectedClient] = useState<Person>({Name: "", Address: ""});
-
   const enterValuePrompt = "start typing here";
   const registerPrompt = "add new";
 
   // TODO: make it use email if no address found, shorten the name too
   // in short, make formatter flexible
   const formatter = (i: Person): string =>
-    `${i.Name} - ${i.Address.slice(0, 20).concat(i.Address.length < 20 ? "" : "")}`;
+    // TODO: this shit is ugly
+    `${i.Name} - ${i.BillAddress.AddressLine.slice(0, 20).concat(i.BillAddress.AddressLine.length < 20 ? "" : "")}`;
 
   // TODO: if no client found at least clear the display
   // do this in other components too
@@ -35,7 +35,7 @@ const SelectClientForm: React.FC<Props> = (props) => {
     (props.savedPeople === null || e === registerPrompt)
       ? alert("coming soon") // toggle registerPersonPrompt visibility
       : props.savedPeople.some((i) =>
-        e === formatter(i) && setSelectedClient(i))
+        e === formatter(i) && props.setSelectedClient(i))
   
   return (
     <div className={"documentInfoChild"}>
@@ -43,7 +43,7 @@ const SelectClientForm: React.FC<Props> = (props) => {
         Client Name:
           <select
             className={"selectInputBox"}
-            value={selectedClient.Name} 
+            value={props.selectedClient.Name} 
             onChange={
               (event) => {
                 setClientInfo(event.target.value);
@@ -59,7 +59,7 @@ const SelectClientForm: React.FC<Props> = (props) => {
           </select>
       </label>
 
-      <ClientInfoDisplay client={selectedClient}/>
+      <ClientInfoDisplay client={props.selectedClient}/>
     </div>
   )
 }