diff --git a/Frontend/quizz-game/src/app/app-routing.module.ts b/Frontend/quizz-game/src/app/app-routing.module.ts index dd7de336102fed640276db08788a94dd15251e2a..4c9cd1f571b08b64b366bcdd830ef214057b7404 100644 --- a/Frontend/quizz-game/src/app/app-routing.module.ts +++ b/Frontend/quizz-game/src/app/app-routing.module.ts @@ -4,10 +4,10 @@ import { LoginComponent } from "./login/login.component"; import {SignInComponent} from "./login/sign-in/sign-in.component"; import {SignUpComponent} from "./login/sign-up/sign-up.component"; import {ManageComponent} from "./manage/manage.component"; -import {ListUsersComponent} from "./manage/list-users/list-users.component"; -import {ListQuestionsComponent} from "./manage/list-questions/list-questions.component"; -import {CreateUserComponent} from "./manage/create-user/create-user.component"; -import {CreateQuestionComponent} from "./manage/create-question/create-question.component"; +import {ListUsersComponent} from "./manage/users/list-users/list-users.component"; +import {ListQuestionsComponent} from "./manage/questions/list-questions/list-questions.component"; +import {CreateUserComponent} from "./manage/users/create-user/create-user.component"; +import {CreateQuestionComponent} from "./manage/questions/create-question/create-question.component"; import {AccountDetailsComponent} from "./manage/account-details/account-details.component"; const routes: Routes = [ diff --git a/Frontend/quizz-game/src/app/app.module.ts b/Frontend/quizz-game/src/app/app.module.ts index 94841c5fb442afa93547de165ae608a5082c5425..9e50a3d848c7185b28380e2511a925ac20a0abee 100644 --- a/Frontend/quizz-game/src/app/app.module.ts +++ b/Frontend/quizz-game/src/app/app.module.ts @@ -12,16 +12,16 @@ import { ReactiveFormsModule } from '@angular/forms'; import { HttpClientModule } from '@angular/common/http'; import { ErrorloginComponent } from './login/errorlogin/errorlogin.component'; import { ManageComponent } from './manage/manage.component'; -import { ListUsersComponent } from './manage/list-users/list-users.component'; -import { ListQuestionsComponent } from './manage/list-questions/list-questions.component'; -import { CreateUserComponent } from './manage/create-user/create-user.component'; -import { CreateQuestionComponent } from './manage/create-question/create-question.component'; +import { ListUsersComponent } from './manage/users/list-users/list-users.component'; +import { ListQuestionsComponent } from './manage/questions/list-questions/list-questions.component'; +import { CreateUserComponent } from './manage/users/create-user/create-user.component'; +import { CreateQuestionComponent } from './manage/questions/create-question/create-question.component'; import { AccountDetailsComponent } from './manage/account-details/account-details.component'; -import { AlertAddComponent } from './manage/alert-add/alert-add.component'; -import { LoadingComponent } from './manage/loading/loading.component'; -import { EditUserComponent } from './manage/edit-user/edit-user.component'; -import { EditQuestionComponent } from './manage/edit-question/edit-question.component'; -import { DeleteItemComponent } from './manage/delete-item/delete-item.component'; +import { AlertAddComponent } from './manage/component/alert-add/alert-add.component'; +import { LoadingComponent } from './manage/component/loading/loading.component'; +import { EditUserComponent } from './manage/users/edit-user/edit-user.component'; +import { EditQuestionComponent } from './manage/questions/edit-question/edit-question.component'; +import { DeleteItemComponent } from './manage/component/delete-item/delete-item.component'; diff --git a/Frontend/quizz-game/src/app/login/login.service.ts b/Frontend/quizz-game/src/app/login/login.service.ts index c7be5421422cf2cf5f8a1930b31576a3cab45988..ed3193df30cc3fb1f11f650d0aafb3e4f0ae2ff4 100644 --- a/Frontend/quizz-game/src/app/login/login.service.ts +++ b/Frontend/quizz-game/src/app/login/login.service.ts @@ -1,7 +1,7 @@ import { Injectable } from '@angular/core'; import * as CryptoJS from 'crypto-js'; import {AbstractControl, FormControl, FormGroup, Validators} from "@angular/forms"; -import {User} from "../manage/list-users/user-model"; +import {User} from "../manage/users/user-model"; export enum ErrorLogin { PassConfirm , diff --git a/Frontend/quizz-game/src/app/manage/alert-add/alert-add.component.css b/Frontend/quizz-game/src/app/manage/component/alert-add/alert-add.component.css similarity index 100% rename from Frontend/quizz-game/src/app/manage/alert-add/alert-add.component.css rename to Frontend/quizz-game/src/app/manage/component/alert-add/alert-add.component.css diff --git a/Frontend/quizz-game/src/app/manage/alert-add/alert-add.component.html b/Frontend/quizz-game/src/app/manage/component/alert-add/alert-add.component.html similarity index 100% rename from Frontend/quizz-game/src/app/manage/alert-add/alert-add.component.html rename to Frontend/quizz-game/src/app/manage/component/alert-add/alert-add.component.html diff --git a/Frontend/quizz-game/src/app/manage/alert-add/alert-add.component.spec.ts b/Frontend/quizz-game/src/app/manage/component/alert-add/alert-add.component.spec.ts similarity index 100% rename from Frontend/quizz-game/src/app/manage/alert-add/alert-add.component.spec.ts rename to Frontend/quizz-game/src/app/manage/component/alert-add/alert-add.component.spec.ts diff --git a/Frontend/quizz-game/src/app/manage/alert-add/alert-add.component.ts b/Frontend/quizz-game/src/app/manage/component/alert-add/alert-add.component.ts similarity index 50% rename from Frontend/quizz-game/src/app/manage/alert-add/alert-add.component.ts rename to Frontend/quizz-game/src/app/manage/component/alert-add/alert-add.component.ts index 2568014f6261796b8c13d307bb634577586fb642..1bbaee80060427a92f20c3ef62bea838241f6f9f 100644 --- a/Frontend/quizz-game/src/app/manage/alert-add/alert-add.component.ts +++ b/Frontend/quizz-game/src/app/manage/component/alert-add/alert-add.component.ts @@ -11,16 +11,29 @@ export class AlertAddComponent implements OnInit { @Input() typeAlert!: string; ngOnInit() { - if(this.typeAlert === "add_success"){ + if(this.typeAlert === "add_user_success"){ this.alertTitle="Ajout d'utilisateur"; this.alertDescription="L'utilisateur a été ajouté avec succès"; - }else if(this.typeAlert === "edit_success"){ + } + if(this.typeAlert === "add_question_success"){ + this.alertTitle="Ajout d'une question"; + this.alertDescription="La question a été ajouté avec succès"; + } + if(this.typeAlert === "edit_user_success"){ this.alertTitle="Modification d'utilisateur"; this.alertDescription="L'utilisateur a été modifié avec succès" - }else{ - // delete success + } + if(this.typeAlert === "edit_question_success"){ + this.alertTitle="Modification d'une question"; + this.alertDescription="La question a été modifié avec succès" + } + if(this.typeAlert === "delete_user_success"){ this.alertTitle="Suppression d'utilisateur"; - this.alertDescription="L'utilisateur a été supprimé avec succèes" + this.alertDescription="L'utilisateur a été supprimé avec succès" + } + if(this.typeAlert === "delete_question_success"){ + this.alertTitle="Suppression d'une question"; + this.alertDescription="La question a été supprimé avec succès" } } } diff --git a/Frontend/quizz-game/src/app/manage/delete-item/delete-item.component.css b/Frontend/quizz-game/src/app/manage/component/delete-item/delete-item.component.css similarity index 100% rename from Frontend/quizz-game/src/app/manage/delete-item/delete-item.component.css rename to Frontend/quizz-game/src/app/manage/component/delete-item/delete-item.component.css diff --git a/Frontend/quizz-game/src/app/manage/delete-item/delete-item.component.html b/Frontend/quizz-game/src/app/manage/component/delete-item/delete-item.component.html similarity index 76% rename from Frontend/quizz-game/src/app/manage/delete-item/delete-item.component.html rename to Frontend/quizz-game/src/app/manage/component/delete-item/delete-item.component.html index ad45f1cd2d2928c974e81272be35a5d682412c5e..82c0bb5b65923a2d1c5d587aa9d3ad952d2b86cd 100644 --- a/Frontend/quizz-game/src/app/manage/delete-item/delete-item.component.html +++ b/Frontend/quizz-game/src/app/manage/component/delete-item/delete-item.component.html @@ -10,11 +10,16 @@ </svg> </div> - <div class="ml-3"> + <div class="ml-3" *ngIf="username"> <h2 class="font-semibold text-gray-800">Suppression d'un utilisateur</h2> <p class="mt-2 text-sm text-gray-600 leading-relaxed">Êtes vous sûr de supprimer l'utilisateur "{{username}}"?</p> </div> + <div class="ml-3" *ngIf="idQuestion"> + <h2 class="font-semibold text-gray-800">Suppression d'une question</h2> + <p class="mt-2 text-sm text-gray-600 leading-relaxed">Êtes vous sûr de supprimer la question + "{{idQuestion}}"?</p> + </div> </div> <div class="flex items-center mt-3"> @@ -24,7 +29,7 @@ </button> <button class="flex-1 px-4 py-2 ml-2 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded-md" - (click)="deleteUser()"> + (click)="deleteItem()"> Supprimer </button> </div> diff --git a/Frontend/quizz-game/src/app/manage/delete-item/delete-item.component.spec.ts b/Frontend/quizz-game/src/app/manage/component/delete-item/delete-item.component.spec.ts similarity index 100% rename from Frontend/quizz-game/src/app/manage/delete-item/delete-item.component.spec.ts rename to Frontend/quizz-game/src/app/manage/component/delete-item/delete-item.component.spec.ts diff --git a/Frontend/quizz-game/src/app/manage/delete-item/delete-item.component.ts b/Frontend/quizz-game/src/app/manage/component/delete-item/delete-item.component.ts similarity index 59% rename from Frontend/quizz-game/src/app/manage/delete-item/delete-item.component.ts rename to Frontend/quizz-game/src/app/manage/component/delete-item/delete-item.component.ts index c82c7bc47695a43b9bedd03b70bea1186d413b35..a95952804da575c94e7c42ac20a27cae55364993 100644 --- a/Frontend/quizz-game/src/app/manage/delete-item/delete-item.component.ts +++ b/Frontend/quizz-game/src/app/manage/component/delete-item/delete-item.component.ts @@ -1,8 +1,8 @@ import {Component, EventEmitter, Input, Output} from '@angular/core'; -import {User} from "../list-users/user-model"; +import {User} from "../../users/user-model"; import {HttpClient} from "@angular/common/http"; -import {LoginService} from "../../login/login.service"; -import {ManageService} from "../manage.service"; +import {LoginService} from "../../../login/login.service"; +import {ManageService} from "../../manage.service"; import {error} from "@angular/compiler-cli/src/transformers/util"; @Component({ @@ -11,22 +11,34 @@ import {error} from "@angular/compiler-cli/src/transformers/util"; styleUrls: ['./delete-item.component.css'] }) export class DeleteItemComponent { - @Input() username!: string + @Input() username!: string; + @Input() idQuestion!: number; @Output() closeModal: EventEmitter<string> = new EventEmitter<string>(); constructor(private httpClient: HttpClient, private loginService: LoginService, private manageService: ManageService) { } - deleteUser(){ + deleteItem(){ if(this.username){ this.manageService.deleteUser(this.username).subscribe(()=>{ - this.closeModal.emit("delete_success") + this.closeModal.emit("delete_user_success") }, error=>{ console.log("error delete user:", error); this.closeModal.emit('error') }) } + if(this.idQuestion){ + this.manageService.deleteQuestion(this.idQuestion).subscribe(()=>{ + this.closeModal.emit("delete_question_success") + }, error=>{ + console.log("error delete question:", error); + this.closeModal.emit('error') + }) + } + } + + closeModalInterface(){ this.closeModal.emit(undefined); } diff --git a/Frontend/quizz-game/src/app/manage/loading/loading.component.css b/Frontend/quizz-game/src/app/manage/component/loading/loading.component.css similarity index 100% rename from Frontend/quizz-game/src/app/manage/loading/loading.component.css rename to Frontend/quizz-game/src/app/manage/component/loading/loading.component.css diff --git a/Frontend/quizz-game/src/app/manage/loading/loading.component.html b/Frontend/quizz-game/src/app/manage/component/loading/loading.component.html similarity index 100% rename from Frontend/quizz-game/src/app/manage/loading/loading.component.html rename to Frontend/quizz-game/src/app/manage/component/loading/loading.component.html diff --git a/Frontend/quizz-game/src/app/manage/loading/loading.component.spec.ts b/Frontend/quizz-game/src/app/manage/component/loading/loading.component.spec.ts similarity index 100% rename from Frontend/quizz-game/src/app/manage/loading/loading.component.spec.ts rename to Frontend/quizz-game/src/app/manage/component/loading/loading.component.spec.ts diff --git a/Frontend/quizz-game/src/app/manage/loading/loading.component.ts b/Frontend/quizz-game/src/app/manage/component/loading/loading.component.ts similarity index 100% rename from Frontend/quizz-game/src/app/manage/loading/loading.component.ts rename to Frontend/quizz-game/src/app/manage/component/loading/loading.component.ts diff --git a/Frontend/quizz-game/src/app/manage/create-question/create-question.component.html b/Frontend/quizz-game/src/app/manage/create-question/create-question.component.html deleted file mode 100644 index ab200b5875b1ec5448109150ab21e20a86aae4c9..0000000000000000000000000000000000000000 --- a/Frontend/quizz-game/src/app/manage/create-question/create-question.component.html +++ /dev/null @@ -1 +0,0 @@ -<p>create-question works!</p> diff --git a/Frontend/quizz-game/src/app/manage/create-question/create-question.component.ts b/Frontend/quizz-game/src/app/manage/create-question/create-question.component.ts deleted file mode 100644 index d8dd2289634db24e8e838939a252f01019f2b685..0000000000000000000000000000000000000000 --- a/Frontend/quizz-game/src/app/manage/create-question/create-question.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-create-question', - templateUrl: './create-question.component.html', - styleUrls: ['./create-question.component.css'] -}) -export class CreateQuestionComponent { - -} diff --git a/Frontend/quizz-game/src/app/manage/edit-question/edit-question.component.html b/Frontend/quizz-game/src/app/manage/edit-question/edit-question.component.html deleted file mode 100644 index 0d70d6e981d770f3007a5a5837603ed663b7e2f8..0000000000000000000000000000000000000000 --- a/Frontend/quizz-game/src/app/manage/edit-question/edit-question.component.html +++ /dev/null @@ -1 +0,0 @@ -<p>edit-question works!</p> diff --git a/Frontend/quizz-game/src/app/manage/edit-question/edit-question.component.ts b/Frontend/quizz-game/src/app/manage/edit-question/edit-question.component.ts deleted file mode 100644 index a077a98bd2d9218e535a483c94316c4497ef7a73..0000000000000000000000000000000000000000 --- a/Frontend/quizz-game/src/app/manage/edit-question/edit-question.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-edit-question', - templateUrl: './edit-question.component.html', - styleUrls: ['./edit-question.component.css'] -}) -export class EditQuestionComponent { - -} diff --git a/Frontend/quizz-game/src/app/manage/list-questions/list-questions.component.html b/Frontend/quizz-game/src/app/manage/list-questions/list-questions.component.html deleted file mode 100644 index 21a527cb97f8608e1d50e210d3759205e62d6075..0000000000000000000000000000000000000000 --- a/Frontend/quizz-game/src/app/manage/list-questions/list-questions.component.html +++ /dev/null @@ -1 +0,0 @@ -<p>list-questions works!</p> diff --git a/Frontend/quizz-game/src/app/manage/list-questions/list-questions.component.ts b/Frontend/quizz-game/src/app/manage/list-questions/list-questions.component.ts deleted file mode 100644 index e74181cb3ff3def1a68f32a09b482b2e61b53125..0000000000000000000000000000000000000000 --- a/Frontend/quizz-game/src/app/manage/list-questions/list-questions.component.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-list-questions', - templateUrl: './list-questions.component.html', - styleUrls: ['./list-questions.component.css'] -}) -export class ListQuestionsComponent { - -} diff --git a/Frontend/quizz-game/src/app/manage/manage.component.html b/Frontend/quizz-game/src/app/manage/manage.component.html index 9011a9d6ea693aae9a0f8cbc0fc9bad8f689d04f..479cb1f2468a179c35e9fe1d6d0ba6486479d9be 100644 --- a/Frontend/quizz-game/src/app/manage/manage.component.html +++ b/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> diff --git a/Frontend/quizz-game/src/app/manage/manage.service.ts b/Frontend/quizz-game/src/app/manage/manage.service.ts index 8da1a9e4f284844c034cd107088a97ca3fdbbb76..7c084345214f10378c7ae468540e21553557a78e 100644 --- a/Frontend/quizz-game/src/app/manage/manage.service.ts +++ b/Frontend/quizz-game/src/app/manage/manage.service.ts @@ -1,9 +1,10 @@ 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)); + }) + ); + + } + } diff --git a/Frontend/quizz-game/src/app/manage/create-question/create-question.component.css b/Frontend/quizz-game/src/app/manage/questions/create-question/create-question.component.css similarity index 100% rename from Frontend/quizz-game/src/app/manage/create-question/create-question.component.css rename to Frontend/quizz-game/src/app/manage/questions/create-question/create-question.component.css diff --git a/Frontend/quizz-game/src/app/manage/questions/create-question/create-question.component.html b/Frontend/quizz-game/src/app/manage/questions/create-question/create-question.component.html new file mode 100644 index 0000000000000000000000000000000000000000..02d3d147562d87c5ba36bbc8a01a7107323a7422 --- /dev/null +++ b/Frontend/quizz-game/src/app/manage/questions/create-question/create-question.component.html @@ -0,0 +1,85 @@ +<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> diff --git a/Frontend/quizz-game/src/app/manage/create-question/create-question.component.spec.ts b/Frontend/quizz-game/src/app/manage/questions/create-question/create-question.component.spec.ts similarity index 100% rename from Frontend/quizz-game/src/app/manage/create-question/create-question.component.spec.ts rename to Frontend/quizz-game/src/app/manage/questions/create-question/create-question.component.spec.ts diff --git a/Frontend/quizz-game/src/app/manage/questions/create-question/create-question.component.ts b/Frontend/quizz-game/src/app/manage/questions/create-question/create-question.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..698403f448b916214f353652035ce2626549c7fe --- /dev/null +++ b/Frontend/quizz-game/src/app/manage/questions/create-question/create-question.component.ts @@ -0,0 +1,59 @@ +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); + } + + +} diff --git a/Frontend/quizz-game/src/app/manage/edit-question/edit-question.component.css b/Frontend/quizz-game/src/app/manage/questions/edit-question/edit-question.component.css similarity index 100% rename from Frontend/quizz-game/src/app/manage/edit-question/edit-question.component.css rename to Frontend/quizz-game/src/app/manage/questions/edit-question/edit-question.component.css diff --git a/Frontend/quizz-game/src/app/manage/questions/edit-question/edit-question.component.html b/Frontend/quizz-game/src/app/manage/questions/edit-question/edit-question.component.html new file mode 100644 index 0000000000000000000000000000000000000000..72dc62ddfcb5666e2c7163aa0ce846290ef62cdc --- /dev/null +++ b/Frontend/quizz-game/src/app/manage/questions/edit-question/edit-question.component.html @@ -0,0 +1,86 @@ +<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> + diff --git a/Frontend/quizz-game/src/app/manage/edit-question/edit-question.component.spec.ts b/Frontend/quizz-game/src/app/manage/questions/edit-question/edit-question.component.spec.ts similarity index 100% rename from Frontend/quizz-game/src/app/manage/edit-question/edit-question.component.spec.ts rename to Frontend/quizz-game/src/app/manage/questions/edit-question/edit-question.component.spec.ts diff --git a/Frontend/quizz-game/src/app/manage/questions/edit-question/edit-question.component.ts b/Frontend/quizz-game/src/app/manage/questions/edit-question/edit-question.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..f3ae2c25bc347ca7ccd7b67b2cf05e99869b3c64 --- /dev/null +++ b/Frontend/quizz-game/src/app/manage/questions/edit-question/edit-question.component.ts @@ -0,0 +1,57 @@ +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); + } + +} diff --git a/Frontend/quizz-game/src/app/manage/list-questions/list-questions.component.css b/Frontend/quizz-game/src/app/manage/questions/list-questions/list-questions.component.css similarity index 100% rename from Frontend/quizz-game/src/app/manage/list-questions/list-questions.component.css rename to Frontend/quizz-game/src/app/manage/questions/list-questions/list-questions.component.css diff --git a/Frontend/quizz-game/src/app/manage/questions/list-questions/list-questions.component.html b/Frontend/quizz-game/src/app/manage/questions/list-questions/list-questions.component.html new file mode 100644 index 0000000000000000000000000000000000000000..e4754f711bec70acf03a5cb9040d8440234c61a7 --- /dev/null +++ b/Frontend/quizz-game/src/app/manage/questions/list-questions/list-questions.component.html @@ -0,0 +1,139 @@ +<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> + + + + + diff --git a/Frontend/quizz-game/src/app/manage/list-questions/list-questions.component.spec.ts b/Frontend/quizz-game/src/app/manage/questions/list-questions/list-questions.component.spec.ts similarity index 100% rename from Frontend/quizz-game/src/app/manage/list-questions/list-questions.component.spec.ts rename to Frontend/quizz-game/src/app/manage/questions/list-questions/list-questions.component.spec.ts diff --git a/Frontend/quizz-game/src/app/manage/questions/list-questions/list-questions.component.ts b/Frontend/quizz-game/src/app/manage/questions/list-questions/list-questions.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..2ea8fe9ffa549d9091073d49cfb9e7ba020ad609 --- /dev/null +++ b/Frontend/quizz-game/src/app/manage/questions/list-questions/list-questions.component.ts @@ -0,0 +1,84 @@ +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(); + } +} diff --git a/Frontend/quizz-game/src/app/manage/questions/question-model.ts b/Frontend/quizz-game/src/app/manage/questions/question-model.ts new file mode 100644 index 0000000000000000000000000000000000000000..337ce0ea823b15653cf3e6dcc1f19e0ddff8f5e0 --- /dev/null +++ b/Frontend/quizz-game/src/app/manage/questions/question-model.ts @@ -0,0 +1,9 @@ +export class Question { + constructor( + public id: number, + public question: string, + public possibleResponse: string[], + public correctResponse: number, + public category: string + ) {} +} diff --git a/Frontend/quizz-game/src/app/manage/questions/questions.service.spec.ts b/Frontend/quizz-game/src/app/manage/questions/questions.service.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..e130427da2a82e81134ef6c4397450f71db8474d --- /dev/null +++ b/Frontend/quizz-game/src/app/manage/questions/questions.service.spec.ts @@ -0,0 +1,16 @@ +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(); + }); +}); diff --git a/Frontend/quizz-game/src/app/manage/questions/questions.service.ts b/Frontend/quizz-game/src/app/manage/questions/questions.service.ts new file mode 100644 index 0000000000000000000000000000000000000000..138a76e5a28c4e3d897b17523576c31acda2ac92 --- /dev/null +++ b/Frontend/quizz-game/src/app/manage/questions/questions.service.ts @@ -0,0 +1,70 @@ +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], + }) + }); + } + + +} diff --git a/Frontend/quizz-game/src/app/manage/create-user/create-user.component.css b/Frontend/quizz-game/src/app/manage/users/create-user/create-user.component.css similarity index 100% rename from Frontend/quizz-game/src/app/manage/create-user/create-user.component.css rename to Frontend/quizz-game/src/app/manage/users/create-user/create-user.component.css diff --git a/Frontend/quizz-game/src/app/manage/create-user/create-user.component.html b/Frontend/quizz-game/src/app/manage/users/create-user/create-user.component.html similarity index 100% rename from Frontend/quizz-game/src/app/manage/create-user/create-user.component.html rename to Frontend/quizz-game/src/app/manage/users/create-user/create-user.component.html diff --git a/Frontend/quizz-game/src/app/manage/create-user/create-user.component.spec.ts b/Frontend/quizz-game/src/app/manage/users/create-user/create-user.component.spec.ts similarity index 100% rename from Frontend/quizz-game/src/app/manage/create-user/create-user.component.spec.ts rename to Frontend/quizz-game/src/app/manage/users/create-user/create-user.component.spec.ts diff --git a/Frontend/quizz-game/src/app/manage/create-user/create-user.component.ts b/Frontend/quizz-game/src/app/manage/users/create-user/create-user.component.ts similarity index 85% rename from Frontend/quizz-game/src/app/manage/create-user/create-user.component.ts rename to Frontend/quizz-game/src/app/manage/users/create-user/create-user.component.ts index b20852da13e8ce55e08bf92efbe150a883098ed3..299e2ed9a76380c7541deb2bdcaab72633d52879 100644 --- a/Frontend/quizz-game/src/app/manage/create-user/create-user.component.ts +++ b/Frontend/quizz-game/src/app/manage/users/create-user/create-user.component.ts @@ -1,9 +1,8 @@ import {Component, EventEmitter, OnInit, Output} from '@angular/core'; import {FormControl, FormGroup, Validators} from "@angular/forms"; -import {ErrorLogin, LoginService} from "../../login/login.service"; +import {ErrorLogin, LoginService} from "../../../login/login.service"; import {HttpClient} from "@angular/common/http"; -import {ManageService} from "../manage.service"; -import {error} from "@angular/compiler-cli/src/transformers/util"; +import {ManageService} from "../../manage.service"; @Component({ selector: 'app-create-user', @@ -29,7 +28,7 @@ export class CreateUserComponent implements OnInit { this.errorOccured = false; this.manageService.addUser(this.formData).subscribe(() => { console.log("add user success"); - this.closeModal.emit('add_success'); + this.closeModal.emit('add_user_success'); }, error => { console.log("error add user:", error); this.errorOccured = true; diff --git a/Frontend/quizz-game/src/app/manage/edit-user/edit-user.component.css b/Frontend/quizz-game/src/app/manage/users/edit-user/edit-user.component.css similarity index 100% rename from Frontend/quizz-game/src/app/manage/edit-user/edit-user.component.css rename to Frontend/quizz-game/src/app/manage/users/edit-user/edit-user.component.css diff --git a/Frontend/quizz-game/src/app/manage/edit-user/edit-user.component.html b/Frontend/quizz-game/src/app/manage/users/edit-user/edit-user.component.html similarity index 100% rename from Frontend/quizz-game/src/app/manage/edit-user/edit-user.component.html rename to Frontend/quizz-game/src/app/manage/users/edit-user/edit-user.component.html diff --git a/Frontend/quizz-game/src/app/manage/edit-user/edit-user.component.spec.ts b/Frontend/quizz-game/src/app/manage/users/edit-user/edit-user.component.spec.ts similarity index 100% rename from Frontend/quizz-game/src/app/manage/edit-user/edit-user.component.spec.ts rename to Frontend/quizz-game/src/app/manage/users/edit-user/edit-user.component.spec.ts diff --git a/Frontend/quizz-game/src/app/manage/edit-user/edit-user.component.ts b/Frontend/quizz-game/src/app/manage/users/edit-user/edit-user.component.ts similarity index 90% rename from Frontend/quizz-game/src/app/manage/edit-user/edit-user.component.ts rename to Frontend/quizz-game/src/app/manage/users/edit-user/edit-user.component.ts index ff0fb03f3334a8c151d412fcc3caf755f00db6cf..2f1b1a200f07dcd8e5629d49afc286f98b789f91 100644 --- a/Frontend/quizz-game/src/app/manage/edit-user/edit-user.component.ts +++ b/Frontend/quizz-game/src/app/manage/users/edit-user/edit-user.component.ts @@ -1,9 +1,9 @@ import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; import {FormControl, FormGroup, Validators} from "@angular/forms"; import {HttpClient} from "@angular/common/http"; -import {ErrorLogin, LoginService} from "../../login/login.service"; -import {ManageService} from "../manage.service"; -import {User} from "../list-users/user-model"; +import {ErrorLogin, LoginService} from "../../../login/login.service"; +import {ManageService} from "../../manage.service"; +import {User} from "../user-model"; @Component({ selector: 'app-edit-user', @@ -44,7 +44,7 @@ export class EditUserComponent implements OnInit { console.log("edit user before:" ,userEditedInfo.accountType) this.manageService.updateUser(this.user.username, userEditedInfo.username, userEditedInfo.firstname, userEditedInfo.lastname, userEditedInfo.email, userEditedInfo.accountType, this.formData.value.passwordConfirm).subscribe(()=>{ console.log("edit user success"); - this.closeModal.emit('edit_success'); + this.closeModal.emit('edit_user_success'); },error=>{ console.log("error:", error); this.closeModal.emit('error') diff --git a/Frontend/quizz-game/src/app/manage/list-users/list-users.component.css b/Frontend/quizz-game/src/app/manage/users/list-users/list-users.component.css similarity index 100% rename from Frontend/quizz-game/src/app/manage/list-users/list-users.component.css rename to Frontend/quizz-game/src/app/manage/users/list-users/list-users.component.css diff --git a/Frontend/quizz-game/src/app/manage/list-users/list-users.component.html b/Frontend/quizz-game/src/app/manage/users/list-users/list-users.component.html similarity index 100% rename from Frontend/quizz-game/src/app/manage/list-users/list-users.component.html rename to Frontend/quizz-game/src/app/manage/users/list-users/list-users.component.html diff --git a/Frontend/quizz-game/src/app/manage/list-users/list-users.component.spec.ts b/Frontend/quizz-game/src/app/manage/users/list-users/list-users.component.spec.ts similarity index 100% rename from Frontend/quizz-game/src/app/manage/list-users/list-users.component.spec.ts rename to Frontend/quizz-game/src/app/manage/users/list-users/list-users.component.spec.ts diff --git a/Frontend/quizz-game/src/app/manage/list-users/list-users.component.ts b/Frontend/quizz-game/src/app/manage/users/list-users/list-users.component.ts similarity index 93% rename from Frontend/quizz-game/src/app/manage/list-users/list-users.component.ts rename to Frontend/quizz-game/src/app/manage/users/list-users/list-users.component.ts index f0a0b24c5bf05221bc6b970fd6cf384caa4e7294..39d0ffab40c975a919b14aa8e89aa1ea47ed9da3 100644 --- a/Frontend/quizz-game/src/app/manage/list-users/list-users.component.ts +++ b/Frontend/quizz-game/src/app/manage/users/list-users/list-users.component.ts @@ -1,6 +1,6 @@ import {Component, OnDestroy, OnInit} from '@angular/core'; -import {ManageService} from "../manage.service"; -import {User} from "./user-model"; +import {ManageService} from "../../manage.service"; +import {User} from "../user-model"; import {Subscription} from "rxjs"; @Component({ @@ -52,7 +52,6 @@ export class ListUsersComponent implements OnInit, OnDestroy { editUser(user: User){ this.userEdited=user; - this.modalUser=true; } deleteUser(user: User){ diff --git a/Frontend/quizz-game/src/app/manage/list-users/user-model.ts b/Frontend/quizz-game/src/app/manage/users/user-model.ts similarity index 100% rename from Frontend/quizz-game/src/app/manage/list-users/user-model.ts rename to Frontend/quizz-game/src/app/manage/users/user-model.ts