diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/pickers/item-picker.js | 99 | ||||
| -rw-r--r-- | src/components/pickers/scss/client-picker.scss | 2 | ||||
| -rw-r--r-- | src/components/pickers/scss/item-picker.scss | 59 | ||||
| -rw-r--r-- | src/views/homepage.js | 1 |
4 files changed, 161 insertions, 0 deletions
diff --git a/src/components/pickers/item-picker.js b/src/components/pickers/item-picker.js index 8353dbb..46310db 100644 --- a/src/components/pickers/item-picker.js +++ b/src/components/pickers/item-picker.js @@ -15,8 +15,107 @@ * along with this program. If not, see <https://www.gnu.org/licenses/>. */ +import { Item, InvoiceItem, getAllItems } from '../../classes/item'; +import './scss/item-picker.scss'; + +import { useState, useEffect } from 'react'; +//import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +//import { faPhone, faEnvelope, faGlobe } from '@fortawesome/free-solid-svg-icons' + const ItemPicker = () => { + const [items, setItems] = useState([new Item()]); + const [item, setItem] = useState(new InvoiceItem()); + + useEffect(() => refreshItems, []); + + const refreshItems = () => + getAllItems(setItems, () => {}); + + const handleItemSelect = e => { + const i = items.find(i => i.Id === e.target.value); + setItem(prevItem => i ? ({...prevItem, ...i}) : new InvoiceItem()); + } + + const handleInput = e => { + const { name, value } = e.target; + setItem(prevItem => ({ + ...prevItem, + [name]: value + })); + } + return ( + <div className={"picker-wrapper"}> + <p className={"heading"}>Add an Item</p> + <div className={"item-picker"}> + {items && items.length > 0 && + <> + <label> + Product/Service: + <select value={item.Id ? item.Id : ""} onChange={handleItemSelect}> + <option key="placeholder" value={""} disabled>Select an Item</option> + {items.map(i => + <option key={i.Id} value={i.Id}>{i.Name}{i.Brand.Id === null ? "" : " - " + i.Brand.Name}</option> + )} + </select> + </label> + <label> + Description: + <input + type="text" + value={item.Description} + name="Description" + onChange={handleInput} /> + </label> + <label> + Quantity: + <input + type="number" + value={item.Quantity} + name="Quantity" + min={item.MinQuantity} + max={item.MaxQuantity} + onChange={handleInput} /> + </label> + <label> + Price: + <input + type="number" + value={item.UnitPrice} + name="UnitPrice" + onChange={handleInput} /> + </label> + <label> + Discount %: + <input + type="number" + value={item.DiscountPercentage} + name="DiscountPercentage" + onChange={handleInput} /> + </label> + <label> + HSN: + <input + className={"narrow"} + type="text" + value={item.HSN} + name="HSN" + onChange={handleInput} /> + </label> + <label> + GST %: + <input + type="number" + value={item.GSTPercentage} + name="GSTPercentage" + onChange={handleInput} /> + </label> + </> + } + </div> + <hr/> + </div> + ); } export default ItemPicker; diff --git a/src/components/pickers/scss/client-picker.scss b/src/components/pickers/scss/client-picker.scss index e1d3b13..2e59c7b 100644 --- a/src/components/pickers/scss/client-picker.scss +++ b/src/components/pickers/scss/client-picker.scss @@ -28,6 +28,7 @@ justify-content: space-evenly; .options { width: 27rem; + flex-grow: 1; } .billing-address, .shipping-address, @@ -35,6 +36,7 @@ p { margin: 0 } max-width: 24rem; margin: 0 1rem; + flex-grow: 1; } .contact-info { .icon { diff --git a/src/components/pickers/scss/item-picker.scss b/src/components/pickers/scss/item-picker.scss new file mode 100644 index 0000000..b04fb54 --- /dev/null +++ b/src/components/pickers/scss/item-picker.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 "picker"; + +.picker-wrapper { + @include picker-wrapper; + @include label; +} + +.item-picker { + display: flex; + justify-content: space-evenly; + .options { + width: 27rem; + flex-grow: 1; + } + .billing-address, + .shipping-address, + .contact-info { + p { margin: 0 } + max-width: 24rem; + margin: 0 1rem; + flex-grow: 1; + } + .contact-info { + .icon { + font-size: 0.9rem; + } + } + .multiline { + white-space: pre-line; + } + + input[type=number], input.narrow { + -moz-appearance: textfield; + width: 7rem; + } + + input::-webkit-outer-spin-button, + input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; + } +} diff --git a/src/views/homepage.js b/src/views/homepage.js index 7ed89a0..a9cdb50 100644 --- a/src/views/homepage.js +++ b/src/views/homepage.js @@ -22,6 +22,7 @@ const HomePage = () => { <> <h1>Welcome to OpenBills</h1> <p>Check out <Link to="/manage">/manage</Link></p> + <p>"Create" new invoice at <Link to="/invoice/new">Create New Invoice</Link></p> </> ); } |