diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/BillingPage.js | 14 | ||||
-rw-r--r-- | src/components/Form/AddNewItemForm.js | 10 | ||||
-rw-r--r-- | src/components/Form/Form.css | 28 | ||||
-rw-r--r-- | src/components/Form/Form.scss | 53 | ||||
-rw-r--r-- | src/components/Form/RegisterItemForm.js | 103 |
5 files changed, 187 insertions, 21 deletions
diff --git a/src/components/BillingPage.js b/src/components/BillingPage.js index 7f97b32..fc09694 100644 --- a/src/components/BillingPage.js +++ b/src/components/BillingPage.js @@ -10,15 +10,15 @@ import React, { useState, useEffect } from "react"; import axios from "axios"; import AddNewItemForm from "./Form/AddNewItemForm"; +import RegisterItemForm from "./Form/RegisterItemForm"; +import MetaInfoForm from "./Form/MetaInfoForm"; import ItemsDisplay from "./Display/ItemsDisplay"; import SummaryDisplay from "./Display/SummaryDisplay"; -import MetaInfoForm from "./Form/MetaInfoForm"; const BillingPage = () => { const [savedItems, getSavedItems] = useState([]) - // get data from server on startup - useEffect(() => { + const getRegisteredItems = () => { axios.get(`/api/items`) .then((res) => { getSavedItems(res.data); @@ -27,8 +27,13 @@ const BillingPage = () => { alert("The promise returned an error idk what to do"); console.log(res); }) + } + + // get data from server on startup + useEffect(() => { + getRegisteredItems(); }, []); - // to be handled by backend + // TODO: to be handled by backend const defGSTValue = 18; // update the items from AddNewItemForm @@ -42,6 +47,7 @@ const BillingPage = () => { return ( <> <AddNewItemForm savedItems={savedItems} addItem={getItems} defGSTValue={defGSTValue}/> + <RegisterItemForm/> <ItemsDisplay items={items} defGSTValue={defGSTValue}/> <div className={"BillingPageFlex"}> <MetaInfoForm/> diff --git a/src/components/Form/AddNewItemForm.js b/src/components/Form/AddNewItemForm.js index afd5259..5028af2 100644 --- a/src/components/Form/AddNewItemForm.js +++ b/src/components/Form/AddNewItemForm.js @@ -80,7 +80,7 @@ const AddNewItemForm = (props) => { }> <div className={"textInputs"}> <label> - Item: + Item/Service: <select value={itemNameValue} onChange={ @@ -110,7 +110,7 @@ const AddNewItemForm = (props) => { <div className={"numericInputs"}> <label> - Quantity: <input type="number" min="1" value={itemQtyValue} onInput={ + Quantity:<input type="number" min="1" value={itemQtyValue} onInput={ (event) => { const value = event.target.value; setItemQtyValue(value); @@ -156,10 +156,12 @@ const AddNewItemForm = (props) => { </div> <div className={"menuButtons"}> + <input type="button" value="Register New Item" onClick={() => { + alert("Coming Soon") + }} /> <input type="button" value="Placeholder1" /> <input type="button" value="Placeholder2" /> - <input type="button" value="Placeholder3" /> - <input type="submit" value="Panic" /> + <input type="submit" value="Force Add" /> <input type="submit" value="add" diff --git a/src/components/Form/Form.css b/src/components/Form/Form.css index def42e5..ce94de4 100644 --- a/src/components/Form/Form.css +++ b/src/components/Form/Form.css @@ -1,3 +1,10 @@ +/* + * 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 url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap"); /* Experimental color scheme */ /* light theme */ @@ -82,6 +89,27 @@ input[type=number] { padding: 0.8rem 0; border-bottom: 1px dotted lightblue; } +.RegisterItemFormContainer { + /*display: none;*/ + position: fixed; + width: 95%; + height: 70vh; + left: 0; + right: 0; + margin: auto; + top: 15vh; + background-color: #383A59; } + +.RegisterItemForm .textInputs, +.RegisterItemForm .numericInputs { + width: 40%; } + +.RegisterItemForm { + width: 95%; + height: 60vh; + margin: 1rem auto; + justify-content: space-around; } + .MetaInfoForm { width: 60%; } diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss index 92f227a..f7a2d2e 100644 --- a/src/components/Form/Form.scss +++ b/src/components/Form/Form.scss @@ -10,6 +10,20 @@ $inputBorders: 1px solid $altBorderColor; +/* hide arrows in numericInputs */ +/* Chrome, Safari, Edge, Opera */ +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +/* Firefox */ +input[type=number] { + -moz-appearance: textfield; +} + + .formContainer { /*border: 1px solid pink;*/ /*padding: 2rem;*/ @@ -72,19 +86,6 @@ label { scrollbar-width: none; /* Firefox */ } -/* hide arrows in numericInputs */ -/* Chrome, Safari, Edge, Opera */ -input::-webkit-outer-spin-button, -input::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; -} - -/* Firefox */ -input[type=number] { - -moz-appearance: textfield; -} - .addNewItemForm label { display: flex; justify-content: space-between; @@ -92,6 +93,32 @@ input[type=number] { border-bottom: 1px dotted $labelUnderlineColor; } +.RegisterItemFormContainer { + /*display: none;*/ + position: fixed; + + width: 95%; + height: 70vh; + + left: 0;right: 0; + margin: auto; + top: 15vh; + + background-color: $altBG; +} + +.RegisterItemForm .textInputs, +.RegisterItemForm .numericInputs { + width: 40%; +} + +.RegisterItemForm { + width: 95%; + height: 60vh; + margin: 1rem auto; + justify-content: space-around; +} + .MetaInfoForm { width: 60%; } diff --git a/src/components/Form/RegisterItemForm.js b/src/components/Form/RegisterItemForm.js new file mode 100644 index 0000000..1b38c8d --- /dev/null +++ b/src/components/Form/RegisterItemForm.js @@ -0,0 +1,103 @@ +/* + * 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 has no bugs + +import React, { useState } from "react"; +import axios from "axios"; +import "./Form.css"; + + +const RegisterItemForm = () => { + // show/hide this component + const [visibility, setVisibility] = useState(true)// useState(props.visibility); + + const [newItemNameValue, setNewItemNameValue] = useState(""); + const [newItemDescValue, setNewItemDescValue] = useState(""); + // const [newItemBrandValue, setNewItemBrandValue] = useState(""); + // const [newItemTypeValue, setNewItemTypeValue] = useState(""); + const [newItemPriceValue, setNewItemPriceValue] = useState(""); + const [newItemHSNValue, setNewItemHSNValue] = useState(""); + const [newItemGSTValue, setNewItemGSTValue] = useState(""); + + + return ( + <div className={"formContainer RegisterItemFormContainer"} style={{display: visibility ? "fixed" : "none"}}> + <form className={"addNewItemForm RegisterItemForm"} onSubmit={ + (event) => { + event.preventDefault(); + setVisibility(false); + + axios.post(`/api/items/?model=${newItemNameValue}&desc=${newItemDescValue}&price=${newItemPriceValue}&hsn=${newItemHSNValue}&gst=${newItemGSTValue}`) + .then((res) => { + console.log(res); + }) + .catch((err) => { + console.log(err); + }); + } + }> + <div className={"textInputs"}> + <label> + Item/Service: <input type="text" value={newItemNameValue} onChange={ + (event) => { + setNewItemNameValue(event.target.value); + } + } required /> + </label> + + <label> + Description: <input type="text" value={newItemDescValue} onChange={ + (event) => { + setNewItemDescValue(event.target.value); + } + } /> + </label> + </div> + + <div className={"numericInputs"}> + <label> + Price: <input type="number" min="1.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> + + <input + type="submit" + value="Register/Add" + disabled={newItemNameValue !== "" ? "" : "disabled"} + /> + </form> + </div> + ); +} + +export default RegisterItemForm; |