Merge pull request #28 from Shchoholiev/SA-217-deliting-chat-confirmation

Add confirmation before deleting chat and UI fix

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());
+
+}

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

ShoppingAssistantWebClient.Web/Program.cs

@@ -1,3 +1,4 @@
+using Blazored.Modal;
 using GraphQL.Client.Http;
 using ShoppingAssistantWebClient.Web.Configurations;
 using ShoppingAssistantWebClient.Web.Data;

ShoppingAssistantWebClient.Web/Shared/NavMenu.razor

@@ -41,8 +41,10 @@
 
                         <section class="cont_wishlist @(selectedWishlistId == item.Id ? "selected_wishlist" : "")">
                             <div class="wishlist_name" @onclick="() => RedirectToPage(item.Id)">@item.Name</div>
+                            <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>
                     }
                 }
@@ -188,8 +190,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;
@@ -212,6 +223,4 @@
     }
 */
 
-
-
 }

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