aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/App.js18
-rw-r--r--src/components/BillingPage.js27
-rw-r--r--src/components/Form/Form.css73
-rw-r--r--src/components/Form/Form.js114
-rw-r--r--src/components/Form/Form.scss70
-rw-r--r--src/styles/_theme.scss5
-rw-r--r--src/styles/global.css2
-rw-r--r--src/styles/global.scss2
8 files changed, 239 insertions, 72 deletions
diff --git a/src/components/App.js b/src/components/App.js
index c1bae4f..d2b7d21 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -1,27 +1,13 @@
import React from "react";
import Header from "./Header/Header";
-import BillingForm from "./Form/Form.js";
-
-const sampleData = [
- {
- "Model": "Kisan Chair",
- "Description": "Very good chair",
- "Price": "10000",
- "Discount": ""}
- , {
- "Model": "Supreme Chair",
- "Description": "Even better chair",
- "Price": "2134983",
- "Discount": ""
- }
-]
+import BillingPage from "./BillingPage";
const App = () => {
return (
<>
<Header/>
<div className={"root-content"}>
- <BillingForm savedItems={sampleData} />
+ <BillingPage />
</div>
</>
);
diff --git a/src/components/BillingPage.js b/src/components/BillingPage.js
new file mode 100644
index 0000000..6e76cf0
--- /dev/null
+++ b/src/components/BillingPage.js
@@ -0,0 +1,27 @@
+import React from "react";
+import BillingForm from "./Form/Form.js";
+
+
+const sampleData = [
+ {
+ "Model": "Kisan Chair",
+ "Description": "Very good chair",
+ "Price": "10000",
+ "Discount": ""
+ }, {
+ "Model": "Supreme Chair",
+ "Description": "Even better chair",
+ "Price": "2134983",
+ "Discount": ""
+ }
+];
+
+const BillingPage = () => {
+ return (
+ <>
+ <BillingForm savedItems={sampleData} />
+ </>
+ );
+}
+
+export default BillingPage;
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;
}
diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss
index 5f92bc9..ba67346 100644
--- a/src/styles/_theme.scss
+++ b/src/styles/_theme.scss
@@ -22,6 +22,11 @@ $defFG: #F2F2F2;
$altFG: #FF79C6;
$defLink: $defFG;
$altLink: $altFG;
+$defBorderColor: lightgreen;
+$altBorderColor: #FF79C6;
+
+$labelUnderlineColor: lightblue;
+
$defShadow: 0px 4px 4px $altBG;
diff --git a/src/styles/global.css b/src/styles/global.css
index 198f1e1..4950d01 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -21,5 +21,5 @@ body {
margin: 0; }
.root-content {
- width: 90%;
+ width: 95%;
margin: auto; }
diff --git a/src/styles/global.scss b/src/styles/global.scss
index b0e5ea1..282c790 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -11,6 +11,6 @@ body {
}
.root-content {
- width: 90%;
+ width: 95%;
margin: auto;
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 07:02:25 +0000