added shipping address functionality to /manage/clients page

1 files changed, 68 insertions, 8 deletions

diff --git a/src/components/editors/client-editor.js b/src/components/editors/client-editor.js
index eccd9e8..f4535c2 100644
--- a/src/components/editors/client-editor.js
+++ b/src/components/editors/client-editor.js
@@ -15,24 +15,37 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { Client, saveClient } from './../../classes/client';
+import { Client, saveClient, Contact, Address } from './../../classes/client';
 import AddressEditor from './address-editor';
 import ContactEditor from './contact-editor';
 import './scss/client-editor.scss';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 const ClientEditor = (props) => {
   const [name, setName] = useState("");
   const [GSTIN, setGSTIN] = useState([]);
+  const [contact, setContact] = useState(new Contact());
+  const [billingAddress, setBillingAddress] = useState(new Address());
+  const [shippingAddresses, setShippingAddresses] = useState([]);
   const [shipToBillingAddress, setShipToBillingAddress] = useState(true);
 
+  useEffect(() => {
+    // will delete existing shipping addresses if false
+    setShippingAddresses(shipToBillingAddress ? [] : [new Address()])
+  }, [shipToBillingAddress]);
+
   const handleSubmit = (e) => {
     e.preventDefault();
 
     const client = new Client();
     client.Name = name;
     client.GSTIN = GSTIN;
+    client.Contact = contact;
+    client.BillingAddress = billingAddress;
+    client.ShippingAddresses = shipToBillingAddress
+      ? [billingAddress]
+      : shippingAddresses
 
     // TODO: Save is for new items. implement modification too
     saveClient(client, handleSuccess, handleFail);
@@ -40,16 +53,21 @@ const ClientEditor = (props) => {
 
   const handleSuccess = () => {
     clearAll();
-    props.callback();
+    props.successCallback();
   }
 
-  const handleFail = () => {
+  const handleFail = (err) => {
     alert("fail");
+    console.log(err);
   }
 
   const clearAll = () => {
     setName("");
     setGSTIN("")
+    setContact(new Contact());
+    setBillingAddress(new Address());
+    setShippingAddresses([new Address()]);
+    setShipToBillingAddress(true);
   }
 
   const handleCancel = () => {
@@ -57,6 +75,27 @@ const ClientEditor = (props) => {
     clearAll();
   }
 
+  const handleShippingAddressUpdate = (id, data) => {
+    setShippingAddresses([
+      ...shippingAddresses.slice(0, id),
+      data,
+      ...shippingAddresses.slice(id+1)
+    ]);
+  }
+
+  const handleShippingAddressDelete = (id) => {
+    // deleting the last address sets
+    // shipToBillingAddress to true
+    if (shippingAddresses.length === 1) {
+      setShipToBillingAddress(true);
+    } else {
+      setShippingAddresses([
+        ...shippingAddresses.slice(0, id),
+        ...shippingAddresses.slice(id+1)
+      ]);
+    }
+  }
+
   return (
     <div className={"editor-wrapper"}>
       <p>{props.heading}</p>
@@ -77,14 +116,35 @@ const ClientEditor = (props) => {
           </label>
         </div>
 
-        <ContactEditor heading={"Contact Details"}/>
+        <ContactEditor
+          heading={"Contact Details"}
+          contact={contact}
+          setContact={setContact} />
         <AddressEditor
           heading={"Billing Address"}
           isBillingAddress={true}
           billingAddressIsShipping={shipToBillingAddress}
-          callback={setShipToBillingAddress} />
-
-        <span className={"buttons"}>
+          setShipToBillingAddress={setShipToBillingAddress}
+          address={billingAddress}
+          setAddress={setBillingAddress} />
+
+        {shippingAddresses.length > 0 && shippingAddresses.map((i, id) =>
+          <AddressEditor
+            key={id}
+            heading={`Shipping Address ${shippingAddresses.length === 1 ? '' : id + 1}`}
+            address={i}
+            deleteAddress={() => handleShippingAddressDelete(id)}
+            setAddress={(data) => handleShippingAddressUpdate(id, data)} />
+        )}
+
+        <span className={`buttons ${shippingAddresses.length > 0 ? 'wide' : ''}`}>
+          {shippingAddresses.length > 0 &&
+            <input
+            className={"wide-button"}
+            type="button"
+            value="Add Shipping Address"
+            onClick={()=> setShippingAddresses([...shippingAddresses, new Address()])}/>
+          }
           <input type="button" value="Clear" onClick={clearAll}/>
           <input type="button" value="Cancel" onClick={handleCancel}/>
           <input type="submit" value="Save" />