feat: show selected community quiz

src/app/modules/community/list-quiz/list-quiz.component.html

@@ -6,12 +6,12 @@
                 class="inputRecherche" />
             <div class="container">
                 <div class="scrollable-list">
-                    <app-quiz-list [quizList]="quizList"></app-quiz-list>
+                    <app-quiz-list (valueEmitter)="slectedQuiz($event)" [quizList]="quizList"></app-quiz-list>
                 </div>
             </div>
         </div>
         <div class="containerRight">
-            <app-quiz-list-detail />
+            <app-quiz-list-detail [selectedQuiz]="codeQuiz" />
         </div>
     </div>
 </div>

src/app/modules/community/list-quiz/list-quiz.component.ts

@@ -12,8 +12,8 @@ import { filter } from 'rxjs';
 
 export class ListQuizComponent implements OnInit {
     //listQuizDataSource = new MatTableDataSource();
-    quizzes: any[] = []
-    quizList: any[] = [];
+    quizzes: any[] = []     //list from database
+    quizList: any[] = [];   //list to display
     //displayedColumns = ['Component'];
     constructor(private communityService: CommunityService) { }
     codeQuiz: string = '';
@@ -26,6 +26,10 @@ export class ListQuizComponent implements OnInit {
         this.loadData();
     }
 
+    slectedQuiz(codeQuiz: string) {
+        this.codeQuiz = codeQuiz;
+    }
+
     onPageChange(event: any) {
         this.skip = event.pageIndex;
         this.loadData();
@@ -38,15 +42,15 @@ export class ListQuizComponent implements OnInit {
                 this.quizzes = data;
                 this.totalQuiz = data.length;
                 this.quizzes.map((quiz => {
-
-                    this.quizList.push({ title: !quiz.name ? 'Untitled' : quiz.name, content: `${quiz.questions.length} QUESTIONS | ${quiz.difficulty.name} | ${!quiz.author ? 'Anonymous' : quiz.author}` })
+                    this.quizList.push({
+                        title: !quiz.name ? 'Untitled' : quiz.name,
+                        content: `${quiz.questions.length} QUESTIONS | ${quiz.difficulty.name} | ${!quiz.author ? 'Anonymous' : quiz.author}`,
+                        id: quiz.id
+                    })
                 }))
             },
         });
     }
-    clickOnQuiz(codeQuiz: string) {
-        this.clickedQuiz = codeQuiz;
-    }
     filter() {
         this.loadData();
     }

src/app/modules/community/quiz-list-detail/quiz-list-detail.component.html

 <div class="container">
     <div class="quiz-detail">
-        <h1>{{ quiz.title }}</h1>
-        <h2>{{ quiz.content }}</h2>
+        <h1>{{name}}</h1>
+        <h2>{{description}}</h2>
     </div>
 
     <div class="quiz-info">
@@ -10,7 +10,7 @@
             <hr />
         </div>
         <div class="quiz-info-content">
-            <p class="quiz-info-content-value">{{quiz.nbQuestions}} Questions, {{quiz.difficulty}}</p>
+            <p class="quiz-info-content-value">{{questionCount}} Questions, {{difficulty}}</p>
         </div>
 
     </div>

src/app/modules/community/quiz-list-detail/quiz-list-detail.component.ts

-import { Component, Input } from '@angular/core';
+import { Component, Input, SimpleChanges } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { QuestionService } from '../../../services/question.service';
+import { CommunityService } from '../../../services/community.service';
 
 @Component({
     selector: 'app-quiz-list-detail',
@@ -6,23 +9,47 @@ import { Component, Input } from '@angular/core';
     styleUrls: ['./quiz-list-detail.component.css', '../../../../styles.css'],
 })
 export class QuizListDetailComponent {
-    @Input() title: string = '';
-    @Input() nbQuestions: number = 0;
-    @Input() difficulty: string = '';
-    @Input() creator: string = '';
+    @Input() selectedQuiz: string = '';
 
     quiz: any
+    name: string = 'Untitled';
+    category: any;
+    description: any;
+    difficulty: any;
+    questionCount: any;
 
-    ngOnInit(): void {
-        this.quiz = {
-            title: "Quiz de la mort qui tue",
-            content: "un quiz de la mort qui tue",
-            difficulty: "hard",
-            creator: "Klebert",
-            nbQuestions: 10
+
+    constructor(
+        private questionService: QuestionService,
+        private activatedRoute: ActivatedRoute,
+        private communityService: CommunityService
+    ) { }
+
+    ngOnChanges(changes: SimpleChanges): void {
+        if (changes['selectedQuiz'] && changes['selectedQuiz'].currentValue) {
+            const newQuizId = changes['selectedQuiz'].currentValue;
+            this.loadQuiz(newQuizId);
         }
     }
 
+    loadQuiz(idQuiz: string): void {
+        this.communityService.getQuizInformations(idQuiz).subscribe({
+            next: (data: any) => {
+                console.log('Quiz loaded:', data);
+                this.name = data.name;
+                // this.category = data.category.name;
+                this.description = data.description;
+                this.difficulty = data.difficulty.name;
+                this.questionCount = data.questionCount;
+
+            },
+            error: (err) => {
+                console.error('Error loading quiz:', err);
+            },
+        });
+    }
+
+
     playQuiz() {
         console.log('play quiz');
     }

src/app/shared/quiz-list/quiz-list.component.html

 <div class="list">
-    <button *ngFor="let quiz of quizList" class="btn-primary">
+    <button *ngFor="let quiz of quizList" class="btn-primary" (click)="selectQuiz(quiz.id)">
         <h4>{{ quiz.title }}</h4>
         <p>{{ quiz.content }}</p>
     </button>

src/app/shared/quiz-list/quiz-list.component.ts

-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { CommonModule } from '@angular/common'; // Importez CommonModule
 
 @Component({
@@ -11,4 +11,10 @@ import { CommonModule } from '@angular/common'; // Importez CommonModule
 
 export class QuizListComponent {
   @Input() quizList: any[] = []; // Quiz list : title: string, content: string
+  @Output() valueEmitter = new EventEmitter<string>();
+
+  selectQuiz(quizId: string) {
+    this.valueEmitter.emit(quizId);
+    console.log('Quiz selected: ', quizId);
+  }
 }