diff options
author | MikunoNaka <bokuwakanojogahoshii@yahoo.com> | 2021-06-24 15:53:42 +0530 |
---|---|---|
committer | MikunoNaka <bokuwakanojogahoshii@yahoo.com> | 2021-06-24 15:53:42 +0530 |
commit | 5329b1fd16d0b8940f9526b523676dfb1cdbf317 (patch) | |
tree | d65963f6a797e72c2fae8332568bddc00d2293a9 /src/components/Form/Items/AddNewItemForm.js | |
parent | e21a1c15a2e4bf3e51cdd7a5671bbfee5837ef13 (diff) |
switching to typescript
Diffstat (limited to 'src/components/Form/Items/AddNewItemForm.js')
-rw-r--r-- | src/components/Form/Items/AddNewItemForm.js | 203 |
1 files changed, 0 insertions, 203 deletions
diff --git a/src/components/Form/Items/AddNewItemForm.js b/src/components/Form/Items/AddNewItemForm.js deleted file mode 100644 index 37167fd..0000000 --- a/src/components/Form/Items/AddNewItemForm.js +++ /dev/null @@ -1,203 +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); - - // to be handled by DocumentInfo - // check if client is in same state - // and apply cgst+sgst or igst accordingly - const inState = true; - - const enterItemNamePrompt = "start typing here"; - const registerItemPrompt = "add new"; - const emptyItemNames = [enterItemNamePrompt, registerItemPrompt, ""]; - - // set description and price if match found in DB - const applyItemInfo = (i) => { - setItemDescValue(i.Description); - setItemPriceValue(i.Price); - setItemHSNValue(i.HSN); - setItemGSTValue(i.GST); - } - - // check the item name value and do stuff accordingly - const setItemInfo = (itemName) => - (props.savedItems === null || itemName === registerItemPrompt) - ? props.registerItemFormVisibility(true) - : props.savedItems.some((i) => - itemName === i.Model.toLowerCase() && applyItemInfo(i)) - - 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), - - // this also checks if igst applies or not - "sgst": inState ? parseInt(itemGSTValue) / 2 : "", - "cgst": inState ? parseInt(itemGSTValue) / 2 : "", - "igst": inState ? "" : parseInt(itemGSTValue) - }; - console.log(newInvoiceItem); - props.addItem(newInvoiceItem); - resetAllValues(); - } - }> - <div className={"widePane formPane"}> - <label> - Item/Service: - <select - className={"selectInputBox"} - value={itemNameValue} - onChange={ - (event) => { - setItemNameValue(event.target.value); - setItemInfo(event.target.value.toLowerCase()); - } - }> - <option key={enterItemNamePrompt}>{enterItemNamePrompt}</option> - {props.savedItems !== null && props.savedItems.map( - (i) => <option key={i.Model}>{i.Model}</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 formPane"}> - <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 formPane"}> - <input type="button" - value="Register New Client" - onClick={() => props.registerPersonFormVisibility(true)} - /> - - <input type="button" - value="Register New Item" - 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) - || itemQtyValue <= 0 - || itemPriceValue <= 0 - || itemGSTValue <= 0 - ) ? "disabled" : "" - } - /> - </div> - </form> - </div> - ) -} - -export default AddNewItemForm; |