From 525241a92df846c0bbbe20960c1a520578f8189e Mon Sep 17 00:00:00 2001
From: AndriiSyrotenko <andrii.syrotenko.ua@gmail.com>
Date: Mon, 18 Dec 2023 19:17:34 +0000
Subject: [PATCH] Add confirmation before deleting chat and UI fix

---
 .../Pages/ConfirmationModal.razor             | 24 ++++++++++
 .../Pages/ConfirmationModal.razor.css         | 48 +++++++++++++++++++
 .../Pages/_Host.cshtml                        |  2 +
 ShoppingAssistantWebClient.Web/Program.cs     |  2 +
 .../Shared/MainLayout.razor                   |  2 +
 .../Shared/NavMenu.razor                      | 21 ++++++--
 .../Shared/NavMenu.razor.css                  | 28 ++++++++---
 .../ShoppingAssistantWebClient.Web.csproj     |  1 +
 ShoppingAssistantWebClient.Web/_Imports.razor |  3 ++
 9 files changed, 120 insertions(+), 11 deletions(-)
 create mode 100644 ShoppingAssistantWebClient.Web/Pages/ConfirmationModal.razor
 create mode 100644 ShoppingAssistantWebClient.Web/Pages/ConfirmationModal.razor.css

diff --git a/ShoppingAssistantWebClient.Web/Pages/ConfirmationModal.razor b/ShoppingAssistantWebClient.Web/Pages/ConfirmationModal.razor
new file mode 100644
index 0000000..e43a5bb
--- /dev/null
+++ b/ShoppingAssistantWebClient.Web/Pages/ConfirmationModal.razor
@@ -0,0 +1,24 @@
+<div class="modal fade show d-block" tabindex="-1" role="dialog">
+    <div class="modal-backdrop fade show" @onclick="Cancel"></div>
+    <div class="modal-dialog modal-dialog-centered modal-sm" style="z-index: 1050">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title medium-text">Are you sure you want to delete this chat?</h5>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-sm btn-yes" @onclick="ConfirmDelete">Yes</button>
+                <button type="button" class="btn btn-secondary btn-sm" @onclick="Cancel">No</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+@code {
+    [CascadingParameter] BlazoredModalInstance BlazoredModal { get; set; } = default!;
+
+    private async Task Close() => await BlazoredModal.CloseAsync(ModalResult.Ok(true));
+    private async Task ConfirmDelete() => await BlazoredModal.CloseAsync(ModalResult.Ok(true));
+    private async Task Cancel() => await BlazoredModal.CloseAsync(ModalResult.Cancel());
+
+}
\ No newline at end of file
diff --git a/ShoppingAssistantWebClient.Web/Pages/ConfirmationModal.razor.css b/ShoppingAssistantWebClient.Web/Pages/ConfirmationModal.razor.css
new file mode 100644
index 0000000..a5ffb15
--- /dev/null
+++ b/ShoppingAssistantWebClient.Web/Pages/ConfirmationModal.razor.css
@@ -0,0 +1,48 @@
+.modal-dialog.modal-sm {
+    max-width: 300px;
+}
+
+.medium-text {
+    font-size: 1rem;
+}
+
+.btn-sm {
+    font-size: 0.9rem;
+    padding: 6px 12px;
+}
+
+.btn-yes {
+    color: #FFFFFF;
+    background-color: #FF0000;
+}
+
+.btn:active {
+    transform: scale(0.95);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); 
+}
+
+.btn:focus {
+    outline: none !important;
+    box-shadow: none !important;
+}
+
+.modal-header, .modal-footer {
+    padding: 8px;
+}
+
+@media (max-width: 600px) {
+    .modal-dialog {
+        max-width: 100%;
+        margin: 10px auto;
+    }
+    .modal-content {
+        margin: 0;
+    }
+}
+
+
+.close {
+    background: none;
+    border: none;
+    outline: none;
+}
\ No newline at end of file
diff --git a/ShoppingAssistantWebClient.Web/Pages/_Host.cshtml b/ShoppingAssistantWebClient.Web/Pages/_Host.cshtml
index 5f51717..f9403ad 100644
--- a/ShoppingAssistantWebClient.Web/Pages/_Host.cshtml
+++ b/ShoppingAssistantWebClient.Web/Pages/_Host.cshtml
@@ -12,6 +12,8 @@
     <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
     <link href="css/site.css" rel="stylesheet" />
     <link href="ShoppingAssistantWebClient.Web.styles.css" rel="stylesheet" />
+    <link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
+    <link href="css/Settings.css" rel="stylesheet" />
     <link rel="icon" type="image/png" href="favicon.ico"/>
     <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
 </head>
diff --git a/ShoppingAssistantWebClient.Web/Program.cs b/ShoppingAssistantWebClient.Web/Program.cs
index 4809cc6..b6e5e62 100644
--- a/ShoppingAssistantWebClient.Web/Program.cs
+++ b/ShoppingAssistantWebClient.Web/Program.cs
@@ -1,3 +1,4 @@
+using Blazored.Modal;
 using GraphQL.Client.Http;
 using ShoppingAssistantWebClient.Web.Configurations;
 using ShoppingAssistantWebClient.Web.Data;
@@ -13,6 +14,7 @@ builder.Services.AddServerSideBlazor().AddCircuitOptions(options => { options.De
 builder.Services.AddSingleton<WeatherForecastService>();
 builder.Services.AddApiClient(builder.Configuration);
 builder.Services.AddSingleton<SearchService>();
+builder.Services.AddBlazoredModal();
 
 var app = builder.Build();
 
diff --git a/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor b/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor
index 2b9f5d4..f1d0e4f 100644
--- a/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor
+++ b/ShoppingAssistantWebClient.Web/Shared/MainLayout.razor
@@ -1,10 +1,12 @@
 @inherits LayoutComponentBase
 @using ShoppingAssistantWebClient.Web.Pages
+@using Blazored.Modal
 <PageTitle>CARTAID</PageTitle>
 <head>
     <link rel="stylesheet" href="css/MainLayout.css" />
 </head>
 
+<CascadingBlazoredModal/>
 <div class="page">
     <div class="sidebar-menu">
         <NavMenu/>
diff --git a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor
index e47d234..625f7bd 100644
--- a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor
+++ b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor
@@ -2,8 +2,10 @@
 @using System.Linq
 @using Microsoft.AspNetCore.Components
 @using Microsoft.JSInterop
+@using ShoppingAssistantWebClient.Web.Pages
 @inject NavigationManager Navigation
 @inject IJSRuntime JSRuntime;
+@inject IModalService Modal;
 
 <div id="leftframe" class="left_frame">
 
@@ -39,8 +41,10 @@
 
                         <section class="cont_wishlist @(selectedWishlistId == item.Id ? "selected_wishlist" : "")">
                             <div class="wishlist_name" @onclick="() => RedirectToPage(item.Id)">@item.Name</div>
-                            <img class="button_delete_chat" @onclick="() => DeleteWishlist(item.Id)" src="/images/icon_delete.svg" alt="Delete wishlist">
-                            <img class="button_open_card" @onclick="() => RedirectToCart(item.Id)" src="/images/icon_open_card.svg" alt="Card open">
+                            <div class="wishlist_buttons">
+                                <img class="button_delete_chat" @onclick="() => DeleteWishlist(item.Id)" src="/images/icon_delete.svg" alt="Delete wishlist">
+                                <img class="button_open_card" @onclick="() => RedirectToCart(item.Id)" src="/images/icon_open_card.svg" alt="Card open">
+                            </div>
                         </section>
                     }
                 }
@@ -175,8 +179,17 @@
     }
     private async void DeleteWishlist(string itemId) {
 
-        await DeleteWish(itemId);
+        var options = new ModalOptions
+        { 
+            UseCustomLayout = true 
+        };
 
+        var parameters = new ModalParameters();
+
+        var result = await Modal.Show<ConfirmationModal>("", parameters, options).Result;
+
+        if (!result.Cancelled)
+            await DeleteWish(itemId);
     }
 /*
     private int savedScrollTop = 0;
@@ -199,6 +212,4 @@
     }
 */
 
-
-
 }
\ No newline at end of file
diff --git a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css
index f055940..4505df3 100644
--- a/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css
+++ b/ShoppingAssistantWebClient.Web/Shared/NavMenu.razor.css
@@ -83,15 +83,17 @@
 .wishlist_name {
   padding-left: 0.7em;
   padding-right: 5em;
-  width: 10.5em;
+  width: 15.5em;
   white-space: nowrap;
   overflow: hidden;
   position: absolute;
   height: 2.5em;
   line-height: 2.5em;
   cursor: pointer;
+  z-index: 1;
 }
 
+
 .cont_wishlist {
   margin-top: 0.4375em;
   margin-bottom: 0.4375em;
@@ -100,7 +102,7 @@
   font-size: 1.1em;
   width: 100%;
   height: 2.5em;
-
+  position: relative;
 }
 
 .cont_wishlist:hover {
@@ -126,7 +128,7 @@
   font-size: 1.1em;
   width: 100%;
   height: 2.5em;
-    background-color: #e6e6e6;
+  background-color: #e6e6e6;
   transition: 0.2s;
 
 }
@@ -172,11 +174,27 @@
   margin-top: 0.55em;
   margin-right: 1em;
   float: right;
-  visibility: hidden;
   height: 1.4em;
   width: 1.5em;
 }
 
+
+.wishlist_buttons {
+    display: none;
+    position: absolute;
+    right: 0;
+    width: 4.9em;
+    height: 2.5em;
+    background-color: #e6e6e6;
+    border-radius: 0.6em;
+    z-index: 10;
+}
+
+.cont_wishlist:hover .wishlist_buttons
+{
+  display: block;
+}
+
 .wishlist_names::-webkit-scrollbar {
   border-radius: 20px;
   width: 0.2em;
@@ -184,9 +202,7 @@
 
 .wishlist_names::-webkit-scrollbar-thumb {
   background-color: #0052CC;
-  /* Колір позиції покажчика */
   border-radius: 10px;
-  /* Закруглення країв позиції покажчика */
   width: 0.2em;
 }
 
diff --git a/ShoppingAssistantWebClient.Web/ShoppingAssistantWebClient.Web.csproj b/ShoppingAssistantWebClient.Web/ShoppingAssistantWebClient.Web.csproj
index 7ca3e50..ae61c5d 100644
--- a/ShoppingAssistantWebClient.Web/ShoppingAssistantWebClient.Web.csproj
+++ b/ShoppingAssistantWebClient.Web/ShoppingAssistantWebClient.Web.csproj
@@ -7,6 +7,7 @@
   </PropertyGroup>
 
   <ItemGroup>
+    <PackageReference Include="Blazored.Modal" Version="7.1.0" />
     <PackageReference Include="GraphQL.Client" Version="6.0.1" />
     <PackageReference Include="GraphQL.Client.Serializer.Newtonsoft" Version="6.0.1" />
     <PackageReference Include="Newtonsoft.Json" Version="13.0.3" />
diff --git a/ShoppingAssistantWebClient.Web/_Imports.razor b/ShoppingAssistantWebClient.Web/_Imports.razor
index c3332a0..0b72bc0 100644
--- a/ShoppingAssistantWebClient.Web/_Imports.razor
+++ b/ShoppingAssistantWebClient.Web/_Imports.razor
@@ -8,3 +8,6 @@
 @using Microsoft.JSInterop
 @using ShoppingAssistantWebClient.Web
 @using ShoppingAssistantWebClient.Web.Shared
+@using Blazored
+@using Blazored.Modal
+@using Blazored.Modal.Services
\ No newline at end of file