diff options
Diffstat (limited to 'src/components/Form/Form.js')
-rw-r--r-- | src/components/Form/Form.js | 118 |
1 files changed, 0 insertions, 118 deletions
diff --git a/src/components/Form/Form.js b/src/components/Form/Form.js deleted file mode 100644 index 094f881..0000000 --- a/src/components/Form/Form.js +++ /dev/null @@ -1,118 +0,0 @@ -import React, { useState } from "react"; -import "./Form.css"; - - -const BillingForm = (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(18); - const [itemQtyValue, setItemQtyValue] = useState(1); - - // Extract the model names from savedItems - const savedItems = props.savedItems; - let savedItemNames = []; - for (let i = 0; i < savedItems.length; i++) { - savedItemNames.push(savedItems[i].Model); - } - - const filteredItems = savedItemNames.filter( - (item) => { - // case insensitive - return item.toLowerCase().includes(itemNameValue.toLowerCase()); - } - ); - - return ( - <div className={"formContainer"}> - <form className={"addNewItemForm"} onSubmit={ - (event) => { - event.preventDefault(); - console.log(itemNameValue, itemDescValue, itemPriceValue); - } - }> - <div className={"textInputs"}> - <label> - Item:<input type="text" value={itemNameValue} onChange={ - (event) => { - setItemNameValue(event.target.value); - // set description and price value - for (let i = 0; i <= props.savedItems.length - 1; i++) { - const mod = props.savedItems[i].Model; - const desc = props.savedItems[i].Description; - const price = props.savedItems[i].Price; - if (mod === event.target.value) { - setItemDescValue(desc); - setItemPriceValue(price); - break; - } - } - } - } /> - </label> - - <label> - Description:<input type="text" min="0" step="0.1" value={itemDescValue} onChange={ - (event) => { - setItemDescValue(event.target.value); - } - } /> - </label> - </div> - - <div className={"numericInputs"}> - <label> - Price: <input type="number" min="0" value={itemPriceValue} onChange={ - (event) => { - setItemPriceValue(event.target.value); - } - } /> - </label> - - <label> - Discount: <input type="number" min="0" value={itemDiscountValue} onChange={ - (event) => { - setItemDiscountValue(event.target.value); - } - } /> - </label> - - <label> - GST: <input type="number" min="0" value={itemGSTValue} onChange={ - (event) => { - setItemGSTValue(event.target.value); - } - } /> - </label> - - <label> - Quantity: <input type="number" min="1" value={itemQtyValue} onChange={ - (event) => { - setItemQtyValue(event.target.value); - } - } /> - </label> - </div> - - <div className={"menuButtons"}> - <input type="submit" value="Placeholder1" /> - <input type="submit" value="Placeholder2" /> - <input type="submit" value="Placeholder3" /> - <input type="submit" value="Placeholder4" /> - <input type="submit" value="add" /> - </div> - </form> - - <ul> - {filteredItems.map( - (i) => { - return <li key={i}>{i}</li> - } - )} - </ul> - </div> - ) -} - -export default BillingForm; |