Add questions functionnality and correct alert component

Frontend/quizz-game/src/app/manage/list-questions/list-questions.component.ts

-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-list-questions',
-  templateUrl: './list-questions.component.html',
-  styleUrls: ['./list-questions.component.css']
-})
-export class ListQuestionsComponent {
-
-}

Frontend/quizz-game/src/app/manage/manage.component.html

@@ -71,27 +71,6 @@
               <span class="text-sm font-medium"> Liste des utilisateurs </span>
             </a>
 
-            <a
-              routerLink="./create-user"
-              class="flex items-center gap-2 rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-5 w-5 opacity-75"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                stroke-width="2"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                />
-              </svg>
-
-              <span class="text-sm font-medium"> Créer un utilisateur </span>
-            </a>
           </nav>
         </details>
 
@@ -156,28 +135,6 @@
 
               <span class="text-sm font-medium"> Liste des questions </span>
             </a>
-
-            <a
-              routerLink="./create-question"
-              class="flex items-center gap-2 rounded-lg px-4 py-2 text-gray-500 hover:bg-gray-100 hover:text-gray-700"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-5 w-5 opacity-75"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                stroke-width="2"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                />
-              </svg>
-
-              <span class="text-sm font-medium"> Créer une question </span>
-            </a>
           </nav>
         </details>
 

Frontend/quizz-game/src/app/manage/manage.service.ts

 import {Injectable} from '@angular/core';
 import {HttpClient} from "@angular/common/http";
 import {BehaviorSubject, map, of, switchMap, take, tap} from "rxjs";
-import {User} from "./list-users/user-model";
+import {User} from "./users/user-model";
 import {FormGroup} from "@angular/forms";
 import {LoginService} from "../login/login.service";
+import {Question} from "./questions/question-model";
 
 interface UserData {
   username: string;
@@ -16,6 +17,17 @@ interface UserData {
   updatedAt: string;
 }
 
+interface QuestionData {
+  id: number;
+  question: string;
+  possibleResponse: string[];
+  correctResponse: number;
+  category: string;
+  type: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
 @Injectable({
   providedIn: 'root'
 })
@@ -23,6 +35,7 @@ export class ManageService {
 
   private _username!: string;
   private _users = new BehaviorSubject<User[]>([]);
+  private _questions = new BehaviorSubject<Question[]>([]);
 
   constructor(private httpClient: HttpClient, private loginService: LoginService) {
   }
@@ -39,6 +52,10 @@ export class ManageService {
     return this._users.asObservable();
   }
 
+  get questions() {
+    return this._questions.asObservable();
+  }
+
   async getUserInfo(): Promise<any> {
     return new Promise<any>((resolve, reject) => {
       let usernamePost = {
@@ -85,6 +102,36 @@ export class ManageService {
 
   }
 
+  fetchQuestions() {
+    return this.httpClient
+      .get<{ questions: QuestionData[] }>(
+        'http://localhost:30992/api/v1/admin/' + this.username + '/list-questions'
+      )
+      .pipe(
+        map((resDonnee) => {
+          const questionsData=resDonnee.questions;
+          const questions:Question[] = [];
+          questionsData.forEach((question)=>{
+            questions.push(
+              new Question(
+                question.id,
+                question.question,
+                question.possibleResponse,
+                question.correctResponse,
+                question.category
+              )
+            )
+          })
+          return questions;
+        }),
+        tap((questions) => {
+          this._questions.next(questions);
+        })
+      );
+
+  }
+
+
   changeTypeKey(userInfo:any){
     for (const k in userInfo) {
       if (k === "accountType") {
@@ -132,6 +179,42 @@ export class ManageService {
       );
   }
 
+  correctPossibleResponseArray(possibleResponseControl: any){
+    let possibleResponseControls=Array.from(possibleResponseControl) as any[];
+    let possibleResponse:string[]=[];
+    possibleResponseControls.forEach(response=>{
+      possibleResponse.push(response.value);
+    });
+    return possibleResponse;
+  }
+
+  addQuestion(
+    formDataQuestion: FormGroup<any>
+  ) {
+    let generateId: number;
+    let possibleResponse=this.correctPossibleResponseArray(formDataQuestion.value.possibleResponse);
+    let questionInfo=new Question(
+      parseInt(Math.random.toString()),
+      formDataQuestion.value.question,
+      possibleResponse,
+      parseInt(formDataQuestion.value.correctResponse),
+      formDataQuestion.value.category
+    );
+    return this.httpClient.post<any>('http://localhost:30992/api/v1/admin/'+this.username+'/create-question', questionInfo)
+      .pipe(
+        switchMap((resDonnee) => {
+          generateId = resDonnee.new_question.id;
+          return this.questions;
+        }),
+        take(1),
+        map((questions) => {
+          questionInfo.id = generateId;
+          this._questions.next(questions.concat(questionInfo));
+          return questionInfo;
+        })
+      );
+  }
+
   updateUser(username: string, new_username: string, firstname: string, lastname: string, email: string, type: string, password?: string) {
     let editUsers: User[];
     return this.users.pipe(
@@ -175,6 +258,43 @@ export class ManageService {
     );
   }
 
+  updateQuestion(id: number, question: string, possibleResponse: string[], correctResponse: number, category: string) {
+    let editQuestions: Question[];
+    return this.questions.pipe(
+      take(1),
+      switchMap((questions) => {
+        if (!questions || questions.length <= 0) {
+          return this.fetchQuestions();
+        }
+        else {
+          return of(questions);
+        }
+
+      }),
+      switchMap(questions => {
+        const idQuestionSearch = questions.findIndex(
+          (q) => q.id === id
+        );
+        editQuestions = [...questions];
+        editQuestions[idQuestionSearch] = new Question(
+          id,
+          question,
+          this.correctPossibleResponseArray(possibleResponse),
+          correctResponse,
+          category
+        );
+        return this.httpClient.put(
+          `http://localhost:30992/api/v1/admin/${this.username}/update-question`,
+          { ...editQuestions[idQuestionSearch] }
+        );
+
+      }),
+      tap(() => {
+        this._questions.next(editQuestions);
+      })
+    );
+  }
+
   deleteUser(username: string) {
     const body = { username: username };
     return this.httpClient
@@ -193,5 +313,23 @@ export class ManageService {
 
   }
 
+  deleteQuestion(id: number) {
+    const body = { id: id };
+    return this.httpClient
+      .request('delete',
+        `http://localhost:30992/api/v1/admin/${this.username}/delete-question`,
+        {body: body}
+      )
+      .pipe(switchMap(() => {
+          return this.questions;
+        }),
+        take(1),
+        tap((questions) => {
+          this._questions.next(questions.filter((q) => q.id !== id));
+        })
+      );
+
+  }
+
 
 }

Frontend/quizz-game/src/app/manage/questions/create-question/create-question.component.html

+<div
+  class="w-full">
+  <div class="relative w-full max-w-2xl px-4 h-full md:h-auto">
+    <!-- Modal content -->
+    <div class="bg-white rounded-lg shadow relative">
+      <!-- Modal header -->
+      <div class="flex items-start justify-between p-5 border-b rounded-t">
+        <h3 class="text-xl font-semibold">
+          Ajouter une question
+        </h3>
+        <button type="button"
+                class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center"
+                (click)="closeModalInterface()">
+          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd"
+                  d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                  clip-rule="evenodd"></path>
+          </svg>
+        </button>
+      </div>
+      <!-- Modal body -->
+      <form [formGroup]="formData"
+            enctype="multipart/form-data"
+            (submit)="addQuestion($event)">
+        <div class="p-6 space-y-6">
+
+          <div class="grid grid-cols-6 gap-6">
+            <div class="col-span-12 sm:col-span-6">
+              <label for="question" class="text-sm font-medium text-gray-900 block mb-2">Question</label>
+              <input type="text" id="question" formControlName="question"
+                     class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-cyan-600 focus:border-cyan-600 block w-full p-2.5"
+                     placeholder="Comment fait tu cela?">
+            </div>
+
+            <div class="col-span-12 sm:col-span-6">
+              <label class="text-sm font-medium text-gray-900 block mb-2">Réponse possible</label>
+              <div formArrayName="possibleResponse">
+                <div class="mb-4" *ngFor="let responseGroup of possibleResponse.controls; let i = index"
+                     [formGroupName]="i">
+                  <input
+                    type="text"
+                    class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring focus:border-blue-300"
+                    formControlName="value"
+                    placeholder="Saisissez une réponse possible"
+                  />
+                  <button (click)="removePossibleResponse(i)" class="ml-2 text-red-500">Supprimer</button>
+                </div>
+                <button (click)="addPossibleResponse($event)" class="mt-4 bg-blue-500 text-white px-4 py-2 rounded-md">
+                  Ajouter
+                </button>
+              </div>
+            </div>
+            <div class="col-span-6 sm:col-span-3">
+              <label for="correctResponse" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Réponse correcte</label>
+              <select id="correctResponse" formControlName="correctResponse" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                <option value="choix" selected>Choix de la bonne réponse</option>
+                <ng-container *ngFor="let response of possibleResponse.controls; let i = index">
+                  <option selected [value]=i>{{ response.value.value }}</option>
+                </ng-container>
+              </select>
+            </div>
+
+            <div class="col-span-6 sm:col-span-3">
+              <label for="category" class="text-sm font-medium text-gray-900 block mb-2">Catégorie</label>
+              <input type="text" id="category" formControlName="category"
+                     class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-cyan-600 focus:border-cyan-600 block w-full p-2.5"
+                     placeholder="Voiture">
+            </div>
+
+
+          </div>
+        </div>
+
+        <!-- Modal footer -->
+        <div class="items-center p-6 border-t border-gray-200 rounded-b">
+          <button
+            class="{{(formData.valid && formData.dirty)?'':'opacity-50 pointer-events-none'}} text-white bg-cyan-600 hover:bg-cyan-700 focus:ring-4 focus:ring-cyan-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
+            type="submit">Ajouter
+          </button>
+        </div>
+      </form>
+
+    </div>
+  </div>
+</div>

Frontend/quizz-game/src/app/manage/questions/create-question/create-question.component.ts

+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import {FormArray, FormControl, FormGroup, Validators} from "@angular/forms";
+import {ErrorLogin, LoginService} from "../../../login/login.service";
+import {HttpClient} from "@angular/common/http";
+import {ManageService} from "../../manage.service";
+import {Question} from "../question-model";
+import {QuestionsService} from "../questions.service";
+
+@Component({
+  selector: 'app-create-question',
+  templateUrl: './create-question.component.html',
+  styleUrls: ['./create-question.component.css']
+})
+export class CreateQuestionComponent implements OnInit {
+  formData!: FormGroup;
+  errorOccured!: boolean;
+  selectedRadio!: string;
+  possibleResponse!: FormArray;
+  @Output() closeModal: EventEmitter<string> = new EventEmitter<string>();
+
+  constructor(private httpClient: HttpClient, private loginService: LoginService, private manageService: ManageService, private questionService: QuestionsService) {
+  }
+
+  ngOnInit() {
+    this.errorOccured = false;
+    this.formData = this.questionService.formDataCreateQuestionInit()
+    this.possibleResponse=this.formData.get('possibleResponse') as FormArray;
+    //this.addPossibleResponse();
+  }
+
+  addPossibleResponse(event:any){
+    this.questionService.addPossibleResponse(event, this.formData);
+  }
+
+  removePossibleResponse(event: any){
+    this.questionService.removePossibleResponse(event, this.formData);
+  }
+
+  addQuestion(event: Event) {
+    event.preventDefault();
+    this.errorOccured = false;
+    this.manageService.addQuestion(this.formData).subscribe((value) => {
+      console.log("add question success:", value);
+      this.closeModal.emit('add_question_success');
+    }, error => {
+      console.log("error add question:", error);
+      this.errorOccured = true;
+      this.closeModal.emit('error');
+    });
+
+
+  }
+
+  closeModalInterface() {
+    this.closeModal.emit(undefined);
+  }
+
+
+}

Frontend/quizz-game/src/app/manage/questions/edit-question/edit-question.component.html

+<div
+  class="w-full">
+  <div class="relative w-full max-w-2xl px-4 h-full md:h-auto">
+    <!-- Modal content -->
+    <div class="bg-white rounded-lg shadow relative">
+      <!-- Modal header -->
+      <div class="flex items-start justify-between p-5 border-b rounded-t">
+        <h3 class="text-xl font-semibold">
+          Modifier une question
+        </h3>
+        <button type="button"
+                class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center"
+                (click)="closeModalInterface()">
+          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd"
+                  d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                  clip-rule="evenodd"></path>
+          </svg>
+        </button>
+      </div>
+      <!-- Modal body -->
+      <form [formGroup]="formData"
+            enctype="multipart/form-data"
+            (submit)="editQuestion($event)">
+        <div class="p-6 space-y-6">
+
+          <div class="grid grid-cols-6 gap-6">
+            <div class="col-span-12 sm:col-span-6">
+              <label for="question" class="text-sm font-medium text-gray-900 block mb-2">Question</label>
+              <input type="text" id="question" formControlName="question"
+                     class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-cyan-600 focus:border-cyan-600 block w-full p-2.5"
+                     placeholder="Comment fait tu cela?">
+            </div>
+
+            <div class="col-span-12 sm:col-span-6">
+              <label class="text-sm font-medium text-gray-900 block mb-2">Réponse possible</label>
+              <div formArrayName="possibleResponse">
+                <div class="mb-4" *ngFor="let responseGroup of possibleResponse.controls; let i = index"
+                     [formGroupName]="i">
+                  <input
+                    type="text"
+                    class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring focus:border-blue-300"
+                    formControlName="value"
+                    placeholder="Saisissez une réponse possible"
+                  />
+                  <button (click)="removePossibleResponse(i)" class="ml-2 text-red-500">Supprimer</button>
+                </div>
+                <button (click)="addPossibleResponse($event)" class="mt-4 bg-blue-500 text-white px-4 py-2 rounded-md">
+                  Ajouter
+                </button>
+              </div>
+            </div>
+            <div class="col-span-6 sm:col-span-3">
+              <label for="correctResponse" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Réponse correcte</label>
+              <select id="correctResponse" formControlName="correctResponse" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+                <option value="choix" selected>Choix de la bonne réponse</option>
+                <ng-container *ngFor="let response of possibleResponse.controls; let i = index">
+                  <option selected [value]=i>{{ response.value.value }}</option>
+                </ng-container>
+              </select>
+            </div>
+
+            <div class="col-span-6 sm:col-span-3">
+              <label for="category" class="text-sm font-medium text-gray-900 block mb-2">Catégorie</label>
+              <input type="text" id="category" formControlName="category"
+                     class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-cyan-600 focus:border-cyan-600 block w-full p-2.5"
+                     placeholder="Voiture">
+            </div>
+
+
+          </div>
+        </div>
+
+        <!-- Modal footer -->
+        <div class="items-center p-6 border-t border-gray-200 rounded-b">
+          <button
+            class="{{(formData.valid)?'':'opacity-50 pointer-events-none'}} text-white bg-cyan-600 hover:bg-cyan-700 focus:ring-4 focus:ring-cyan-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
+            type="submit">Appliquer les modifications
+          </button>
+        </div>
+      </form>
+
+    </div>
+  </div>
+</div>
+

Frontend/quizz-game/src/app/manage/questions/edit-question/edit-question.component.ts

+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {FormArray, FormGroup, Validators} from "@angular/forms";
+import {HttpClient} from "@angular/common/http";
+import {LoginService} from "../../../login/login.service";
+import {ManageService} from "../../manage.service";
+import {Question} from "../question-model";
+import {QuestionsService} from "../questions.service";
+
+@Component({
+  selector: 'app-edit-question',
+  templateUrl: './edit-question.component.html',
+  styleUrls: ['./edit-question.component.css']
+})
+export class EditQuestionComponent {
+  formData!: FormGroup;
+  errorOccured!: boolean;
+  selectedRadio!: string;
+  possibleResponse!: FormArray;
+  @Output() closeModal: EventEmitter<string> = new EventEmitter<string>();
+  @Input() question!: Question
+
+  constructor(private httpClient: HttpClient, private loginService: LoginService, private manageService: ManageService, private questionService: QuestionsService) {
+  }
+
+  ngOnInit() {
+    this.errorOccured = false;
+    this.formData = this.questionService.formDataCreateQuestionInit(this.question);
+    this.possibleResponse=this.formData.get('possibleResponse') as FormArray;
+
+  }
+
+  addPossibleResponse(event:any){
+    this.questionService.addPossibleResponse(event, this.formData);
+  }
+
+  removePossibleResponse(event: any){
+    this.questionService.removePossibleResponse(event, this.formData);
+  }
+
+  editQuestion(event: Event) {
+    event.preventDefault();
+    this.errorOccured = false;
+    let questionEditedInfo = this.formData.value;
+    this.manageService.updateQuestion(this.question.id, questionEditedInfo.question, questionEditedInfo.possibleResponse, questionEditedInfo.correctResponse, questionEditedInfo.category).subscribe(() => {
+      console.log("edit question success");
+      this.closeModal.emit('edit_question_success');
+    }, error => {
+      console.log("error:", error);
+      this.closeModal.emit('error')
+    });
+  }
+
+  closeModalInterface() {
+    this.closeModal.emit(undefined);
+  }
+
+}

Frontend/quizz-game/src/app/manage/questions/list-questions/list-questions.component.html

+<div class="absolute top-5 left-0 right-0 flex items-center justify-center h-16">
+  <app-alert-add *ngIf="addSuccess" [typeAlert]="alertSuccess"></app-alert-add>
+  <app-errorlogin *ngIf="errorOccured"></app-errorlogin>
+</div>
+
+
+<div class="p-4 bg-white block sm:flex items-center justify-between border-b border-gray-200 lg:mt-1.5">
+  <div class="mb-1 w-full">
+    <div class="mb-4">
+      <nav class="flex mb-5" aria-label="Breadcrumb">
+        <ol class="inline-flex items-center space-x-1 md:space-x-2">
+          <li class="inline-flex items-center">
+            <a href="#" class="text-gray-700 hover:text-gray-900 inline-flex items-center">
+              <svg class="w-5 h-5 mr-2.5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
+              </svg>
+            </a>
+          </li>
+          <li>
+            <div class="flex items-center">
+              <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20"
+                   xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd"
+                      d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                      clip-rule="evenodd"></path>
+              </svg>
+              <a href="#" class="text-gray-700 hover:text-gray-900 ml-1 md:ml-2 text-sm font-medium">Liste des
+                questions</a>
+            </div>
+          </li>
+        </ol>
+      </nav>
+      <h1 class="text-xl sm:text-2xl font-semibold text-gray-900">Liste des questions</h1>
+    </div>
+    <div class="sm:flex">
+      <div class="hidden sm:flex items-center sm:divide-x sm:divide-gray-100 mb-3 sm:mb-0">
+        <label for="question-search" class="sr-only">Search</label>
+        <div class="mt-1 relative lg:w-64 xl:w-96">
+          <input type="text" name="question_search" id="question-search"
+                 class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-cyan-600 focus:border-cyan-600 block w-full p-2.5"
+                 placeholder="Rechercher une question">
+        </div>
+      </div>
+      <div class="flex items-center space-x-2 sm:space-x-3 ml-auto">
+        <button type="button" (click)="addQuestion()"
+                class="w-1/2 text-white bg-cyan-600 hover:bg-cyan-700 focus:ring-4 focus:ring-cyan-200 font-medium inline-flex items-center justify-center rounded-lg text-sm px-3 py-2 text-center sm:w-auto">
+          <svg class="-ml-1 mr-2 h-6 w-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd"
+                  d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
+                  clip-rule="evenodd"></path>
+          </svg>
+          Ajouter une question
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+<app-loading *ngIf="loading"></app-loading>
+<div class="flex flex-col" *ngIf="!loading">
+  <div class="overflow-x-auto">
+    <div class="align-middle inline-block min-w-full">
+      <div class="shadow overflow-hidden">
+
+        <table class="table-fixed min-w-full divide-y divide-gray-200">
+          <thead class="bg-gray-100">
+          <tr>
+            <th scope="col" class="p-4 text-left text-xs font-medium text-gray-500 uppercase">
+              Id
+            </th>
+            <th scope="col" class="p-4 text-left text-xs font-medium text-gray-500 uppercase">
+              Question
+            </th>
+            <th scope="col" class="p-4 text-left text-xs font-medium text-gray-500 uppercase">
+              Réponse possible
+            </th>
+            <th scope="col" class="p-4 text-left text-xs font-medium text-gray-500 uppercase">
+              Catégorie
+            </th>
+            <th scope="col" class="p-4">
+            </th>
+          </tr>
+          </thead>
+          <tbody class="bg-white divide-y divide-gray-200">
+          <tr class="hover:bg-gray-100" *ngFor="let question of questions.slice().reverse()">
+            <td class="p-4 whitespace-nowrap text-base font-semibold text-gray-900">{{question.id}}</td>
+            <td class="p-4 whitespace-nowrap text-base font-medium text-gray-900">{{question.question}}</td>
+            <td class="p-4 whitespace-nowrap text-base font-normal text-gray-900">{{question.possibleResponse[question.correctResponse]}}</td>
+            <td class="p-4 whitespace-nowrap text-base font-medium text-gray-900">{{question.category}}</td>
+            <td class="p-4 whitespace-nowrap space-x-2">
+              <button type="button" data-modal-toggle="user-modal"
+                      (click)="editQuestion(question)"
+                      class="text-white bg-cyan-600 hover:bg-cyan-700 focus:ring-4 focus:ring-cyan-200 font-medium rounded-lg text-sm inline-flex items-center px-3 py-2 text-center">
+                <svg class="mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path>
+                  <path fill-rule="evenodd"
+                        d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"
+                        clip-rule="evenodd"></path>
+                </svg>
+                Modifier
+              </button>
+              <button type="button" data-modal-toggle="delete-user-modal"
+                      (click)="deleteQuestion(question)"
+                      class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm inline-flex items-center px-3 py-2 text-center">
+                <svg class="mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                  <path fill-rule="evenodd"
+                        d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z"
+                        clip-rule="evenodd"></path>
+                </svg>
+                Supprimer
+              </button>
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div *ngIf="modalQuestion" class="fixed inset-0 flex items-center justify-center z-50">
+  <div class="fixed inset-0 bg-black opacity-50"></div>
+  <app-create-question (closeModal)="closeModal($event)"></app-create-question>
+</div>
+
+<div *ngIf="questionEdited" class="fixed inset-0 flex items-center justify-center z-50">
+  <div class="fixed inset-0 bg-black opacity-50"></div>
+  <app-edit-question [question]="questionEdited" (closeModal)="closeModal($event)"></app-edit-question>
+</div>
+
+<div *ngIf="alertDelete" class="fixed inset-0 flex items-center justify-center z-50">
+  <div class="fixed inset-0 bg-black opacity-50"></div>
+  <app-delete-item [idQuestion]="questionDeleted" (closeModal)="closeModal($event)"></app-delete-item>
+</div>
+
+
+
+
+

Frontend/quizz-game/src/app/manage/questions/list-questions/list-questions.component.ts

+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {ManageService} from "../../manage.service";
+import {Subscription} from "rxjs";
+import {Question} from "../question-model";
+
+@Component({
+  selector: 'app-list-questions',
+  templateUrl: './list-questions.component.html',
+  styleUrls: ['./list-questions.component.css']
+})
+export class ListQuestionsComponent implements OnInit, OnDestroy {
+  myUsername!:string;
+  modalQuestion=false;
+  alertDelete=false;
+  alertSuccess!:string;
+
+  errorOccured!:boolean;
+  addSuccess!:boolean;
+  questions!: Question[]
+  loading!:boolean;
+  questionEdited!: any;
+  questionDeleted!: number;
+  private usersSub!: Subscription;
+
+
+  constructor(private manageService: ManageService) {
+  }
+
+  ngOnInit(){
+    this.myUsername=this.manageService.username;
+    this.errorOccured=false;
+    this.addSuccess=false;
+    this.loading=true;
+    this.usersSub=this.manageService.questions.subscribe((questions)=>{
+      this.questions=questions;
+    });
+    this.manageService.fetchQuestions().subscribe(()=>{
+      this.loading=false;
+    })
+    console.log(this.questions);
+
+
+
+  }
+
+
+
+  addQuestion(){
+    this.modalQuestion=true;
+
+  }
+
+  editQuestion(question: Question){
+    this.questionEdited=question;
+  }
+
+  deleteQuestion(question: Question){
+    this.questionDeleted=question.id;
+    this.alertDelete=true;
+  }
+
+  closeModal(value: string){
+    this.modalQuestion=false;
+    this.questionEdited=null;
+    this.alertDelete=false;
+    if(value !== "error"){
+      this.alertSuccess=value;
+      this.addSuccess=true;
+      setTimeout(() => {
+        this.addSuccess = false;
+      }, 5000);
+    }else{
+      this.errorOccured=true;
+      setTimeout(() => {
+        this.errorOccured = false;
+      }, 5000);
+    }
+  }
+
+  ngOnDestroy() {
+    if(this.usersSub)
+      this.usersSub.unsubscribe();
+  }
+}

Frontend/quizz-game/src/app/manage/questions/question-model.ts

+export class Question {
+  constructor(
+    public id: number,
+    public question: string,
+    public possibleResponse: string[],
+    public correctResponse: number,
+    public category: string
+  ) {}
+}

Frontend/quizz-game/src/app/manage/questions/questions.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { QuestionsService } from './questions.service';
+
+describe('QuestionsService', () => {
+  let service: QuestionsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(QuestionsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

Frontend/quizz-game/src/app/manage/questions/questions.service.ts

+import { Injectable } from '@angular/core';
+import {Question} from "./question-model";
+import {FormArray, FormControl, FormGroup, Validators} from "@angular/forms";
+import {User} from "../users/user-model";
+import {of, switchMap, take, tap} from "rxjs";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class QuestionsService {
+
+  constructor() { }
+
+  createPossibleResponseControl(response: string): FormGroup {
+    return new FormGroup({
+      value: new FormControl(response, Validators.required)
+    });
+  }
+
+  createPossibleResponsesControls(possibleResponse: string[] | null): FormGroup[] {
+    const controls: FormGroup[] = [];
+
+    if (possibleResponse && possibleResponse.length > 0) {
+      possibleResponse.forEach(response => {
+        controls.push(this.createPossibleResponseControl(response));
+      });
+    } else {
+      controls.push(this.createPossibleResponseControl(''));
+    }
+
+    return controls;
+  }
+
+  addPossibleResponse(event:any, formData: FormGroup): void {
+    event.preventDefault();
+    const possibleResponse = formData.get('possibleResponse') as FormArray;
+    possibleResponse.push(this.createPossibleResponseControl(''));
+  }
+
+  removePossibleResponse(index: number, formData: FormGroup): void {
+    const possibleResponse = formData.get('possibleResponse') as FormArray;
+    possibleResponse.removeAt(index);
+  }
+
+  formDataCreateQuestionInit(questionInfo?: Question): FormGroup {
+    return new FormGroup({
+      question: new FormControl(!questionInfo ? null : questionInfo.question, {
+        updateOn: 'change',
+        validators: [Validators.required],
+      }),
+      possibleResponse: new FormArray(
+        this.createPossibleResponsesControls(!questionInfo ? null : questionInfo.possibleResponse),
+        {
+          updateOn: 'change',
+          validators: [Validators.required],
+        }
+      ),
+      correctResponse: new FormControl(!questionInfo ? "choix" : questionInfo.correctResponse, {
+        updateOn: 'change',
+        validators: [Validators.required],
+      }),
+      category: new FormControl(!questionInfo ? null : questionInfo.category, {
+        updateOn: 'change',
+        validators: [Validators.required],
+      })
+    });
+  }
+
+
+}