added an invoice summary component

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;
+    }
 }