added a way to see the total cost and number of items in ItemsDisplay

10 files changed, 115 insertions, 79 deletions

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;