aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
authorVidhu Kant Sharma <vidhukant@vidhukant.xyz>2022-10-05 22:16:53 +0530
committerVidhu Kant Sharma <vidhukant@vidhukant.xyz>2022-10-05 22:16:53 +0530
commita1534066073f3197623565d597e5126a5c01bff9 (patch)
tree01eef2bee4a4b9f01ac60b36949aa7624dbfd54c /src/components
parent94b86f4c333f1991c2d09c8ce02beaedf5abc721 (diff)
added client picker
Diffstat (limited to 'src/components')
-rw-r--r--src/components/pickers/client-picker.js145
-rw-r--r--src/components/pickers/item-picker.js22
-rw-r--r--src/components/pickers/scss/_colors.scss28
-rw-r--r--src/components/pickers/scss/_picker.scss105
-rw-r--r--src/components/pickers/scss/client-picker.scss47
-rw-r--r--src/components/tables/client-table.js4
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>