diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/BillingPage.js | 1 | ||||
| -rw-r--r-- | src/components/Display/Display.css | 33 | ||||
| -rw-r--r-- | src/components/Display/Display.scss | 27 | ||||
| -rw-r--r-- | src/components/Display/DisplayItem.js | 40 | ||||
| -rw-r--r-- | src/components/Display/ItemsDisplay.js | 66 | ||||
| -rw-r--r-- | src/components/Form/AddNewItemForm.js | 4 |
6 files changed, 147 insertions, 24 deletions
diff --git a/src/components/BillingPage.js b/src/components/BillingPage.js index 0726f3c..bb1330f 100644 --- a/src/components/BillingPage.js +++ b/src/components/BillingPage.js @@ -33,7 +33,6 @@ const BillingPage = () => { ); }; - console.log(items) return ( <div> <AddNewItemForm savedItems={sampleData} addItem={getItems} defGSTValue={defGSTValue}/> diff --git a/src/components/Display/Display.css b/src/components/Display/Display.css index 1b89173..a3bc406 100644 --- a/src/components/Display/Display.css +++ b/src/components/Display/Display.css @@ -1,3 +1,32 @@ +@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap"); +/* Experimental color scheme */ +/* light theme */ +/* +$defBG: #FFFFFF; +$altBG: lightgray; +$defFG: #000000; +$altFG: #232627; +$defLink: brown; +$altLink: brown; + +$defShadow: 0px 0px 4px #232627; +*/ +/* Inspired by Dracula */ +.ItemsDisplay, +.ItemsDisplay table { + width: 100%; } + .ItemsDisplay { - margin-top: 3rem; - margin-bottom: 3rem; } + border-right: 1px dashed lightblue; + border-left: 1px dashed lightblue; + padding: 1rem 0.5rem; } + +.ItemsDisplay td { + text-align: center; + border-bottom: 1px solid lightblue; } + +.ItemsDisplay .leftAlign { + text-align: left; } + +.ItemsDisplay .legend { + background-color: #383A59; } diff --git a/src/components/Display/Display.scss b/src/components/Display/Display.scss index e3d8b7c..25bb331 100644 --- a/src/components/Display/Display.scss +++ b/src/components/Display/Display.scss @@ -1,6 +1,27 @@ +@import "../../styles/theme"; + +.ItemsDisplay, +.ItemsDisplay table { + width: 100%; +} + .ItemsDisplay { - margin-top: 3rem; - margin-bottom: 3rem; + $sideBorder: 1px dashed $tableBorderColor; + border-right: $sideBorder; + border-left: $sideBorder; + + padding: 1rem 0.5rem; +} + +.ItemsDisplay td { + text-align: center; + border-bottom: 1px solid $labelUnderlineColor; +} + +.ItemsDisplay .leftAlign { + text-align: left; +} - +.ItemsDisplay .legend { + background-color: $altBG; } diff --git a/src/components/Display/DisplayItem.js b/src/components/Display/DisplayItem.js new file mode 100644 index 0000000..dae87a3 --- /dev/null +++ b/src/components/Display/DisplayItem.js @@ -0,0 +1,40 @@ +import React from "react"; +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> + <td>{itemNumber}</td> + <td className={"leftAlign"}>{item.Model}</td> + <td className={"leftAlign"}>{item.Description}</td> + <td>{item.Quantity}</td> + <td>{item.Price}</td> + <td>{item.Discount}</td> + <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 766d16f..7026530 100644 --- a/src/components/Display/ItemsDisplay.js +++ b/src/components/Display/ItemsDisplay.js @@ -1,29 +1,63 @@ import React from "react"; import "./Display.css"; +import DisplayItem from "./DisplayItem"; const ItemsDisplay = (props) => { const items = props.items; + let itemNumber = 0; + return ( - <div className={"ItemsDisplay"}> - <ol> - {items.map( (item) => { + <table className={"ItemsDisplay"}> + <tr className="legend"> + <th>S. Num</th> + <th className={"leftAlign"}>Item</th> + <th className={"leftAlign"}>Description</th> + <th>Quantity(NOS)</th> + <th>Price</th> + <th>Discount(%)</th> + <th>GST(%)</th> + </tr> + + {items.map( + (item) => { + itemNumber++ return ( - <li> - <ul> - <li key={item.Model}>{item.Model}</li> - <li key={item.Description}>{item.Description}</li> - <li key={item.Quantity}>{item.Quantity}</li> - <li key={item.Price}>{item.Price}</li> - <li key={item.Discount}>{item.Discount}</li> - <li key={item.GST}>{item.GST}</li> - </ul> - </li> + <DisplayItem itemNumber={itemNumber} item={item}/> ); - })} - </ol> + } + )} + </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> - ); + );*/ } export default ItemsDisplay; diff --git a/src/components/Form/AddNewItemForm.js b/src/components/Form/AddNewItemForm.js index 52a5db7..07b3092 100644 --- a/src/components/Form/AddNewItemForm.js +++ b/src/components/Form/AddNewItemForm.js @@ -41,8 +41,8 @@ const AddNewItemForm = (props) => { const resetAllValues = () => { setItemNameValue(""); setItemDescValue(""); - setItemQtyValue(0); - setItemPriceValue(0); + setItemQtyValue(1); + setItemPriceValue(1); setItemDiscountValue(0); setItemGSTValue(props.defGSTValue); } |