aboutsummaryrefslogtreecommitdiff
path: root/src/components/Form
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/Form')
-rw-r--r--src/components/Form/AddNewItemForm.js4
-rw-r--r--src/components/Form/Form.css31
-rw-r--r--src/components/Form/Form.scss10
-rw-r--r--src/components/Form/RegisterItemForm.js124
4 files changed, 106 insertions, 63 deletions
diff --git a/src/components/Form/AddNewItemForm.js b/src/components/Form/AddNewItemForm.js
index 5028af2..877e9f4 100644
--- a/src/components/Form/AddNewItemForm.js
+++ b/src/components/Form/AddNewItemForm.js
@@ -157,11 +157,13 @@ const AddNewItemForm = (props) => {
<div className={"menuButtons"}>
<input type="button" value="Register New Item" onClick={() => {
- alert("Coming Soon")
+ alert("this shit refuses to work")
}} />
+
<input type="button" value="Placeholder1" />
<input type="button" value="Placeholder2" />
<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 ce94de4..1340151 100644
--- a/src/components/Form/Form.css
+++ b/src/components/Form/Form.css
@@ -19,6 +19,17 @@ $altLink: brown;
$defShadow: 0px 0px 4px #232627;
*/
/* Inspired by Dracula */
+/* 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,17 +83,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;
@@ -110,6 +110,15 @@ input[type=number] {
margin: 1rem auto;
justify-content: space-around; }
+.RegisterItemFormContainer .menu {
+ position: absolute;
+ right: 1rem;
+ bottom: 0.25rem; }
+
+.RegisterItemFormContainer input[type=submit],
+.RegisterItemFormContainer input[type=button] {
+ margin: 1rem; }
+
.MetaInfoForm {
width: 60%; }
diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss
index f7a2d2e..601b8e9 100644
--- a/src/components/Form/Form.scss
+++ b/src/components/Form/Form.scss
@@ -119,6 +119,16 @@ label {
justify-content: space-around;
}
+.RegisterItemFormContainer .menu {
+ position: absolute;
+ right: 1rem; bottom: 0.25rem;
+}
+
+.RegisterItemFormContainer input[type=submit],
+.RegisterItemFormContainer input[type=button] {
+ margin: 1rem;
+}
+
.MetaInfoForm {
width: 60%;
}
diff --git a/src/components/Form/RegisterItemForm.js b/src/components/Form/RegisterItemForm.js
index 1b38c8d..ddc3eff 100644
--- a/src/components/Form/RegisterItemForm.js
+++ b/src/components/Form/RegisterItemForm.js
@@ -7,16 +7,19 @@
*/
// TODO: Code isn't tested properly
-// I'd be surprised if it has no bugs
+// I'd be surprised if it < 10 bugs
+
+// TODO: Implement override protection
import React, { useState } from "react";
import axios from "axios";
import "./Form.css";
-const RegisterItemForm = () => {
+const RegisterItemForm = (props) => {
// show/hide this component
- const [visibility, setVisibility] = useState(true)// useState(props.visibility);
+ // experimental
+ const [visibility, setVisibility] = useState(true);
const [newItemNameValue, setNewItemNameValue] = useState("");
const [newItemDescValue, setNewItemDescValue] = useState("");
@@ -29,9 +32,13 @@ const RegisterItemForm = () => {
return (
<div className={"formContainer RegisterItemFormContainer"} style={{display: visibility ? "fixed" : "none"}}>
- <form className={"addNewItemForm RegisterItemForm"} onSubmit={
+ <form onSubmit={
(event) => {
event.preventDefault();
+
+ // experimental
+ // make sure it shows confirmation
+ // before hiding itself
setVisibility(false);
axios.post(`/api/items/?model=${newItemNameValue}&desc=${newItemDescValue}&price=${newItemPriceValue}&hsn=${newItemHSNValue}&gst=${newItemGSTValue}`)
@@ -41,60 +48,75 @@ const RegisterItemForm = () => {
.catch((err) => {
console.log(err);
});
+ props.updateItemsList();
}
}>
- <div className={"textInputs"}>
- <label>
- Item/Service: <input type="text" value={newItemNameValue} onChange={
- (event) => {
- setNewItemNameValue(event.target.value);
- }
- } required />
- </label>
+ <div className={"addNewItemForm RegisterItemForm"}>
+ <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>
+ <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>
</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);
+ <div className={"menu"}>
+ <input
+ type="button"
+ value="cancel"
+ onClick={
+ () => {
+ setVisibility(false);
}
- } />
- </label>
- </div>
+ }
+ />
- <input
- type="submit"
- value="Register/Add"
- disabled={newItemNameValue !== "" ? "" : "disabled"}
- />
+ <input
+ type="submit"
+ value="Register/Add"
+ disabled={newItemNameValue !== "" ? "" : "disabled"}
+ />
+ </div>
</form>
</div>
);
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 18:29:36 +0000