From 5846185f5a6662265c5330fbed229f49efb26b89 Mon Sep 17 00:00:00 2001
From: MikunoNaka <bokuwakanojogahoshii@yahoo.com>
Date: Mon, 3 May 2021 12:26:47 +0530
Subject: added some features and many bugs to DocumentInfoForm
---
src/components/BillingPage.js | 19 ++-
src/components/Form/Document/DocumentInfoForm.js | 191 +++++------------------
src/components/Form/Items/AddNewItemForm.js | 8 +-
3 files changed, 61 insertions(+), 157 deletions(-)
(limited to 'src')
diff --git a/src/components/BillingPage.js b/src/components/BillingPage.js
index be2e299..40917e5 100644
--- a/src/components/BillingPage.js
+++ b/src/components/BillingPage.js
@@ -14,6 +14,7 @@ import RegisterItemForm from "./Form/Items/RegisterItemForm";
import RegisterPersonForm from "./Form/People/RegisterPersonForm";
+import DocumentInfoForm from "./Form/Document/DocumentInfoForm";
import MetaInfoForm from "./Form/MetaInfoForm";
import ItemsDisplay from "./Display/ItemsDisplay";
@@ -21,6 +22,7 @@ import SummaryDisplay from "./Display/SummaryDisplay";
const BillingPage = () => {
const [savedItems, getSavedItems] = useState([]);
+ const [savedPeople, getSavedPeople] = useState([]);
const [registerItemFormVisibility, setRegisterItemFormVisibility] = useState(false);
const [registerPersonFormVisibility, setRegisterPersonFormVisibility] = useState(false);
@@ -35,9 +37,21 @@ const BillingPage = () => {
})
}
+ const getRegisteredPeople = () => {
+ axios.get(`/api/people`)
+ .then((res) => {
+ getSavedPeople(res.data);
+ })
+ .catch((res) => {
+ alert("The promise returned an error idk what to do");
+ console.log(res);
+ })
+ }
+
// get data from server on startup
useEffect(() => {
getRegisteredItems();
+ getRegisteredPeople();
}, []);
// TODO: to be handled by backend
const defGSTValue = 18;
@@ -62,12 +76,15 @@ const BillingPage = () => {
{registerPersonFormVisibility &&
<RegisterPersonForm
- defGSTValue={defGSTValue}
updateItemsList={getRegisteredItems}
setVisibility={setRegisterPersonFormVisibility}
/>
}
+ <DocumentInfoForm
+ savedPeople={savedPeople}
+ />
+
<AddNewItemForm
savedItems={savedItems}
addItem={getItems}
diff --git a/src/components/Form/Document/DocumentInfoForm.js b/src/components/Form/Document/DocumentInfoForm.js
index a3f70b7..0b133c6 100644
--- a/src/components/Form/Document/DocumentInfoForm.js
+++ b/src/components/Form/Document/DocumentInfoForm.js
@@ -10,31 +10,30 @@ 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 DocumentInfoForm = (props) => {
+ const [clientName, setClientName] = useState(0);
+ /* TODO: implement a way such that the database also
+ * gives the ID of the client and all the functions
+ * are carried out from the ID because if two people
+ * with same name are added then this shit is done for
+ */
- const [itemToAdd, setItemToAdd] = useState({});
+ const selectPersonPrompt = "start typing here";
+ const registerPersonPrompt = "add new";
- const enterItemNamePrompt = "start typing here";
- const registerItemPrompt = "add new";
- const emptyItemNames = [enterItemNamePrompt, registerItemPrompt, ""];
+ // const emptyPersonNames = [enterItemNamePrompt, registerItemPrompt, ""];
// Extract the model names from savedItems
- let savedItemNames= [];
+ let savedPeopleNames = [];
if (props.savedItems !== null) {
- for (let i = 0; i < props.savedItems.length; i++) {
- savedItemNames.push(props.savedItems[i].Model);
+ for (let i = 0; i < props.savedPeople.length; i++) {
+ savedPeopleNames.push(props.savedPeople[i].Name);
}
}
// 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();
@@ -52,7 +51,9 @@ const AddNewItemForm = (props) => {
}
}
}
+ */
+ /*
const resetAllValues = () => {
setItemNameValue("");
setItemDescValue("");
@@ -62,145 +63,31 @@ const AddNewItemForm = (props) => {
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" : ""
+ <label>
+ Client Name:
+ <select
+ className={"selectInputBox"}
+ value={clientName}
+ onChange={
+ (event) => {
+ alert(event.target.value);
+ setClientName(event.target.value);
+ // setItemInfo(event.target.value.toLowerCase());
+ }
+ }>
+ <option key={selectPersonPrompt}>{selectPersonPrompt}</option>
+ {savedPeopleNames.map(
+ (i) => {
+ return <option key={i}>{i}</option>
}
- />
- </div>
- </form>
- </div>
- )
+ )}
+ <option key={registerPersonPrompt}>{registerPersonPrompt}</option>
+ </select>
+ </label>
+ );
}
-export default AddNewItemForm;
+export default DocumentInfoForm;
diff --git a/src/components/Form/Items/AddNewItemForm.js b/src/components/Form/Items/AddNewItemForm.js
index 4eaea7d..78d1437 100644
--- a/src/components/Form/Items/AddNewItemForm.js
+++ b/src/components/Form/Items/AddNewItemForm.js
@@ -181,13 +181,13 @@ const AddNewItemForm = (props) => {
<div className={"smallPane"}>
<input type="button"
- value="Register New Item"
- onClick={() => props.registerItemFormVisibility(true)}
+ value="Register New Client"
+ onClick={() => props.registerPersonFormVisibility(true)}
/>
<input type="button"
- value="Register New Person"
- onClick={() => props.registerPersonFormVisibility(true)}
+ value="Register New Item"
+ onClick={() => props.registerItemFormVisibility(true)}
/>
<input type="button" value="Placeholder1" />
--
cgit v1.2.3