diff options
Diffstat (limited to 'src/components/tables')
-rw-r--r-- | src/components/tables/client-table.js | 99 | ||||
-rw-r--r-- | src/components/tables/scss/_colors.scss | 28 | ||||
-rw-r--r-- | src/components/tables/scss/client-table.scss | 59 | ||||
-rw-r--r-- | src/components/tables/scss/table.scss | 4 |
4 files changed, 150 insertions, 40 deletions
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 <https://www.gnu.org/licenses/>. */ -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 ( - <table> - <thead> - <tr> - <th>S. No</th> - <th>Name</th> - <th>Description</th> - <th>Brand Name</th> - <th>UOM</th> - <th>HSN</th> - <th>Unit Price</th> - <th>GST %</th> - <th>Min Qty</th> - <th>Max Qty</th> - <th></th> - </tr> - </thead> - <tbody> - {props.items && props.items.map((i, id=id+1) => ( - <tr key={id}> - <td>{id+1}</td> - <td className={i.Name === "" ? "empty" : ""}>{i.Name}</td> - <td className={i.Description === "" ? "empty" : ""}>{i.Description}</td> - <td className={i.Brand.Name === "" ? "empty" : ""}>{i.Brand.Name}</td> - <td className={i.UnitOfMeasure === "" ? "empty" : ""}>{i.UnitOfMeasure}</td> - <td className={i.HSN === "" ? "empty" : ""}>{i.HSN}</td> - <td className={i.UnitPrice === 0.0 ? "empty" : ""}>{i.UnitPrice}</td> - <td className={i.GSTPercentage === 0.0 ? "empty" : ""}>{i.GSTPercentage}</td> - <td className={i.MinQuantity === 0.0 ? "empty" : ""}>{i.MinQuantity}</td> - <td className={i.MaxQuantity === 0.0 ? "empty" : ""}>{i.MaxQuantity}</td> - <td className={"buttons"}> - <FontAwesomeIcon icon={faPencil} onClick={() => handleEdit(i)}/> - <FontAwesomeIcon icon={faTrashCan} onClick={() => handleDelete(i)}/> - </td> - </tr> - ))} - </tbody> - </table> + <div className={"client-table"}> + {props.clients && props.clients.map((i, id) => ( + <div key={id} className={"client"}> + <p className={"client-title"}> + <span className={"client-name"}>{i.Name}</span> + <span className={"client-gstin"}> {i.GSTIN}</span> + </p> + + <div className={"paragraph-wrapper"}> + <div className={"contact-details"}> + <p><strong>Contact: </strong>{i.Contact.Name}</p> + <p> + <br/> + Phone Number{i.Contact.Phones.length === 1 ? '' : 's'}: + {i.Contact.Phones.map((j, id) => ` ${j}${id + 1 === i.Contact.Phones.length ? '' : ','}`)} + <br/> + Email Address{i.Contact.Emails.length === 1 ? '' : 'es'}: + {i.Contact.Emails.map((j, id) => ` ${j}${id + 1 === i.Contact.Emails.length ? '' : ','}`)} + <br/> + {i.Contact.Website.length > 0 && <a href={ + `${(i.Contact.Website.startsWith("https://") + || i.Contact.Website.startsWith("http://")) + ? i.Contact.Website : 'https://' + i.Contact.Website}`}>{i.Contact.Website}</a> + } + </p> + + </div> + + <div className={"billing-address"}> + <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> + {i.ShippingAddresses.length > 0 && // if billing address != shipping address + JSON.stringify(i.ShippingAddresses[0]) !== JSON.stringify(i.BillingAddress) && + <div className={"shipping-addresses"}> + {i.ShippingAddresses.map(j => + <div className={"shipping-address"}> + <p><strong>Shipping Address: </strong></p> + <p className={"multiline"}>{j.Text}</p> + <p>{j.City}, {j.State} - {j.PostalCode} ({j.Country})</p> + </div> + )} + </div> + } + </div> + + <div className={"buttons"}> + <FontAwesomeIcon icon={faPencil} onClick={() => handleEdit(i)}/> + <FontAwesomeIcon icon={faTrashCan} onClick={() => handleDelete(i)}/> + </div> + + <hr/> + </div> + ))} + </div> ); } 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 <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/>. + */ + +$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 <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"; + +.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; + } } |