aboutsummaryrefslogtreecommitdiff
path: root/src/components/Form
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/Form')
-rw-r--r--src/components/Form/AddNewItemForm.js2
-rw-r--r--src/components/Form/Form.scss11
-rw-r--r--src/components/Form/RegisterItemForm.js123
3 files changed, 55 insertions, 81 deletions
diff --git a/src/components/Form/AddNewItemForm.js b/src/components/Form/AddNewItemForm.js
index 69a53f3..809de87 100644
--- a/src/components/Form/AddNewItemForm.js
+++ b/src/components/Form/AddNewItemForm.js
@@ -104,7 +104,7 @@ const AddNewItemForm = (props) => {
<label>
Description:
- <input className={"wideInputBox"} type="text" step="0.1" value={itemDescValue}
+ <input className={"wideInputBox"} type="text" value={itemDescValue}
onChange={
(event) => {
setItemDescValue(event.target.value);
diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss
index 43aee39..e0ec4f9 100644
--- a/src/components/Form/Form.scss
+++ b/src/components/Form/Form.scss
@@ -109,4 +109,15 @@ input {
@include formWideLabel();
}
+.floatingForm .menu {
+ position: absolute;
+
+ right: 0.5rem;
+ bottom: 0.5rem;
+}
+
+.floatingForm .menu * {
+ margin: 1rem;
+}
+
diff --git a/src/components/Form/RegisterItemForm.js b/src/components/Form/RegisterItemForm.js
index 30d23b6..8ce2161 100644
--- a/src/components/Form/RegisterItemForm.js
+++ b/src/components/Form/RegisterItemForm.js
@@ -12,7 +12,7 @@
// TODO: Implement override protection
import React, { useState } from "react";
-// import axios from "axios";
+import axios from "axios";
import "./Form.scss";
@@ -30,15 +30,36 @@ const RegisterItemForm = (props) => {
const closeOnBGClicked = (event) =>
event.target.className === "floatingMenuBG" && hideSelf();
+ const postForm = (event) => {
+ event.preventDefault();
+
+ // TODO: show confirmation before being invisible
+ axios.post(
+ `/api/items/`
+ + `?model=${newItemNameValue}`
+ + `&desc=${newItemDescValue}`
+ + `&price=${newItemPriceValue}`
+ + `&hsn=${newItemHSNValue}`
+ + `&gst=${newItemGSTValue}`
+ )
+ .then((res) => {
+ console.log(res);
+ props.setVisibility(false);
+ })
+ .catch((err) => {
+ console.log(err);
+ });
+ props.updateItemsList();
+ }
+
+
return (
<div className={"floatingMenuBG"} onClick={closeOnBGClicked}>
<div className={"floatingMenu"}>
<div className={"formContainer"}>
- <form className={"floatingForm"}>
+ <form className={"floatingForm"} onSubmit={postForm}>
<div className={"twoPaneForm"}>
-
<div className={"widePane"}>
-
<label>
Item/Service: <input className={"wideInputBox"} type="text" value={newItemNameValue} onChange={
(event) => {
@@ -56,9 +77,7 @@ const RegisterItemForm = (props) => {
</label>
</div>
-
<div className={"widePane"}>
-
<label>
Price: <input className={"smallInputBox"} type="number" min="0.00" step="0.001" value={newItemPriceValue} onChange={
(event) => {
@@ -85,87 +104,31 @@ const RegisterItemForm = (props) => {
}
} />
</label>
-
- </div>
</div>
- </form>
- </div>
- </div>
- </div>
- );
-
- /*
- return (
- <div className={"formContainer"}>
- <form className={"threePaneForm"} onSubmit={
- (event) => {
- event.preventDefault();
-
- // TODO: show confirmation before being invisible
- axios.post(
- `/api/items/`
- + `?model=${newItemNameValue}`
- + `&desc=${newItemDescValue}`
- + `&price=${newItemPriceValue}`
- + `&hsn=${newItemHSNValue}`
- + `&gst=${newItemGSTValue}`
- )
- .then((res) => {
- console.log(res);
- props.setVisibility(false);
- })
- .catch((err) => {
- console.log(err);
- });
- props.updateItemsList();
- }
- }>
- <div className={"addNewItemForm RegisterItemForm"}>
- <div className={"textInputs"}>
- <label>
- Item/Service: <input type="text" value={newItemNameValue} onChange={
- (event) => {
- setNewItemNameValue(event.target.value);
- }
- } required />
- </label>
+ </div>
- <label>
- Description: <input type="text" value={newItemDescValue} onChange={
- (event) => {
- setNewItemDescValue(event.target.value);
+ <div className={"menu"}>
+ <input
+ type="button"
+ value="cancel"
+ onClick={
+ () => {
+ props.setVisibility(false);
+ }
}
- } />
- </label>
- </div>
-
- <div className={"numericInputs"}>
+ />
-
- </div>
- </div>
-
- <div className={"menu"}>
- <input
- type="button"
- value="cancel"
- onClick={
- () => {
- props.setVisibility(false);
- }
- }
- />
-
- <input
- type="submit"
- value="Register/Add"
- disabled={newItemNameValue !== "" ? "" : "disabled"}
- />
+ <input
+ type="submit"
+ value="Register/Add"
+ disabled={newItemNameValue !== "" ? "" : "disabled"}
+ />
+ </div>
+ </form>
</div>
- </form>
+ </div>
</div>
);
- */
}
export default RegisterItemForm;