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"
+    <table>
-              Data="@quizzes"
+        <thead>
-              PageSize="int.MaxValue"
+        <tr>
-              Responsive>
+            <th>#</th>
-        <DataGridColumn TItem="Quiz" Field="@nameof(Quiz.Id)" Caption="#" />
+            <th>Question</th>
-        <DataGridColumn TItem="Quiz" Field="@nameof(Quiz.Question)" Caption="Question" />
+            <th>Réponse A</th>
-        <DataGridColumn TItem="Quiz" Field="@nameof(Quiz.AnswerA)" Caption="Answer A" />
+            <th>Réponse B</th>
-        <DataGridColumn TItem="Quiz" Field="@nameof(Quiz.AnswerB)" Caption="Answer B" />
+            <th>Réponse C</th>
-        <DataGridColumn TItem="Quiz" Field="@nameof(Quiz.AnswerC)" Caption="Answer C" />
+            <th>Réponse D</th>
-        <DataGridColumn TItem="Quiz" Field="@nameof(Quiz.AnswerD)" Caption="Answer D" />
+            <th>Réponse Correcte</th>
-        <DataGridColumn TItem="Quiz" Field="@nameof(Quiz.CAnswer)" Caption="Correct Answer" />
+            <th>Utilisateur</th>
-        <DataGridColumn TItem="Quiz" Field="@nameof(Quiz.UserProposition)" Caption="User Proposition" />
+            <th>Actions</th>
-    </DataGrid>
+        </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

@@ -20,5 +20,16 @@ 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

@@ -105,7 +105,8 @@ button {
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: white border-radius:20px;
+    background-color: white;
+    border-radius:20px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -122,3 +123,36 @@ button {
     width: 300px;
     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;
+}