From ee77e57189a6b0375e840b386754973a376dc089 Mon Sep 17 00:00:00 2001
From: MikunoNaka <bokuwakanojogahoshii@yahoo.com>
Date: Sat, 17 Apr 2021 19:04:55 +0530
Subject: added a way to see the total cost and number of items in ItemsDisplay
---
src/components/BillingPage.js | 18 +++++++++++-----
src/components/Display/Display.css | 17 +++++++++------
src/components/Display/Display.scss | 20 +++++++++++------
src/components/Display/DisplayItem.js | 19 ----------------
src/components/Display/ItemsDisplay.js | 34 ++++-------------------------
src/components/Display/SummaryDisplay.js | 37 ++++++++++++++++++++++++++++++++
src/components/Form/AddNewItemForm.js | 22 +++++++++----------
src/components/Form/Form.css | 11 ++++++++++
src/components/Form/Form.scss | 13 +++++++++++
src/styles/_theme.scss | 3 ++-
10 files changed, 115 insertions(+), 79 deletions(-)
create mode 100644 src/components/Display/SummaryDisplay.js
diff --git a/src/components/BillingPage.js b/src/components/BillingPage.js
index bb1330f..698f095 100644
--- a/src/components/BillingPage.js
+++ b/src/components/BillingPage.js
@@ -1,27 +1,36 @@
import React, { useState } from "react";
import AddNewItemForm from "./Form/AddNewItemForm";
import ItemsDisplay from "./Display/ItemsDisplay";
+// import SummaryDisplay from "./Display/SummaryDisplay";
const sampleData = [
{
"Model": "Kisan Chair",
"Description": "Very good chair",
"Price": 10000,
- "Discount": 0
}, {
"Model": "Supreme Chair",
"Description": "Even better chair",
"Price": "2134983",
- "Discount": 0
}, {
"Model": "Action Houseware",
"Description": "Not a chair",
"Price": 69,
- "Discount": 0
+ }, {
+ "Model": "Coirfit Mattress",
+ "Description": "Not a chair (neither houseware)",
+ "Price": 19,
+ }, {
+ "Model": "AVRO Chair",
+ "Description": "Formerly AVON lol",
+ "Price": 291,
+ }, {
+ "Model": "Mystery Item",
+ "Description": "hehe heheheheheh",
+ "Price": 1212312,
}
];
-
const BillingPage = () => {
// to be handled by backend
const defGSTValue = 18;
@@ -36,7 +45,6 @@ const BillingPage = () => {
return (
<div>
<AddNewItemForm savedItems={sampleData} addItem={getItems} defGSTValue={defGSTValue}/>
-
<ItemsDisplay items={items}/>
</div>
);
diff --git a/src/components/Display/Display.css b/src/components/Display/Display.css
index a3bc406..1045956 100644
--- a/src/components/Display/Display.css
+++ b/src/components/Display/Display.css
@@ -17,16 +17,21 @@ $defShadow: 0px 0px 4px #232627;
width: 100%; }
.ItemsDisplay {
- border-right: 1px dashed lightblue;
- border-left: 1px dashed lightblue;
- padding: 1rem 0.5rem; }
+ margin: 3rem auto; }
+
+.ItemsDisplay .legend {
+ background-color: #383A59; }
+
+.ItemsDisplay th {
+ font-size: 1.2rem; }
.ItemsDisplay td {
text-align: center;
- border-bottom: 1px solid lightblue; }
+ border-bottom: 1px solid lightblue;
+ font-size: 1.5rem; }
.ItemsDisplay .leftAlign {
text-align: left; }
-.ItemsDisplay .legend {
- background-color: #383A59; }
+.ItemsDisplay .altBorder {
+ border-bottom: 1px solid gray; }
diff --git a/src/components/Display/Display.scss b/src/components/Display/Display.scss
index 25bb331..8863842 100644
--- a/src/components/Display/Display.scss
+++ b/src/components/Display/Display.scss
@@ -6,22 +6,28 @@
}
.ItemsDisplay {
- $sideBorder: 1px dashed $tableBorderColor;
- border-right: $sideBorder;
- border-left: $sideBorder;
+ margin: 3rem auto;
+}
+
+.ItemsDisplay .legend {
+ background-color: $altBG;
+}
- padding: 1rem 0.5rem;
+.ItemsDisplay th {
+ font-size: 1.2rem;
}
.ItemsDisplay td {
text-align: center;
- border-bottom: 1px solid $labelUnderlineColor;
+ border-bottom: 1px solid $tableDefBorderColor;
+ font-size: 1.5rem;
}
.ItemsDisplay .leftAlign {
text-align: left;
}
-.ItemsDisplay .legend {
- background-color: $altBG;
+.ItemsDisplay .altBorder {
+ border-bottom: 1px solid $tableAltBorderColor;
}
+
diff --git a/src/components/Display/DisplayItem.js b/src/components/Display/DisplayItem.js
index dae87a3..768be2f 100644
--- a/src/components/Display/DisplayItem.js
+++ b/src/components/Display/DisplayItem.js
@@ -4,13 +4,6 @@ import "./Display.css";
const DisplayItem = (props) => {
const itemNumber = props.itemNumber;
const item = props.item;
- // const ID = props.ID;
- // const name = props.Model;
- // const desc = props.Description;
- // const QTY = props.Quantity;
- // const price = props.Price;
- // const discount = props.Discount;
- // const GST = props.GST;
return (
<tr>
@@ -23,18 +16,6 @@ const DisplayItem = (props) => {
<td>{item.GST}</td>
</tr>
);
- /*return (
- <ul className={"DisplayItem"}>
- <li className={"num"}>{itemNumber}</li>
-
- <li className={"text"}>{item.Model}</li>
- <li className={"text"}>{item.Description}</li>
- <li className={"num"}>{item.Quantity}</li>
- <li className={"num"}>{item.Price}</li>
- <li className={"num"}>{item.Discount}</li>
- <li className={"num"}>{item.GST}</li>
- </ul>
- );*/
}
export default DisplayItem;
diff --git a/src/components/Display/ItemsDisplay.js b/src/components/Display/ItemsDisplay.js
index 7026530..0545ef0 100644
--- a/src/components/Display/ItemsDisplay.js
+++ b/src/components/Display/ItemsDisplay.js
@@ -1,6 +1,7 @@
import React from "react";
import "./Display.css";
import DisplayItem from "./DisplayItem";
+import SummaryDisplayTR from "./SummaryDisplay";
const ItemsDisplay = (props) => {
const items = props.items;
@@ -27,37 +28,10 @@ const ItemsDisplay = (props) => {
);
}
)}
- </table>
- )
-
-
- /*return (
- <div className={"ItemsDisplay"}>
- <div className={"legend"}>
- <ul>
- <li className={"num"}>S. Num.</li>
- <li className={"text"}>Name</li>
- <li className={"text"}>Description</li>
- <li className={"num"}>Quantity</li>
- <li className={"num"}>Price</li>
- <li className={"num"}>Discount</li>
- <li className={"num"}>GST</li>
- </ul>
- </div>
- <div className={"items"}>
- {items.map(
- (item) => {
- itemNumber++
- return (
- <DisplayItem itemNumber={itemNumber} item={item}/>
- );
- }
- )}
- </div>
-
- </div>
- );*/
+ <SummaryDisplayTR items={props.items}/>
+ </table>
+ );
}
export default ItemsDisplay;
diff --git a/src/components/Display/SummaryDisplay.js b/src/components/Display/SummaryDisplay.js
new file mode 100644
index 0000000..8acddc9
--- /dev/null
+++ b/src/components/Display/SummaryDisplay.js
@@ -0,0 +1,37 @@
+import React from "react";
+import "./Display.css";
+
+const getSummary = (items) => {
+ let totalRawPrice = 0;
+ let totalQuantity = 0;
+ for (let i = 0; i < items.length; i++) {
+ totalRawPrice += items[i].Price;
+ totalQuantity += items[i].Quantity
+ }
+
+ return (
+ {
+ "TotalRawPrice": totalRawPrice,
+ "TotalQuantity": totalQuantity
+ }
+ );
+}
+
+const SummaryDisplayTR = (props) => {
+ const summary = getSummary(props.items);
+ console.log(summary)
+
+ return (
+ <tr>
+ <td>Total</td>
+ <td className={"altBorder"}></td>
+ <td className={"altBorder"}></td>
+ <td>{summary.TotalQuantity}</td>
+ <td>{summary.TotalRawPrice}</td>
+ <td className={"altBorder"}></td>
+ <td className={"altBorder"}></td>
+ </tr>
+ );
+}
+
+export default SummaryDisplayTR;
diff --git a/src/components/Form/AddNewItemForm.js b/src/components/Form/AddNewItemForm.js
index 07b3092..09536b1 100644
--- a/src/components/Form/AddNewItemForm.js
+++ b/src/components/Form/AddNewItemForm.js
@@ -25,15 +25,15 @@ const AddNewItemForm = (props) => {
// set description and price
// when item is entered
const setItemInfo = (itemName) => {
- for (let i = 0; i <= props.savedItems.length - 1; i++) {
- const mod = props.savedItems[i].Model.toLowerCase();
- const desc = props.savedItems[i].Description;
- const price = props.savedItems[i].Price;
+ for (let i = 0; i < props.savedItems.length - 1; i++) {
+ const mod = props.savedItems[i].Model.toLowerCase();
+ const desc = props.savedItems[i].Description;
+ const price = props.savedItems[i].Price;
- if (mod === itemName) {
- setItemDescValue(desc);
- setItemPriceValue(price);
- break;
+ if (mod === itemName) {
+ setItemDescValue(desc);
+ setItemPriceValue(price);
+ break;
}
}
}
@@ -56,7 +56,7 @@ const AddNewItemForm = (props) => {
"Model": itemNameValue,
"Description": itemDescValue,
"Quantity": parseInt(itemQtyValue),
- "Price": parseInt(itemPriceValue),
+ "Price": parseFloat(itemPriceValue),
"Discount": parseInt(itemDiscountValue),
"GST": parseInt(itemGSTValue)
};
@@ -105,7 +105,7 @@ const AddNewItemForm = (props) => {
</label>
<label>
- Price: <input type="number" min="1" value={itemPriceValue} onChange={
+ Price: <input type="number" min="1.00" step="0.001" value={itemPriceValue} onChange={
(event) => {
const value = event.target.value;
setItemPriceValue(value);
@@ -114,7 +114,7 @@ const AddNewItemForm = (props) => {
</label>
<label>
- Discount: <input type="number" min="0" value={itemDiscountValue} onChange={
+ Discount: <input type="number" min="0" step="0.001" value={itemDiscountValue} onChange={
(event) => {
const value = event.target.value;
setItemDiscountValue(value);
diff --git a/src/components/Form/Form.css b/src/components/Form/Form.css
index 9d46f62..cf9bc60 100644
--- a/src/components/Form/Form.css
+++ b/src/components/Form/Form.css
@@ -64,6 +64,17 @@ 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;
diff --git a/src/components/Form/Form.scss b/src/components/Form/Form.scss
index 74a5252..b11c9ab 100644
--- a/src/components/Form/Form.scss
+++ b/src/components/Form/Form.scss
@@ -61,6 +61,19 @@ 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;
diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss
index e3ffa68..21ef57c 100644
--- a/src/styles/_theme.scss
+++ b/src/styles/_theme.scss
@@ -25,7 +25,8 @@ $altLink: $altFG;
$defBorderColor: lightgreen;
$altBorderColor: #FF79C6;
-$tableBorderColor: lightblue;
+$tableDefBorderColor: lightblue;
+$tableAltBorderColor: gray;
$labelUnderlineColor: lightblue;
--
cgit v1.2.3