From 0651a85e560b1856698bd52a39f6b8e8d909656e Mon Sep 17 00:00:00 2001
From: "h.hartz" <henri.hartz@etu.unistra.fr>
Date: Fri, 6 Dec 2024 02:45:01 +0100
Subject: [PATCH 1/3] feat: update import shared module

---
 src/app/modules/community/community.module.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/modules/community/community.module.ts b/src/app/modules/community/community.module.ts
index 2c663e3..257fb53 100644
--- a/src/app/modules/community/community.module.ts
+++ b/src/app/modules/community/community.module.ts
@@ -7,9 +7,10 @@ import { QuizListDetailComponent } from './quiz-list-detail/quiz-list-detail.com
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatFormField } from '@angular/material/form-field';
 import { FormsModule, NgModel } from '@angular/forms';
+import { SharedModule } from '../../shared/shared.module';
 
 @NgModule({
     declarations: [ListQuizComponent, QuizDetailComponent, QuizListDetailComponent],
-    imports: [CommonModule, MatTableModule, MatPaginatorModule, MatFormField, FormsModule],
+    imports: [CommonModule, MatTableModule, MatPaginatorModule, MatFormField, FormsModule, SharedModule],
 })
 export class CommunityModule {}
-- 
GitLab


From 400134fbb26e8808adc6b7661449fdb3287be166 Mon Sep 17 00:00:00 2001
From: "h.hartz" <henri.hartz@etu.unistra.fr>
Date: Fri, 6 Dec 2024 04:21:12 +0100
Subject: [PATCH 2/3] feat: transfert css

---
 .../list-quiz/list-quiz.component.css         | 43 +++++++++++++++++++
 .../list-quiz/list-quiz.component.html        | 42 +++++++++++++-----
 .../list-quiz/list-quiz.component.ts          | 11 +++--
 .../quiz-list-detail.component.css            |  6 +++
 .../quiz-list-detail.component.html           |  4 +-
 .../quiz-list-detail.component.ts             |  2 +-
 6 files changed, 90 insertions(+), 18 deletions(-)

diff --git a/src/app/modules/community/list-quiz/list-quiz.component.css b/src/app/modules/community/list-quiz/list-quiz.component.css
index e69de29..a2c2379 100644
--- a/src/app/modules/community/list-quiz/list-quiz.component.css
+++ b/src/app/modules/community/list-quiz/list-quiz.component.css
@@ -0,0 +1,43 @@
+.containerGlobal {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+
+}
+
+.containerLeft {
+    height: 100%;
+    width: 50%;
+}
+
+.containerRight {
+    height: 100%;
+    width: 50%;
+    background-image: url(../../../../../public/BackgroundSubScreen.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 2vmin;
+    padding-left: 75px;
+}
+
+.list {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 3;
+    overflow-y: auto;
+    overflow-x: hidden;
+    flex-wrap: nowrap;
+    /* scrollbar-color: rebeccapurple gray; */
+    --sb-track-color: #f3f3f3;
+    --sb-thumb-color: #ffffff;
+    --sb-size: 14px;
+
+    padding-top: 1%;
+    padding-bottom: 1%;
+}
\ No newline at end of file
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 02719b8..b9cd6c0 100644
--- a/src/app/modules/community/list-quiz/list-quiz.component.html
+++ b/src/app/modules/community/list-quiz/list-quiz.component.html
@@ -1,19 +1,39 @@
-<div class="list-quiz">
-    <input (keyup)="filter()" [(ngModel)]="filterText" matInput type="text" placeholder="Search a quiz" />
-    <table mat-table [dataSource]="listQuizDataSource">
-        <ng-container matColumnDef="Component">
-            <td mat-cell *matCellDef="let quiz" (click)="clickOnQuiz(quiz.id)">
+<div class="question-marks">
+    <div class="containerGlobal">
+        <div class="containerLeft">
+            <h1>Community quiz</h1>
+            <input (keyup)="filter()" [(ngModel)]="filterText" type="text" placeholder="Search a quiz" class="inputRecherche" />
+            <div class="list">
+                <div class="scrollable-list" *ngFor="let quiz of quizzes">
+                    <app-quiz-list-detail
+                        [title]="quiz.id"
+                        [nbQuestions]="quiz.questions.length"
+                        [difficulty]="quiz.difficulty.name"
+                        [creator]="quiz.author ?? 'Anonymous'"
+                    />
+                </div>
+            </div>
+        </div>
+        <div class="containerRight">
+            <div class="quiz-detail"><app-quiz-detail [codeQuiz]="clickedQuiz"></app-quiz-detail></div>
+        </div>
+    </div>
+</div>
+<!--
+        <div class="component">
+            <div class="scrollable-list"ngFor="let quiz of quizzes"
                 <app-quiz-list-detail
                     [title]="quiz.id"
                     [nbQuestions]="quiz.questions.length"
                     [difficulty]="quiz.difficulty.name"
                     [creator]="quiz.author ?? 'Anonymous'"
                 ></app-quiz-list-detail>
-            </td>
-        </ng-container>
-        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-    </table>
-    <mat-paginator
+            </div>
+        </div>
+        <!--<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>-->
+
+
+    <!-- <mat-paginator
         (page)="onPageChange($event)"
         [pageSize]="take"
         [pageIndex]="skip"
@@ -22,4 +42,4 @@
     >
     </mat-paginator>
 </div>
-<div class="quiz-detail"><app-quiz-detail [codeQuiz]="clickedQuiz"></app-quiz-detail></div>
+<div class="quiz-detail"><app-quiz-detail [codeQuiz]="clickedQuiz"></app-quiz-detail></div> -->
\ No newline at end of file
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 5cf284d..2313516 100644
--- a/src/app/modules/community/list-quiz/list-quiz.component.ts
+++ b/src/app/modules/community/list-quiz/list-quiz.component.ts
@@ -7,11 +7,13 @@ import { filter } from 'rxjs';
 @Component({
     selector: 'app-list-quiz',
     templateUrl: './list-quiz.component.html',
-    styleUrl: './list-quiz.component.css',
+    styleUrls: ['./list-quiz.component.css','../../../../styles.css'],
 })
+
 export class ListQuizComponent implements OnInit {
-    listQuizDataSource = new MatTableDataSource();
-    displayedColumns = ['Component'];
+    //listQuizDataSource = new MatTableDataSource();
+    quizzes: any[] = []
+    //displayedColumns = ['Component'];
     constructor(private communityService: CommunityService) {}
     codeQuiz: string = '';
     skip: number = 0;
@@ -31,7 +33,8 @@ export class ListQuizComponent implements OnInit {
         this.communityService.getCommunityQuiz(this.skip, this.take, this.filterText).subscribe({
             next: (data: any) => {
                 console.log('data: ', data);
-                this.listQuizDataSource.data = data;
+                //this.listQuizDataSource.data = data;
+                this.quizzes = data;
                 this.totalQuiz = data.length;
             },
         });
diff --git a/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.css b/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.css
index e69de29..2571441 100644
--- a/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.css
+++ b/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.css
@@ -0,0 +1,6 @@
+.main-container {
+    height: 10%;
+    width: 100%;
+    background-color: #F3F3F3;
+    border-radius: 8;
+}
\ No newline at end of file
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 28cf4e9..ac5a9dc 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,6 +1,6 @@
 <div class="main-container">
-    <p class="title">{{ title }}</p>
+    <h4>{{ title }}</h4>
     <p class="description">
         {{ nbQuestions }} QUESTIONS | {{ difficulty.toUpperCase() }} | {{ creator.toUpperCase() }}
     </p>
-</div>
+</div>
\ No newline at end of file
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 f1848ae..0003c96 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
@@ -3,7 +3,7 @@ import { Component, Input } from '@angular/core';
 @Component({
     selector: 'app-quiz-list-detail',
     templateUrl: './quiz-list-detail.component.html',
-    styleUrl: './quiz-list-detail.component.css',
+    styleUrls: ['./quiz-list-detail.component.css','../../../../styles.css'],
 })
 export class QuizListDetailComponent {
     @Input() title: string = '';
-- 
GitLab


From 84051603e5e432a0da8e52ddb3bd6eebc8b3934d Mon Sep 17 00:00:00 2001
From: D3B1RUM4N <elies1.mek03@gmail.com>
Date: Fri, 6 Dec 2024 05:18:57 +0100
Subject: [PATCH 3/3] feat: community page

Co-authored-by: henri.hartz
---
 .../list-quiz/list-quiz.component.css         | 42 ++++++++------
 .../list-quiz/list-quiz.component.html        | 18 +++---
 .../list-quiz/list-quiz.component.ts          |  9 ++-
 .../quiz-list-detail.component.css            | 57 +++++++++++++++++--
 .../quiz-list-detail.component.html           | 25 ++++++--
 .../quiz-list-detail.component.ts             | 18 +++++-
 .../profile-info/profile-info.component.css   |  5 --
 .../shared/quiz-list/quiz-list.component.css  |  3 +-
 src/styles.css                                |  7 +++
 9 files changed, 135 insertions(+), 49 deletions(-)

diff --git a/src/app/modules/community/list-quiz/list-quiz.component.css b/src/app/modules/community/list-quiz/list-quiz.component.css
index a2c2379..ce9b81f 100644
--- a/src/app/modules/community/list-quiz/list-quiz.component.css
+++ b/src/app/modules/community/list-quiz/list-quiz.component.css
@@ -1,3 +1,7 @@
+.containerGlobal {
+    display: flex;
+}
+
 .containerGlobal {
     height: 100%;
     width: 100%;
@@ -9,6 +13,10 @@
 .containerLeft {
     height: 100%;
     width: 50%;
+    padding-inline: 2%;
+    display: flex;
+    flex-direction: column;
+    justify-content: 'space-between';
 }
 
 .containerRight {
@@ -17,27 +25,25 @@
     background-image: url(../../../../../public/BackgroundSubScreen.png);
     background-repeat: no-repeat;
     background-size: cover;
-    display: flex;
+    /* display: flex;
     flex-direction: column;
-    align-items: center;
-    padding-top: 2vmin;
-    padding-left: 75px;
+    align-items: center; */
 }
 
-.list {
+
+.container {
     display: flex;
     flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    flex-grow: 3;
-    overflow-y: auto;
-    overflow-x: hidden;
-    flex-wrap: nowrap;
-    /* scrollbar-color: rebeccapurple gray; */
-    --sb-track-color: #f3f3f3;
-    --sb-thumb-color: #ffffff;
-    --sb-size: 14px;
-
-    padding-top: 1%;
-    padding-bottom: 1%;
+
+    border-radius: 25px;
+    background-color: #fff;
+    box-shadow: 0 0 0.5% rgba(0, 0, 0, 0.1);
+    width: 100%;
+    height: 70%;
+    flex-grow: 0;
+
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    border: 1vmin solid #F3F3F3;
 }
\ No newline at end of file
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 b9cd6c0..bc6f170 100644
--- a/src/app/modules/community/list-quiz/list-quiz.component.html
+++ b/src/app/modules/community/list-quiz/list-quiz.component.html
@@ -2,20 +2,16 @@
     <div class="containerGlobal">
         <div class="containerLeft">
             <h1>Community quiz</h1>
-            <input (keyup)="filter()" [(ngModel)]="filterText" type="text" placeholder="Search a quiz" class="inputRecherche" />
-            <div class="list">
-                <div class="scrollable-list" *ngFor="let quiz of quizzes">
-                    <app-quiz-list-detail
-                        [title]="quiz.id"
-                        [nbQuestions]="quiz.questions.length"
-                        [difficulty]="quiz.difficulty.name"
-                        [creator]="quiz.author ?? 'Anonymous'"
-                    />
+            <input (keyup)="filter()" [(ngModel)]="filterText" type="text" placeholder="Search a quiz"
+                class="inputRecherche" />
+            <div class="container">
+                <div class="scrollable-list">
+                    <app-quiz-list [quizList]="quizList"></app-quiz-list>
                 </div>
             </div>
         </div>
         <div class="containerRight">
-            <div class="quiz-detail"><app-quiz-detail [codeQuiz]="clickedQuiz"></app-quiz-detail></div>
+            <app-quiz-list-detail />
         </div>
     </div>
 </div>
@@ -33,7 +29,7 @@
         <!--<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>-->
 
 
-    <!-- <mat-paginator
+<!-- <mat-paginator
         (page)="onPageChange($event)"
         [pageSize]="take"
         [pageIndex]="skip"
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 2313516..802eb44 100644
--- a/src/app/modules/community/list-quiz/list-quiz.component.ts
+++ b/src/app/modules/community/list-quiz/list-quiz.component.ts
@@ -7,14 +7,15 @@ import { filter } from 'rxjs';
 @Component({
     selector: 'app-list-quiz',
     templateUrl: './list-quiz.component.html',
-    styleUrls: ['./list-quiz.component.css','../../../../styles.css'],
+    styleUrls: ['./list-quiz.component.css', '../../../../styles.css'],
 })
 
 export class ListQuizComponent implements OnInit {
     //listQuizDataSource = new MatTableDataSource();
     quizzes: any[] = []
+    quizList: any[] = [];
     //displayedColumns = ['Component'];
-    constructor(private communityService: CommunityService) {}
+    constructor(private communityService: CommunityService) { }
     codeQuiz: string = '';
     skip: number = 0;
     take: number = 10;
@@ -36,6 +37,10 @@ export class ListQuizComponent implements OnInit {
                 //this.listQuizDataSource.data = data;
                 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}` })
+                }))
             },
         });
     }
diff --git a/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.css b/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.css
index 2571441..f7b1dca 100644
--- a/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.css
+++ b/src/app/modules/community/quiz-list-detail/quiz-list-detail.component.css
@@ -1,6 +1,53 @@
-.main-container {
-    height: 10%;
-    width: 100%;
-    background-color: #F3F3F3;
-    border-radius: 8;
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    height: calc(100% - 2vmin);
+    width: calc(100% - 100px);
+    gap: 1rem;
+    padding-left: 100px;
+}
+
+/* Titre */
+.container h1 {
+    font-size: 1.8em;
+    color: #333;
+    text-align: center;
+    /* margin-bottom: 1.5rem; */
+    margin: 0;
+    font-weight: 500;
+}
+
+.quiz-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    height: 30vh;
+
+    background-color: #FEFEFE;
+    border-radius: 10px;
+    gap: 1rem;
+}
+
+.quiz-info-content {
+    display: flex;
+    flex-direction: row;
+    gap: 0.6rem;
+    padding-left: 10%;
+}
+
+.quiz-title {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+hr {
+    width: 70%;
+    padding-left: 15%;
+    height: 0.5vmin;
+    margin: 0;
+    background-color: #B9B9B9;
+    border: none;
 }
\ No newline at end of file
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 ac5a9dc..67cde8e 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,6 +1,21 @@
-<div class="main-container">
-    <h4>{{ title }}</h4>
-    <p class="description">
-        {{ nbQuestions }} QUESTIONS | {{ difficulty.toUpperCase() }} | {{ creator.toUpperCase() }}
-    </p>
+<div class="container">
+    <div class="quiz-detail">
+        <h1>{{ quiz.title }}</h1>
+        <h2>{{ quiz.content }}</h2>
+    </div>
+
+    <div class="quiz-info">
+        <div class="quiz-title">
+            <p class="quiz-info-title">About this quiz</p>
+            <hr />
+        </div>
+        <div class="quiz-info-content">
+            <p class="quiz-info-content-value">{{quiz.nbQuestions}} Questions, {{quiz.difficulty}}</p>
+        </div>
+
+    </div>
+
+    <div class="new-quiz">
+        <button class="blueButton" (click)="playQuiz()">Go !</button>
+    </div>
 </div>
\ No newline at end of file
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 0003c96..4428c87 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
@@ -3,11 +3,27 @@ import { Component, Input } from '@angular/core';
 @Component({
     selector: 'app-quiz-list-detail',
     templateUrl: './quiz-list-detail.component.html',
-    styleUrls: ['./quiz-list-detail.component.css','../../../../styles.css'],
+    styleUrls: ['./quiz-list-detail.component.css', '../../../../styles.css'],
 })
 export class QuizListDetailComponent {
     @Input() title: string = '';
     @Input() nbQuestions: number = 0;
     @Input() difficulty: string = '';
     @Input() creator: string = '';
+
+    quiz: 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
+        }
+    }
+
+    playQuiz() {
+        console.log('play quiz');
+    }
 }
diff --git a/src/app/modules/profile/profile-info/profile-info.component.css b/src/app/modules/profile/profile-info/profile-info.component.css
index af925cf..06003f3 100644
--- a/src/app/modules/profile/profile-info/profile-info.component.css
+++ b/src/app/modules/profile/profile-info/profile-info.component.css
@@ -45,12 +45,7 @@
     height: 89%;
 }
 
-.scrollable-list {
-    /* max-height: 95%; */
-    overflow-y: auto;
-    overflow-x: hidden;
 
-}
 
 .form-group {
     width: 100%;
diff --git a/src/app/shared/quiz-list/quiz-list.component.css b/src/app/shared/quiz-list/quiz-list.component.css
index 1ae280c..392e8ac 100644
--- a/src/app/shared/quiz-list/quiz-list.component.css
+++ b/src/app/shared/quiz-list/quiz-list.component.css
@@ -18,8 +18,7 @@
 
 /* Styles génériques */
 button {
-    width: 100%;
-    /* margin-bottom: 1%; */
+    height: 8vh;
     width: 90%;
     flex-shrink: 0;
     margin: 1%;
diff --git a/src/styles.css b/src/styles.css
index cc3b399..1d2146f 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -171,4 +171,11 @@ h1 {
 
 .scrollable-list::-webkit-scrollbar-thumb:hover {
     background-color: #555;
+}
+
+.scrollable-list {
+    /* max-height: 95%; */
+    overflow-y: auto;
+    overflow-x: hidden;
+
 }
\ No newline at end of file
-- 
GitLab