From 4e880f6efe86c0b7e86e587e08eeee0f594417d5 Mon Sep 17 00:00:00 2001
From: MikunoNaka <bokuwakanojogahoshii@yahoo.com>
Date: Sat, 17 Apr 2021 21:06:17 +0530
Subject: color coded ItemsDisplay
---
src/components/BillingPage.js | 2 +-
src/components/Display/Display.css | 10 ++++++++--
src/components/Display/Display.scss | 13 +++++++++++--
src/components/Display/DisplayItem.js | 6 +++---
src/components/Display/ItemsDisplay.js | 5 +++--
src/components/Display/SummaryDisplay.js | 12 ++++++------
6 files changed, 32 insertions(+), 16 deletions(-)
(limited to 'src/components')
diff --git a/src/components/BillingPage.js b/src/components/BillingPage.js
index 698f095..a47616f 100644
--- a/src/components/BillingPage.js
+++ b/src/components/BillingPage.js
@@ -45,7 +45,7 @@ const BillingPage = () => {
return (
<div>
<AddNewItemForm savedItems={sampleData} addItem={getItems} defGSTValue={defGSTValue}/>
- <ItemsDisplay items={items}/>
+ <ItemsDisplay items={items} defGSTValue={defGSTValue}/>
</div>
);
}
diff --git a/src/components/Display/Display.css b/src/components/Display/Display.css
index 1045956..74aa31e 100644
--- a/src/components/Display/Display.css
+++ b/src/components/Display/Display.css
@@ -30,8 +30,14 @@ $defShadow: 0px 0px 4px #232627;
border-bottom: 1px solid lightblue;
font-size: 1.5rem; }
+.ItemsDisplay .disabledBorder {
+ border-bottom: 1px solid gray; }
+
+.ItemsDisplay .warningBorder {
+ border-bottom: 1px solid red; }
+
.ItemsDisplay .leftAlign {
text-align: left; }
-.ItemsDisplay .altBorder {
- border-bottom: 1px solid gray; }
+.SummaryDisplayTR {
+ color: #FF79C6; }
diff --git a/src/components/Display/Display.scss b/src/components/Display/Display.scss
index 8863842..ec6cc65 100644
--- a/src/components/Display/Display.scss
+++ b/src/components/Display/Display.scss
@@ -23,11 +23,20 @@
font-size: 1.5rem;
}
+.ItemsDisplay .disabledBorder {
+ border-bottom: 1px solid $tableDisabledBorderColor;
+}
+
+.ItemsDisplay .warningBorder {
+ border-bottom: 1px solid $warningBorderColor;
+}
+
.ItemsDisplay .leftAlign {
text-align: left;
}
-.ItemsDisplay .altBorder {
- border-bottom: 1px solid $tableAltBorderColor;
+.SummaryDisplayTR {
+ color: $altFG;
}
+
diff --git a/src/components/Display/DisplayItem.js b/src/components/Display/DisplayItem.js
index 768be2f..849bfc5 100644
--- a/src/components/Display/DisplayItem.js
+++ b/src/components/Display/DisplayItem.js
@@ -9,11 +9,11 @@ const DisplayItem = (props) => {
<tr>
<td>{itemNumber}</td>
<td className={"leftAlign"}>{item.Model}</td>
- <td className={"leftAlign"}>{item.Description}</td>
+ <td className={item.Description === "" ? "leftAlign disabledBorder" : "leftAlign"}>{item.Description}</td>
<td>{item.Quantity}</td>
+ <td className={item.Discount === 0 ? "disabledBorder" : ""}>{item.Discount}</td>
+ <td className={item.GST === props.defGSTValue ? "" : "warningBorder"}>{item.GST}</td>
<td>{item.Price}</td>
- <td>{item.Discount}</td>
- <td>{item.GST}</td>
</tr>
);
}
diff --git a/src/components/Display/ItemsDisplay.js b/src/components/Display/ItemsDisplay.js
index 0545ef0..599dd8e 100644
--- a/src/components/Display/ItemsDisplay.js
+++ b/src/components/Display/ItemsDisplay.js
@@ -7,6 +7,7 @@ const ItemsDisplay = (props) => {
const items = props.items;
let itemNumber = 0;
+ // TODO: Add HSN Support
return (
<table className={"ItemsDisplay"}>
@@ -15,16 +16,16 @@ const ItemsDisplay = (props) => {
<th className={"leftAlign"}>Item</th>
<th className={"leftAlign"}>Description</th>
<th>Quantity(NOS)</th>
- <th>Price</th>
<th>Discount(%)</th>
<th>GST(%)</th>
+ <th>Price</th>
</tr>
{items.map(
(item) => {
itemNumber++
return (
- <DisplayItem itemNumber={itemNumber} item={item}/>
+ <DisplayItem itemNumber={itemNumber} item={item} defGSTValue={props.defGSTValue}/>
);
}
)}
diff --git a/src/components/Display/SummaryDisplay.js b/src/components/Display/SummaryDisplay.js
index 8acddc9..ebc382c 100644
--- a/src/components/Display/SummaryDisplay.js
+++ b/src/components/Display/SummaryDisplay.js
@@ -4,6 +4,7 @@ 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
@@ -19,17 +20,16 @@ const getSummary = (items) => {
const SummaryDisplayTR = (props) => {
const summary = getSummary(props.items);
- console.log(summary)
return (
- <tr>
+ <tr className={"SummaryDisplayTR"}>
<td>Total</td>
- <td className={"altBorder"}></td>
- <td className={"altBorder"}></td>
+ <td className={"disabledBorder"}></td>
+ <td className={"disabledBorder"}></td>
<td>{summary.TotalQuantity}</td>
+ <td className={"disabledBorder"}></td>
+ <td className={"disabledBorder"}></td>
<td>{summary.TotalRawPrice}</td>
- <td className={"altBorder"}></td>
- <td className={"altBorder"}></td>
</tr>
);
}
--
cgit v1.2.3