avancement du blazor

Project/adminBlazor/adminBlazor.sln

@@ -1,9 +1,9 @@
 
 Microsoft Visual Studio Solution File, Format Version 12.00
-# Visual Studio Version 16
-VisualStudioVersion = 25.0.1706.7
+# Visual Studio Version 17
+VisualStudioVersion = 17.8.34330.188
 MinimumVisualStudioVersion = 10.0.40219.1
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "adminBlazor", "adminBlazor\adminBlazor.csproj", "{5985AE7A-DA9C-4A68-80E0-2D92926C1FB5}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "adminBlazor", "adminBlazor\adminBlazor.csproj", "{5985AE7A-DA9C-4A68-80E0-2D92926C1FB5}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution

Project/adminBlazor/adminBlazor/Pages/List.razor

@@ -0,0 +1,39 @@
+@page "/list"
+@using Minecraft.Models
+
+<!--<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" />
+
+<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="User"
+          Data="@users"
+          ReadData="@OnReadData"
+          TotalItems="@totalUser"
+          PageSize="10"
+          ShowPager
+          Responsive>
+    <DataGridColumn TItem="User" Field="@nameof(User.Id)" Caption="ID" />
+    <DataGridColumn TItem="User" Field="@nameof(User.Email)" Caption="Email" />
+    <DataGridColumn TItem="User" Field="@nameof(User.Name)" Caption="Name" />
+    <DataGridColumn TItem="User" Field="@nameof(User.Surname)" Caption="Surname" />
+    <DataGridColumn TItem="User" Field="@nameof(User.Nickname)" Caption="Nickname" />
+    <DataGridColumn TItem="User" Field="@nameof(User.Image)" Caption="Image" />
+    <DataGridColumn TItem="User" Field="@nameof(User.ExtraTime)" Caption="Extra Time" />
+    <DataGridColumn TItem="User" Field="@nameof(User.Group)" Caption="Group" />
+    <DataGridColumn TItem="User" Field="@nameof(User.Roles)" Caption="Roles">
+        <DisplayTemplate>
+            @(string.Join(", ", ((User)context).Roles))
+        </DisplayTemplate>
+    </DataGridColumn>
+</DataGrid>

Project/adminBlazor/adminBlazor/Pages/List.razor.cs

@@ -0,0 +1,63 @@
+using adminBlazor.Models;
+using Blazored.LocalStorage;
+using Blazorise.DataGrid;
+using Microsoft.AspNetCore.Components;
+using System.Linq;
+using System.Net.Http;
+using System.Net.Http.Json;
+using System.Threading.Tasks;
+
+namespace adminBlazor.Pages
+{
+    public partial class List
+    {
+        private User[] users;
+        private int totalUser;
+
+        [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 it is not the first render
+            if (!firstRender)
+            {
+                return;
+            }
+
+            var currentData = await LocalStorage.GetItemAsync<User[]>("data");
+
+            // Check if data exist in the local storage
+            if (currentData == null)
+            {
+                // This code adds fake data to local storage (loading data synchronously to initialize before the OnReadData method)
+                var originalData = await Http.GetFromJsonAsync<User[]>($"{NavigationManager.BaseUri}fake-data.json");
+                await LocalStorage.SetItemAsync("data", originalData);
+            }
+        }
+
+        private async Task OnReadData(DataGridReadDataEventArgs<User> e)
+        {
+            if (e.CancellationToken.IsCancellationRequested)
+            {
+                return;
+            }
+
+            // When you use a real API, you use the following code
+            // var response = await Http.GetJsonAsync<User[]>( $"http://my-api/api/data?page={e.Page}&pageSize={e.PageSize}" );
+            var response = (await LocalStorage.GetItemAsync<User[]>("data")).Skip((e.Page - 1) * e.PageSize).Take(e.PageSize).ToList();
+
+            if (!e.CancellationToken.IsCancellationRequested)
+            {
+                totalUser = (await LocalStorage.GetItemAsync<User[]>("data")).Length;
+                users = response.ToArray(); // actual data for the current page
+            }
+        }
+    }
+}

Project/adminBlazor/adminBlazor/Program.cs

@@ -1,6 +1,10 @@
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using adminBlazor.Data;
+using Blazorise;
+using Blazorise.Bootstrap;
+using Blazorise.Icons.FontAwesome;
+using Blazored.LocalStorage;
 
 var builder = WebApplication.CreateBuilder(args);
 
@@ -9,6 +13,17 @@ 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.

Project/adminBlazor/adminBlazor/adminBlazor.csproj

@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk.Web">
+<Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
     <TargetFramework>net7.0</TargetFramework>
@@ -8,4 +8,10 @@
 
   <PropertyGroup Condition=" '$(RunConfiguration)' == 'https' " />
   <PropertyGroup Condition=" '$(RunConfiguration)' == 'http' " />
+  <ItemGroup>
+    <PackageReference Include="Blazored.LocalStorage" Version="4.4.0" />
+    <PackageReference Include="Blazorise.Bootstrap" Version="1.4.0" />
+    <PackageReference Include="Blazorise.DataGrid" Version="1.4.0" />
+    <PackageReference Include="Blazorise.Icons.FontAwesome" Version="1.4.0" />
+  </ItemGroup>
 </Project>

Project/adminBlazor/adminBlazor/wwwroot/css/user.json

@@ -0,0 +1,38 @@
+[
+  {
+    "id": 1,
+    "password": "password1",
+    "email": "user1@example.com",
+    "name": "John",
+    "surname": "Doe",
+    "nickname": "JD",
+    "image": "user1.jpg",
+    "extraTime": true,
+    "group": 1,
+    "roles": [ "Admin", "Student" ]
+  },
+  {
+    "id": 2,
+    "password": "password2",
+    "email": "user2@example.com",
+    "name": "Alice",
+    "surname": "Smith",
+    "nickname": "AS",
+    "image": "user2.jpg",
+    "extraTime": false,
+    "group": 2,
+    "roles": [ "Student" ]
+  },
+  {
+    "id": 3,
+    "password": "password3",
+    "email": "user3@example.com",
+    "name": "Bob",
+    "surname": "Johnson",
+    "nickname": "BJ",
+    "image": "user3.jpg",
+    "extraTime": true,
+    "group": 3,
+    "roles": [ "Teacher" ]
+  }
+]