aboutsummaryrefslogtreecommitdiff
path: root/src/components/Form
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/Form')
-rw-r--r--src/components/Form/Form.css73
-rw-r--r--src/components/Form/Form.js114
-rw-r--r--src/components/Form/Form.scss70
3 files changed, 203 insertions, 54 deletions
diff --git a/src/components/Form/Form.css b/src/components/Form/Form.css
index d0ecc5f..9dbfd6f 100644
--- a/src/components/Form/Form.css
+++ b/src/components/Form/Form.css
@@ -1,4 +1,71 @@
-form {
- border: 1px solid purple;
+@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap");
+/* Experimental color scheme */
+/* light theme */
+/*
+$defBG: #FFFFFF;
+$altBG: lightgray;
+$defFG: #000000;
+$altFG: #232627;
+$defLink: brown;
+$altLink: brown;
+
+$defShadow: 0px 0px 4px #232627;
+*/
+/* Inspired by Dracula */
+.formContainer {
+ border: 1px solid pink;
+ padding: 2rem;
+ height: 60vh;
+ border-radius: 1rem; }
+
+.addNewItemForm .textInputs,
+.addNewItemForm .numericInputs
+label {
+ font-size: 1.5rem; }
+
+.addNewItemForm {
display: flex;
- justify-content: space-evenly; }
+ flex-direction: row;
+ justify-content: space-between;
+ height: 50vh; }
+
+.addNewItemForm .textInputs,
+.addNewItemForm .numericInputs {
+ border: 1px solid #FF79C6;
+ width: 30%;
+ justify-content: space-around; }
+
+.addNewItemForm .numericInputs input {
+ width: 5.5rem; }
+
+.addNewItemForm .menuButtons {
+ justify-content: space-around;
+ border: 1px solid lightgreen;
+ width: 15%; }
+
+.addNewItemForm .menuButtons * {
+ width: 100%; }
+
+.addNewItemForm div {
+ display: flex;
+ flex-direction: column;
+ border-radius: 1rem;
+ padding: 1.5rem;
+ overflow: scroll; }
+
+/* hide scrollbars */
+.addNewItemForm div::-webkit-scrollbar {
+ display: none;
+ /* Chrome/Safari/Opera */ }
+
+.addNewItemForm div {
+ -ms-overflow-style: none;
+ /* IE and Edge */
+ scrollbar-width: none;
+ /* Firefox */ }
+
+.addNewItemForm label {
+ display: flex;
+ justify-content: space-between;
+ padding: 0.8rem 0;
+ border-bottom: 1px dotted lightblue; }
diff --git a/src/components/Form/Form.js b/src/components/Form/Form.js
index 5cb5675..094f881 100644
--- a/src/components/Form/Form.js
+++ b/src/components/Form/Form.js
@@ -8,6 +8,7 @@ const BillingForm = (props) => {
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;
@@ -24,66 +25,83 @@ const BillingForm = (props) => {
);
return (
- <div>
- <form onSubmit={
+ <div className={"formContainer"}>
+ <form className={"addNewItemForm"} onSubmit={
(event) => {
event.preventDefault();
console.log(itemNameValue, itemDescValue, itemPriceValue);
}
}>
-
- <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;
+ <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>
- <label>
- Description: <input type="text" min="0" step="0.1" value={itemDescValue} onChange={
- (event) => {
- setItemDescValue(event.target.value);
- }
- } />
- </label>
+ <label>
+ Description:<input type="text" min="0" step="0.1" value={itemDescValue} onChange={
+ (event) => {
+ setItemDescValue(event.target.value);
+ }
+ } />
+ </label>
+ </div>
- <label>
- Price: <input type="number" min="0" value={itemPriceValue} onChange={
- (event) => {
- setItemPriceValue(event.target.value);
- }
- } />
- </label>
+ <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>
+ 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>
+ 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>
- <input type="submit" value="add" />
+ <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>
diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss
index 01f9bf2..5dc6545 100644
--- a/src/components/Form/Form.scss
+++ b/src/components/Form/Form.scss
@@ -1,5 +1,69 @@
-form {
- border: 1px solid purple;
+@import "../../styles/theme";
+
+.formContainer {
+ border: 1px solid pink;
+ padding: 2rem;
+
+ height: 60vh;
+ border-radius: 1rem;
+}
+
+.addNewItemForm .textInputs,
+.addNewItemForm .numericInputs
+label {
+ font-size: 1.5rem;
+}
+
+.addNewItemForm {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+
+ height: 50vh;
+}
+
+.addNewItemForm .textInputs,
+.addNewItemForm .numericInputs {
+ border: 1px solid $altBorderColor;
+ width: 30%;
+ justify-content: space-around;
+}
+
+.addNewItemForm .numericInputs input {
+ width: 5.5rem;
+}
+
+.addNewItemForm .menuButtons {
+ justify-content: space-around;
+ border: 1px solid $defBorderColor;
+ width: 15%;
+}
+
+.addNewItemForm .menuButtons * {
+ width: 100%;
+}
+
+.addNewItemForm div {
+ display: flex;
+ flex-direction: column;
+ border-radius: 1rem;
+ padding: 1.5rem;
+
+ overflow: scroll;
+}
+
+/* hide scrollbars */
+.addNewItemForm div::-webkit-scrollbar {
+ display: none; /* Chrome/Safari/Opera */
+}
+.addNewItemForm div {
+ -ms-overflow-style: none; /* IE and Edge */
+ scrollbar-width: none; /* Firefox */
+}
+
+.addNewItemForm label {
display: flex;
- justify-content: space-evenly;
+ justify-content: space-between;
+ padding: 0.8rem 0;
+ border-bottom: 1px dotted $labelUnderlineColor;
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 08:17:04 +0000