diff options
Diffstat (limited to 'src/components/pickers')
| -rw-r--r-- | src/components/pickers/item-picker.js | 56 | ||||
| -rw-r--r-- | src/components/pickers/scss/_picker.scss | 38 | ||||
| -rw-r--r-- | src/components/pickers/scss/item-picker.scss | 35 |
3 files changed, 66 insertions, 63 deletions
diff --git a/src/components/pickers/item-picker.js b/src/components/pickers/item-picker.js index 46310db..339319f 100644 --- a/src/components/pickers/item-picker.js +++ b/src/components/pickers/item-picker.js @@ -10,8 +10,7 @@ * 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 +* You should have received a copy of the GNU General Public License * along with this program. If not, see <https://www.gnu.org/licenses/>. */ @@ -19,10 +18,11 @@ import { Item, InvoiceItem, getAllItems } from '../../classes/item'; import './scss/item-picker.scss'; import { useState, useEffect } from 'react'; +import { Link } from 'react-router-dom'; //import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' //import { faPhone, faEnvelope, faGlobe } from '@fortawesome/free-solid-svg-icons' -const ItemPicker = () => { +const ItemPicker = ({invoiceItems, addInvoiceItem}) => { const [items, setItems] = useState([new Item()]); const [item, setItem] = useState(new InvoiceItem()); @@ -44,30 +44,33 @@ const ItemPicker = () => { })); } + // add item to the invoice items list + const addItem = (e) => { + e.preventDefault(); + addInvoiceItem(item); + setItem(new InvoiceItem()); + } + + // input elements are sorted on the basis of + // how likely they are going to be edited return ( <div className={"picker-wrapper"}> <p className={"heading"}>Add an Item</p> - <div className={"item-picker"}> - {items && items.length > 0 && + <form className={"item-picker"} onSubmit={addItem}> + {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> + <option key={i.Id} value={i.Id} disabled={invoiceItems.some(j => j.Id === 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> + <label className={"narrow"}> Quantity: <input type="number" @@ -77,7 +80,7 @@ const ItemPicker = () => { max={item.MaxQuantity} onChange={handleInput} /> </label> - <label> + <label className={"narrow"}> Price: <input type="number" @@ -85,7 +88,7 @@ const ItemPicker = () => { name="UnitPrice" onChange={handleInput} /> </label> - <label> + <label className={"narrow"}> Discount %: <input type="number" @@ -94,15 +97,22 @@ const ItemPicker = () => { onChange={handleInput} /> </label> <label> + Description: + <input + type="text" + value={item.Description} + name="Description" + onChange={handleInput} /> + </label> + <label className={"narrow"}> HSN: <input - className={"narrow"} type="text" value={item.HSN} name="HSN" onChange={handleInput} /> </label> - <label> + <label className={"narrow"}> GST %: <input type="number" @@ -110,9 +120,13 @@ const ItemPicker = () => { name="GSTPercentage" onChange={handleInput} /> </label> - </> + <input type="submit" value="Add"/> + </> : + <Link to="/manage/items"> + <input type="button" value="Add Items"/> + </Link> } - </div> + </form> <hr/> </div> ); diff --git a/src/components/pickers/scss/_picker.scss b/src/components/pickers/scss/_picker.scss index 625a1e3..4d8d1b1 100644 --- a/src/components/pickers/scss/_picker.scss +++ b/src/components/pickers/scss/_picker.scss @@ -65,41 +65,3 @@ 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/item-picker.scss b/src/components/pickers/scss/item-picker.scss index b04fb54..093b0e9 100644 --- a/src/components/pickers/scss/item-picker.scss +++ b/src/components/pickers/scss/item-picker.scss @@ -23,8 +23,13 @@ } .item-picker { - display: flex; - justify-content: space-evenly; + //display: flex; + //flex-wrap: wrap; + //justify-content: space-between; + //align-items: center; + display: grid; + grid-template-columns: auto auto auto auto; + .options { width: 27rem; flex-grow: 1; @@ -46,14 +51,36 @@ white-space: pre-line; } - input[type=number], input.narrow { + label.narrow { + max-width: 16rem; + input { width: 7rem; } + } + + input[type=number] { -moz-appearance: textfield; width: 7rem; } - input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } + + input[type=button], input[type=submit] { + padding: 0.2rem 0; + width: 4rem; + height: 1.7rem; + margin-top: 0.3rem; + margin-left: auto; + background-color: $inputBackgroundColor; + border: 1px solid $primaryAccentColor; + color: $fgColor; + border-radius: 4px; + transition: background-color 0.4s, color 0.4s; + } + + input[type=button]:hover, input[type=submit]:hover { + background-color: $primaryAccentColor; + color: $fgColorAlt; + } } |