Add button doneuse data

BlazorTp1.sln

@@ -3,7 +3,7 @@ Microsoft Visual Studio Solution File, Format Version 12.00
 # Visual Studio Version 17
 VisualStudioVersion = 17.2.32616.157
 MinimumVisualStudioVersion = 10.0.40219.1
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BlazorTp1", "BlazorTp1\BlazorTp1.csproj", "{FEEC35E0-2A45-48AD-BBE9-854887762D8E}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorTp1", "BlazorTp1\BlazorTp1.csproj", "{FEEC35E0-2A45-48AD-BBE9-854887762D8E}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution

BlazorTp1/BlazorTp1.csproj

@@ -6,4 +6,11 @@
     <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>
 
+  <ItemGroup>
+    <PackageReference Include="Blazored.LocalStorage" Version="4.2.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" />
+  </ItemGroup>
+
 </Project>

BlazorTp1/Models/Item.cs

@@ -0,0 +1,15 @@
+namespace BlazorTp1.Models
+{
+    public class Item
+    {
+        public int Id { get; set; }
+        public string DisplayName { get; set; }
+        public string Name { get; set; }
+        public int StackSize { get; set; }
+        public int MaxDurability { get; set; }
+        public List<string> EnchantCategories { get; set; }
+        public List<string> RepairWith { get; set; }
+        public DateTime CreatedDate { get; set; }
+        public DateTime? UpdatedDate { get; set; }
+    }
+}

BlazorTp1/Models/ItemModel.cs

@@ -0,0 +1,37 @@
+using System.ComponentModel.DataAnnotations;
+
+namespace BlazorTp1.Models
+{
+    public class ItemModel
+    {
+        public int Id { get; set; }
+
+        [Required]
+        [StringLength(50, ErrorMessage = "The display name must not exceed 50 characters.")]
+        public string DisplayName { get; set; }
+
+        [Required]
+        [StringLength(50, ErrorMessage = "The name must not exceed 50 characters.")]
+        [RegularExpression(@"^[a-z''-'\s]{1,40}$", ErrorMessage = "Only lowercase characters are accepted.")]
+        public string Name { get; set; }
+
+        [Required]
+        [Range(1, 64)]
+        public int StackSize { get; set; }
+
+        [Required]
+        [Range(1, 125)]
+        public int MaxDurability { get; set; }
+
+        public List<string> EnchantCategories { get; set; }
+
+        public List<string> RepairWith { get; set; }
+
+        [Required]
+        [Range(typeof(bool), "true", "true", ErrorMessage = "You must agree to the terms.")]
+        public bool AcceptCondition { get; set; }
+
+        [Required(ErrorMessage = "The image of the item is mandatory!")]
+        public byte[] ImageContent { get; set; }
+    }
+}

BlazorTp1/Pages/Add.razor

@@ -0,0 +1,5 @@
+@page "/add"
+
+<h3>Add</h3>
+
+

BlazorTp1/Pages/Add.razor.cs

@@ -0,0 +1,6 @@
+namespace BlazorTp1.Pages
+{
+    public partial class Add
+    {
+    }
+}

BlazorTp1/Pages/List.razor

@@ -1,5 +1,34 @@
- @page "/list"
+@page "/list"
+@using BlazorTp1.Models
 
 <h3>List</h3>
 
+<div>
+    <NavLink class="btn btn-primary" href="Add" Match="NavLinkMatch.All">
+        <i class="fa fa-plus"></i> Ajouter
+    </NavLink>
+</div>
 
+<DataGrid TItem="Item"
+          Data="@items"
+          ReadData="@OnReadData"
+          TotalItems="@totalItem"
+          PageSize="10"
+          ShowPager
+          Responsive>
+    <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="#" />
+    <DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" Caption="Display name" />
+    <DataGridColumn TItem="Item" Field="@nameof(Item.StackSize)" Caption="Stack size" />
+    <DataGridColumn TItem="Item" Field="@nameof(Item.MaxDurability)" Caption="Maximum durability" />
+    <DataGridColumn TItem="Item" Field="@nameof(Item.EnchantCategories)" Caption="Enchant categories">
+        <DisplayTemplate>
+            @(string.Join(", ", ((Item)context).EnchantCategories))
+        </DisplayTemplate>
+    </DataGridColumn>
+    <DataGridColumn TItem="Item" Field="@nameof(Item.RepairWith)" Caption="Repair with">
+        <DisplayTemplate>
+            @(string.Join(", ", ((Item)context).RepairWith))
+        </DisplayTemplate>
+    </DataGridColumn>
+    <DataGridColumn TItem="Item" Field="@nameof(Item.CreatedDate)" Caption="Created date" DisplayFormat="{0:d}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" />
+</DataGrid>

BlazorTp1/Pages/List.razor.cs

@@ -1,6 +1,60 @@
-namespace BlazorTp1.Pages
+using Microsoft.AspNetCore.Components;
+using BlazorTp1.Models;
+using Blazorise.DataGrid;
+using Blazored.LocalStorage;
+
+namespace BlazorTp1.Pages
 {
     public partial class List
     {
+        private List<Item> items;
+
+        private int totalItem;
+
+        [Inject]
+        public HttpClient Http { get; set; }
+
+        [Inject]
+        public ILocalStorageService LocalStorage { get; set; }
+
+        [Inject]
+        public NavigationManager NavigationManager { get; set; }
+
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            // Do not treat this action if is not the first render
+            if (!firstRender)
+            {
+                return;
+            }
+
+            var currentData = await LocalStorage.GetItemAsync<Item[]>("data");
+
+            // Check if data exist in the local storage
+            if (currentData == null)
+            {
+                // this code add in the local storage the fake data (we load the data sync for initialize the data before load the OnReadData method)
+                var originalData = Http.GetFromJsonAsync<Item[]>($"{NavigationManager.BaseUri}fake-data.json").Result;
+                await LocalStorage.SetItemAsync("data", originalData);
+            }
+        }
+
+        private async Task OnReadData(DataGridReadDataEventArgs<Item> e)
+        {
+            if (e.CancellationToken.IsCancellationRequested)
+            {
+                return;
+            }
+
+            // When you use a real API, we use this follow code
+            //var response = await Http.GetJsonAsync<Data[]>( $"http://my-api/api/data?page={e.Page}&pageSize={e.PageSize}" );
+            var response = (await LocalStorage.GetItemAsync<Item[]>("data")).Skip((e.Page - 1) * e.PageSize).Take(e.PageSize).ToList();
+
+            if (!e.CancellationToken.IsCancellationRequested)
+            {
+                totalItem = (await LocalStorage.GetItemAsync<List<Item>>("data")).Count;
+                items = new List<Item>(response); // an actual data for the current page
+            }
+        }
     }
 }

BlazorTp1/Pages/_Layout.cshtml

@@ -1,4 +1,4 @@
-@using Microsoft.AspNetCore.Components.Web
+    @using Microsoft.AspNetCore.Components.Web
 @namespace BlazorTp1.Pages
 @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
 
@@ -28,5 +28,11 @@
     </div>
 
     <script src="_framework/blazor.server.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>

BlazorTp1/Program.cs

@@ -1,3 +1,7 @@
+using Blazored.LocalStorage;
+using Blazorise;
+using Blazorise.Bootstrap;
+using Blazorise.Icons.FontAwesome;
 using BlazorTp1.Data;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
@@ -9,6 +13,15 @@ builder.Services.AddRazorPages();
 builder.Services.AddServerSideBlazor();
 builder.Services.AddSingleton<WeatherForecastService>();
 
+builder.Services.AddHttpClient();
+
+builder.Services
+   .AddBlazorise()
+   .AddBootstrapProviders()
+   .AddFontAwesomeIcons();
+
+builder.Services.AddBlazoredLocalStorage();
+
 var app = builder.Build();
 
 // Configure the HTTP request pipeline.

BlazorTp1/_Imports.razor

@@ -8,3 +8,4 @@
 @using Microsoft.JSInterop
 @using BlazorTp1
 @using BlazorTp1.Shared
+@using Blazorise.DataGrid

BlazorTp1/wwwroot/fake-data.json

@@ -1,3 +1,230 @@
-{
-
-}
+  [
+    {
+      "id": 1,
+      "displayname": "Mazuda",
+      "name": "mazuda",
+      "stacksize": 48,
+      "maxdurability": 55,
+      "enchantcategories": [
+        "armor_chest",
+        "weapon"
+      ],
+      "repairwith": [
+        "dark_oak_planks",
+        "crimson_planks"
+      ],
+      "createddate": "2015-05-08",
+      "updateddate": null
+    },
+    {
+      "id": 2,
+      "displayname": "Codact",
+      "name": "codact",
+      "stacksize": 57,
+      "maxdurability": 34,
+      "enchantcategories": [
+        "breakable",
+        "armor_head"
+      ],
+      "repairwith": [
+        "spruce_planks",
+        "warped_planks"
+      ],
+      "createddate": "2022-06-23",
+      "updateddate": "2016-06-10"
+    },
+    {
+      "id": 3,
+      "displayname": "Delphide",
+      "name": "delphide",
+      "stacksize": 49,
+      "maxdurability": 94,
+      "enchantcategories": [
+        "digger"
+      ],
+      "repairwith": [
+        "acacia_planks"
+      ],
+      "createddate": "2015-01-19",
+      "updateddate": "2020-06-30"
+    },
+    {
+      "id": 4,
+      "displayname": "Obones",
+      "name": "obones",
+      "stacksize": 50,
+      "maxdurability": 5,
+      "enchantcategories": [
+        "breakable",
+        "armor",
+        "weapon"
+      ],
+      "repairwith": [
+        "spruce_planks"
+      ],
+      "createddate": "2017-12-17",
+      "updateddate": null
+    },
+    {
+      "id": 5,
+      "displayname": "Amril",
+      "name": "amril",
+      "stacksize": 32,
+      "maxdurability": 76,
+      "enchantcategories": [
+        "armor",
+        "weapon",
+        "digger"
+      ],
+      "repairwith": [],
+      "createddate": "2015-10-18",
+      "updateddate": null
+    },
+    {
+      "id": 6,
+      "displayname": "Quiltigen",
+      "name": "quiltigen",
+      "stacksize": 64,
+      "maxdurability": 6,
+      "enchantcategories": [
+        "digger"
+      ],
+      "repairwith": [],
+      "createddate": "2014-03-01",
+      "updateddate": null
+    },
+    {
+      "id": 7,
+      "displayname": "Optique",
+      "name": "optique",
+      "stacksize": 54,
+      "maxdurability": 112,
+      "enchantcategories": [
+        "armor_chest",
+        "armor",
+        "digger"
+      ],
+      "repairwith": [],
+      "createddate": "2017-09-23",
+      "updateddate": "2017-04-16"
+    },
+    {
+      "id": 8,
+      "displayname": "Digigene",
+      "name": "digigene",
+      "stacksize": 1,
+      "maxdurability": 98,
+      "enchantcategories": [],
+      "repairwith": [],
+      "createddate": "2014-02-08",
+      "updateddate": null
+    },
+    {
+      "id": 9,
+      "displayname": "Exospeed",
+      "name": "exospeed",
+      "stacksize": 19,
+      "maxdurability": 16,
+      "enchantcategories": [
+        "armor_chest",
+        "armor",
+        "armor"
+      ],
+      "repairwith": [
+        "warped_planks"
+      ],
+      "createddate": "2017-01-27",
+      "updateddate": "2019-09-30"
+    },
+    {
+      "id": 10,
+      "displayname": "Zillidium",
+      "name": "zillidium",
+      "stacksize": 23,
+      "maxdurability": 37,
+      "enchantcategories": [],
+      "repairwith": [
+        "birch_planks",
+        "crimson_planks"
+      ],
+      "createddate": "2016-07-15",
+      "updateddate": "2018-05-16"
+    },
+    {
+      "id": 11,
+      "displayname": "Menbrain",
+      "name": "menbrain",
+      "stacksize": 43,
+      "maxdurability": 52,
+      "enchantcategories": [
+        "vanishable"
+      ],
+      "repairwith": [],
+      "createddate": "2014-11-29",
+      "updateddate": "2014-01-02"
+    },
+    {
+      "id": 12,
+      "displayname": "Accufarm",
+      "name": "accufarm",
+      "stacksize": 22,
+      "maxdurability": 88,
+      "enchantcategories": [
+        "armor_chest"
+      ],
+      "repairwith": [
+        "spruce_planks",
+        "spruce_planks"
+      ],
+      "createddate": "2018-11-02",
+      "updateddate": "2016-10-31"
+    },
+    {
+      "id": 13,
+      "displayname": "Interfind",
+      "name": "interfind",
+      "stacksize": 35,
+      "maxdurability": 51,
+      "enchantcategories": [],
+      "repairwith": [
+        "spruce_planks",
+        "warped_planks"
+      ],
+      "createddate": "2020-01-16",
+      "updateddate": null
+    },
+    {
+      "id": 14,
+      "displayname": "Zolarity",
+      "name": "zolarity",
+      "stacksize": 29,
+      "maxdurability": 55,
+      "enchantcategories": [
+        "weapon",
+        "breakable",
+        "armor_head"
+      ],
+      "repairwith": [
+        "spruce_planks"
+      ],
+      "createddate": "2016-03-19",
+      "updateddate": "2018-10-10"
+    },
+    {
+      "id": 15,
+      "displayname": "Kangle",
+      "name": "kangle",
+      "stacksize": 20,
+      "maxdurability": 64,
+      "enchantcategories": [
+        "vanishable",
+        "armor_head",
+        "armor"
+      ],
+      "repairwith": [
+        "dark_oak_planks"
+      ],
+      "createddate": "2014-08-13",
+      "updateddate": null
+    }
+  ]