added reset buttons to the form

5 files changed, 189 insertions, 29 deletions

diff --git a/package-lock.json b/package-lock.json
index 734a6e4..f2a280f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,9 @@
     "": {
       "version": "0.1.0",
       "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^1.2.35",
+        "@fortawesome/free-solid-svg-icons": "^5.15.3",
+        "@fortawesome/react-fontawesome": "^0.1.14",
         "@testing-library/jest-dom": "^5.11.10",
         "@testing-library/react": "^11.2.5",
         "@testing-library/user-event": "^12.8.3",
@@ -1930,6 +1933,51 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "0.2.35",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
+      "integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.35",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz",
+      "integrity": "sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "^0.2.35"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.3",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz",
+      "integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "^0.2.35"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz",
+      "integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "^1.2.32",
+        "react": ">=16.x"
+      }
+    },
     "node_modules/@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -23426,6 +23474,35 @@
         }
       }
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.35",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
+      "integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.35",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz",
+      "integrity": "sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.35"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.3",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz",
+      "integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.35"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.1.14",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz",
+      "integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==",
+      "requires": {
+        "prop-types": "^15.7.2"
+      }
+    },
     "@hapi/address": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
diff --git a/package.json b/package.json
index ebaf798..f19c429 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,9 @@
   "private": true,
   "proxy": "http://localhost:8080",
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@fortawesome/react-fontawesome": "^0.1.14",
     "@testing-library/jest-dom": "^5.11.10",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.8.3",
diff --git a/src/components/Form/Document/DocumentInfoForm.tsx b/src/components/Form/Document/DocumentInfoForm.tsx
index 6193233..18d0be5 100644
--- a/src/components/Form/Document/DocumentInfoForm.tsx
+++ b/src/components/Form/Document/DocumentInfoForm.tsx
@@ -8,10 +8,13 @@
 
 import React, { useState } from "react";
 import { Person } from "./../../../interfaces";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSync } from '@fortawesome/free-solid-svg-icons'
 import "./../Form.scss";
 
 import SelectClientForm from "./../People/SelectClientForm";
 
+
 interface Props {
   savedPeople: Person[]
   invoiceNumber: number
@@ -29,9 +32,19 @@ const DocumentInfoForm: React.FC<Props> = (props) => {
       <div className={"documentInfoChild"}>
         <label>
           Invoice Number:
-            <input className={"smallInputBox"} type="number" step="0.0" value={invoiceNumber} onInput={
-              (event: React.FormEvent<HTMLInputElement>) => setInvoiceNumber(parseInt(event.currentTarget.value))
-            } required />
+            <span className={"buttonInput"}>
+              {invoiceNumber === props.invoiceNumber ||
+                <FontAwesomeIcon icon={faSync} className={"icon"} onClick={
+                    (event) => {
+                      event.preventDefault(); // don't select the input box
+                      setInvoiceNumber(props.invoiceNumber);
+                    }
+                }/>
+              }
+              <input className={"smallInputBox"} type="number" step="0.0" value={invoiceNumber} 
+                onInput={(event: React.FormEvent<HTMLInputElement>) => setInvoiceNumber(parseInt(event.currentTarget.value))} 
+              required />
+            </span>
         </label>
 
         <label>
diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss
index a850309..91ba8b1 100644
--- a/src/components/Form/Form.scss
+++ b/src/components/Form/Form.scss
@@ -50,6 +50,17 @@ input[type=number] {
 
 input {
   box-sizing: border-box;
+  height: $fontSize2 + 0.25;
+}
+
+.buttonInput .icon {
+  margin-right: 0.5rem;
+  font-size: $fontSize1 + 0.5;
+  margin-bottom: -0.25rem;
+}
+
+.icon:hover {
+  color: $altFG;
 }
 
 .wideInputBox, .selectInputBox {
diff --git a/src/components/Form/Items/AddNewItemForm.tsx b/src/components/Form/Items/AddNewItemForm.tsx
index 3d4e65f..7060f51 100644
--- a/src/components/Form/Items/AddNewItemForm.tsx
+++ b/src/components/Form/Items/AddNewItemForm.tsx
@@ -7,10 +7,12 @@
 */
 
 import React, { useState } from "react";
-import "./../Form.scss";
 import { Item } from "../../../interfaces";
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSync } from '@fortawesome/free-solid-svg-icons'
+import "./../Form.scss";
 
-interface props {
+interface Props {
   savedItems: Item[]
   addItem: (item: Item) => void
   defGSTValue: number
@@ -18,15 +20,23 @@ interface props {
   registerPersonFormVisibility: any
 }
 
-const AddNewItemForm: React.FC<props> = (props) => {
+const AddNewItemForm: React.FC<Props> = (props) => {
   const [itemNameValue, setItemNameValue] = useState<string>("");
   const [itemDescValue, setItemDescValue] = useState<string>("");
   const [itemPriceValue, setItemPriceValue] = useState<number>(0.00);
   const [itemDiscountPercentage, setItemDiscountPercentage] = useState<number>(0.00);
-  const [itemGSTPercentage, setItemGSTValue] = useState<number>(props.defGSTValue);
+  const [itemGSTPercentage, setItemGSTPercentage] = useState<number>(props.defGSTValue);
   const [itemQTYValue, setItemQTYValue] = useState<number>(1);
   const [itemHSNValue, setItemHSNValue] = useState<string>("");
 
+  // store the current item to easily reset a value to the default one
+  const [currentItem, setCurrentItem] = useState<Item|any>({
+    Description: "",
+    UnitPrice: 0.00,
+    GSTPercentage: props.defGSTValue,
+    HSN: ""
+  });
+
   // to be handled by DocumentInfo
   // check if client is in same state
   // and apply cgst+sgst or igst accordingly
@@ -41,8 +51,10 @@ const AddNewItemForm: React.FC<props> = (props) => {
     setItemDescValue(i.Description);
     setItemPriceValue(i.UnitPrice);
     setItemHSNValue(i.HSN);
-    setItemGSTValue(i.TotalGST);
+    setItemGSTPercentage(i.TotalGST);
+    setCurrentItem(i)
   }
+  console.log(currentItem)
 
   // check the item name value and do stuff accordingly
   const setItemInfo = (itemName: string) =>
@@ -58,7 +70,7 @@ const AddNewItemForm: React.FC<props> = (props) => {
     setItemPriceValue(1);
     setItemDiscountPercentage(0);
     setItemHSNValue("");
-    setItemGSTValue(props.defGSTValue);
+    setItemGSTPercentage(props.defGSTValue);
   }
 
   return (
@@ -70,8 +82,12 @@ const AddNewItemForm: React.FC<props> = (props) => {
           const totalValue: number = itemPriceValue * itemQTYValue;
 
           // the values below are being rounded to two decimal places
-          const discountValue: number = parseFloat(((itemDiscountPercentage / 100) * totalValue).toFixed(2))
-          const totalGSTValue: number = parseFloat(((itemGSTPercentage / 100) * totalValue).toFixed(2))
+          // i see no reason doing this anymore
+          // const discountvalue: number = parsefloat(((itemdiscountpercentage / 100) * totalvalue).tofixed(2))
+          // const totalgstvalue: number = parsefloat(((itemgstpercentage / 100) * totalvalue).tofixed(2))
+
+          const discountValue: number = (itemDiscountPercentage / 100) * totalValue;
+          const totalGSTValue: number = (itemGSTPercentage / 100) * totalValue;
 
           const newInvoiceItem: Item = {
             Model:         itemNameValue,
@@ -117,9 +133,19 @@ const AddNewItemForm: React.FC<props> = (props) => {
 
           <label>
             Description:
-              <input className={"wideInputBox"} type="text" value={itemDescValue} 
-                onChange={(event) => setItemDescValue(event.target.value)} 
-              />
+              <span className={"buttonInput"}>
+                {itemDescValue === currentItem.Description ||
+                  <FontAwesomeIcon icon={faSync} className={"icon"} onClick={
+                      (event) => {
+                        event.preventDefault(); // don't select the input box
+                        setItemDescValue(currentItem.Description);
+                      }
+                  }/>
+                }
+                <input className={"wideInputBox"} type="text" value={itemDescValue} 
+                  onChange={(event) => setItemDescValue(event.target.value)} 
+                />
+              </span>
           </label>
         </div>
 
@@ -136,12 +162,22 @@ const AddNewItemForm: React.FC<props> = (props) => {
 
           <label>
             Price: 
-              <input className={"smallInputBox"} type="number" min="1.00" step="0.001" value={itemPriceValue} 
-                onInput={
-                  (event: React.FormEvent<HTMLInputElement>) => 
-                    setItemPriceValue(parseFloat(event.currentTarget.value))
-                } 
-              required />
+              <span className={"buttonInput"}>
+                {itemPriceValue === currentItem.UnitPrice ||
+                  <FontAwesomeIcon icon={faSync} className={"icon"} onClick={
+                      (event) => {
+                        event.preventDefault(); // don't select the input box
+                        setItemPriceValue(currentItem.UnitPrice);
+                      }
+                  }/>
+                }
+                <input className={"smallInputBox"} type="number" min="1.00" step="0.001" value={itemPriceValue} 
+                  onInput={
+                    (event: React.FormEvent<HTMLInputElement>) => 
+                      setItemPriceValue(parseFloat(event.currentTarget.value))
+                  } 
+                required />
+              </span>
           </label>
 
           <label>
@@ -156,19 +192,39 @@ const AddNewItemForm: React.FC<props> = (props) => {
 
           <label>
             HSN: 
-              <input className={"smallInputBox"} type="number" min="0" value={itemHSNValue} 
-                onChange={(event) => setItemHSNValue(event.target.value)} 
-              required />
+              <span className={"buttonInput"}>
+                {itemHSNValue === currentItem.HSN ||
+                  <FontAwesomeIcon icon={faSync} className={"icon"} onClick={
+                      (event) => {
+                        event.preventDefault(); // don't select the input box
+                        setItemHSNValue(currentItem.HSN);
+                      }
+                  }/>
+                }
+                <input className={"smallInputBox"} type="number" min="0" value={itemHSNValue} 
+                  onChange={(event) => setItemHSNValue(event.target.value)} 
+                required />
+              </span>
           </label>
 
           <label>
             GST: 
-              <input className={"smallInputBox"} type="number" min="0" value={itemGSTPercentage} 
-                onInput={
-                  (event: React.FormEvent<HTMLInputElement>) => 
-                    setItemGSTValue(parseInt(event.currentTarget.value))
-                } 
-              required />
+              <span className={"buttonInput"}>
+                {itemGSTPercentage === currentItem.TotalGST ||
+                  <FontAwesomeIcon icon={faSync} className={"icon"} onClick={
+                      (event) => {
+                        event.preventDefault(); // don't select the input box
+                        setItemGSTPercentage(currentItem.TotalGST);
+                      }
+                  }/>
+                }
+                <input className={"smallInputBox"} type="number" min="0" value={itemGSTPercentage} 
+                  onInput={
+                    (event: React.FormEvent<HTMLInputElement>) => 
+                      setItemGSTPercentage(parseInt(event.currentTarget.value))
+                  } 
+                required />
+              </span>
           </label>
         </div>