From b263c8b75530ab2694e9b7778833d09ec4d6de66 Mon Sep 17 00:00:00 2001
From: mekhinini <elies.mekhinini@etu.unistra.fr>
Date: Fri, 6 Dec 2024 09:38:46 +0100
Subject: [PATCH 1/2] feat: show selected community quiz

---
 .../list-quiz/list-quiz.component.html        |  4 +-
 .../list-quiz/list-quiz.component.ts          | 18 ++++---
 .../quiz-list-detail.component.html           |  6 +--
 .../quiz-list-detail.component.ts             | 51 ++++++++++++++-----
 .../shared/quiz-list/quiz-list.component.html |  2 +-
 .../shared/quiz-list/quiz-list.component.ts   |  8 ++-
 6 files changed, 63 insertions(+), 26 deletions(-)

diff --git a/src/app/modules/community/list-quiz/list-quiz.component.html b/src/app/modules/community/list-quiz/list-quiz.component.html
index bc6f170..9b95087 100644
--- a/src/app/modules/community/list-quiz/list-quiz.component.html
+++ b/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>
diff --git a/src/app/modules/community/list-quiz/list-quiz.component.ts b/src/app/modules/community/list-quiz/list-quiz.component.ts
index 802eb44..25d8337 100644
--- a/src/app/modules/community/list-quiz/list-quiz.component.ts
+++ b/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();
     }
diff --git a/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.html b/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.html
index 67cde8e..1fabeb6 100644
--- a/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.html
+++ b/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.html
@@ -1,7 +1,7 @@
 <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>
diff --git a/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.ts b/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.ts
index 4428c87..45a8b71 100644
--- a/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.ts
+++ b/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.ts
@@ -1,4 +1,7 @@
-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');
     }
diff --git a/src/app/shared/quiz-list/quiz-list.component.html b/src/app/shared/quiz-list/quiz-list.component.html
index dc41f20..50854f5 100644
--- a/src/app/shared/quiz-list/quiz-list.component.html
+++ b/src/app/shared/quiz-list/quiz-list.component.html
@@ -1,5 +1,5 @@
 <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>
diff --git a/src/app/shared/quiz-list/quiz-list.component.ts b/src/app/shared/quiz-list/quiz-list.component.ts
index 0550182..07b3f85 100644
--- a/src/app/shared/quiz-list/quiz-list.component.ts
+++ b/src/app/shared/quiz-list/quiz-list.component.ts
@@ -1,4 +1,4 @@
-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);
+  }
 }
-- 
GitLab


From 96e4d31f063ad9dc1361fef27c4b539de3fe4470 Mon Sep 17 00:00:00 2001
From: mekhinini <elies.mekhinini@etu.unistra.fr>
Date: Fri, 6 Dec 2024 09:52:28 +0100
Subject: [PATCH 2/2] feat: play community quizzes

---
 src/app/modules/community/community.module.ts              | 3 ++-
 .../quiz-list-detail/quiz-list-detail.component.html       | 1 -
 .../quiz-list-detail/quiz-list-detail.component.ts         | 7 ++++---
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/app/modules/community/community.module.ts b/src/app/modules/community/community.module.ts
index 257fb53..e094099 100644
--- a/src/app/modules/community/community.module.ts
+++ b/src/app/modules/community/community.module.ts
@@ -11,6 +11,7 @@ import { SharedModule } from '../../shared/shared.module';
 
 @NgModule({
     declarations: [ListQuizComponent, QuizDetailComponent, QuizListDetailComponent],
+    // exports: [ListQuizComponent, QuizDetailComponent, QuizListDetailComponent],
     imports: [CommonModule, MatTableModule, MatPaginatorModule, MatFormField, FormsModule, SharedModule],
 })
-export class CommunityModule {}
+export class CommunityModule { }
diff --git a/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.html b/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.html
index 1fabeb6..4797123 100644
--- a/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.html
+++ b/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.html
@@ -12,7 +12,6 @@
         <div class="quiz-info-content">
             <p class="quiz-info-content-value">{{questionCount}} Questions, {{difficulty}}</p>
         </div>
-
     </div>
 
     <div class="new-quiz">
diff --git a/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.ts b/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.ts
index 45a8b71..677df99 100644
--- a/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.ts
+++ b/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, SimpleChanges } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { QuestionService } from '../../../services/question.service';
 import { CommunityService } from '../../../services/community.service';
 
@@ -22,7 +22,8 @@ export class QuizListDetailComponent {
     constructor(
         private questionService: QuestionService,
         private activatedRoute: ActivatedRoute,
-        private communityService: CommunityService
+        private communityService: CommunityService,
+        private router: Router,
     ) { }
 
     ngOnChanges(changes: SimpleChanges): void {
@@ -51,6 +52,6 @@ export class QuizListDetailComponent {
 
 
     playQuiz() {
-        console.log('play quiz');
+        this.router.navigate(['/play-quiz'], { queryParams: { idQuiz: this.selectedQuiz } });
     }
 }
-- 
GitLab