From ee77e57189a6b0375e840b386754973a376dc089 Mon Sep 17 00:00:00 2001 From: MikunoNaka 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 +++++++++++ 9 files changed, 113 insertions(+), 78 deletions(-) create mode 100644 src/components/Display/SummaryDisplay.js (limited to 'src/components') 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 (
-
); 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 ( @@ -23,18 +16,6 @@ const DisplayItem = (props) => { {item.GST} ); - /*return ( - - );*/ } 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) => { ); } )} - - ) - - - /*return ( -
-
-
    -
  • S. Num.
    • -
  • Name
    • -
  • Description
    • -
  • Quantity
    • -
  • Price
    • -
  • Discount
    • -
  • GST
    • -
-
-
- {items.map( - (item) => { - itemNumber++ - return ( - - ); - } - )} -
- -
- );*/ + + + ); } 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 ( + + Total + + + {summary.TotalQuantity} + {summary.TotalRawPrice} + + + + ); +} + +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) => {