From 05293e0db8f2ed2c50927db1fff8c6f4b159b125 Mon Sep 17 00:00:00 2001
From: Kira <iam@kirajiroux.com>
Date: Wed, 14 Sep 2022 13:56:26 -0700
Subject: [PATCH] Toggled visibility for the update button; had trouble with
 the class name being too long? "update-quantity" does not work whereas
 "update-qty" does? Alright.

---
 ShopOnline.Web/Pages/ShoppingCart.razor         |  5 +++--
 ShopOnline.Web/Pages/ShoppingCart.razor.css     |  4 ++++
 ShopOnline.Web/Pages/ShoppingCartBase.cs        | 17 +++++++++++++++++
 ShopOnline.Web/wwwroot/index.html               |  1 +
 .../wwwroot/js/ShoppingCartFunctions.js         | 11 +++++++++++
 5 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 ShopOnline.Web/Pages/ShoppingCart.razor.css
 create mode 100644 ShopOnline.Web/wwwroot/js/ShoppingCartFunctions.js

diff --git a/ShopOnline.Web/Pages/ShoppingCart.razor b/ShopOnline.Web/Pages/ShoppingCart.razor
index 86c70ac..4f0333f 100644
--- a/ShopOnline.Web/Pages/ShoppingCart.razor
+++ b/ShopOnline.Web/Pages/ShoppingCart.razor
@@ -20,8 +20,9 @@ else {
                         <h5>@item.ProductName</h5>
                         <div class="mb-4">@item.ProductDescription</div>
                         <span>Price: <b>@item.Price.ToString("C")</b>
-                            <input type="number" @bind="@item.Quantity"/>
-                            <button class="btn btn-info btn-sm"
+                            <input @oninput = "() => UpdateQuantity_Input(item.Id)" 
+                                type="number" @bind="@item.Quantity"/>
+                            <button data-itemId="@item.Id" class="btn btn-info btn-sm update-qty"
                                 @onclick="(()=> UpdateQuantityCartItem_Click(item.Id, item.Quantity))"
                             >Update Quantity</button>
                         </span>
diff --git a/ShopOnline.Web/Pages/ShoppingCart.razor.css b/ShopOnline.Web/Pages/ShoppingCart.razor.css
new file mode 100644
index 0000000..4526ba5
--- /dev/null
+++ b/ShopOnline.Web/Pages/ShoppingCart.razor.css
@@ -0,0 +1,4 @@
+.update-qty{
+    display: none;
+    background-color: green;
+}
\ No newline at end of file
diff --git a/ShopOnline.Web/Pages/ShoppingCartBase.cs b/ShopOnline.Web/Pages/ShoppingCartBase.cs
index e6cd164..055cb01 100644
--- a/ShopOnline.Web/Pages/ShoppingCartBase.cs
+++ b/ShopOnline.Web/Pages/ShoppingCartBase.cs
@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
 using ShopOnline.Models.Dtos;
 using ShopOnline.Web.Services.Contracts;
 
@@ -6,6 +7,9 @@ namespace ShopOnline.Web.Pages
 {
     public class ShoppingCartBase:ComponentBase
     {
+        [Inject]
+        public IJSRuntime Js { get; set; }
+
         [Inject]
         public IShoppingCartService ShoppingCartService { get; set; }
 
@@ -54,6 +58,8 @@ namespace ShopOnline.Web.Pages
 
                     UpdateItemTotalPrice(returnedUpdateItemDto);
                     CalculateCartSummaryTotals();
+                    await MakeUpdateQuantityButtonVisible(id, false);
+
                 }
                 else
                 {
@@ -73,6 +79,17 @@ namespace ShopOnline.Web.Pages
             }
         }
 
+        protected async Task UpdateQuantity_Input(int id)
+        {
+            await MakeUpdateQuantityButtonVisible(id, true);
+        }
+
+        private async Task MakeUpdateQuantityButtonVisible(int id, bool visible)
+        {
+            await Js.InvokeVoidAsync("MakeUpdateQuantityButtonVisible", id, visible);
+
+        }
+
         private void UpdateItemTotalPrice(CartItemDto cartItemDto)
         {
             var item = GetCartItem(cartItemDto.Id);
diff --git a/ShopOnline.Web/wwwroot/index.html b/ShopOnline.Web/wwwroot/index.html
index 18692b1..266ef96 100644
--- a/ShopOnline.Web/wwwroot/index.html
+++ b/ShopOnline.Web/wwwroot/index.html
@@ -19,6 +19,7 @@
         <a href="" class="reload">Reload</a>
         <a class="dismiss">🗙</a>
     </div>
+    <script src="js/ShoppingCartFunctions.js"></script>
     <script src="_framework/blazor.webassembly.js"></script>
 </body>
 
diff --git a/ShopOnline.Web/wwwroot/js/ShoppingCartFunctions.js b/ShopOnline.Web/wwwroot/js/ShoppingCartFunctions.js
new file mode 100644
index 0000000..5e376f5
--- /dev/null
+++ b/ShopOnline.Web/wwwroot/js/ShoppingCartFunctions.js
@@ -0,0 +1,11 @@
+function MakeUpdateQuantityButtonVisible(id, visible)
+{
+    const updateQuantityButton = document.querySelector("button[data-itemId='" + id + "']");
+
+    if (visible == true) {
+        updateQuantityButton.style.display = "inline-block";
+    }
+    else {
+        updateQuantityButton.style.display = "none";
+    }
+}
\ No newline at end of file