Add confirmation before deleting chat and UI fix

2025-04-03 16:19:48 +00:00 · 2023-12-18 19:17:34 +00:00 · 2023-12-18 19:17:34 +00:00 · 525241a92d
commit 525241a92d
parent 1f8b50458e
9 changed files with 120 additions and 11 deletions
--- a/ShoppingAssistantWebClient.Web/Pages/ConfirmationModal.razor
+++ 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());
+
+}
--- a/ShoppingAssistantWebClient.Web/Pages/ConfirmationModal.razor.css
+++ 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;
+}
--- 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>
--- 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();

--- 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/>
--- 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 @@
    }
 */

-
-
 }
--- 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;
 }

--- 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" />
--- 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