From b1b874ba771d8dc78d6b17c320ca9993b25d93a1 Mon Sep 17 00:00:00 2001
From: Vidhu Kant Sharma <vidhukant@vidhukant.xyz>
Date: Sun, 16 Oct 2022 19:36:22 +0530
Subject: Items can now strictly have whole number quantities

---
 src/components/editors/item-editor.js        | 10 ++++++++++
 src/components/editors/scss/item-editor.scss | 10 ++++++++++
 src/components/pickers/item-picker.js        | 15 ++++++++-------
 src/components/pickers/scss/item-picker.scss |  6 +++++-
 4 files changed, 33 insertions(+), 8 deletions(-)

(limited to 'src/components')

diff --git a/src/components/editors/item-editor.js b/src/components/editors/item-editor.js
index d72cff3..be0ac4f 100644
--- a/src/components/editors/item-editor.js
+++ b/src/components/editors/item-editor.js
@@ -32,6 +32,7 @@ const ItemEditor = (props) => {
   const [maxQty, setMaxQty] = useState(props.item.MaxQuantity);
   const [brand, setBrand] = useState(props.item.Brand);
   const [savedBrands, setSavedBrands] = useState([]);
+  const [hasDecimalQty, setHasDecimalQty] = useState(props.item.HasDecimalQuantity);
 
   // get saved brands from API
   // needed by the brands dropdown menu
@@ -66,6 +67,7 @@ const ItemEditor = (props) => {
     item.MinQuantity = minQuantity;
     item.MaxQuantity = maxQuantity;
     item.Brand = brand;
+    item.HasDecimalQuantity = hasDecimalQty;
 
     // TODO: Save is for new items. implement modification too
     props.editing
@@ -189,6 +191,14 @@ const ItemEditor = (props) => {
         </label>
         }
 
+        <label className={"checkbox-label"}>
+          <input
+            type="checkbox"
+            checked={hasDecimalQty}
+            onChange={() => setHasDecimalQty(i => !i)} />
+          Quantity may contain decimal places
+        </label>
+
         <span className={"buttons"}>
           <input type="button" value="Clear" onClick={clearAll}/>
           <input type="button" value="Cancel" onClick={handleCancel}/>
diff --git a/src/components/editors/scss/item-editor.scss b/src/components/editors/scss/item-editor.scss
index 8f60ec7..4d4d016 100644
--- a/src/components/editors/scss/item-editor.scss
+++ b/src/components/editors/scss/item-editor.scss
@@ -27,4 +27,14 @@
     input[type=number] {
         -moz-appearance: textfield;
     }
+
+    .checkbox-label {
+        border: none;
+        max-width: none;
+        justify-content: left;
+        input {
+            display: inline;
+            width: 1.4rem;
+        }
+    }
 }
diff --git a/src/components/pickers/item-picker.js b/src/components/pickers/item-picker.js
index 3029fb5..630eb34 100644
--- a/src/components/pickers/item-picker.js
+++ b/src/components/pickers/item-picker.js
@@ -19,8 +19,6 @@ 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 = ({invoiceItems, addInvoiceItem}) => {
   const [items, setItems] = useState([new Item()]);
@@ -113,9 +111,10 @@ const ItemPicker = ({invoiceItems, addInvoiceItem}) => {
                 <input
                   type="number"
                   className={((!isNumeric(item.Quantity) || (item.MaxQuantity > 0 && item.Quantity > item.MaxQuantity) || (item.Quantity < item.MinQuantity))) ? "warning" : ""}
-                  step="0.01"
+                  step={item.HasDecimalQuantity ? "0.01" : "1"}
                   value={item.Quantity}
                   name="Quantity"
+                  min="0"
                   max={item.MaxQuantity > 0 ? item.MaxQuantity : null}
                   onChange={handleInput} />
             </label>
@@ -169,10 +168,12 @@ const ItemPicker = ({invoiceItems, addInvoiceItem}) => {
                   name="GSTPercentage"
                   onChange={handleInput} />
             </label>
-            <input
-              type="submit"
-              value="Add"
-              disabled={!validate()} />
+            <div className={"buttons"}>
+              <input
+                type="submit"
+                value="Add"
+                disabled={!validate()} />
+            </div>
           </> :
           <Link to="/manage/items">
             <input type="button" value="Add Items" />
diff --git a/src/components/pickers/scss/item-picker.scss b/src/components/pickers/scss/item-picker.scss
index 63ddbcf..394782e 100644
--- a/src/components/pickers/scss/item-picker.scss
+++ b/src/components/pickers/scss/item-picker.scss
@@ -56,6 +56,10 @@
         input { width: 7rem; }
     }
 
+    input {
+        transition: border 0.2s;
+    }
+
     input[type=number] {
         -moz-appearance: textfield;
         width: 7rem;
@@ -76,7 +80,7 @@
         border: 1px solid $primaryAccentColor;
         color: $fgColor;
         border-radius: 4px;
-        transition: background-color 0.4s, color 0.4s;
+        transition: background-color 0.4s, color 0.4s, border 0.4s;
     }
 
     input[type=button]:hover, input[type=submit]:hover {
-- 
cgit v1.2.3