🔖 Up to LocalStorage

https://codefirst.iut.uca.fr/documentation/julien.riboulet/docusaurus/Blazor/add-item/local-storage/

blazor_lab/Models/Item.cs

@@ -0,0 +1,15 @@
+namespace blazor_lab.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; }
+    }
+}

blazor_lab/Pages/Admin/Index.razor

@@ -0,0 +1,3 @@
+@page "/admin"
+
+<h3>Index</h3>

blazor_lab/Pages/Admin/Users.razor

@@ -0,0 +1,2 @@
+@page "/admin/users"
+<h3>Users</h3>

blazor_lab/Pages/Admin/_Imports.razor

@@ -0,0 +1 @@
+@layout AdminLayout

blazor_lab/Pages/List.razor

@@ -0,0 +1,41 @@
+@page "/list"
+@using Models
+
+<h3>List</h3>
+
+@if (items != null)
+{
+    <!---->
+    <!---->
+    <!---->
+    <DataGrid TItem="Item"
+          Data="@items"
+          PageSize="10"
+          ReadData="@OnReadData"
+          TotalItems="@totalItems"
+          ShowPager
+          Responsive>
+
+        <DataGridColumn TItem="Item" Field="@nameof(Item.Id)" Caption="#" />
+        <DataGridColumn TItem="Item" Field="@nameof(Item.DisplayName)" Caption="Displaye name" />
+        <DataGridColumn TItem="Item" Field="@nameof(Item.StackSize)" Caption="Stack size" />
+        <DataGridColumn TItem="Item" Field="@nameof(Item.MaxDurability)" Caption="Max 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 on"
+                    DisplayFormat="{0:d}"
+                    DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" />
+
+    </DataGrid>
+}
+

blazor_lab/Pages/List.razor.cs

@@ -0,0 +1,57 @@
+using blazor_lab.Models;
+using Blazorise.DataGrid;
+using Microsoft.AspNetCore.Components;
+
+namespace blazor_lab.Pages
+{
+    public partial class List
+    {
+        private List<Item> items;
+
+        private int totalItems;
+
+        [Inject]
+        public HttpClient HttpClient { get; set; }
+
+        [Inject]
+        public NavigationManager NavigationManager { get; set; }
+
+        private async Task OnReadData(DataGridReadDataEventArgs<Item> e)
+        {
+            if (e.CancellationToken.IsCancellationRequested)
+            {
+                return;
+            }
+
+            //real API =>
+            //var response = await Http.GetJsonAsync<Item[]>( $"http://my-api/api/data?page={e.Page}&pageSize={e.PageSize}" );
+            var response =
+                (
+                    await HttpClient.GetFromJsonAsync<Item[]>(
+                        $"{NavigationManager.BaseUri}fake-data.json"
+                    )
+                )
+                .Skip((e.Page - 1) * e.PageSize)
+                .Take(e.PageSize)
+                .ToList();
+
+            if (!e.CancellationToken.IsCancellationRequested)
+            {
+                totalItems =
+                    (
+                        await HttpClient.GetFromJsonAsync<List<Item>>(
+                            $"{NavigationManager.BaseUri}fake-data.json"
+                        )
+                    )
+                    .Count;
+
+                items = new List<Item>(response);
+            }
+        }
+
+        protected override async Task OnInitializedAsync()
+        {
+            items = await HttpClient.GetFromJsonAsync<List<Item>>($"{NavigationManager.BaseUri}fake-data.json");
+        }
+    }
+}

blazor_lab/Pages/_Layout.cshtml

@@ -28,5 +28,7 @@
     </div>
 
     <script src="_framework/blazor.server.js"></script>
-</body>
+    <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_lab/Program.cs

@@ -1,6 +1,8 @@
 using blazor_lab.Data;
-using Microsoft.AspNetCore.Components;
+using Blazorise;
-using Microsoft.AspNetCore.Components.Web;
+using Blazorise.Bootstrap;
+using Blazorise.Icons.FontAwesome;
+using Blazored.LocalStorage;
 
 var builder = WebApplication.CreateBuilder(args);
 
@@ -9,6 +11,15 @@ builder.Services.AddRazorPages();
 builder.Services.AddServerSideBlazor();
 builder.Services.AddSingleton<WeatherForecastService>();
 
+builder.Services.AddHttpClient();
+
+builder.Services
+    .AddBlazorise()/*( options => { options.Immediate = true; } ) */
+    .AddBootstrapProviders()
+    .AddFontAwesomeIcons();
+
+builder.Services.AddBlazoredLocalStorage();
+
 var app = builder.Build();
 
 // Configure the HTTP request pipeline.

blazor_lab/Shared/AdminLayout.razor

@@ -0,0 +1,15 @@
+@inherits LayoutComponentBase
+
+
+<header><h1>Welcome to admin</h1></header>
+
+<nav>
+    <a href="/admin">home</a>
+    <a href="/admin/users">users</a>
+</nav>
+
+<div class="container">
+    <main role="main" class="pb-3">
+        @Body
+    </main>
+</div>

blazor_lab/Shared/MainLayout.razor

@@ -1,19 +1,15 @@
 @inherits LayoutComponentBase
 
-<PageTitle>blazor_lab</PageTitle>
+<header><h1>blabla topic stuff</h1></header>
 
-<div class="page">
+<div class="sidebar">
-    <div class="sidebar">
+    <NavMenu/>
-        <NavMenu />
+</div>
-    </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">
+<div class="container">
-            @Body
+    <main role="main" class="pb-3">
-        </article>
+        @Body
     </main>
 </div>
+
+<footer>blabla trademark stuff</footer>

blazor_lab/Shared/MainLayout.razor.css

@@ -1,70 +0,0 @@
-.page {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-}
-
-main {
-    flex: 1;
-}
-
-.sidebar {
-    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
-}
-
-.top-row {
-    background-color: #f7f7f7;
-    border-bottom: 1px solid #d6d5d5;
-    justify-content: flex-end;
-    height: 3.5rem;
-    display: flex;
-    align-items: center;
-}
-
-    .top-row ::deep a, .top-row .btn-link {
-        white-space: nowrap;
-        margin-left: 1.5rem;
-    }
-
-    .top-row a:first-child {
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-@media (max-width: 640.98px) {
-    .top-row:not(.auth) {
-        display: none;
-    }
-
-    .top-row.auth {
-        justify-content: space-between;
-    }
-
-    .top-row a, .top-row .btn-link {
-        margin-left: 0;
-    }
-}
-
-@media (min-width: 641px) {
-    .page {
-        flex-direction: row;
-    }
-
-    .sidebar {
-        width: 250px;
-        height: 100vh;
-        position: sticky;
-        top: 0;
-    }
-
-    .top-row {
-        position: sticky;
-        top: 0;
-        z-index: 1;
-    }
-
-    .top-row, article {
-        padding-left: 2rem !important;
-        padding-right: 1.5rem !important;
-    }
-}

blazor_lab/Shared/NavMenu.razor

@@ -9,6 +9,12 @@
 
 <div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
     <nav class="flex-column">
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="list" Match="NavLinkMatch.All">
+                <span class="oi oi-list-rich" aria-hidden="true"/> List
+            </NavLink>
+        </div>
+
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                 <span class="oi oi-home" aria-hidden="true"></span> Home
@@ -24,6 +30,11 @@
                 <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
             </NavLink>
         </div>
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="admin" Match="NavLinkMatch.All">
+                <span class="oi oi-note" aria-hidden="true"/> Admin
+            </NavLink>
+        </div>
     </nav>
 </div>
 

blazor_lab/_Imports.razor

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

blazor_lab/blazor_lab.csproj

@@ -6,4 +6,11 @@
     <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>
 
+  <ItemGroup>
+    <PackageReference Include="Blazored.LocalStorage" Version="4.3.0" />
+    <PackageReference Include="Blazorise.Bootstrap" Version="1.1.5" />
+    <PackageReference Include="Blazorise.DataGrid" Version="1.1.5" />
+    <PackageReference Include="Blazorise.Icons.FontAwesome" Version="1.1.5" />
+  </ItemGroup>
+
 </Project>

blazor_lab/wwwroot/fake-data.json

@@ -0,0 +1,217 @@
+[
+  {
+    "id": 1,
+    "displayname": "Rodemco",
+    "name": "rodemco",
+    "stacksize": 22,
+    "maxdurability": 69,
+    "enchantcategories": [
+      "armor_chest",
+      "vanishable",
+      "weapon"
+    ],
+    "repairwith": [],
+    "createddate": "2016-03-23",
+    "updateddate": "2014-06-06"
+  },
+  {
+    "id": 2,
+    "displayname": "Candecor",
+    "name": "candecor",
+    "stacksize": 63,
+    "maxdurability": 109,
+    "enchantcategories": [
+      "digger"
+    ],
+    "repairwith": [
+      "oak_planks"
+    ],
+    "createddate": "2018-07-06",
+    "updateddate": null
+  },
+  {
+    "id": 3,
+    "displayname": "Cuizine",
+    "name": "cuizine",
+    "stacksize": 1,
+    "maxdurability": 23,
+    "enchantcategories": [
+      "weapon"
+    ],
+    "repairwith": [],
+    "createddate": "2020-01-13",
+    "updateddate": "2016-01-20"
+  },
+  {
+    "id": 4,
+    "displayname": "Bluplanet",
+    "name": "bluplanet",
+    "stacksize": 13,
+    "maxdurability": 95,
+    "enchantcategories": [],
+    "repairwith": [
+      "dark_oak_planks",
+      "warped_planks"
+    ],
+    "createddate": "2020-11-24",
+    "updateddate": null
+  },
+  {
+    "id": 5,
+    "displayname": "Neurocell",
+    "name": "neurocell",
+    "stacksize": 34,
+    "maxdurability": 35,
+    "enchantcategories": [
+      "armor_head",
+      "digger",
+      "breakable"
+    ],
+    "repairwith": [
+      "crimson_planks",
+      "oak_planks"
+    ],
+    "createddate": "2019-12-10",
+    "updateddate": "2017-05-09"
+  },
+  {
+    "id": 6,
+    "displayname": "Adornica",
+    "name": "adornica",
+    "stacksize": 7,
+    "maxdurability": 75,
+    "enchantcategories": [
+      "weapon"
+    ],
+    "repairwith": [
+      "oak_planks"
+    ],
+    "createddate": "2015-11-20",
+    "updateddate": "2022-01-16"
+  },
+  {
+    "id": 7,
+    "displayname": "Magnina",
+    "name": "magnina",
+    "stacksize": 63,
+    "maxdurability": 117,
+    "enchantcategories": [],
+    "repairwith": [],
+    "createddate": "2014-08-27",
+    "updateddate": null
+  },
+  {
+    "id": 8,
+    "displayname": "Entroflex",
+    "name": "entroflex",
+    "stacksize": 38,
+    "maxdurability": 50,
+    "enchantcategories": [
+      "armor",
+      "digger",
+      "armor_head"
+    ],
+    "repairwith": [
+      "crimson_planks",
+      "oak_planks"
+    ],
+    "createddate": "2021-11-20",
+    "updateddate": "2017-06-29"
+  },
+  {
+    "id": 9,
+    "displayname": "Comcur",
+    "name": "comcur",
+    "stacksize": 20,
+    "maxdurability": 13,
+    "enchantcategories": [],
+    "repairwith": [
+      "jungle_planks",
+      "birch_planks"
+    ],
+    "createddate": "2014-06-24",
+    "updateddate": null
+  },
+  {
+    "id": 10,
+    "displayname": "Quarx",
+    "name": "quarx",
+    "stacksize": 64,
+    "maxdurability": 79,
+    "enchantcategories": [],
+    "repairwith": [
+      "jungle_planks",
+      "spruce_planks"
+    ],
+    "createddate": "2019-07-03",
+    "updateddate": "2018-09-30"
+  },
+  {
+    "id": 11,
+    "displayname": "Parcoe",
+    "name": "parcoe",
+    "stacksize": 26,
+    "maxdurability": 97,
+    "enchantcategories": [
+      "breakable",
+      "armor"
+    ],
+    "repairwith": [
+      "crimson_planks"
+    ],
+    "createddate": "2018-03-25",
+    "updateddate": null
+  },
+  {
+    "id": 12,
+    "displayname": "Dogspa",
+    "name": "dogspa",
+    "stacksize": 45,
+    "maxdurability": 95,
+    "enchantcategories": [
+      "vanishable"
+    ],
+    "repairwith": [],
+    "createddate": "2014-07-03",
+    "updateddate": "2021-12-29"
+  },
+  {
+    "id": 13,
+    "displayname": "Buzzmaker",
+    "name": "buzzmaker",
+    "stacksize": 55,
+    "maxdurability": 85,
+    "enchantcategories": [],
+    "repairwith": [
+      "crimson_planks"
+    ],
+    "createddate": "2015-06-23",
+    "updateddate": null
+  },
+  {
+    "id": 14,
+    "displayname": "Realysis",
+    "name": "realysis",
+    "stacksize": 52,
+    "maxdurability": 72,
+    "enchantcategories": [
+      "weapon"
+    ],
+    "repairwith": [
+      "oak_planks"
+    ],
+    "createddate": "2019-12-26",
+    "updateddate": null
+  },
+  {
+    "id": 15,
+    "displayname": "Decratex",
+    "name": "decratex",
+    "stacksize": 15,
+    "maxdurability": 101,
+    "enchantcategories": [],
+    "repairwith": [],
+    "createddate": "2017-06-20",
+    "updateddate": "2016-09-04"
+  }
+]