From 5d2222d9fa782b94ba6787e5c6b23aab1e468308 Mon Sep 17 00:00:00 2001
From: MikunoNaka <bokuwakanojogahoshii@yahoo.com>
Date: Thu, 24 Jun 2021 20:00:10 +0530
Subject: Multiple minor bug fixes and convert more compnents to TS

---
 src/components/Form/Document/MetaInfoForm.tsx  |  17 ----
 src/components/Form/Items/AddNewItemForm.tsx   |  63 +++++-------
 src/components/Form/Items/RegisterItemForm.js  | 135 -------------------------
 src/components/Form/Items/RegisterItemForm.tsx | 125 +++++++++++++++++++++++
 src/interfaces.ts                              |  30 +++---
 5 files changed, 164 insertions(+), 206 deletions(-)
 delete mode 100644 src/components/Form/Items/RegisterItemForm.js
 create mode 100644 src/components/Form/Items/RegisterItemForm.tsx

(limited to 'src')

diff --git a/src/components/Form/Document/MetaInfoForm.tsx b/src/components/Form/Document/MetaInfoForm.tsx
index da484ab..bcddad6 100644
--- a/src/components/Form/Document/MetaInfoForm.tsx
+++ b/src/components/Form/Document/MetaInfoForm.tsx
@@ -9,24 +9,7 @@
 import React from "react";
 import "./../Form.scss";
 
-interface Transport {
-  name:       string,
-  vehicleNum: string, 
-  method:     string, // shipment method
-  gstin:      string,
-  builty:     string // goods receipt
-}
-
 const MetaInfoForm: React.FC = () => {
-  // don't push it to github!
-  const sampleTransport: Transport = {
-    name: "Own Vehicle",
-    vehicleNum: "HR61C9220",
-    method: "By Road",
-    gstin: "",
-    builty: ""
-  }
-  console.log(sampleTransport);
   return (
     <div className={"MetaInfoForm"}>
       <form>
diff --git a/src/components/Form/Items/AddNewItemForm.tsx b/src/components/Form/Items/AddNewItemForm.tsx
index 283d779..ae64b06 100644
--- a/src/components/Form/Items/AddNewItemForm.tsx
+++ b/src/components/Form/Items/AddNewItemForm.tsx
@@ -13,13 +13,12 @@ import { Item } from "../../../interfaces";
 interface props {
   savedItems: Item[]
   addItem: (item: Item) => void
-  defGSTValue: number,
-  registerItemFormVisibility: any,
+  defGSTValue: number
+  registerItemFormVisibility: any
   registerPersonFormVisibility: any
 }
 
 const AddNewItemForm: React.FC<props> = (props) => {
-  console.log(props)
   const [itemNameValue, setItemNameValue] = useState<string>("");
   const [itemDescValue, setItemDescValue] = useState<string>("");
   const [itemPriceValue, setItemPriceValue] = useState<number>(0.00);
@@ -35,18 +34,19 @@ const AddNewItemForm: React.FC<props> = (props) => {
 
   const enterItemNamePrompt: string = "start typing here";
   const registerItemPrompt: string = "add new";
-  const emptyItemNames: any[] = [enterItemNamePrompt, registerItemPrompt, ""];
+  const emptyItemNames: string[] = [enterItemNamePrompt, registerItemPrompt, ""];
 
   // set description and price if match found in DB
   const applyItemInfo = (i: any) => {
+    console.log(i)
     setItemDescValue(i.Description);
-    setItemPriceValue(i.Price);
+    setItemPriceValue(i.UnitPrice);
     setItemHSNValue(i.HSN);
-    setItemGSTValue(i.GST);
+    setItemGSTValue(i.TotalGST);
   }
 
   // check the item name value and do stuff accordingly
-  const setItemInfo = (itemName: any) =>
+  const setItemInfo = (itemName: string) =>
     (props.savedItems === null || itemName === registerItemPrompt)
       ? props.registerItemFormVisibility(true)
       : props.savedItems.some((i) => 
@@ -77,12 +77,13 @@ const AddNewItemForm: React.FC<props> = (props) => {
             TotalValue: (itemPriceValue * itemQTYValue),
             Discount: itemDiscountValue,
             HSN: itemHSNValue,
+            TotalGST: itemGSTValue,
 
             // this also checks if igst applies or not
             // TODO: fix this
-            sgst: 0,
-            cgst: 0,
-            igst: 0
+            SGST: 0,
+            CGST: 0,
+            IGST: 0
             // sgst: inState ? parseInt(itemGSTValue) / 2 : "",
             // cgst: inState ? parseInt(itemGSTValue) / 2 : "",
             // igst: inState ? "" :  parseInt(itemGSTValue)
@@ -115,11 +116,7 @@ const AddNewItemForm: React.FC<props> = (props) => {
           <label>
             Description:
               <input className={"wideInputBox"} type="text" value={itemDescValue} 
-                onChange={
-                  (event) => {
-                    setItemDescValue(event.target.value);
-                  }
-                } 
+                onChange={(event) => setItemDescValue(event.target.value)} 
               />
           </label>
         </div>
@@ -129,10 +126,8 @@ const AddNewItemForm: React.FC<props> = (props) => {
             Quantity: 
               <input className={"smallInputBox"} type="number" min="1" value={itemQTYValue} 
                 onInput={
-                  (event: React.FormEvent<HTMLInputElement>) => {
-                    const value: number = parseInt(event.currentTarget.value);
-                    setItemQTYValue(value);
-                  }
+                  (event: React.FormEvent<HTMLInputElement>) => 
+                    setItemQTYValue(parseInt(event.currentTarget.value))
                 } 
               required />
           </label>
@@ -141,10 +136,8 @@ const AddNewItemForm: React.FC<props> = (props) => {
             Price: 
               <input className={"smallInputBox"} type="number" min="1.00" step="0.001" value={itemPriceValue} 
                 onInput={
-                  (event: React.FormEvent<HTMLInputElement>) => {
-                    const value: number = parseFloat(event.currentTarget.value);
-                    setItemPriceValue(value);
-                  }
+                  (event: React.FormEvent<HTMLInputElement>) => 
+                    setItemPriceValue(parseFloat(event.currentTarget.value))
                 } 
               required />
           </label>
@@ -153,10 +146,8 @@ const AddNewItemForm: React.FC<props> = (props) => {
             Discount: 
               <input className={"smallInputBox"} type="number" min="0" step="0.001" value={itemDiscountValue} 
                 onInput={
-                  (event: React.FormEvent<HTMLInputElement>) => {
-                    const value: number = parseInt(event.currentTarget.value);
-                    setItemDiscountValue(value);
-                  }
+                  (event: React.FormEvent<HTMLInputElement>) => 
+                    setItemDiscountValue(parseInt(event.currentTarget.value))
                 } 
               />
           </label>
@@ -165,10 +156,8 @@ const AddNewItemForm: React.FC<props> = (props) => {
             HSN: 
               <input className={"smallInputBox"} type="number" min="0" value={itemHSNValue} 
                 onInput={
-                  (event: React.FormEvent<HTMLInputElement>) => {
-                    const value: number = parseInt(event.currentTarget.value);
-                    setItemHSNValue(value);
-                  }
+                  (event: React.FormEvent<HTMLInputElement>) => 
+                    setItemHSNValue(parseInt(event.currentTarget.value))
                 } 
               required />
           </label>
@@ -177,10 +166,8 @@ const AddNewItemForm: React.FC<props> = (props) => {
             GST: 
               <input className={"smallInputBox"} type="number" min="0" value={itemGSTValue} 
                 onInput={
-                  (event: React.FormEvent<HTMLInputElement>) => {
-                    const value: number = parseInt(event.currentTarget.value);
-                    setItemGSTValue(value);
-                  }
+                  (event: React.FormEvent<HTMLInputElement>) => 
+                    setItemGSTValue(parseInt(event.currentTarget.value))
                 } 
               required />
           </label>
@@ -197,10 +184,6 @@ const AddNewItemForm: React.FC<props> = (props) => {
             onClick={() => props.registerItemFormVisibility(true)}
           />
 
-          <input type="button" value="Placeholder1" />
-          <input type="button" value="Placeholder2" />
-          <input type="submit" value="Force Add" />
-
           <input type="submit" value="add" 
             disabled={ 
               (emptyItemNames.includes(itemNameValue)
@@ -213,7 +196,7 @@ const AddNewItemForm: React.FC<props> = (props) => {
         </div>
       </form>
     </div>
-  )
+  );
 }
 
 export default AddNewItemForm;
diff --git a/src/components/Form/Items/RegisterItemForm.js b/src/components/Form/Items/RegisterItemForm.js
deleted file mode 100644
index 6ad4c1f..0000000
--- a/src/components/Form/Items/RegisterItemForm.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/*
- * OpenBills - Self hosted browser app to generate and keep track of simple invoices
- * Version - 0
- * Licensed under the MIT license - https://opensource.org/licenses/MIT
- *
- * Copyright (c) 2021 Vidhu Kant Sharma
-*/
-
-// TODO: Code isn't tested properly
-// I'd be surprised if it < 10 bugs
-
-// TODO: Implement override protection
-
-import React, { useState } from "react";
-import axios from "axios";
-import "./../Form.scss";
-
-
-const RegisterItemForm = (props) => {
-  const [newItemNameValue, setNewItemNameValue] = useState("");
-  const [newItemDescValue, setNewItemDescValue] = useState("");
-  const [newItemPriceValue, setNewItemPriceValue] = useState(0.00);
-  const [newItemHSNValue, setNewItemHSNValue] = useState("");
-  const [newItemGSTValue, setNewItemGSTValue] = useState(props.defGSTValue);
-  // const [newItemBrandValue, setNewItemBrandValue] = useState("");
-  // const [newItemTypeValue, setNewItemTypeValue] = useState("");
-
-  const hideSelf = () => props.setVisibility(false);
-
-  const closeOnBGClicked = (event) => 
-    event.target.className === "floatingMenuBG" && hideSelf();
-
-  const postForm = (event) => {
-    event.preventDefault();
-
-  // TODO: show confirmation before being invisible
-    axios.post(
-      `/api/items/register/`
-      + `?model=${newItemNameValue}`
-      + `&desc=${newItemDescValue}`
-      + `&price=${newItemPriceValue}`
-      + `&hsn=${newItemHSNValue}`
-      + `&gst=${newItemGSTValue}`
-    )
-      .then((res) => {
-        console.log(res);
-        props.setVisibility(false);
-        props.updateItemsList();
-      })
-      .catch((err) => {
-        console.log(err);
-        alert("Something went wrong, please check the log by opening the console.")
-      });
-  }
-
-
-  return (
-    <div className={"floatingMenuBG"} onClick={closeOnBGClicked}>
-      <div className={"floatingMenu"}>
-        <div className={"formContainer"}>
-          <form className={"floatingForm"} onSubmit={postForm}>
-            <div className={"twoPaneForm"}>
-              <div className={"widePane formPane"}>
-                <label>
-                  Item/Service: <input className={"wideInputBox"} type="text" value={newItemNameValue} onChange={
-                    (event) => {
-                      setNewItemNameValue(event.target.value);
-                    }
-                  } required />
-                </label>
-
-                <label>
-                  Description: <input className={"wideInputBox"} type="text" value={newItemDescValue} onChange={
-                    (event) => {
-                      setNewItemDescValue(event.target.value);
-                    }
-                  } />
-                </label>
-
-              </div>
-              <div className={"widePane formPane"}>
-                <label>
-                  Price: <input className={"smallInputBox"} type="number" min="0.00" step="0.001" value={newItemPriceValue} onChange={
-                    (event) => {
-                      const value = event.target.value;
-                      setNewItemPriceValue(value);
-                    }
-                  } />
-                </label>
-
-                <label>
-                  HSN: <input className={"smallInputBox"} type="number" min="0" value={newItemHSNValue} onChange={
-                    (event) => {
-                      const value = event.target.value;
-                      setNewItemHSNValue(value);
-                    }
-                  } />
-                </label>
-
-                <label>
-                  GST: <input className={"smallInputBox"} type="number" min="0" value={newItemGSTValue} onChange={
-                    (event) => {
-                      const value = event.target.value;
-                      setNewItemGSTValue(value);
-                    }
-                  } />
-                </label>
-            </div>
-            </div>
-
-            <div className={"menu"}>
-              <input
-                type="button"
-                value="cancel"
-                onClick={
-                  () => {
-                    props.setVisibility(false);
-                  }
-                }
-              />
-
-              <input
-                type="submit"
-                value="Register/Add"
-                disabled={newItemNameValue !== "" ? "" : "disabled"}
-              />
-            </div>
-          </form>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export default RegisterItemForm;
diff --git a/src/components/Form/Items/RegisterItemForm.tsx b/src/components/Form/Items/RegisterItemForm.tsx
new file mode 100644
index 0000000..dc48d3c
--- /dev/null
+++ b/src/components/Form/Items/RegisterItemForm.tsx
@@ -0,0 +1,125 @@
+/*
+ * OpenBills - Self hosted browser app to generate and keep track of simple invoices
+ * Version - 0
+ * Licensed under the MIT license - https://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2021 Vidhu Kant Sharma
+*/
+
+// TODO: Code isn't tested properly
+// I'd be surprised if it < 10 bugs
+
+// TODO: Implement override protection
+
+import React, { useState } from "react";
+import axios from "axios";
+import "./../Form.scss";
+
+interface props {
+  defGSTValue: number
+  setVisibility: any // this component's visibility
+  updateItemsList: () => Promise<void>
+}
+
+const RegisterItemForm: React.FC<props> = (props) => {
+  const [newItemNameValue, setNewItemNameValue] = useState<string>("");
+  const [newItemDescValue, setNewItemDescValue] = useState<string>("");
+  const [newItemPriceValue, setNewItemPriceValue] = useState<number>(0.00);
+  const [newItemHSNValue, setNewItemHSNValue] = useState<number>();
+  const [newItemGSTValue, setNewItemGSTValue] = useState<number>(props.defGSTValue);
+  // const [newItemBrandValue, setNewItemBrandValue] = useState("");
+  // const [newItemTypeValue, setNewItemTypeValue] = useState("");
+
+  const hideSelf = () => props.setVisibility(false);
+
+  const closeOnBGClicked = (event: any) => 
+    event.target.className === "floatingMenuBG" && hideSelf();
+
+  const postForm = (event: any) => {
+    event.preventDefault();
+    // TODO: show confirmation before being invisible
+    axios.post(
+      `/api/items/register/`
+      + `?model=${newItemNameValue}`
+      + `&desc=${newItemDescValue}`
+      + `&price=${newItemPriceValue}`
+      + `&hsn=${newItemHSNValue}`
+      + `&gst=${newItemGSTValue}`
+    )
+      .then((res) => {
+        console.log(res);
+        hideSelf();
+        props.updateItemsList();
+      })
+      .catch((err) => {
+        console.log(err);
+        alert("Something went wrong, please check the log by opening the console.")
+      });
+  }
+
+
+  return (
+    <div className={"floatingMenuBG"} onClick={closeOnBGClicked}>
+      <div className={"floatingMenu"}>
+        <div className={"formContainer"}>
+          <form className={"floatingForm"} onSubmit={postForm}>
+            <div className={"twoPaneForm"}>
+              <div className={"widePane formPane"}>
+                <label>
+                  Item/Service: <input className={"wideInputBox"} type="text" value={newItemNameValue} onChange={
+                    (event) => setNewItemNameValue(event.target.value)
+                  } required />
+                </label>
+
+                <label>
+                  Description: <input className={"wideInputBox"} type="text" value={newItemDescValue} onChange={
+                    (event) => setNewItemDescValue(event.target.value)
+                  } />
+                </label>
+
+              </div>
+              <div className={"widePane formPane"}>
+                <label>
+                  Price: <input className={"smallInputBox"} type="number" min="0.00" step="0.001" value={newItemPriceValue} onChange={
+                    (event: React.FormEvent<HTMLInputElement>) => 
+                      setNewItemPriceValue(parseInt(event.currentTarget.value))
+                  } />
+                </label>
+
+                <label>
+                  HSN: <input className={"smallInputBox"} type="number" min="0" value={newItemHSNValue} onChange={
+                    (event: React.FormEvent<HTMLInputElement>) => 
+                      setNewItemHSNValue(parseInt(event.currentTarget.value))
+                  } />
+                </label>
+
+                <label>
+                  GST: <input className={"smallInputBox"} type="number" min="0" value={newItemGSTValue} onChange={
+                    (event: React.FormEvent<HTMLInputElement>) => 
+                      setNewItemGSTValue(parseInt(event.currentTarget.value))
+                  } />
+                </label>
+              </div>
+            </div>
+
+            <div className={"menu"}>
+              <input
+                type="button"
+                value="cancel"
+                onClick={() => hideSelf()}
+              />
+
+              <input
+                type="submit"
+                value="Register/Add"
+                disabled={newItemNameValue === "" ? true : false}
+              />
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default RegisterItemForm;
diff --git a/src/interfaces.ts b/src/interfaces.ts
index 7090907..bc355ff 100644
--- a/src/interfaces.ts
+++ b/src/interfaces.ts
@@ -1,21 +1,23 @@
 export interface Transport {
-  name: string,
-  vehicleNum: string,
-  method: string,
-  gstin: string,
+  name: string
+  vehicleNum: string
+  method: string
+  gstin: string
   builty: string
 }
 
 export interface Item {
-  Model: string,
-  Description: string,
-  Quantity: number,
-  UnitPrice: number,
-  TotalValue: number, // UnitPrice * Quantity
-  Discount: number,
-  HSN: number, // string??
+  Model: string
+  Description: string
+  Quantity: number
+  UnitPrice: number
+  TotalValue: number // UnitPrice * Quantity
+  Discount: number
+  HSN: number // string??
 
-  sgst: number,
-  cgst: number,
-  igst: number
+  TotalGST: number
+  SGST: number
+  CGST: number
+  IGST: number
+  // category and brand
 }
-- 
cgit v1.2.3