From de49f2b573b49343a6b443ff3d26700e55926bca Mon Sep 17 00:00:00 2001 From: FazCodeFR <30906528+FazCodeFR@users.noreply.github.com> Date: Fri, 2 Feb 2024 13:36:24 +0100 Subject: [PATCH 1/2] Revert "Revert "Lmst 34/page animal edit"" This reverts commit af8141fd86970908791e2cfd20dd4d31020c6855. --- angular.json | 10 +- package-lock.json | 20 +++ package.json | 1 + src/app/app.module.ts | 6 +- .../animaux-details.component.html | 134 +++++++++++++++--- .../animaux-details.component.ts | 26 +++- .../animaux-list/animaux-list.component.html | 17 +-- .../animaux-list/animaux-list.component.ts | 11 +- .../components/header/header.component.html | 2 +- src/app/services/app.service.ts | 8 ++ 10 files changed, 195 insertions(+), 40 deletions(-) diff --git a/angular.json b/angular.json index a21047f..970d0c1 100644 --- a/angular.json +++ b/angular.json @@ -32,7 +32,8 @@ "glob": "**/*.svg", "input": "node_modules/ionicons/dist/ionicons/svg", "output": "./svg" - } + }, + { "glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/" } ], "styles": [ "@angular/material/prebuilt-themes/pink-bluegrey.css", @@ -71,7 +72,9 @@ "input": "src/theme/variables.css" } ], - "scripts": [] + "scripts": [ + "node_modules/tinymce/tinymce.min.js" + ] }, "configurations": { "production": { @@ -134,7 +137,8 @@ "glob": "**/*.svg", "input": "node_modules/ionicons/dist/ionicons/svg", "output": "./svg" - } + }, + { "glob": "**/*", "input": "node_modules/tinymce", "output": "/tinymce/" } ], "styles": [ "@angular/material/prebuilt-themes/pink-bluegrey.css", diff --git a/package-lock.json b/package-lock.json index 9a7c66d..e88b647 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "@fortawesome/fontawesome-svg-core": "^6.4.0", "@fortawesome/free-solid-svg-icons": "^6.4.0", "@ionic/angular": "^7.4.3", + "@tinymce/tinymce-angular": "^7.0.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.13.0" @@ -4162,6 +4163,20 @@ "npm": ">=7.10.0" } }, + "node_modules/@tinymce/tinymce-angular": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/@tinymce/tinymce-angular/-/tinymce-angular-7.0.0.tgz", + "integrity": "sha512-IKNaG/ihlxE1XCfq6lzULbnsqZO9KNJtlpu5jo6JDJDL9zcFzj/N2A16Kk7rTj1yfmDoB1IXAk/BpMOvgDY8cg==", + "dependencies": { + "tinymce": "^6.0.0 || ^5.5.0", + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/common": ">=14.0.0", + "@angular/core": ">=14.0.0", + "@angular/forms": ">=14.0.0" + } + }, "node_modules/@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", @@ -12549,6 +12564,11 @@ "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==", "dev": true }, + "node_modules/tinymce": { + "version": "6.8.2", + "resolved": "https://registry.npmjs.org/tinymce/-/tinymce-6.8.2.tgz", + "integrity": "sha512-Lho79o2Y1Yn+XdlTEkHTEkEmzwYWTXz7IUsvPwxJF3VTtgHUIAAuBab29kik+f2KED3rZvQavr9D7sHVMJ9x4A==" + }, "node_modules/tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", diff --git a/package.json b/package.json index 37cd88b..8a311dc 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "@fortawesome/fontawesome-svg-core": "^6.4.0", "@fortawesome/free-solid-svg-icons": "^6.4.0", "@ionic/angular": "^7.4.3", + "@tinymce/tinymce-angular": "^7.0.0", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.13.0" diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 85463d4..212f9d6 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -23,6 +23,7 @@ import { NoHeaderFooterDirective } from './no-header-footer.directive'; import { ReactiveFormsModule } from '@angular/forms'; import { AuthModule } from '@auth0/auth0-angular'; import { environment } from 'src/environments/environment'; +import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular'; @NgModule({ declarations: [ @@ -52,8 +53,11 @@ import { environment } from 'src/environments/environment'; AuthModule.forRoot({ ...environment.auth, }), + EditorModule, + ], + providers: [ + { provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' }, ], - providers: [], bootstrap: [AppComponent], }) export class AppModule {} diff --git a/src/app/components/animaux/animaux-details/animaux-details.component.html b/src/app/components/animaux/animaux-details/animaux-details.component.html index b09195d..2a4a6a0 100644 --- a/src/app/components/animaux/animaux-details/animaux-details.component.html +++ b/src/app/components/animaux/animaux-details/animaux-details.component.html @@ -6,16 +6,16 @@ Catégorie : Chat

-

- {{ chat.nom }} - - + +

+ + + + + +
+ + + + +
+ +
+ + + + +
+ + + + + @@ -98,9 +176,31 @@

Description :

-

- {{ chat.description }} +

+ +
diff --git a/src/app/components/animaux/animaux-details/animaux-details.component.ts b/src/app/components/animaux/animaux-details/animaux-details.component.ts index b26c6af..4669663 100644 --- a/src/app/components/animaux/animaux-details/animaux-details.component.ts +++ b/src/app/components/animaux/animaux-details/animaux-details.component.ts @@ -4,6 +4,7 @@ import { Chat } from '../../../interfaces/interfaces'; import { AppService } from 'src/app/services/app.service'; import { ActivatedRoute } from '@angular/router'; import { faMars, faVenus } from '@fortawesome/free-solid-svg-icons'; +import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; @Component({ selector: 'app-animaux-details', @@ -14,13 +15,27 @@ export class AnimauxDetailsComponent { chat: Chat | undefined; faMars = faMars; faVenus = faVenus; - - constructor(private route: ActivatedRoute, private appService: AppService) {} + dataModel: any; + description: string = '

Le chat est ....

'; + isEditMode: boolean = false; + constructor( + private route: ActivatedRoute, + private appService: AppService, + private sanitizer: DomSanitizer + ) {} ngOnInit() { this.getCat(); } + sanitizeHtml(html: string): SafeHtml { + return this.sanitizer.bypassSecurityTrustHtml(html); + } + + toggleEditMode() { + this.isEditMode = !this.isEditMode; + } + getCat() { this.route.params.subscribe((params) => { if (params['id']) { @@ -30,4 +45,11 @@ export class AnimauxDetailsComponent { } }); } + + updateChat() { + this.appService.updateChat(this.chat!).subscribe({ + error: (error) => console.error('Erreur de mise à jour du chat', error), + complete: () => console.log('Chat mis à jour avec succès'), + }); + } } diff --git a/src/app/components/animaux/animaux-list/animaux-list.component.html b/src/app/components/animaux/animaux-list/animaux-list.component.html index 4109947..799de78 100644 --- a/src/app/components/animaux/animaux-list/animaux-list.component.html +++ b/src/app/components/animaux/animaux-list/animaux-list.component.html @@ -5,7 +5,7 @@
-
+

-

-

- {{chat.description}} -

- - En savoir plus sur {{chat.nom}} - - - - +

diff --git a/src/app/components/animaux/animaux-list/animaux-list.component.ts b/src/app/components/animaux/animaux-list/animaux-list.component.ts index f6d7c62..d72a2ca 100644 --- a/src/app/components/animaux/animaux-list/animaux-list.component.ts +++ b/src/app/components/animaux/animaux-list/animaux-list.component.ts @@ -3,6 +3,7 @@ import { faMars, faVenus, faHeart } from '@fortawesome/free-solid-svg-icons'; import { AppService } from '../../../services/app.service'; import { Chat } from '../../../interfaces/interfaces'; import { DatePipe } from '@angular/common'; +import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; @Component({ selector: 'app-animaux-list', @@ -14,7 +15,11 @@ export class AnimauxListComponent { faMars = faMars; faVenus = faVenus; faHeart = faHeart; - constructor(private appService: AppService, private datePipe: DatePipe) {} + constructor( + private appService: AppService, + private datePipe: DatePipe, + private sanitizer: DomSanitizer + ) {} chats: Chat[] = []; @@ -28,6 +33,10 @@ export class AnimauxListComponent { }); } + sanitizeHtml(html: string): SafeHtml { + return this.sanitizer.bypassSecurityTrustHtml(html); + } + formatDate(date: string): string { // Assuming chat.createdAt is a string representing a date const formattedDate = this.datePipe.transform(date, 'dd MMM yyyy'); diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html index efe4beb..8253ab2 100644 --- a/src/app/components/header/header.component.html +++ b/src/app/components/header/header.component.html @@ -53,7 +53,7 @@