From fd5ed8aa4f159c8e1c0476915432e0a97a239a91 Mon Sep 17 00:00:00 2001
From: Vidhu Kant Sharma <vidhukant@vidhukant.xyz>
Date: Sat, 1 Oct 2022 19:48:06 +0530
Subject: fixed warning 'component changing controlled input to uncontrolled'
 while editing shipping addresses

---
 src/_colors.scss                               |  7 +++
 src/_styles.scss                               |  2 +-
 src/classes/client.js                          |  6 ++
 src/components/editors/address-editor.js       | 41 ++++++-------
 src/components/editors/client-editor.js        | 82 +++++++++++---------------
 src/components/editors/contact-editor.js       | 41 +++++--------
 src/components/editors/item-editor.js          | 20 +++++--
 src/components/editors/multi-address-editor.js | 62 +++++++++++++++++++
 src/components/editors/scss/_colors.scss       | 14 +++--
 src/components/editors/scss/client-editor.scss | 12 ++++
 src/components/tables/client-table.js          |  4 +-
 src/components/tables/scss/_colors.scss        | 16 ++---
 src/views/manage/clients.js                    | 25 +++++++-
 13 files changed, 212 insertions(+), 120 deletions(-)
 create mode 100644 src/components/editors/multi-address-editor.js

(limited to 'src')

diff --git a/src/_colors.scss b/src/_colors.scss
index 12e4b92..ced67aa 100644
--- a/src/_colors.scss
+++ b/src/_colors.scss
@@ -16,10 +16,17 @@
  */
 
 $primaryAccentColor: #bd93f9;
+$secondaryAccentColor: #d0afff;
+
 $backgroundColor: #282a36;
 $linkColor: $primaryAccentColor;
 
 $white: #f8f8f2;
+$gray: lightgray;
 $black: black;
 
+$warningColor: #ed4683;
+
 $fgColor: $white;
+$darkFgColor: $black;
+$disabledColor: $gray;
diff --git a/src/_styles.scss b/src/_styles.scss
index 3faed12..064b9c6 100644
--- a/src/_styles.scss
+++ b/src/_styles.scss
@@ -33,7 +33,7 @@
         backdrop-filter: blur(2px);
         .floating-window {
             width: 90%;
-            max-width: 1000px;
+            max-width: 1200px;
             z-index: 6;
         }
     }
diff --git a/src/classes/client.js b/src/classes/client.js
index 20e0524..6785c90 100644
--- a/src/classes/client.js
+++ b/src/classes/client.js
@@ -64,3 +64,9 @@ export const getAllClients = (ok, fail) => {
     .then(res => ok(res.data))
     .catch(err => fail(err))
 }
+
+export const editClient = (client, ok, fail) => {
+  axios.put(`/client/${client.Id}`, client)
+    .then(res => ok())
+    .catch(err => fail())
+}
diff --git a/src/components/editors/address-editor.js b/src/components/editors/address-editor.js
index bd81b6f..5fb8ff6 100644
--- a/src/components/editors/address-editor.js
+++ b/src/components/editors/address-editor.js
@@ -18,29 +18,19 @@
 import { Address } from './../../classes/client';
 import './scss/address-editor.scss';
 
+import { useState, useEffect } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faXmark } from '@fortawesome/free-solid-svg-icons';
 
-const AddressEditor = (props) => {
-  const handleInput = (field, event) => {
-    const a = new Address();
-    const val = event.target.value;
-    a.Country = field === "country" ? val : props.address.Country;
-    a.State = field === "state" ? val : props.address.State;
-    a.City = field === "city" ? val : props.address.City;
-    a.Text = field === "address" ? val : props.address.Text;
-    a.PostalCode = field === "postal" ? val : props.address.PostalCode;
-    props.setAddress(a);
-  }
-
+const AddressEditor = ({ heading, address, setAddress, isBillingAddress, billingAddressIsShipping, setShipToBillingAddress, deleteAddress}) => {
   return (
     <div className={"address-editor"}>
-      <p className={"heading"}>{props.heading}</p>
-      {props.isBillingAddress || // cross button
+      <p className={"heading"}>{heading}</p>
+      {isBillingAddress || // cross button
         <FontAwesomeIcon
           icon={faXmark}
           className={"remove-button"}
-          onClick={props.deleteAddress}/>
+          onClick={deleteAddress}/>
       }
 
       <div className={"labels-wrapper"}>
@@ -49,21 +39,24 @@ const AddressEditor = (props) => {
             Country:
             <input
               type="text" name="name"
-              value={props.address.Country} onChange={(e) => handleInput("country", e)} />
+              value={address.Country}
+              onChange={(e) => setAddress({Country: e.target.value})} />
           </label>
 
           <label>
             State:
             <input
               type="text" name="name"
-              value={props.address.State} onChange={(e) => handleInput("state", e)} />
+              value={address.State}
+              onChange={(e) => setAddress({State: e.target.value})} />
           </label>
 
           <label>
             City:
             <input
               type="text" name="name"
-              value={props.address.City} onChange={(e) => handleInput("city", e)} />
+              value={address.City}
+              onChange={(e) => setAddress({City: e.target.value})} />
           </label>
         </div>
 
@@ -72,23 +65,25 @@ const AddressEditor = (props) => {
             Address:
             <textarea
               type="text" name="name"
-              value={props.address.Text} onChange={(e) => handleInput("address", e)} />
+              value={address.Text}
+              onChange={(e) => setAddress({Text: e.target.value})} />
           </label>
 
           <label>
             Postal Code:
             <input
               type="text" name="name"
-              value={props.address.PostalCode} onChange={(e) => handleInput("postal", e)} />
+              value={address.PostalCode}
+              onChange={(e) => setAddress({PostalCode: e.target.value})} />
           </label>
         </div>
       </div>
-      {props.isBillingAddress &&
+      {isBillingAddress &&
         <label className={"checkbox-label"}>
           <input
             type="checkbox"
-            checked={props.billingAddressIsShipping}
-            onChange={() => props.setShipToBillingAddress(!props.billingAddressIsShipping)} />
+            checked={billingAddressIsShipping}
+            onChange={() => setShipToBillingAddress(!billingAddressIsShipping)} />
           Shipping address same as billing address
         </label>
       }
diff --git a/src/components/editors/client-editor.js b/src/components/editors/client-editor.js
index bd018f4..e65ab8f 100644
--- a/src/components/editors/client-editor.js
+++ b/src/components/editors/client-editor.js
@@ -15,7 +15,8 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { Client, saveClient, Contact, Address } from './../../classes/client';
+import { Client, saveClient, editClient, Contact, Address } from './../../classes/client';
+import MultiAddressEditor from './multi-address-editor';
 import AddressEditor from './address-editor';
 import ContactEditor from './contact-editor';
 import './scss/client-editor.scss';
@@ -23,12 +24,16 @@ import './scss/client-editor.scss';
 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);
+  const [name, setName] = useState(props.client.Name);
+  const [GSTIN, setGSTIN] = useState(props.client.GSTIN);
+  const [contact, setContact] = useState(props.client.Contact);
+  const [billingAddress, setBillingAddress] = useState(props.client.BillingAddress);
+  const [shippingAddresses, setShippingAddresses] = useState(props.client.ShippingAddresses);
+  const [shipToBillingAddress, setShipToBillingAddress] = useState(
+    props.client.ShippingAddresses.length === 1
+      ? JSON.stringify(props.client.ShippingAddresses[0]) === JSON.stringify(props.client.BillingAddress)
+      : props.client.ShippingAddresses.length === 0
+  );
 
   useEffect(() => {
     // will delete existing shipping addresses if false
@@ -47,13 +52,19 @@ const ClientEditor = (props) => {
       ? [billingAddress]
       : shippingAddresses
 
-    // TODO: Save is for new items. implement modification too
-    saveClient(client, handleSuccess, handleFail);
+    // remove blank phone numbers/email addresses
+    client.Contact.Phones = client.Contact.Phones.filter(i => i !== "");
+    client.Contact.Emails = client.Contact.Emails.filter(i => i !== "");
+
+    props.editing
+      ? editClient(client, handleSuccess, handleFail)
+      : saveClient(client, handleSuccess, handleFail);
   }
 
   const handleSuccess = () => {
     clearAll();
     props.successCallback();
+    props.editing && props.hide();
   }
 
   const handleFail = (err) => {
@@ -71,33 +82,12 @@ const ClientEditor = (props) => {
   }
 
   const handleCancel = () => {
-    // TODO: hide this component or something
     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)
-      ]);
-    }
+    props.editing && props.hide();
   }
 
   return (
-    <div className={"editor-wrapper"}>
+    <div className={`editor-wrapper ${props.className ? props.className : ''}`}>
       <p>{props.heading}</p>
       <form onSubmit={handleSubmit} className={"editor client-editor"}>
         <div className={"top"}>
@@ -122,23 +112,21 @@ const ClientEditor = (props) => {
           setContact={setContact} />
         <AddressEditor
           heading={"Billing Address"}
+          address={billingAddress}
+          setAddress={(data) => setBillingAddress(prev => ({...prev, ...data}))}
           isBillingAddress={true}
           billingAddressIsShipping={shipToBillingAddress}
-          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 &&
+          setShipToBillingAddress={setShipToBillingAddress} />
+
+        {shipToBillingAddress ||
+          <MultiAddressEditor
+            addresses={shippingAddresses}
+            setAddresses={setShippingAddresses}
+            setShipToBillingAddress={setShipToBillingAddress} />
+        }
+
+        <span className={`buttons ${shipToBillingAddress  ? '' : 'wide'}`}>
+          {shipToBillingAddress ||
             <input
             className={"wide-button"}
             type="button"
diff --git a/src/components/editors/contact-editor.js b/src/components/editors/contact-editor.js
index f689b8c..99baeca 100644
--- a/src/components/editors/contact-editor.js
+++ b/src/components/editors/contact-editor.js
@@ -16,62 +16,49 @@
  */
 
 import { Contact } from './../../classes/client';
+import { useState, useEffect } from 'react';
 import './scss/contact-editor.scss';
 
-const ContactEditor = (props) => {
-  const handleInput = (field, event) => {
-    const c = new Contact();
-    const val = event.target.value;
-    c.Name = field === "name" ? val : props.contact.Name;
-    c.Website = field === "website" ? val : props.contact.Website;
-    c.Phones = field === "phones"
-      ? (val.length === 0 ? [] : val.split("\n"))
-      : props.contact.Phones;
-    c.Emails = field === "emails"
-      ? (val.length === 0 ? [] : val.split("\n"))
-      : props.contact.Emails;
-    props.setContact(c);
-  }
+const ContactEditor = ({ heading, contact, setContact }) => {
+  const splitMultiline = (value) => value.split("\n")
+    .filter((i, id, arr) => id + 1 === arr.length || i !== "");
+
+  const handleInput = (data) =>
+    setContact(prev => ({...prev, ...data}));
 
   return (
     <div className={"contact-editor"}>
-      <p className={"heading"}>{props.heading}</p>
+      <p className={"heading"}>{heading}</p>
 
       <div className={"labels-wrapper"}>
         <label>
           Contact Name:
           <input
             type="text" name="name"
-            value={props.contact.Name} onChange={(e) => handleInput("name", e)} />
+            value={contact.Name} onChange={(e) => handleInput({Name: e.target.value})} />
         </label>
 
         <label>
           Website:
           <input
             type="text" name="name"
-            value={props.contact.Website} onChange={(e) => handleInput("website", e)} />
+            value={contact.Website} onChange={(e) => handleInput({Website: e.target.value})} />
         </label>
 
         <label>
           Phone:
           <textarea
             type="text" name="name"
-            value={props.contact.Phones.length > 0
-              ? props.contact.Phones.forEach(i => i)
-              : ""
-            }
-            onChange={(e) => handleInput("phones", e)} />
+            value={contact.Phones.join('\n')}
+            onChange={(e) => handleInput({Phones: splitMultiline(e.target.value)})} />
         </label>
 
         <label>
           E-mail:
           <textarea
             type="text" name="name"
-            value={props.contact.Emails.length > 0
-              ? props.contact.Emails.forEach(i => i)
-              : ""
-            }
-            onChange={(e) => handleInput("emails", e)} />
+            value={contact.Emails.join('\n')}
+            onChange={(e) => handleInput({Emails: splitMultiline(e.target.value)})} />
         </label>
       </div>
     </div>
diff --git a/src/components/editors/item-editor.js b/src/components/editors/item-editor.js
index 94c6137..eb6e8c1 100644
--- a/src/components/editors/item-editor.js
+++ b/src/components/editors/item-editor.js
@@ -43,6 +43,18 @@ const ItemEditor = (props) => {
   const handleSubmit = (e) => {
     e.preventDefault();
 
+    const minQuantity = parseFloat(minQty)
+    const maxQuantity = parseFloat(maxQty)
+
+    // show error if minQty > maxQty
+    if (maxQuantity > 0) {
+      if (minQuantity > maxQuantity) {
+        // TODO: handle error
+        console.log("shiat")
+        return
+      }
+    }
+
     const item = new Item();
     item.Id = props.item.Id;
     item.Name = name;
@@ -51,8 +63,8 @@ const ItemEditor = (props) => {
     item.UnitOfMeasure = unit;
     item.UnitPrice = parseFloat(unitPrice);
     item.GSTPercentage = parseFloat(gstP);
-    item.MinQuantity = parseFloat(minQty);
-    item.MaxQuantity = parseFloat(maxQty);
+    item.MinQuantity = minQuantity;
+    item.MaxQuantity = maxQuantity;
     item.Brand = brand;
 
     // TODO: Save is for new items. implement modification too
@@ -151,7 +163,7 @@ const ItemEditor = (props) => {
           Minimum Quantity:
           <input
             type="number"
-            value={minQty}
+            value={minQty == "0" ? "" : minQty}
             min="0"
             onChange={(e) => setMinQty(e.target.value)} />
         </label>
@@ -160,7 +172,7 @@ const ItemEditor = (props) => {
           Maximum Quantity:
           <input
             type="number"
-            value={maxQty}
+            value={maxQty == "0" ? "" : maxQty}
             min="0"
             onChange={(e) => setMaxQty(e.target.value)} />
         </label>
diff --git a/src/components/editors/multi-address-editor.js b/src/components/editors/multi-address-editor.js
new file mode 100644
index 0000000..a0182f2
--- /dev/null
+++ b/src/components/editors/multi-address-editor.js
@@ -0,0 +1,62 @@
+/* OpenBills-web - Web based libre billing software
+ * Copyright (C) 2022  Vidhu Kant Sharma <vidhukant@vidhukant.xyz>
+
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { Address } from './../../classes/client';
+import AddressEditor from './address-editor';
+
+import { useState, useEffect } from 'react';
+
+const MultiAddressEditor = ({addresses, setAddresses, setShipToBillingAddress}) => {
+  const handleChange = (id, data) => {
+    console.log(id, data)
+
+    const newAddresses = [...addresses];
+    newAddresses[id] = {
+      ...newAddresses[id], ...data
+    }
+
+    setAddresses(newAddresses)
+  }
+
+  const handleDelete = (id) => {
+    // deleting the last address sets
+    // shipToBillingAddress to true
+    if (addresses.length === 1) {
+      setShipToBillingAddress(true);
+    } else {
+      setAddresses([
+        ...addresses.slice(0, id),
+        ...addresses.slice(id+1)
+      ]);
+    }
+  }
+
+  return (
+    <>
+      {addresses.map((i, id) =>
+        <AddressEditor
+          key={id}
+          heading={`Shipping Address ${addresses.length === 1 ? '' : id + 1}`}
+          address={i}
+          deleteAddress={() => handleDelete(id)}
+          setAddress={(data) => {handleChange(id, data)}} />
+      )}
+    </>
+  );
+}
+
+export default MultiAddressEditor;
diff --git a/src/components/editors/scss/_colors.scss b/src/components/editors/scss/_colors.scss
index 994dcf7..bf47f75 100644
--- a/src/components/editors/scss/_colors.scss
+++ b/src/components/editors/scss/_colors.scss
@@ -15,12 +15,14 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-$primaryAccentColor: #bd93f9;
-$secondaryAccentColor: #d0afff;
+@import "../../../colors";
 
-$fgColor: white;
-$fgColorAlt: black;
+$primaryAccentColor: $primaryAccentColor;
+$secondaryAccentColor: $secondaryAccentColor;
 
-$inputBackgroundColor: #00000000;
+$fgColor: $fgColor;
+$fgColorAlt: $black;
 
-$warningColor: #ed4683;
+$inputBackgroundColor: $backgroundColor;
+
+$warningColor: $warningColor;
diff --git a/src/components/editors/scss/client-editor.scss b/src/components/editors/scss/client-editor.scss
index 30919fd..2a2bfef 100644
--- a/src/components/editors/scss/client-editor.scss
+++ b/src/components/editors/scss/client-editor.scss
@@ -16,6 +16,7 @@
  */
 
 @import "editor";
+@import "../../../colors";
 
 .client-editor {
     max-width: 90%;
@@ -33,3 +34,14 @@
       }
     }
 }
+
+.floating-window {
+    overflow: scroll;
+    max-height: 100%;
+    .buttons {
+      position: fixed;
+      bottom: 1rem;
+      background-color: $backgroundColor;
+      padding: 1rem auto;
+    }
+}
diff --git a/src/components/tables/client-table.js b/src/components/tables/client-table.js
index ffbf5e8..d3b5c25 100644
--- a/src/components/tables/client-table.js
+++ b/src/components/tables/client-table.js
@@ -19,8 +19,8 @@ import './scss/client-table.scss';
 import { deleteClient } from './../../classes/client';
 
 const ClientTable = (props) => {
-  const handleEdit = (i) => {
-    props.setItemToEdit(i)
+  const handleEdit = (c) => {
+    props.setClientToEdit(c)
   }
 
   const handleDelete = (c) => {
diff --git a/src/components/tables/scss/_colors.scss b/src/components/tables/scss/_colors.scss
index a4a8ba4..2a3725c 100644
--- a/src/components/tables/scss/_colors.scss
+++ b/src/components/tables/scss/_colors.scss
@@ -15,18 +15,20 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-$primaryAccentColor: #bd93f9;
-$secondaryAccentColor: #d0afff;
+@import "../../../colors";
+
+$primaryAccentColor: $primaryAccentColor;
+$secondaryAccentColor: $secondaryAccentColor;
 
 $linkColor: $primaryAccentColor;
 
-$fgColor: white;
-$fgColorAlt: black;
-$fgColorDisabled: lightgray;
+$fgColor: $fgColor;
+$fgColorAlt: $darkFgColor;
+$fgColorDisabled: $disabledColor;
 
-$inputBackgroundColor: #00000000;
+$inputBackgroundColor: $backgroundColor;
 
-$warningColor: #ed4683;
+$warningColor: $warningColor;
 
 @mixin button {
     input[type=button] {
diff --git a/src/views/manage/clients.js b/src/views/manage/clients.js
index 9d2209b..8445d80 100644
--- a/src/views/manage/clients.js
+++ b/src/views/manage/clients.js
@@ -22,11 +22,12 @@
 import { useState, useEffect } from 'react';
 
 import './scss/management-page.scss';
-import { getAllClients } from '../../classes/client';
+import { Client, getAllClients } from '../../classes/client';
 import ClientEditor from './../../components/editors/client-editor';
 import ClientTable from './../../components/tables/client-table';
 
 const ManageClientsPage = () => {
+  const [clientToEdit, setClientToEdit] = useState(new Client());
   const [allClients, setAllClients] = useState([]);
   // TODO: handle error
   const updateList = () =>
@@ -38,9 +39,27 @@ const ManageClientsPage = () => {
 
   return (
     <>
-      <ClientEditor heading={"Add New Client"} successCallback={updateList}/>
+      <ClientEditor
+        heading={"Add New Client"}
+        client={new Client()}
+        successCallback={updateList}/>
       <hr/>
-      <ClientTable refresh={updateList} clients={allClients}/>
+      <ClientTable
+        refresh={updateList}
+        clients={allClients}
+        setClientToEdit={setClientToEdit}/>
+
+      {JSON.stringify(clientToEdit) !== JSON.stringify(new Client()) &&
+        <div className={"floating-wrapper"}>
+          <ClientEditor
+            className={"floating-window"}
+            heading={`Edit ${clientToEdit.Name ? clientToEdit.Name : 'Client'}:`}
+            client={clientToEdit}
+            hide={() => setClientToEdit(new Client())}
+            editing={true}
+            callback={updateList}/>
+        </div>
+      }
     </>
   );
 }
-- 
cgit v1.2.3