diff options
Diffstat (limited to 'src/components/pickers')
-rw-r--r-- | src/components/pickers/client-picker.js | 2 | ||||
-rw-r--r-- | src/components/pickers/item-picker.js | 49 | ||||
-rw-r--r-- | src/components/pickers/scss/item-picker.scss | 9 |
3 files changed, 54 insertions, 6 deletions
diff --git a/src/components/pickers/client-picker.js b/src/components/pickers/client-picker.js index bca8566..ef346a3 100644 --- a/src/components/pickers/client-picker.js +++ b/src/components/pickers/client-picker.js @@ -15,7 +15,7 @@ * along with this program. If not, see <https://www.gnu.org/licenses/>. */ -import { Client, InvoiceClient, getAllClients, Address } from '../../classes/client'; +import { Client, InvoiceClient, getAllClients } from '../../classes/client'; import './scss/client-picker.scss'; import { useState, useEffect } from 'react'; diff --git a/src/components/pickers/item-picker.js b/src/components/pickers/item-picker.js index d756427..c486660 100644 --- a/src/components/pickers/item-picker.js +++ b/src/components/pickers/item-picker.js @@ -28,6 +28,13 @@ const ItemPicker = ({invoiceItems, addInvoiceItem}) => { useEffect(() => refreshItems, []); + // when an item is selected, set its quantity to item.MinQuantity + useEffect(() => { + if (item.Id != null) { + setItem(prevItem => ({...prevItem, Quantity: prevItem.MinQuantity})) + } + }, [item.Id]) + const refreshItems = () => getAllItems(setItems, () => {}); @@ -38,17 +45,42 @@ const ItemPicker = ({invoiceItems, addInvoiceItem}) => { const handleInput = e => { const { name, value, type } = e.target; + const val = type === "number" ? parseFloat(value) : value setItem(prevItem => ({ ...prevItem, - [name]: type === "number" ? parseFloat(value) : value + [name]: type === "number" ? (isNaN(val) ? prevItem[name] : val) : val })); } + const validate = () => { + if (item.Id === null) { + return false; + } + if (!item.UnitPrice > 0) { + return false; + } + if (!item.Quantity > 0) { + return false; + } + if (item.Quantity < item.MinQuantity) { + return false; + } + if (item.MaxQuantity > 0 && item.Quantity > item.MaxQuantity) { + return false; + } + if (item.DiscountPercentage > 100 || item.GSTPercentage > 100) { + return false; + } + return true; + } + // add item to the invoice items list const addItem = (e) => { e.preventDefault(); - addInvoiceItem(item); - setItem(new InvoiceItem()); + if (validate()) { + addInvoiceItem(item); + setItem(new InvoiceItem()); + } } // input elements are sorted on the basis of @@ -74,6 +106,7 @@ const ItemPicker = ({invoiceItems, addInvoiceItem}) => { Quantity: <input type="number" + step="0.01" value={item.Quantity} name="Quantity" min={item.MinQuantity > 0 ? item.MinQuantity : 1} @@ -84,6 +117,7 @@ const ItemPicker = ({invoiceItems, addInvoiceItem}) => { Price: <input type="number" + step="0.01" value={item.UnitPrice} name="UnitPrice" onChange={handleInput} /> @@ -92,6 +126,7 @@ const ItemPicker = ({invoiceItems, addInvoiceItem}) => { Discount %: <input type="number" + step="0.01" value={item.DiscountPercentage} name="DiscountPercentage" onChange={handleInput} /> @@ -116,14 +151,18 @@ const ItemPicker = ({invoiceItems, addInvoiceItem}) => { GST %: <input type="number" + step="0.01" value={item.GSTPercentage} name="GSTPercentage" onChange={handleInput} /> </label> - <input type="submit" value="Add"/> + <input + type="submit" + value="Add" + disabled={!validate()} /> </> : <Link to="/manage/items"> - <input type="button" value="Add Items"/> + <input type="button" value="Add Items" /> </Link> } </form> diff --git a/src/components/pickers/scss/item-picker.scss b/src/components/pickers/scss/item-picker.scss index 093b0e9..b3e797a 100644 --- a/src/components/pickers/scss/item-picker.scss +++ b/src/components/pickers/scss/item-picker.scss @@ -83,4 +83,13 @@ background-color: $primaryAccentColor; color: $fgColorAlt; } + + input[type=submit]:disabled { + color: $disabledColor; + border-color: $warningColor; + } + input[type=submit]:disabled:hover { + color: $fgColorAlt; + background-color: $warningColor; + } } |