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

5 files changed, 65 insertions, 62 deletions

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;