datagrid

WF-WebAdmin/WF-WebAdmin/Pages/ModifQuote.razor

@@ -1,4 +1,5 @@
-@page "/modifquote"
+@using WF_WebAdmin.Model
+@page "/modifquote"
 
 <PageTitle>Corection des citation</PageTitle>
 
@@ -8,38 +9,16 @@
 
 @if (quotes != null)
 {
-    <table class="table">
+    <DataGrid TItem="Quote"
-        <thead>
+          Data="@quotes"
-            <tr>
+          PageSize="int.MaxValue"
-                <th>Image</th>
+          Responsive>
-                <th>Id</th>
+
-                <th>Contenu</th>
+        <DataGridColumn TItem="Quote" Field="@nameof(Quote.Id)" Caption="Id"/>
-                <th>Personage</th>
+        <DataGridColumn TItem="Quote" Field="@nameof(Quote.Content)" Caption="Citation"/>
-                <th>Titre Source</th>
+        <DataGridColumn TItem="Quote" Field="@nameof(Quote.Charac)" Caption="Personage"/>
-                <th>Likes</th>
+        <DataGridColumn TItem="Quote" Field="@nameof(Quote.TitleSrc)" Caption="Source" />
-                <th>Langue</th>
+        <DataGridColumn TItem="Quote" Field="@nameof(Quote.Langue)" Caption="Langue" />
-                <th>Date Source</th>
+        <DataGridColumn TItem="Quote" Field="@nameof(Quote.DateSrc)" Caption="Date" DisplayFormat="{0:d}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" />
-            </tr>
+    </DataGrid>
-        </thead>
-        <tbody>
-            @foreach (var quote in quotes)
-            {
-                <tr>
-                    <td><img class="imgTab" src="@quote.ImgPath" /></td>
-                    <td>@quote.Id</td>
-                    <td>
-                        <label>
-                            <input @bind="quote.Content" />
-                        </label>
-                    </td>
-                    <td>@quote.Charac</td>
-                    <td>@quote.TitleSrc</td>
-                    <td>@quote.Like</td>
-                    <td>@quote.Langue</td>
-                    <td>@quote.DateSrc.ToShortDateString()</td>
-                </tr>
-            }
-        </tbody>
-        <button>Sauvegarder</button>
-    </table>
 }

WF-WebAdmin/WF-WebAdmin/Pages/ModifQuote.razor.cs

@@ -7,6 +7,8 @@ namespace WF_WebAdmin.Pages
     {
         private Quote[] quotes;
 
+        private int MaxValue = 5;
+
         [Inject]
         public HttpClient Http { get; set; }
 

WF-WebAdmin/WF-WebAdmin/Pages/_Layout.cshtml

@@ -28,5 +28,10 @@
     </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>

WF-WebAdmin/WF-WebAdmin/Program.cs

@@ -1,3 +1,6 @@
+using Blazorise;
+using Blazorise.Bootstrap;
+using Blazorise.Icons.FontAwesome;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 using WF_WebAdmin.Data;
@@ -11,6 +14,11 @@ builder.Services.AddSingleton<WeatherForecastService>();
 
 builder.Services.AddHttpClient();
 
+builder.Services
+   .AddBlazorise()
+   .AddBootstrapProviders()
+   .AddFontAwesomeIcons();
+
 var app = builder.Build();
 
 // Configure the HTTP request pipeline.

WF-WebAdmin/WF-WebAdmin/WF-WebAdmin.csproj

@@ -7,4 +7,11 @@
     <RootNamespace>WF_WebAdmin</RootNamespace>
   </PropertyGroup>
 
+  <ItemGroup>
+    <PackageReference Include="Blazorise.Bootstrap" Version="1.7.2" />
+    <PackageReference Include="Blazorise.DataGrid" Version="1.7.2" />
+    <PackageReference Include="Blazorise.Icons.FontAwesome" Version="1.7.2" />
+    <PackageReference Include="bootstrap" Version="5.3.3" />
+  </ItemGroup>
+
 </Project>

WF-WebAdmin/WF-WebAdmin/_Imports.razor

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

WF-WebAdmin/WF-WebAdmin/wwwroot/fake-dataModifQuote.json

@@ -1,4 +1,70 @@
 [
+  {
+    "Id": 1,
+    "ImgPath": "https://tse2.mm.bing.net/th/id/OIP.MMpXBB5RDRYQm05FJmevGAHaKl?w=137&h=195&c=7&r=0&o=5&pid=1.7",
+    "Content": "Harry POTTER JE SUIS TON PERE",
+    "Charac": "Sirius Black",
+    "TitleSrc": "Harry Potter",
+    "Langue": "fr",
+    "UserProposition": "demo",
+    "DateSrc": "2001-01-01",
+    "Like": 20
+  },
+  {
+    "Id": 2,
+    "ImgPath": "https://tse2.mm.bing.net/th/id/OIP.zR4rzkK7q2wCcNwZd6jjegHaIC?w=163&h=180&c=7&r=0&o=5&pid=1.7",
+    "Content": "'Une autre citation'",
+    "Charac": "Un personnage",
+    "TitleSrc": "Un super film",
+    "Langue": "fr",
+    "DateSrc": "2002-02-02",
+    "Like": 0,
+    "UserProposition": "exploit"
+  },
+  {
+    "Id": 1,
+    "ImgPath": "https://tse2.mm.bing.net/th/id/OIP.MMpXBB5RDRYQm05FJmevGAHaKl?w=137&h=195&c=7&r=0&o=5&pid=1.7",
+    "Content": "Harry POTTER JE SUIS TON PERE",
+    "Charac": "Sirius Black",
+    "TitleSrc": "Harry Potter",
+    "Langue": "fr",
+    "UserProposition": "demo",
+    "DateSrc": "2001-01-01",
+    "Like": 20
+  },
+  {
+    "Id": 2,
+    "ImgPath": "https://tse2.mm.bing.net/th/id/OIP.zR4rzkK7q2wCcNwZd6jjegHaIC?w=163&h=180&c=7&r=0&o=5&pid=1.7",
+    "Content": "'Une autre citation'",
+    "Charac": "Un personnage",
+    "TitleSrc": "Un super film",
+    "Langue": "fr",
+    "DateSrc": "2002-02-02",
+    "Like": 0,
+    "UserProposition": "exploit"
+  },
+  {
+    "Id": 1,
+    "ImgPath": "https://tse2.mm.bing.net/th/id/OIP.MMpXBB5RDRYQm05FJmevGAHaKl?w=137&h=195&c=7&r=0&o=5&pid=1.7",
+    "Content": "Harry POTTER JE SUIS TON PERE",
+    "Charac": "Sirius Black",
+    "TitleSrc": "Harry Potter",
+    "Langue": "fr",
+    "UserProposition": "demo",
+    "DateSrc": "2001-01-01",
+    "Like": 20
+  },
+  {
+    "Id": 2,
+    "ImgPath": "https://tse2.mm.bing.net/th/id/OIP.zR4rzkK7q2wCcNwZd6jjegHaIC?w=163&h=180&c=7&r=0&o=5&pid=1.7",
+    "Content": "'Une autre citation'",
+    "Charac": "Un personnage",
+    "TitleSrc": "Un super film",
+    "Langue": "fr",
+    "DateSrc": "2002-02-02",
+    "Like": 0,
+    "UserProposition": "exploit"
+  },
   {
     "Id": 1,
     "ImgPath": "https://tse2.mm.bing.net/th/id/OIP.MMpXBB5RDRYQm05FJmevGAHaKl?w=137&h=195&c=7&r=0&o=5&pid=1.7",