diff options
| -rw-r--r-- | src/classes/invoice.js | 37 | ||||
| -rw-r--r-- | src/components/editors/invoice-headers-editor.js | 76 | ||||
| -rw-r--r-- | src/components/editors/scss/invoice-headers.scss | 59 | ||||
| -rw-r--r-- | src/views/invoice/new.js | 12 |
4 files changed, 172 insertions, 12 deletions
diff --git a/src/classes/invoice.js b/src/classes/invoice.js new file mode 100644 index 0000000..1032b47 --- /dev/null +++ b/src/classes/invoice.js @@ -0,0 +1,37 @@ +/* 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 axios from "axios"; + +export class Transporter { + constructor() { + this.Id = null; + this.Name = ""; + this.GSTIN = ""; + this.TransporterId = ""; + } +} + +export class Transport { + constructor() { + this.Id = null; + this.Transporter = new Transporter(); + this.VehicleNum = ""; + this.Note = ""; + this.TransportMethod = ""; + } +} diff --git a/src/components/editors/invoice-headers-editor.js b/src/components/editors/invoice-headers-editor.js index f71b319..4ab2dcc 100644 --- a/src/components/editors/invoice-headers-editor.js +++ b/src/components/editors/invoice-headers-editor.js @@ -15,25 +15,87 @@ * along with this program. If not, see <https://www.gnu.org/licenses/>. */ -import './scss/item-editor.scss'; +import './scss/invoice-headers.scss'; import { useState, useEffect } from 'react'; -const InvoiceHeadersEditor = ({roundOff, setRoundOff}) => { +const InvoiceHeadersEditor = ({roundOff, setRoundOff, transport, setTransport, transporter, setTransporter}) => { + const handleTransportInput = e => { + const { name, value } = e.target; + setTransport(prev => ({ + ...prev, + [name]: value + })); + } + + const handleTransporterInput = e => { + const { name, value } = e.target; + setTransporter(prev => ({ + ...prev, + [name]: value + })); + } return ( - <> + <div className={"invoice-headers-editor"}> <h1>Invoice Options:</h1> - <form onSubmit={(e) => e.preventDefault()}> - <label> + <div> + <label className={"checkbox-label"}> <input type="checkbox" onChange={() => setRoundOff(prev => !prev)} checked={roundOff}/> Round off the Total </label> - </form> - </> + + <label> + Apply Discount On All Items: + <input + className={"small"} + type="number" + min="0" + max="100" + step="0.1" /> + </label> + + <p><strong>Transport Details</strong></p> + + <label> + Vehicle Number: + <input + type="text"/> + </label> + + <label> + Transport Method: + <input + type="text"/> + </label> + + <label> + Transporter Name: + <input + type="text"/> + </label> + + <label> + Transporter GSTIN: + <input + type="text"/> + </label> + + <label> + Transporter ID: + <input + type="text"/> + </label> + + <label> + Note: + <textarea /> + </label> + </div> + </div> ) } diff --git a/src/components/editors/scss/invoice-headers.scss b/src/components/editors/scss/invoice-headers.scss new file mode 100644 index 0000000..ade428b --- /dev/null +++ b/src/components/editors/scss/invoice-headers.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 "editor"; +@import "colors"; + +.invoice-headers-editor { + .checkbox-label { + border: none; + max-width: none; + justify-content: left; + input { + display: inline; + width: 1.4rem; + } + } + @include label; + label { + width: 20rem; + max-width: auto; + min-width: auto; + border: none; + input { + width: 8rem; + } + input.small { + width: 3rem; + } + } + + // hide up/down arrows from number input + input::-webkit-outer-spin-button, + input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; + } + input[type=number] { + -moz-appearance: textfield; + } + + strong { + color: $primaryAccentColor; + font-size: 1.2rem; + } +} diff --git a/src/views/invoice/new.js b/src/views/invoice/new.js index cacf8d3..717a772 100644 --- a/src/views/invoice/new.js +++ b/src/views/invoice/new.js @@ -24,6 +24,7 @@ import InvoiceSummary from '../../components/tables/invoice-summary'; import HeadersEditor from '../../components/editors/invoice-headers-editor'; import { InvoiceClient } from '../../classes/client'; +import { Transport, Transporter } from '../../classes/invoice'; import { calcSum, currency } from '../../classes/item'; import { useState, useEffect } from 'react'; @@ -43,6 +44,9 @@ const NewInvoicePage = () => { Quantity: currency(0) }); + const [transporter, setTransporter] = useState(new Transporter()); + const [transport, setTransport] = useState(new Transport()); + useEffect(() => setShippingAddressId(-1), [client]); useEffect(() => setSum(calcSum(items)), [items]); @@ -63,11 +67,9 @@ const NewInvoicePage = () => { isInterstate={isInterstate} sum={sum} /> <div className={"two-col"}> - <div> - <HeadersEditor - roundOff={roundOffTotal} - setRoundOff={setRoundOffTotal} /> - </div> + <HeadersEditor + roundOff={roundOffTotal} + setRoundOff={setRoundOffTotal} /> <div> <InvoiceSummary sum={sum} |