From cc5dd44de3d65e3c2cf189f1516d97c3641549aa Mon Sep 17 00:00:00 2001 From: Vidhu Kant Sharma Date: Tue, 27 Sep 2022 15:07:34 +0530 Subject: created very basic clients list --- src/classes/client.js | 2 +- src/components/editors/address-editor.js | 1 - src/components/editors/client-editor.js | 2 +- src/components/editors/contact-editor.js | 2 - src/components/tables/client-table.js | 99 +++++++++++++++++----------- src/components/tables/scss/_colors.scss | 28 ++++++++ src/components/tables/scss/client-table.scss | 59 +++++++++++++++++ src/components/tables/scss/table.scss | 4 ++ src/views/manage/clients.js | 4 +- src/views/manage/scss/management-page.scss | 20 +++++- 10 files changed, 172 insertions(+), 49 deletions(-) create mode 100644 src/components/tables/scss/_colors.scss create mode 100644 src/components/tables/scss/client-table.scss (limited to 'src') diff --git a/src/classes/client.js b/src/classes/client.js index cae528e..20e0524 100644 --- a/src/classes/client.js +++ b/src/classes/client.js @@ -61,6 +61,6 @@ export const deleteClient = (id, ok, fail) => { export const getAllClients = (ok, fail) => { axios.get("/client/all") - .then(res => ok(res.Data)) + .then(res => ok(res.data)) .catch(err => fail(err)) } diff --git a/src/components/editors/address-editor.js b/src/components/editors/address-editor.js index 3675f26..bd81b6f 100644 --- a/src/components/editors/address-editor.js +++ b/src/components/editors/address-editor.js @@ -18,7 +18,6 @@ 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'; diff --git a/src/components/editors/client-editor.js b/src/components/editors/client-editor.js index f4535c2..bd018f4 100644 --- a/src/components/editors/client-editor.js +++ b/src/components/editors/client-editor.js @@ -66,7 +66,7 @@ const ClientEditor = (props) => { setGSTIN("") setContact(new Contact()); setBillingAddress(new Address()); - setShippingAddresses([new Address()]); + setShippingAddresses([]); setShipToBillingAddress(true); } diff --git a/src/components/editors/contact-editor.js b/src/components/editors/contact-editor.js index 3c9a1f9..f689b8c 100644 --- a/src/components/editors/contact-editor.js +++ b/src/components/editors/contact-editor.js @@ -18,8 +18,6 @@ import { Contact } from './../../classes/client'; import './scss/contact-editor.scss'; -import { useState, useEffect } from 'react'; - const ContactEditor = (props) => { const handleInput = (field, event) => { const c = new Contact(); diff --git a/src/components/tables/client-table.js b/src/components/tables/client-table.js index fda999d..8249003 100644 --- a/src/components/tables/client-table.js +++ b/src/components/tables/client-table.js @@ -15,8 +15,8 @@ * along with this program. If not, see . */ -import './scss/table.scss'; -import { deleteItem } from './../../classes/item'; +import './scss/client-table.scss'; +import { deleteClient } from './../../classes/client'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faPencil, faTrashCan } from '@fortawesome/free-solid-svg-icons' @@ -27,7 +27,7 @@ const ClientTable = (props) => { const handleDelete = (i) => { // TODO: add confirmation prompt - deleteItem(i.Id, handleDelSuccess, handleDelFail); + deleteClient(i.Id, handleDelSuccess, handleDelFail); } const handleDelSuccess = () => { @@ -39,43 +39,62 @@ const ClientTable = (props) => { } return ( - - - - - - - - - - - - - - - - - - {props.items && props.items.map((i, id=id+1) => ( - - - - - - - - - - - - - - ))} - -
S. NoNameDescriptionBrand NameUOMHSNUnit PriceGST %Min QtyMax Qty
{id+1}{i.Name}{i.Description}{i.Brand.Name}{i.UnitOfMeasure}{i.HSN}{i.UnitPrice}{i.GSTPercentage}{i.MinQuantity}{i.MaxQuantity} - handleEdit(i)}/> - handleDelete(i)}/> -
+
+ {props.clients && props.clients.map((i, id) => ( +
+

+ {i.Name} + {i.GSTIN} +

+ +
+
+

Contact: {i.Contact.Name}

+

+
+ Phone Number{i.Contact.Phones.length === 1 ? '' : 's'}: + {i.Contact.Phones.map((j, id) => ` ${j}${id + 1 === i.Contact.Phones.length ? '' : ','}`)} +
+ Email Address{i.Contact.Emails.length === 1 ? '' : 'es'}: + {i.Contact.Emails.map((j, id) => ` ${j}${id + 1 === i.Contact.Emails.length ? '' : ','}`)} +
+ {i.Contact.Website.length > 0 && {i.Contact.Website} + } +

+ +
+ +
+

Billing Address:

+

{i.BillingAddress.Text}

+

{i.BillingAddress.City}, {i.BillingAddress.State} - {i.BillingAddress.PostalCode} ({i.BillingAddress.Country})

+
+ {i.ShippingAddresses.length > 0 && // if billing address != shipping address + JSON.stringify(i.ShippingAddresses[0]) !== JSON.stringify(i.BillingAddress) && +
+ {i.ShippingAddresses.map(j => +
+

Shipping Address:

+

{j.Text}

+

{j.City}, {j.State} - {j.PostalCode} ({j.Country})

+
+ )} +
+ } +
+ +
+ handleEdit(i)}/> + handleDelete(i)}/> +
+ +
+
+ ))} +
); } diff --git a/src/components/tables/scss/_colors.scss b/src/components/tables/scss/_colors.scss new file mode 100644 index 0000000..39e6c48 --- /dev/null +++ b/src/components/tables/scss/_colors.scss @@ -0,0 +1,28 @@ +/* OpenBills-web - Web based libre billing software + * Copyright (C) 2022 Vidhu Kant Sharma + + * 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 . + */ + +$primaryAccentColor: #bd93f9; +$secondaryAccentColor: #d0afff; + +$linkColor: $primaryAccentColor; + +$fgColor: white; +$fgColorAlt: lightgray; + +$inputBackgroundColor: #00000000; + +$warningColor: #ed4683; diff --git a/src/components/tables/scss/client-table.scss b/src/components/tables/scss/client-table.scss new file mode 100644 index 0000000..d285c47 --- /dev/null +++ b/src/components/tables/scss/client-table.scss @@ -0,0 +1,59 @@ +/* OpenBills-web - Web based libre billing software + * Copyright (C) 2022 Vidhu Kant Sharma + + * 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 . + */ + +@import "colors"; + +.client-table { + display: flex; + flex-direction: column; + align-items: center; + .client { + margin: 1rem auto; + width: 90%; + + a { + color: $linkColor; + text-decoration: none; + } + + .client-name { + font-size: 1.4rem; + font-weight: bold; + } + .client-gstin { + color: $fgColorAlt; + font-size: 1.3rem; + margin-left: 0.3rem; + } + + .paragraph-wrapper { + display: flex; + justify-content: left; + p { + margin: 0.2rem auto; + line-height: 1.4; + } + div { + margin: auto 1rem; + max-width: 22rem; + } + } + } + .multiline { + white-space: pre-line; + } +} diff --git a/src/components/tables/scss/table.scss b/src/components/tables/scss/table.scss index 44d7f57..d9be7c8 100644 --- a/src/components/tables/scss/table.scss +++ b/src/components/tables/scss/table.scss @@ -46,4 +46,8 @@ table { border: none; height: 1.4rem; } + + .multiline { + white-space: pre-line; + } } diff --git a/src/views/manage/clients.js b/src/views/manage/clients.js index 4493902..9d2209b 100644 --- a/src/views/manage/clients.js +++ b/src/views/manage/clients.js @@ -21,7 +21,7 @@ import { useState, useEffect } from 'react'; -import './scss/management-page.scss' +import './scss/management-page.scss'; import { getAllClients } from '../../classes/client'; import ClientEditor from './../../components/editors/client-editor'; import ClientTable from './../../components/tables/client-table'; @@ -40,7 +40,7 @@ const ManageClientsPage = () => { <>
- {false && } + ); } diff --git a/src/views/manage/scss/management-page.scss b/src/views/manage/scss/management-page.scss index 1d907c3..df26819 100644 --- a/src/views/manage/scss/management-page.scss +++ b/src/views/manage/scss/management-page.scss @@ -1,4 +1,20 @@ +/* OpenBills-web - Web based libre billing software + * Copyright (C) 2022 Vidhu Kant Sharma + + * 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 . + */ + hr { - margin: 0.8rem auto 1rem auto; - border-color: pink; + margin: 0.8rem auto 1rem auto; } -- cgit v1.2.3