Add table + buttons

WF-WebAdmin/WF-WebAdmin/Pages/ValidQuiz.razor

@@ -1,4 +1,5 @@
 @page "/ValidQuiz"
+@using System.Dynamic
 @using WF_WebAdmin.Model
 
 <h3> Quiz à valider </h3>
@@ -11,18 +12,43 @@ else
 {
     <p> Quizs en attente de validation : </p>
     
-    <DataGrid TItem="Quiz"
-              Data="@quizzes"
-              PageSize="int.MaxValue"
-              Responsive>
-        <DataGridColumn TItem="Quiz" Field="@nameof(Quiz.Id)" Caption="#" />
-        <DataGridColumn TItem="Quiz" Field="@nameof(Quiz.Question)" Caption="Question" />
-        <DataGridColumn TItem="Quiz" Field="@nameof(Quiz.AnswerA)" Caption="Answer A" />
-        <DataGridColumn TItem="Quiz" Field="@nameof(Quiz.AnswerB)" Caption="Answer B" />
-        <DataGridColumn TItem="Quiz" Field="@nameof(Quiz.AnswerC)" Caption="Answer C" />
-        <DataGridColumn TItem="Quiz" Field="@nameof(Quiz.AnswerD)" Caption="Answer D" />
-        <DataGridColumn TItem="Quiz" Field="@nameof(Quiz.CAnswer)" Caption="Correct Answer" />
-        <DataGridColumn TItem="Quiz" Field="@nameof(Quiz.UserProposition)" Caption="User Proposition" />
-    </DataGrid>
+    <table>
+        <thead>
+        <tr>
+            <th>#</th>
+            <th>Question</th>
+            <th>Réponse A</th>
+            <th>Réponse B</th>
+            <th>Réponse C</th>
+            <th>Réponse D</th>
+            <th>Réponse Correcte</th>
+            <th>Utilisateur</th>
+            <th>Actions</th>
+        </tr>
+        </thead>
+        <tbody>
+        @foreach (Quiz quiz in quizzes)
+        {
+            <tr>
+                <td>@quiz.Id</td>
+                <td>@quiz.Question</td>
+                <td>@quiz.AnswerA</td>
+                <td>@quiz.AnswerB</td>
+                <td>@quiz.AnswerC</td>
+                <td>@quiz.AnswerD</td>
+                <td>@quiz.CAnswer</td>
+                <td>@quiz.UserProposition</td>
+                <div class="boutons">
+                    <button style="background-color: darkseagreen" @onclick="() => ValidateQuiz(@quiz)">
+                        <img alt="validate" src="check.png"/>
+                    </button>
+                    <button style="background-color: indianred" @onclick="() => RejectQuiz(@quiz)">
+                        <img alt="reject" src="cross.png"/>
+                    </button>
+                </div>
+            </tr>
+        }
+        </tbody>
+    </table>
     
 }

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

@@ -19,6 +19,17 @@ namespace WF_WebAdmin.Pages
         {
             quizzes = await Http.GetFromJsonAsync<Quiz[]>($"{NavigationManager.BaseUri}fake-dataQuiz.json");
         }
+        
+        private void ValidateQuiz(Quiz quiz)
+        {
+            // Action to validate the quiz
+            Console.WriteLine($"Quiz {quiz.Id} validated!");
+        }
 
+        private void RejectQuiz(Quiz quiz)
+        {
+            // Action to reject the quiz
+            Console.WriteLine($"Quiz {quiz.Id} rejected!");
+        }
     }
 }

WF-WebAdmin/WF-WebAdmin/wwwroot/css/site.css

@@ -86,7 +86,7 @@ button {
     border-radius: 25px;
 }
 
-.pseudo, .mail, .idUser, .dateCrea, .idQuote, .contentQuote, .CaracterQuote, .SourceQuote, .langueQuote, .UserPropositionQuote, titleComments, comments {
+.pseudo, .mail, .idUser, .dateCrea, .idQuote, .contentQuote, .CaracterQuote, .SourceQuote, .langueQuote, .UserPropositionQuote {
     margin-left: 10px;
 }
 
@@ -123,6 +123,39 @@ button {
     text-align: center;
 }
 
+table {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+tr {
+    background-color: lightgrey;
+}
+
+td {
+    padding: 10px 20px;
+    border: none;
+}
+
+.boutons {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+}
+
+.boutons button {
+    border: none;
+    background-color: transparent;
+    padding: 5px;
+    cursor: pointer;
+}
+
+.boutons button img {
+    width: 24px;
+    height: 24px;
+    object-fit: contain;
+}
+
 
 .buttonSubmitDiv {
     text-align: center;