From ee77e57189a6b0375e840b386754973a376dc089 Mon Sep 17 00:00:00 2001
From: MikunoNaka <bokuwakanojogahoshii@yahoo.com>
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/Form/AddNewItemForm.js | 22 +++++++++++-----------
 src/components/Form/Form.css          | 11 +++++++++++
 src/components/Form/Form.scss         | 13 +++++++++++++
 3 files changed, 35 insertions(+), 11 deletions(-)

(limited to 'src/components/Form')

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;
-- 
cgit v1.2.3