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