diff options
| -rw-r--r-- | src/components/Form/AddNewItemForm.js | 42 | ||||
| -rw-r--r-- | src/components/Form/RegisterItemForm.js | 104 |
2 files changed, 73 insertions, 73 deletions
diff --git a/src/components/Form/AddNewItemForm.js b/src/components/Form/AddNewItemForm.js index 81cbd3f..69a53f3 100644 --- a/src/components/Form/AddNewItemForm.js +++ b/src/components/Form/AddNewItemForm.js @@ -104,11 +104,7 @@ const AddNewItemForm = (props) => { <label> Description: - <input - className={"wideInputBox"} - type="text" - step="0.1" - value={itemDescValue} + <input className={"wideInputBox"} type="text" step="0.1" value={itemDescValue} onChange={ (event) => { setItemDescValue(event.target.value); @@ -121,11 +117,7 @@ const AddNewItemForm = (props) => { <div className={"widePane"}> <label> Quantity: - <input - className={"smallInputBox"} - type="number" - min="1" - value={itemQtyValue} + <input className={"smallInputBox"} type="number" min="1" value={itemQtyValue} onInput={ (event) => { const value = event.target.value; @@ -137,12 +129,7 @@ const AddNewItemForm = (props) => { <label> Price: - <input - className={"smallInputBox"} - type="number" - min="1.00" - step="0.001" - value={itemPriceValue} + <input className={"smallInputBox"} type="number" min="1.00" step="0.001" value={itemPriceValue} onChange={ (event) => { const value = event.target.value; @@ -154,12 +141,7 @@ const AddNewItemForm = (props) => { <label> Discount: - <input - className={"smallInputBox"} - type="number" - min="0" - step="0.001" - value={itemDiscountValue} + <input className={"smallInputBox"} type="number" min="0" step="0.001" value={itemDiscountValue} onChange={ (event) => { const value = event.target.value; @@ -171,11 +153,7 @@ const AddNewItemForm = (props) => { <label> HSN: - <input - className={"smallInputBox"} - type="number" - min="0" - value={itemHSNValue} + <input className={"smallInputBox"} type="number" min="0" value={itemHSNValue} onChange={ (event) => { const value = event.target.value; @@ -187,11 +165,7 @@ const AddNewItemForm = (props) => { <label> GST: - <input - className={"smallInputBox"} - type="number" - min="0" - value={itemGSTValue} + <input className={"smallInputBox"} type="number" min="0" value={itemGSTValue} onChange={ (event) => { const value = event.target.value; @@ -212,9 +186,7 @@ const AddNewItemForm = (props) => { <input type="button" value="Placeholder2" /> <input type="submit" value="Force Add" /> - <input - type="submit" - value="add" + <input type="submit" value="add" disabled={ (emptyItemNames.includes(itemNameValue) || itemQtyValue <= 0 diff --git a/src/components/Form/RegisterItemForm.js b/src/components/Form/RegisterItemForm.js index fca0916..30d23b6 100644 --- a/src/components/Form/RegisterItemForm.js +++ b/src/components/Form/RegisterItemForm.js @@ -11,30 +11,82 @@ // TODO: Implement override protection -import React/*, { useState }*/ from "react"; +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 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(); return ( - <div className={"FloatingMenuBG"}> - <div className={"FloatingMenu"}> + <div className={"floatingMenuBG"} onClick={closeOnBGClicked}> + <div className={"floatingMenu"}> <div className={"formContainer"}> - <form className={"twoPaneForm"}> - <div className={""}> - </div> - - <div className={""}> + <form className={"floatingForm"}> + <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> </form> </div> @@ -88,32 +140,8 @@ const RegisterItemForm = (/*props*/) => { </div> <div className={"numericInputs"}> - <label> - Price: <input type="number" min="0.00" step="0.001" value={newItemPriceValue} onChange={ - (event) => { - const value = event.target.value; - setNewItemPriceValue(value); - } - } /> - </label> - <label> - HSN: <input type="number" min="0" value={newItemHSNValue} onChange={ - (event) => { - const value = event.target.value; - setNewItemHSNValue(value); - } - } /> - </label> - <label> - GST: <input type="number" min="0" value={newItemGSTValue} onChange={ - (event) => { - const value = event.target.value; - setNewItemGSTValue(value); - } - } /> - </label> </div> </div> |