Add delete item

ValblazeProject/App.razor

@@ -1,8 +1,10 @@
-<Router AppAssembly="@typeof(Program).Assembly">
-    <Found Context="routeData">
-        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
-    </Found>
-    <NotFound>
-        <p>Sorry, there's nothing at this address.</p>
-    </NotFound>
-</Router>
+<CascadingBlazoredModal>
+    <Router AppAssembly="@typeof(Program).Assembly">
+        <Found Context="routeData">
+            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+        </Found>
+        <NotFound>
+            <p>Sorry, there's nothing at this address.</p>
+        </NotFound>
+    </Router>
+</CascadingBlazoredModal>

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

ValblazeProject/Modals/DeleteConfirmation.razor.cs

@@ -0,0 +1,38 @@
+using Blazored.Modal.Services;
+using Blazored.Modal;
+using Microsoft.AspNetCore.Components;
+using ValblazeProject.Models;
+using ValblazeProject.Services;
+
+namespace ValblazeProject.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();
+        }
+    }
+}

ValblazeProject/Pages/ExampleTabSet.razor

@@ -0,0 +1,28 @@
+@page "/example-tab-set"
+
+<TabSet>
+    <Tab Title="First tab">
+        <h4>Greetings from the first tab!</h4>
+
+        <label>
+            <input type="checkbox" @bind="showThirdTab" />
+            Toggle third tab
+        </label>
+    </Tab>
+
+    <Tab Title="Second tab">
+        <h4>Hello from the second tab!</h4>
+    </Tab>
+
+    @if (showThirdTab)
+    {
+            <Tab Title="Third tab">
+                <h4>Welcome to the disappearing third tab!</h4>
+                <p>Toggle this tab from the first tab.</p>
+            </Tab>
+    }
+</TabSet>
+
+@code {
+    private bool showThirdTab;
+}

ValblazeProject/Pages/List.razor

@@ -46,6 +46,7 @@
     <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>

ValblazeProject/Pages/List.razor.cs

@@ -1,6 +1,9 @@
 using Blazored.LocalStorage;
+using Blazored.Modal;
+using Blazored.Modal.Services;
 using Blazorise.DataGrid;
 using Microsoft.AspNetCore.Components;
+using ValblazeProject.Modals;
 using ValblazeProject.Models;
 using ValblazeProject.Services;
 
@@ -18,6 +21,12 @@ namespace ValblazeProject.Pages
         [Inject]
         public IWebHostEnvironment WebHostEnvironment { get; set; }
 
+        [Inject]
+        public NavigationManager NavigationManager { get; set; }
+
+        [CascadingParameter]
+        public IModalService Modal { get; set; }
+
         private async Task OnReadData(DataGridReadDataEventArgs<Item> e)
         {
             if (e.CancellationToken.IsCancellationRequested)
@@ -31,5 +40,23 @@ namespace ValblazeProject.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);
+        }
     }
 }

ValblazeProject/Pages/ThemedCounter.razor

@@ -0,0 +1,31 @@
+@page "/themed-counter"
+@using ValblazeProject.UIThemeClasses
+
+<h1>Themed Counter</h1>
+
+<p>Current count: @currentCount</p>
+
+<p>
+    <button class="btn" @onclick="IncrementCount">
+        Increment Counter (Unthemed)
+    </button>
+</p>
+
+<p>
+    <button class="btn @(ThemeInfo is not null ? ThemeInfo.ButtonClass : string.Empty)"
+            @onclick="IncrementCount">
+        Increment Counter (Themed)
+    </button>
+</p>
+
+@code {
+    private int currentCount = 0;
+
+    [CascadingParameter]
+    protected ThemeInfo? ThemeInfo { get; set; }
+
+    private void IncrementCount()
+    {
+        currentCount++;
+    }
+}

ValblazeProject/Pages/_Layout.cshtml

@@ -34,5 +34,9 @@
     <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
     <link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />
 
+    <link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
+
+    <script src="_content/Blazored.Modal/blazored.modal.js"></script>
+
 </body>
 </html>

ValblazeProject/Program.cs

@@ -6,6 +6,7 @@ using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using ValblazeProject.Data;
 using ValblazeProject.Services;
+using Blazored.Modal;
 
 var builder = WebApplication.CreateBuilder(args);
 
@@ -20,6 +21,8 @@ builder.Services.AddSingleton<WeatherForecastService>();
 builder.Services.AddSingleton<WeatherForecastService>();
 builder.Services.AddHttpClient();
 
+builder.Services.AddBlazoredModal();
+
 builder.Services
    .AddBlazorise()
    .AddBootstrapProviders()

ValblazeProject/Services/DataLocalService.cs

@@ -138,5 +138,29 @@ namespace ValblazeProject.Services
             // Save the data
             await _localStorage.SetItemAsync("data", currentData);
         }
+
+        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);
+        }
     }
 }

ValblazeProject/Services/IDataService.cs

@@ -9,5 +9,6 @@ namespace ValblazeProject.Services
         Task<List<Item>> List(int currentPage, int pageSize);
         Task<Item> GetById(int id);
         Task Update(int id, ItemModel model);
+        Task Delete(int id);
     }
 }

ValblazeProject/Shared/MainLayout.razor

@@ -1,19 +1,20 @@
 @inherits LayoutComponentBase
-
-<PageTitle>ValblazeProject</PageTitle>
+@using ValblazeProject.UIThemeClasses
 
 <div class="page">
     <div class="sidebar">
         <NavMenu />
     </div>
 
-    <main>
-        <div class="top-row px-4">
-            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
-        </div>
-
-        <article class="content px-4">
-            @Body
-        </article>
-    </main>
+    <div class="main">
+        <CascadingValue Value="theme">
+            <div class="content px-4">
+                @Body
+            </div>
+        </CascadingValue>
+    </div>
 </div>
+
+@code {
+    private ThemeInfo theme = new() { ButtonClass = "btn-success" };
+}

ValblazeProject/Shared/Tab.razor

@@ -0,0 +1,32 @@
+@using ValblazeProject.UIInterfaces
+@implements ITab
+
+<li>
+    <a @onclick="ActivateTab" class="nav-link @TitleCssClass" role="button">
+        @Title
+    </a>
+</li>
+
+@code {
+    [CascadingParameter]
+    public TabSet ContainerTabSet { get; set; }
+
+    [Parameter]
+    public string Title { get; set; }
+
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+
+    private string TitleCssClass =>
+        ContainerTabSet.ActiveTab == this ? "active" : null;
+
+    protected override void OnInitialized()
+    {
+        ContainerTabSet.AddTab(this);
+    }
+
+    private void ActivateTab()
+    {
+        ContainerTabSet.SetActiveTab(this);
+    }
+}

ValblazeProject/Shared/TabSet.razor

@@ -0,0 +1,39 @@
+@using ValblazeProject.UIInterfaces
+
+<!-- Display the tab headers -->
+
+<CascadingValue Value=this>
+    <ul class="nav nav-tabs">
+        @ChildContent
+    </ul>
+</CascadingValue>
+
+<!-- Display body for only the active tab -->
+
+<div class="nav-tabs-body p-4">
+    @ActiveTab?.ChildContent
+</div>
+
+@code {
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+
+    public ITab ActiveTab { get; private set; }
+
+    public void AddTab(ITab tab)
+    {
+        if (ActiveTab == null)
+        {
+            SetActiveTab(tab);
+        }
+    }
+
+    public void SetActiveTab(ITab tab)
+    {
+        if (ActiveTab != tab)
+        {
+            ActiveTab = tab;
+            StateHasChanged();
+        }
+    }
+}

ValblazeProject/UIInterfaces/ITab.cs

@@ -0,0 +1,9 @@
+using Microsoft.AspNetCore.Components;
+
+namespace ValblazeProject.UIInterfaces
+{
+    public interface ITab
+    {
+        RenderFragment ChildContent { get; }
+    }
+}

ValblazeProject/UIThemeClasses/ThemeInfo.cs

@@ -0,0 +1,7 @@
+namespace ValblazeProject.UIThemeClasses
+{
+    public class ThemeInfo
+    {
+        public string? ButtonClass { get; set; }
+    }
+}

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

ValblazeProject/_Imports.razor

@@ -8,4 +8,6 @@
 @using Microsoft.JSInterop
 @using ValblazeProject
 @using ValblazeProject.Shared
-@using Blazorise.DataGrid
+@using Blazorise.DataGrid
+@using Blazored.Modal
+@using Blazored.Modal.Services

ValblazeProject/obj/ValblazeProject.csproj.nuget.dgspec.json

@@ -44,6 +44,10 @@
               "target": "Package",
               "version": "[4.2.0, )"
             },
+            "Blazored.Modal": {
+              "target": "Package",
+              "version": "[7.1.0, )"
+            },
             "Blazorise.Bootstrap": {
               "target": "Package",
               "version": "[1.1.2, )"

ValblazeProject/obj/ValblazeProject.csproj.nuget.g.props

@@ -16,5 +16,6 @@
     <Import Project="$(NuGetPackageRoot)blazorise\1.1.2\buildTransitive\Blazorise.props" Condition="Exists('$(NuGetPackageRoot)blazorise\1.1.2\buildTransitive\Blazorise.props')" />
     <Import Project="$(NuGetPackageRoot)blazorise.datagrid\1.1.2\buildTransitive\Blazorise.DataGrid.props" Condition="Exists('$(NuGetPackageRoot)blazorise.datagrid\1.1.2\buildTransitive\Blazorise.DataGrid.props')" />
     <Import Project="$(NuGetPackageRoot)blazorise.bootstrap\1.1.2\buildTransitive\Blazorise.Bootstrap.props" Condition="Exists('$(NuGetPackageRoot)blazorise.bootstrap\1.1.2\buildTransitive\Blazorise.Bootstrap.props')" />
+    <Import Project="$(NuGetPackageRoot)blazored.modal\7.1.0\buildTransitive\Blazored.Modal.props" Condition="Exists('$(NuGetPackageRoot)blazored.modal\7.1.0\buildTransitive\Blazored.Modal.props')" />
   </ImportGroup>
 </Project>

ValblazeProject/obj/project.assets.json

@@ -14,6 +14,27 @@
           "lib/net6.0/Blazored.LocalStorage.dll": {}
         }
       },
+      "Blazored.Modal/7.1.0": {
+        "type": "package",
+        "dependencies": {
+          "Microsoft.AspNetCore.Components": "6.0.3",
+          "Microsoft.AspNetCore.Components.Web": "6.0.3",
+          "Microsoft.Extensions.DependencyInjection.Abstractions": "6.0.0",
+          "Microsoft.JSInterop.WebAssembly": "6.0.3"
+        },
+        "compile": {
+          "lib/net6.0/Blazored.Modal.dll": {}
+        },
+        "runtime": {
+          "lib/net6.0/Blazored.Modal.dll": {}
+        },
+        "build": {
+          "buildTransitive/Blazored.Modal.props": {}
+        },
+        "buildMultiTargeting": {
+          "buildMultiTargeting/Blazored.Modal.props": {}
+        }
+      },
       "Blazorise/1.1.2": {
         "type": "package",
         "dependencies": {
@@ -290,6 +311,22 @@
           }
         }
       },
+      "Microsoft.JSInterop.WebAssembly/6.0.3": {
+        "type": "package",
+        "dependencies": {
+          "Microsoft.JSInterop": "6.0.3"
+        },
+        "compile": {
+          "lib/net6.0/Microsoft.JSInterop.WebAssembly.dll": {
+            "related": ".xml"
+          }
+        },
+        "runtime": {
+          "lib/net6.0/Microsoft.JSInterop.WebAssembly.dll": {
+            "related": ".xml"
+          }
+        }
+      },
       "System.IO.Pipelines/6.0.3": {
         "type": "package",
         "compile": {
@@ -340,6 +377,25 @@
         "lib/netstandard2.1/Blazored.LocalStorage.dll"
       ]
     },
+    "Blazored.Modal/7.1.0": {
+      "sha512": "ft5bX5barhyzpQc9jjU029ByrAQXgqSMItwhmEbr0pb7r+of8XH0E/OyS8K6O6Disq5R+p4wpt+W+NGg3/OTMA==",
+      "type": "package",
+      "path": "blazored.modal/7.1.0",
+      "files": [
+        ".nupkg.metadata",
+        ".signature.p7s",
+        "blazored.modal.7.1.0.nupkg.sha512",
+        "blazored.modal.nuspec",
+        "build/Blazored.Modal.props",
+        "build/Microsoft.AspNetCore.StaticWebAssets.props",
+        "buildMultiTargeting/Blazored.Modal.props",
+        "buildTransitive/Blazored.Modal.props",
+        "icon.png",
+        "lib/net6.0/Blazored.Modal.dll",
+        "staticwebassets/Blazored.Modal.bundle.scp.css",
+        "staticwebassets/BlazoredModal.razor.js"
+      ]
+    },
     "Blazorise/1.1.2": {
       "sha512": "UGlSOaSiyg3kIN2KbwioNrAoR6Z653NCazo8Tkc5xXoWQKJvkcumhLCZmTbY9pePkOOCU7ey/BSY+cnKYMfhCQ==",
       "type": "package",
@@ -715,6 +771,21 @@
         "microsoft.jsinterop.nuspec"
       ]
     },
+    "Microsoft.JSInterop.WebAssembly/6.0.3": {
+      "sha512": "4B7RdZ01eKShey9MllKrVjEJZN/Y1Hvku/qTwVKSwt/n+KgFmyYEkEMbSdKDWB7MbvCPZykCQbkKnKfLzML9sg==",
+      "type": "package",
+      "path": "microsoft.jsinterop.webassembly/6.0.3",
+      "files": [
+        ".nupkg.metadata",
+        ".signature.p7s",
+        "Icon.png",
+        "THIRD-PARTY-NOTICES.txt",
+        "lib/net6.0/Microsoft.JSInterop.WebAssembly.dll",
+        "lib/net6.0/Microsoft.JSInterop.WebAssembly.xml",
+        "microsoft.jsinterop.webassembly.6.0.3.nupkg.sha512",
+        "microsoft.jsinterop.webassembly.nuspec"
+      ]
+    },
     "System.IO.Pipelines/6.0.3": {
       "sha512": "ryTgF+iFkpGZY1vRQhfCzX0xTdlV3pyaTTqRu2ETbEv+HlV7O6y7hyQURnghNIXvctl5DuZ//Dpks6HdL/Txgw==",
       "type": "package",
@@ -769,6 +840,7 @@
   "projectFileDependencyGroups": {
     "net6.0": [
       "Blazored.LocalStorage >= 4.2.0",
+      "Blazored.Modal >= 7.1.0",
       "Blazorise.Bootstrap >= 1.1.2",
       "Blazorise.DataGrid >= 1.1.2",
       "Blazorise.Icons.FontAwesome >= 1.1.2"
@@ -817,6 +889,10 @@
             "target": "Package",
             "version": "[4.2.0, )"
           },
+          "Blazored.Modal": {
+            "target": "Package",
+            "version": "[7.1.0, )"
+          },
           "Blazorise.Bootstrap": {
             "target": "Package",
             "version": "[1.1.2, )"