From 17ea30faae3c3b0ab1d58bbeb6c1a6a404639817 Mon Sep 17 00:00:00 2001
From: MikunoNaka <bokuwakanojogahoshii@yahoo.com>
Date: Sun, 2 May 2021 18:47:28 +0530
Subject: organised the Form components into more directories

---
 src/components/BillingPage.js                 |   6 +-
 src/components/Form/AddNewItemForm.js         | 204 --------------------------
 src/components/Form/Form.scss                 |   2 +-
 src/components/Form/Items/AddNewItemForm.js   | 204 ++++++++++++++++++++++++++
 src/components/Form/Items/RegisterItemForm.js | 134 +++++++++++++++++
 src/components/Form/RegisterItemForm.js       | 134 -----------------
 src/styles/_theme.scss                        |   7 +-
 7 files changed, 344 insertions(+), 347 deletions(-)
 delete mode 100644 src/components/Form/AddNewItemForm.js
 create mode 100644 src/components/Form/Items/AddNewItemForm.js
 create mode 100644 src/components/Form/Items/RegisterItemForm.js
 delete mode 100644 src/components/Form/RegisterItemForm.js

(limited to 'src')

diff --git a/src/components/BillingPage.js b/src/components/BillingPage.js
index 567a7d2..6ebaa1c 100644
--- a/src/components/BillingPage.js
+++ b/src/components/BillingPage.js
@@ -9,9 +9,11 @@
 import React, { useState, useEffect } from "react";
 import axios from "axios";
 
-import AddNewItemForm from "./Form/AddNewItemForm";
-import RegisterItemForm from "./Form/RegisterItemForm";
+import AddNewItemForm from "./Form/Items/AddNewItemForm";
+import RegisterItemForm from "./Form/Items/RegisterItemForm";
+
 import MetaInfoForm from "./Form/MetaInfoForm";
+
 import ItemsDisplay from "./Display/ItemsDisplay";
 import SummaryDisplay from "./Display/SummaryDisplay"; 
 
diff --git a/src/components/Form/AddNewItemForm.js b/src/components/Form/AddNewItemForm.js
deleted file mode 100644
index 809de87..0000000
--- a/src/components/Form/AddNewItemForm.js
+++ /dev/null
@@ -1,204 +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
-*/
-
-import React, { useState } from "react";
-import "./Form.scss";
-
-
-const AddNewItemForm = (props) => {
-  const [itemNameValue, setItemNameValue] = useState("");
-  const [itemDescValue, setItemDescValue] = useState("");
-  const [itemPriceValue, setItemPriceValue] = useState(0.00);
-  const [itemDiscountValue, setItemDiscountValue] = useState(0.00);
-  const [itemGSTValue, setItemGSTValue] = useState(props.defGSTValue);
-  const [itemQtyValue, setItemQtyValue] = useState(1);
-  const [itemHSNValue, setItemHSNValue] = useState(0);
-
-  const enterItemNamePrompt = "start typing here";
-  const registerItemPrompt = "add new";
-  const emptyItemNames = [enterItemNamePrompt, registerItemPrompt, ""];
-
-  // Extract the model names from savedItems
-  let savedItemNames= [];
-  if (props.savedItems !== null) {
-    for (let i = 0; i < props.savedItems.length; i++) {
-      savedItemNames.push(props.savedItems[i].Model);
-    }
-  }
-  
-  // set description and price
-  // when item is entered
-  const setItemInfo = (itemName) => {
-    for (let i = 0; i < props.savedItems.length; i++) {
-      const mod = props.savedItems[i].Model.toLowerCase();
-      const desc = props.savedItems[i].Description;
-      const price = props.savedItems[i].Price;
-      const hsn = props.savedItems[i].HSN;
-      const gst = props.savedItems[i].GST;
-
-      if (mod === itemName) {
-        setItemDescValue(desc);
-        setItemPriceValue(price);
-        setItemHSNValue(hsn);
-        setItemGSTValue(gst);
-        break;
-      }
-    }
-  }
-
-  const resetAllValues = () => {
-    setItemNameValue("");
-    setItemDescValue("");
-    setItemQtyValue(1);
-    setItemPriceValue(1);
-    setItemDiscountValue(0);
-    setItemHSNValue(0);
-    setItemGSTValue(props.defGSTValue);
-  }
-
-  return (
-    <div className={"formContainer"}>
-      <form className={"threePaneForm"} onSubmit={
-        (event) => {
-          event.preventDefault();
-          const newInvoiceItem = {
-            "Model": itemNameValue,
-            "Description": itemDescValue,
-            "Quantity": parseInt(itemQtyValue),
-            "UnitPrice": parseFloat(itemPriceValue),
-            "TotalPrice": parseFloat(itemPriceValue * itemQtyValue),
-            "Discount": parseInt(itemDiscountValue),
-            "HSN": parseInt(itemHSNValue),
-            "GST": parseInt(itemGSTValue)
-          };
-          props.addItem(newInvoiceItem);
-          resetAllValues();
-        }
-      }>
-        <div className={"widePane"}>
-          <label>
-            Item/Service: 
-              <select
-                className={"selectInputBox"}
-                value={itemNameValue} 
-                onChange={
-                  (event) => {
-                    setItemNameValue(event.target.value);
-                    setItemInfo(event.target.value.toLowerCase());
-                  }
-              }>
-                <option key={enterItemNamePrompt}>{enterItemNamePrompt}</option>
-                {savedItemNames.map(
-                  (i) => {
-                    return <option key={i}>{i}</option>
-                  }
-                )}
-                <option key={registerItemPrompt}>{registerItemPrompt}</option>
-              </select>
-          </label>
-  
-          <label>
-            Description: 
-              <input className={"wideInputBox"} type="text" value={itemDescValue} 
-                onChange={
-                  (event) => {
-                    setItemDescValue(event.target.value);
-                  }
-                } 
-              />
-          </label>
-        </div>
-
-        <div className={"widePane"}>
-          <label>
-            Quantity: 
-              <input className={"smallInputBox"} type="number" min="1" value={itemQtyValue} 
-                onInput={
-                  (event) => {
-                    const value = event.target.value;
-                    setItemQtyValue(value);
-                  }
-                } 
-              required />
-          </label>
-
-          <label>
-            Price: 
-              <input className={"smallInputBox"} type="number" min="1.00" step="0.001" value={itemPriceValue} 
-                onChange={
-                  (event) => {
-                    const value = event.target.value;
-                    setItemPriceValue(value);
-                  }
-                } 
-              required />
-          </label>
-
-          <label>
-            Discount: 
-              <input className={"smallInputBox"} type="number" min="0" step="0.001" value={itemDiscountValue} 
-                onChange={
-                  (event) => {
-                    const value = event.target.value;
-                    setItemDiscountValue(value);
-                  }
-                }
-              />
-          </label>
-
-          <label>
-            HSN: 
-              <input className={"smallInputBox"} type="number" min="0" value={itemHSNValue} 
-                onChange={
-                  (event) => {
-                    const value = event.target.value;
-                    setItemHSNValue(value);
-                  }
-                } 
-              required />
-          </label>
-
-          <label>
-            GST: 
-              <input className={"smallInputBox"} type="number" min="0" value={itemGSTValue} 
-                onChange={
-                  (event) => {
-                    const value = event.target.value;
-                    setItemGSTValue(value);
-                  }
-                } 
-              required />
-          </label>
-        </div>
-
-        <div className={"smallPane"}>
-          <input type="button" 
-            value="Register New Item" 
-            onClick={() => props.registerFormVisibility(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)
-              || itemQtyValue <= 0
-              || itemPriceValue <= 0
-              || itemGSTValue <= 0
-              ) ? "disabled" : ""
-            }
-          />
-        </div>
-      </form>
-    </div>
-  )
-}
-
-export default AddNewItemForm;
diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss
index e0ec4f9..c880bea 100644
--- a/src/components/Form/Form.scss
+++ b/src/components/Form/Form.scss
@@ -64,7 +64,7 @@ input {
 }
 
 .threePaneForm {
-  @include formFlex(space-around);
+  @include formFlex(space-between);
 
   height: 22rem;
   width: 100%;
diff --git a/src/components/Form/Items/AddNewItemForm.js b/src/components/Form/Items/AddNewItemForm.js
new file mode 100644
index 0000000..6bce2ab
--- /dev/null
+++ b/src/components/Form/Items/AddNewItemForm.js
@@ -0,0 +1,204 @@
+/*
+ * 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
+*/
+
+import React, { useState } from "react";
+import "./../Form.scss";
+
+
+const AddNewItemForm = (props) => {
+  const [itemNameValue, setItemNameValue] = useState("");
+  const [itemDescValue, setItemDescValue] = useState("");
+  const [itemPriceValue, setItemPriceValue] = useState(0.00);
+  const [itemDiscountValue, setItemDiscountValue] = useState(0.00);
+  const [itemGSTValue, setItemGSTValue] = useState(props.defGSTValue);
+  const [itemQtyValue, setItemQtyValue] = useState(1);
+  const [itemHSNValue, setItemHSNValue] = useState(0);
+
+  const enterItemNamePrompt = "start typing here";
+  const registerItemPrompt = "add new";
+  const emptyItemNames = [enterItemNamePrompt, registerItemPrompt, ""];
+
+  // Extract the model names from savedItems
+  let savedItemNames= [];
+  if (props.savedItems !== null) {
+    for (let i = 0; i < props.savedItems.length; i++) {
+      savedItemNames.push(props.savedItems[i].Model);
+    }
+  }
+  
+  // set description and price
+  // when item is entered
+  const setItemInfo = (itemName) => {
+    for (let i = 0; i < props.savedItems.length; i++) {
+      const mod = props.savedItems[i].Model.toLowerCase();
+      const desc = props.savedItems[i].Description;
+      const price = props.savedItems[i].Price;
+      const hsn = props.savedItems[i].HSN;
+      const gst = props.savedItems[i].GST;
+
+      if (mod === itemName) {
+        setItemDescValue(desc);
+        setItemPriceValue(price);
+        setItemHSNValue(hsn);
+        setItemGSTValue(gst);
+        break;
+      }
+    }
+  }
+
+  const resetAllValues = () => {
+    setItemNameValue("");
+    setItemDescValue("");
+    setItemQtyValue(1);
+    setItemPriceValue(1);
+    setItemDiscountValue(0);
+    setItemHSNValue(0);
+    setItemGSTValue(props.defGSTValue);
+  }
+
+  return (
+    <div className={"formContainer"}>
+      <form className={"threePaneForm"} onSubmit={
+        (event) => {
+          event.preventDefault();
+          const newInvoiceItem = {
+            "Model": itemNameValue,
+            "Description": itemDescValue,
+            "Quantity": parseInt(itemQtyValue),
+            "UnitPrice": parseFloat(itemPriceValue),
+            "TotalPrice": parseFloat(itemPriceValue * itemQtyValue),
+            "Discount": parseInt(itemDiscountValue),
+            "HSN": parseInt(itemHSNValue),
+            "GST": parseInt(itemGSTValue)
+          };
+          props.addItem(newInvoiceItem);
+          resetAllValues();
+        }
+      }>
+        <div className={"widePane"}>
+          <label>
+            Item/Service: 
+              <select
+                className={"selectInputBox"}
+                value={itemNameValue} 
+                onChange={
+                  (event) => {
+                    setItemNameValue(event.target.value);
+                    setItemInfo(event.target.value.toLowerCase());
+                  }
+              }>
+                <option key={enterItemNamePrompt}>{enterItemNamePrompt}</option>
+                {savedItemNames.map(
+                  (i) => {
+                    return <option key={i}>{i}</option>
+                  }
+                )}
+                <option key={registerItemPrompt}>{registerItemPrompt}</option>
+              </select>
+          </label>
+  
+          <label>
+            Description: 
+              <input className={"wideInputBox"} type="text" value={itemDescValue} 
+                onChange={
+                  (event) => {
+                    setItemDescValue(event.target.value);
+                  }
+                } 
+              />
+          </label>
+        </div>
+
+        <div className={"widePane"}>
+          <label>
+            Quantity: 
+              <input className={"smallInputBox"} type="number" min="1" value={itemQtyValue} 
+                onInput={
+                  (event) => {
+                    const value = event.target.value;
+                    setItemQtyValue(value);
+                  }
+                } 
+              required />
+          </label>
+
+          <label>
+            Price: 
+              <input className={"smallInputBox"} type="number" min="1.00" step="0.001" value={itemPriceValue} 
+                onChange={
+                  (event) => {
+                    const value = event.target.value;
+                    setItemPriceValue(value);
+                  }
+                } 
+              required />
+          </label>
+
+          <label>
+            Discount: 
+              <input className={"smallInputBox"} type="number" min="0" step="0.001" value={itemDiscountValue} 
+                onChange={
+                  (event) => {
+                    const value = event.target.value;
+                    setItemDiscountValue(value);
+                  }
+                }
+              />
+          </label>
+
+          <label>
+            HSN: 
+              <input className={"smallInputBox"} type="number" min="0" value={itemHSNValue} 
+                onChange={
+                  (event) => {
+                    const value = event.target.value;
+                    setItemHSNValue(value);
+                  }
+                } 
+              required />
+          </label>
+
+          <label>
+            GST: 
+              <input className={"smallInputBox"} type="number" min="0" value={itemGSTValue} 
+                onChange={
+                  (event) => {
+                    const value = event.target.value;
+                    setItemGSTValue(value);
+                  }
+                } 
+              required />
+          </label>
+        </div>
+
+        <div className={"smallPane"}>
+          <input type="button" 
+            value="Register New Item" 
+            onClick={() => props.registerFormVisibility(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)
+              || itemQtyValue <= 0
+              || itemPriceValue <= 0
+              || itemGSTValue <= 0
+              ) ? "disabled" : ""
+            }
+          />
+        </div>
+      </form>
+    </div>
+  )
+}
+
+export default AddNewItemForm;
diff --git a/src/components/Form/Items/RegisterItemForm.js b/src/components/Form/Items/RegisterItemForm.js
new file mode 100644
index 0000000..140de29
--- /dev/null
+++ b/src/components/Form/Items/RegisterItemForm.js
@@ -0,0 +1,134 @@
+/*
+ * 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/`
+      + `?model=${newItemNameValue}`
+      + `&desc=${newItemDescValue}`
+      + `&price=${newItemPriceValue}`
+      + `&hsn=${newItemHSNValue}`
+      + `&gst=${newItemGSTValue}`
+    )
+      .then((res) => {
+        console.log(res);
+        props.setVisibility(false);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+    props.updateItemsList();
+  }
+
+
+  return (
+    <div className={"floatingMenuBG"} onClick={closeOnBGClicked}>
+      <div className={"floatingMenu"}>
+        <div className={"formContainer"}>
+          <form className={"floatingForm"} onSubmit={postForm}>
+            <div className={"twoPaneForm"}>
+              <div className={"widePane"}>
+                <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"}>
+                <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/RegisterItemForm.js b/src/components/Form/RegisterItemForm.js
deleted file mode 100644
index 8ce2161..0000000
--- a/src/components/Form/RegisterItemForm.js
+++ /dev/null
@@ -1,134 +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/`
-      + `?model=${newItemNameValue}`
-      + `&desc=${newItemDescValue}`
-      + `&price=${newItemPriceValue}`
-      + `&hsn=${newItemHSNValue}`
-      + `&gst=${newItemGSTValue}`
-    )
-      .then((res) => {
-        console.log(res);
-        props.setVisibility(false);
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-    props.updateItemsList();
-  }
-
-
-  return (
-    <div className={"floatingMenuBG"} onClick={closeOnBGClicked}>
-      <div className={"floatingMenu"}>
-        <div className={"formContainer"}>
-          <form className={"floatingForm"} onSubmit={postForm}>
-            <div className={"twoPaneForm"}>
-              <div className={"widePane"}>
-                <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"}>
-                <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/styles/_theme.scss b/src/styles/_theme.scss
index a238d37..436ca2b 100644
--- a/src/styles/_theme.scss
+++ b/src/styles/_theme.scss
@@ -31,14 +31,9 @@ $tableDefBorderColor: $underline1;
 $tableAltBorderColor: $underline2;
 $tableDisabledBorderColor: $underline0;
 
-
-
-
 $warningColor: red;
 $warningBorderColor: $warningColor;
 
-
 $shadowColor: #232627;
 $defBigShadow: 0px 8px 4px $shadowColor;
-// $floatingShadow: 0px 8px 4px 0 $shadowColor, 0px 6px 20px 0 $shadowColor;
-$floatingShadow: 6px 6px 3px $shadowColor;
+$floatingShadow: 6px 6px 6px $shadowColor;
-- 
cgit v1.2.3