add delete item function

Blazor/Blazor/App.razor

@@ -1,12 +1,14 @@
-<Router AppAssembly="@typeof(App).Assembly">
+<CascadingBlazoredModal>
-    <Found Context="routeData">
+    <Router AppAssembly="@typeof(App).Assembly">
-        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+        <Found Context="routeData">
-        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
+            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
-    </Found>
+            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
-    <NotFound>
+        </Found>
-        <PageTitle>Not found</PageTitle>
+        <NotFound>
-        <LayoutView Layout="@typeof(MainLayout)">
+            <PageTitle>Not found</PageTitle>
-            <p role="alert">Sorry, there's nothing at this address.</p>
+            <LayoutView Layout="@typeof(MainLayout)">
-        </LayoutView>
+                <p role="alert">Sorry, there's nothing at this address.</p>
-    </NotFound>
+            </LayoutView>
-</Router>
+        </NotFound>
+    </Router>
+</CascadingBlazoredModal>

Blazor/Blazor/Blazor.csproj

@@ -8,6 +8,7 @@
 
   <ItemGroup>
     <PackageReference Include="Blazored.LocalStorage" Version="4.2.0" />
+    <PackageReference Include="Blazored.Modal" Version="7.1.0" />
     <PackageReference Include="Blazorise.Bootstrap" Version="1.1.2" />
     <PackageReference Include="Blazorise.DataGrid" Version="1.1.2" />
     <PackageReference Include="Blazorise.Icons.FontAwesome" Version="1.1.2" />

Blazor/Blazor/Factories/ItemFactory.cs

@@ -0,0 +1,48 @@
+using Blazor.Models;
+
+namespace Blazor.Factories
+{
+    public static class ItemFactory
+    {
+        public static ItemModel ToModel(Item item, byte[] imageContent)
+        {
+            return new ItemModel
+            {
+                Id = item.Id,
+                DisplayName = item.DisplayName,
+                Name = item.Name,
+                RepairWith = item.RepairWith,
+                EnchantCategories = item.EnchantCategories,
+                MaxDurability = item.MaxDurability,
+                StackSize = item.StackSize,
+                ImageContent = imageContent
+            };
+        }
+
+        public static Item Create(ItemModel model)
+        {
+            return new Item
+            {
+                Id = model.Id,
+                DisplayName = model.DisplayName,
+                Name = model.Name,
+                RepairWith = model.RepairWith,
+                EnchantCategories = model.EnchantCategories,
+                MaxDurability = model.MaxDurability,
+                StackSize = model.StackSize,
+                CreatedDate = DateTime.Now
+            };
+        }
+
+        public static void Update(Item item, ItemModel model)
+        {
+            item.DisplayName = model.DisplayName;
+            item.Name = model.Name;
+            item.RepairWith = model.RepairWith;
+            item.EnchantCategories = model.EnchantCategories;
+            item.MaxDurability = model.MaxDurability;
+            item.StackSize = model.StackSize;
+            item.UpdatedDate = DateTime.Now;
+        }
+    }
+}

Blazor/Blazor/Modals/DeleteConfirmation.razor

@@ -0,0 +1,10 @@
+<div class="simple-form">
+    
+    <p>
+        Are you sure you want to delete @item.DisplayName ?
+    </p>
+
+    <button @onclick="ConfirmDelete" class="btn btn-primary">Delete</button>
+
+    <button @onclick="Cancel" class="btn btn-secondary">Cancel</button>
+</div>

Blazor/Blazor/Modals/DeleteConfirmation.razor.cs

@@ -0,0 +1,38 @@
+using Blazor.Models;
+using Blazor.Services;
+using Blazored.Modal;
+using Blazored.Modal.Services;
+using Microsoft.AspNetCore.Components;
+
+namespace Blazor.Modals
+{
+    public partial class DeleteConfirmation
+    {
+        [CascadingParameter]
+        public BlazoredModalInstance ModalInstance { get; set; }
+
+        [Inject]
+        public IDataService DataService { get; set; }
+
+        [Parameter]
+        public int Id { get; set; }
+
+        private Item item = new Item();
+
+        protected override async Task OnInitializedAsync()
+        {
+            // Get the item
+            item = await DataService.GetById(Id);
+        }
+
+        void ConfirmDelete()
+        {
+            ModalInstance.CloseAsync(ModalResult.Ok(true));
+        }
+
+        void Cancel()
+        {
+            ModalInstance.CancelAsync();
+        }
+    }
+}

Blazor/Blazor/Pages/Edit.razor.cs

@@ -1,4 +1,5 @@
-using Blazor.Models;
+using Blazor.Factories;
+using Blazor.Models;
 using Blazor.Services;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Forms;
@@ -50,17 +51,7 @@ namespace Blazor.Pages
             }
 
             // Set the model with the item
-            itemModel = new ItemModel
+            itemModel = ItemFactory.ToModel(item, fileContent);
-            {
-                Id = item.Id,
-                DisplayName = item.DisplayName,
-                Name = item.Name,
-                RepairWith = item.RepairWith,
-                EnchantCategories = item.EnchantCategories,
-                MaxDurability = item.MaxDurability,
-                StackSize = item.StackSize,
-                ImageContent = fileContent
-            };
         }
 
         private async void HandleValidSubmit()

Blazor/Blazor/Pages/List.razor

@@ -28,11 +28,6 @@
                 <img src="images/default.png" class="img-thumbnail" title="@context.DisplayName" alt="@context.DisplayName" style="max-width: 150px"/>
             }
         </DisplayTemplate>
-    </DataGridColumn>
-     <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="Action">
-        <DisplayTemplate>
-            <a href="Edit/@(context.Id)" class="btn btn-primary"><i class="fa fa-edit"></i> Editer</a>
-        </DisplayTemplate>
     </DataGridColumn>
     <DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" Caption="Display name" />
     <DataGridColumn TItem="Item" Field="@nameof(Item.StackSize)" Caption="Stack size" />
@@ -48,4 +43,10 @@
         </DisplayTemplate>
     </DataGridColumn>
     <DataGridColumn TItem="Item" Field="@nameof(Item.CreatedDate)" Caption="Created date" DisplayFormat="{0:d}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" />
+    <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="Action">
+        <DisplayTemplate>
+            <a href="Edit/@(context.Id)" class="btn btn-primary"><i class="fa fa-edit"></i> Editer</a>
+            <button type="button" class="btn btn-primary" @onclick="() => OnDelete(context.Id)"><i class="fa fa-trash"></i> Supprimer</button>
+        </DisplayTemplate>
+    </DataGridColumn>
 </DataGrid>

Blazor/Blazor/Pages/List.razor.cs

@@ -1,6 +1,9 @@
-using Blazor.Models;
+using Blazor.Modals;
+using Blazor.Models;
 using Blazor.Services;
 using Blazored.LocalStorage;
+using Blazored.Modal;
+using Blazored.Modal.Services;
 using Blazorise.DataGrid;
 using Microsoft.AspNetCore.Components;
 
@@ -21,6 +24,9 @@ namespace Blazor.Pages
         [Inject]
         public NavigationManager NavigationManager { get; set; }
 
+        [CascadingParameter]
+        public IModalService Modal { get; set; }
+
         private async Task OnReadData(DataGridReadDataEventArgs<Item> e)
         {
             if (e.CancellationToken.IsCancellationRequested)
@@ -34,5 +40,24 @@ namespace Blazor.Pages
                 totalItem = await DataService.Count();
             }
         }
+
+        private async void OnDelete(int id)
+        {
+            var parameters = new ModalParameters();
+            parameters.Add(nameof(Item.Id), id);
+
+            var modal = Modal.Show<DeleteConfirmation>("Delete Confirmation", parameters);
+            var result = await modal.Result;
+
+            if (result.Cancelled)
+            {
+                return;
+            }
+
+            await DataService.Delete(id);
+
+            // Reload the page
+            NavigationManager.NavigateTo("list", true);
+        }
     }
 }

Blazor/Blazor/Pages/_Layout.cshtml

@@ -11,6 +11,10 @@
     <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
     <link href="css/site.css" rel="stylesheet" />
     <link href="Blazor.styles.css" rel="stylesheet" />
+    <link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
+    <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
+    <link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />
     <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
 </head>
 <body>
@@ -28,10 +32,7 @@
     </div>
 
     <script src="_framework/blazor.server.js"></script>
+    <script src="_content/Blazored.Modal/blazored.modal.js"></script>
     
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
-    <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
-    <link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />
-
 </body>
 </html>

Blazor/Blazor/Program.cs

@@ -6,6 +6,7 @@ using Blazorise.Bootstrap;
 using Blazorise.Icons.FontAwesome;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
+using Blazored.Modal;
 
 var builder = WebApplication.CreateBuilder(args);
 
@@ -23,6 +24,8 @@ builder.Services
 builder.Services.AddBlazoredLocalStorage();
 builder.Services.AddScoped<IDataService, DataLocalService>();
 
+builder.Services.AddBlazoredModal();
+
 var app = builder.Build();
 
 // Configure the HTTP request pipeline.

Blazor/Blazor/Services/DataLocalService.cs

@@ -1,4 +1,5 @@
-using Blazor.Models;
+using Blazor.Factories;
+using Blazor.Models;
 using Blazored.LocalStorage;
 using Microsoft.AspNetCore.Components;
 
@@ -32,17 +33,7 @@ namespace Blazor.Services
             model.Id = currentData.Max(s => s.Id) + 1;
 
             // Add the item to the current data
-            currentData.Add(new Item
+            currentData.Add(ItemFactory.Create(model));
-            {
-                Id = model.Id,
-                DisplayName = model.DisplayName,
-                Name = model.Name,
-                RepairWith = model.RepairWith,
-                EnchantCategories = model.EnchantCategories,
-                MaxDurability = model.MaxDurability,
-                StackSize = model.StackSize,
-                CreatedDate = DateTime.Now
-            });
 
             // Save the image
             var imagePathInfo = new DirectoryInfo($"{_webHostEnvironment.WebRootPath}/images");
@@ -142,13 +133,31 @@ namespace Blazor.Services
             await File.WriteAllBytesAsync(fileName.FullName, model.ImageContent);
 
             // Modify the content of the item
-            item.DisplayName = model.DisplayName;
+            ItemFactory.Update(item, model);
-            item.Name = model.Name;
+
-            item.RepairWith = model.RepairWith;
+            // Save the data
-            item.EnchantCategories = model.EnchantCategories;
+            await _localStorage.SetItemAsync("data", currentData);
-            item.MaxDurability = model.MaxDurability;
+        }
-            item.StackSize = model.StackSize;
+
-            item.UpdatedDate = DateTime.Now;
+        public async Task Delete(int id)
+        {
+            // Get the current data
+            var currentData = await _localStorage.GetItemAsync<List<Item>>("data");
+
+            // Get the item int the list
+            var item = currentData.FirstOrDefault(w => w.Id == id);
+
+            // Delete item in
+            currentData.Remove(item);
+
+            // Delete the image
+            var imagePathInfo = new DirectoryInfo($"{_webHostEnvironment.WebRootPath}/images");
+            var fileName = new FileInfo($"{imagePathInfo}/{item.Name}.png");
+
+            if (fileName.Exists)
+            {
+                File.Delete(fileName.FullName);
+            }
 
             // Save the data
             await _localStorage.SetItemAsync("data", currentData);

Blazor/Blazor/Services/IDataService.cs

@@ -13,5 +13,7 @@ namespace Blazor.Services
         Task<Item> GetById(int id);
 
         Task Update(int id, ItemModel model);
+
+        Task Delete(int id);
     }
 }

Blazor/Blazor/_Imports.razor

@@ -9,3 +9,5 @@
 @using Blazor
 @using Blazor.Shared
 @using Blazorise.DataGrid
+@using Blazored.Modal
+@using Blazored.Modal.Services