added client picker

6 files changed, 349 insertions, 2 deletions

diff --git a/src/components/pickers/client-picker.js b/src/components/pickers/client-picker.js
new file mode 100644
index 0000000..bca8566
--- /dev/null
+++ b/src/components/pickers/client-picker.js
@@ -0,0 +1,145 @@
+/* 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 { Client, InvoiceClient, getAllClients, Address } from '../../classes/client';
+import './scss/client-picker.scss';
+
+import { useState, useEffect } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPhone, faEnvelope, faGlobe } from '@fortawesome/free-solid-svg-icons'
+
+const ClientPicker = ({ client, setClient, shippingAddressId, setShippingAddressId }) => {
+  const [clients, setClients] = useState([new Client()]);
+
+  useEffect(() => refreshClients, []);
+
+  const refreshClients = () =>
+    getAllClients(setClients, () => {});
+
+  const handleClientSelect = (e) => {
+    const c = clients.filter(i => i.Id === e.target.value )[0];
+    setClient(c ? c : new InvoiceClient());
+  }
+
+  const shouldShowAddressPicker = () => {
+    if (client.Id !== null) {
+      if (client.ShippingAddresses.length > 0) {
+        // if the only address is same as billing address, dont show
+        if (client.ShippingAddresses.length === 1) {
+          return JSON.stringify(client.ShippingAddresses[0]) !==
+            JSON.stringify(client.BillingAddress);
+        }
+        return true;
+      }
+    }
+    return false;
+  }
+
+  const formatAddress = (addr) =>
+    `${addr.Text.length > 30 ? addr.Text.substring(0, 30) + "..." : addr.Text} | ${addr.City}`;
+
+  const formatClientName = (client) =>
+    `${client.Name.length > 30 ? client.Name.substring(0, 30) + "..." : client.Name} | ${client.BillingAddress.City}`;
+
+  return (
+    <div className={"picker-wrapper"}>
+      <p className={"heading"}>Invoice Recipient</p>
+      <div className={"client-picker"}>
+        <div className={"options"}>
+          {clients && clients.length > 0 &&
+            <>
+              <label>
+                Client Name:
+                <select value={client.Id ? client.Id : ""} onChange={handleClientSelect}>
+                  <option key="placeholder" value={""} disabled>Select A Client</option>
+                  {clients.map(i => <option key={i.Id} value={i.Id}>{formatClientName(i)}</option>)}
+                </select>
+              </label>
+
+              {shouldShowAddressPicker() &&
+                <label>
+                  Ship To:
+                  <select value={shippingAddressId} onChange={(e) => setShippingAddressId(parseInt(e.target.value))} >
+                    <option key="placeholder" value={-1} disabled>Select A Shipping Address</option>
+                    {client.ShippingAddresses.map((i, id) => <option key={i.Text} value={id}>{formatAddress(i)}</option>)}
+                  </select>
+                </label>
+              }
+              <p>GSTIN: {client.GSTIN === "" ? "URP" : client.GSTIN}</p>
+            </>
+          }
+        </div>
+
+        <div className={"contact-info"}>
+          <p>
+            Name: {client.Contact.Name}<br/>
+            {client.Contact.Phones.length > 0 &&
+              <>
+                <FontAwesomeIcon icon={faPhone} className={"icon"}/>
+                {client.Contact.Phones.map((i, id) => <a key={`${i}-${id}`} href={`tel:${i}`}>{` ${i}${id + 1 === client.Contact.Phones.length ? '' : ','}`}</a>)}
+                <br/>
+              </>
+            }
+            {client.Contact.Emails.length > 0 &&
+              <>
+                <FontAwesomeIcon icon={faEnvelope} className={"icon"}/>
+                {client.Contact.Emails.map((i, id) => <a key={`${i}-${id}`} href={`mailto:${i}`}>{` ${i}${id + 1 === client.Contact.Emails.length ? '' : ','}`}</a>)}
+                <br/>
+              </>
+            }
+            {client.Contact.Website.length > 0 &&
+              <>
+                <FontAwesomeIcon icon={faGlobe} className={"icon"}/> <a
+                  href={`${(client.Contact.Website.startsWith("https://")
+                    || client.Contact.Website.startsWith("http://"))
+                      ? client.Contact.Website : 'https://' + client.Contact.Website}`}
+                  target="noreferrer noopener"
+                >
+                  {client.Contact.Website}
+                </a>
+              </>
+            }
+          </p>
+        </div>
+
+        {client.Id !== null && // if client is selected
+          <>
+            <div className={"billing-address"}>
+              <p className={"multiline"}>
+                <strong>Billing Address: </strong><br/>
+                {client.BillingAddress.Text} <br/>
+                {client.BillingAddress.City}, {client.BillingAddress.State} - {client.BillingAddress.PostalCode} ({client.BillingAddress.Country})
+              </p>
+            </div>
+            {shouldShowAddressPicker() && shippingAddressId >= 0 &&
+              <div className={"shipping-address"}>
+                <p className={"multiline"}>
+                  <strong>Shipping Address: </strong><br/>
+                  {client.ShippingAddresses[shippingAddressId].Text}<br/>
+                  {client.ShippingAddresses[shippingAddressId].City}, {client.ShippingAddresses[shippingAddressId].State} - {client.ShippingAddresses[shippingAddressId].PostalCode} ({client.ShippingAddresses[shippingAddressId].Country})
+                </p>
+              </div>
+            }
+          </>
+        }
+      </div>
+      <hr/>
+    </div>
+  );
+}
+
+export default ClientPicker;
diff --git a/src/components/pickers/item-picker.js b/src/components/pickers/item-picker.js
new file mode 100644
index 0000000..8353dbb
--- /dev/null
+++ b/src/components/pickers/item-picker.js
@@ -0,0 +1,22 @@
+/* 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/>.
+ */
+
+const ItemPicker = () => {
+
+}
+
+export default ItemPicker;
diff --git a/src/components/pickers/scss/_colors.scss b/src/components/pickers/scss/_colors.scss
new file mode 100644
index 0000000..bf47f75
--- /dev/null
+++ b/src/components/pickers/scss/_colors.scss
@@ -0,0 +1,28 @@
+/* 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 "../../../colors";
+
+$primaryAccentColor: $primaryAccentColor;
+$secondaryAccentColor: $secondaryAccentColor;
+
+$fgColor: $fgColor;
+$fgColorAlt: $black;
+
+$inputBackgroundColor: $backgroundColor;
+
+$warningColor: $warningColor;
diff --git a/src/components/pickers/scss/_picker.scss b/src/components/pickers/scss/_picker.scss
new file mode 100644
index 0000000..625a1e3
--- /dev/null
+++ b/src/components/pickers/scss/_picker.scss
@@ -0,0 +1,105 @@
+/* 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 "colors";
+
+@mixin label {
+    label {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        align-items: center;
+        max-width: 24rem;
+        width: 90%;
+        padding: 0.3rem 0.1rem;
+        border-bottom: 1px dotted $secondaryAccentColor;
+
+        select,input {
+            padding: 0.2rem;
+            max-width: 13rem;
+            width: 100%;
+            box-sizing: border-box;
+            background-color: $inputBackgroundColor;
+            border: 1px solid $primaryAccentColor;
+            color: $fgColor;
+            border-radius: 4px;
+            outline: 0;
+            font-size: 0.8rem;
+        }
+        textarea {
+            background-color: $inputBackgroundColor;
+            color: $fgColor;
+            outline: 0;
+            border: 1px solid $primaryAccentColor;
+            border-radius: 4px;
+            box-sizing: border-box;
+            font-size: 0.8rem;
+        }
+    }
+}
+
+@mixin picker-wrapper {
+    width: 100%;
+    margin: auto;
+    padding: 0;
+    margin: 0;
+    position: relative;
+    p.heading {
+        text-align: center;
+        font-weight: bold;
+        font-size: 1.1rem;
+        color: $primaryAccentColor;
+    }
+}
+
+@mixin picker {
+    .picker {
+        padding-bottom: 2.5rem;
+        margin: auto;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        justify-content: space-evenly;
+        align-items: center;
+        min-width: 90%;
+        @include label;
+
+        .buttons {
+            position: absolute;
+            display: flex;
+            justify-content: space-between;
+            width: 13.5rem;
+            input {
+                padding: 0.2rem 0;
+                width: 4rem;
+                background-color: $inputBackgroundColor;
+                border: 1px solid $primaryAccentColor;
+                color: $fgColor;
+                border-radius: 4px;
+                transition: background-color 0.4s, color 0.4s;
+            }
+            input:hover {
+                background-color: $primaryAccentColor;
+                color: $fgColorAlt;
+            }
+            bottom: 0;
+            left: 0;
+            right: 0;
+            margin: auto;
+        }
+    }
+}
diff --git a/src/components/pickers/scss/client-picker.scss b/src/components/pickers/scss/client-picker.scss
new file mode 100644
index 0000000..e1d3b13
--- /dev/null
+++ b/src/components/pickers/scss/client-picker.scss
@@ -0,0 +1,47 @@
+/* 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 "picker";
+
+
+.picker-wrapper {
+    @include picker-wrapper;
+    @include label;
+}
+
+.client-picker {
+    display: flex;
+    justify-content: space-evenly;
+    .options {
+        width: 27rem;
+    }
+    .billing-address,
+    .shipping-address,
+    .contact-info {
+        p { margin: 0 }
+        max-width: 24rem;
+        margin: 0 1rem;
+    }
+    .contact-info {
+        .icon {
+            font-size: 0.9rem;
+        }
+    }
+    .multiline {
+      white-space: pre-line;
+    }
+}
diff --git a/src/components/tables/client-table.js b/src/components/tables/client-table.js
index eb13308..cea612d 100644
--- a/src/components/tables/client-table.js
+++ b/src/components/tables/client-table.js
@@ -70,7 +70,7 @@ const ClientTable = (props) => {
             </div>
 
             <div className={"billing-address"}>
-              <p className={"heading"}><strong>Billing Address: </strong></p>
+              <p><strong>Billing Address: </strong></p>
               <p className={"multiline"}>{i.BillingAddress.Text}</p>
               <p>{i.BillingAddress.City}, {i.BillingAddress.State} - {i.BillingAddress.PostalCode} ({i.BillingAddress.Country})</p>
             </div>
@@ -79,7 +79,7 @@ const ClientTable = (props) => {
               <div className={"shipping-addresses"}>
                 {i.ShippingAddresses.map((j, id) =>
                   <div key={id} className={"shipping-address"}>
-                    <p><strong>{`Shipping Address ${i.ShippingAddresses.length === 1 ? '' : id + 1}`}</strong></p>
+                    <p><strong>{`Shipping Address ${i.ShippingAddresses.length === 1 ? '' : id + 1}:`}</strong></p>
                     <p className={"multiline"}>{j.Text}</p>
                     <p>{j.City}, {j.State} - {j.PostalCode} ({j.Country})</p>
                   </div>