Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Revert "Revert "Lmst 34/page animal edit"" #19

Merged
merged 2 commits into from
Feb 2, 2024
Merged

Revert "Revert "Lmst 34/page animal edit"" #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
de49f2b
Revert "Revert "Lmst 34/page animal edit""
FazCodeFR Feb 2, 2024
b7dd250
FIX ERROR
FazCodeFR Feb 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 11 additions & 7 deletions angular.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -71,20 +72,22 @@
"input": "src/theme/variables.css"
}
],
"scripts": []
"scripts": [
"node_modules/tinymce/tinymce.min.js"
]
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
"maximumWarning": "1000kb",
"maximumError": "4mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
"maximumWarning": "4mb",
"maximumError": "8kb"
}
],
"outputHashing": "all"
Expand Down Expand Up @@ -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",
Expand Down
20 changes: 20 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
6 changes: 5 additions & 1 deletion src/app/app.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: [
Expand Down Expand Up @@ -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 {}
134 changes: 117 additions & 17 deletions src/app/components/animaux/animaux-details/animaux-details.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,16 @@
Catégorie : Chat
</p>
</div>
<button
<button (click)="toggleEditMode()"
class="focus:outline-none text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:focus:ring-yellow-900">
Édition
</button>

<h2
class="max-w-lg mb-6 font-sans text-3xl font-bold leading-none tracking-tight text-gray-900 sm:text-4xl md:mx-auto">
{{ chat.nom }}


<label *ngIf="!isEditMode"> {{ chat.nom }}</label>
<input *ngIf="isEditMode" [(ngModel)]="chat.nom" name="nom" style="text-align:center;"
(ngModelChange)="updateChat()">
</h2>
<!-- <p class="text-base text-gray-700 md:text-lg">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque rem aperiam, eaque
Expand All @@ -27,6 +27,8 @@





<div class="grid max-w-screen-lg gap-8 lg:grid-cols-2 sm:mx-auto">
<div class="grid grid-cols-2 gap-5">
<img *ngIf="chat.photos[0] && chat.photos[0].url" [src]="chat.photos[0].url"
Expand All @@ -41,21 +43,43 @@
<h6 class="mb-2 font-semibold leading-5">
Sexe :
</h6>
<p class="text-sm text-gray-900">
<p *ngIf="!isEditMode" class="text-sm text-gray-900">
{{ chat.sexe ==='MALE' ? 'Je suis un mâle' : 'Je suis une femelle' }}
<fa-icon *ngIf="chat.sexe === 'FEMELLE'" [icon]="faVenus" aria-label="Sexe" title="Femelle"
class="ml-2" style="color: fuchsia;"></fa-icon>
<fa-icon *ngIf="chat.sexe === 'MALE'" [icon]="faMars" aria-label="Sexe" title="Male" class="ml-2"
style="color: Dodgerblue;"></fa-icon>
</p>
<div *ngIf="isEditMode">
<label>
<input type="radio" name="sexe" [(ngModel)]="chat.sexe" (ngModelChange)="updateChat()"
[value]="'MALE'" />
Male <fa-icon [icon]="faMars" aria-label="Sexe" title="Male" class="ml-2"
style="color: Dodgerblue;"></fa-icon>
</label>

<label>
<input type="radio" name="sexe" [(ngModel)]="chat.sexe" (ngModelChange)="updateChat()"
[value]="'FEMELLE'" />
Female <fa-icon [icon]="faVenus" aria-label="Sexe" title="Femelle" class="ml-2"
style="color: fuchsia;"></fa-icon>
</label>
</div>
</div>
<div class="pb-4 mb-4 border-b">
<h6 class="mb-2 font-semibold leading-5">
Age :
</h6>
<p class="text-sm text-gray-900">
<p *ngIf="!isEditMode" class="text-sm text-gray-900">
J'ai {{ chat.age }} ans
</p>
<p *ngIf="isEditMode" class="text-sm text-gray-900">
J'ai
<input *ngIf="isEditMode" [(ngModel)]="chat.age" (ngModelChange)="updateChat()" class="text-center"
type="number" min="0" max="50" />
ans
</p>

</div>

<div *ngIf="chat.race" class="pb-4 mb-4 border-b">
Expand All @@ -71,15 +95,69 @@ <h6 class="mb-2 font-semibold leading-5">
<h6 class="mb-2 font-semibold leading-5">
Ententes :
</h6>
<p class="text-sm text-gray-900" *ngIf="chat.ententeChat !== undefined">
{{chat.ententeChat ? 'Avec les autres chats' : 'Pas avec les autres chats ❌'}}
</p>
<p class="text-sm text-gray-900" *ngIf="chat.ententeChien !== undefined">
{{chat.ententeChien ? 'Avec les chiens' : 'Pas avec les chiens ❌'}}
</p>
<p class="text-sm text-gray-900" *ngIf="chat.ententeEnfant !== undefined">
{{chat.ententeEnfant ? 'Avec les enfants' : 'Pas avec les enfants ❌'}}
</p>
<div *ngIf="!isEditMode">
<p class="text-sm text-gray-900" *ngIf="chat.ententeChat !== undefined">
{{chat.ententeChat ? 'Avec les autres chats' : 'Pas avec les autres chats ❌'}}
</p>
<p class="text-sm text-gray-900" *ngIf="chat.ententeChien !== undefined">
{{chat.ententeChien ? 'Avec les chiens' : 'Pas avec les chiens ❌'}}
</p>
<p class="text-sm text-gray-900" *ngIf="chat.ententeEnfant !== undefined">
{{chat.ententeEnfant ? 'Avec les enfants' : 'Pas avec les enfants ❌'}}
</p>
</div>

<div *ngIf="isEditMode">

<div>
<!-- Entente avec les autres chats -->
<label>
<input type="radio" name="ententeChat" [(ngModel)]="chat.ententeChat" [value]="true"
(ngModelChange)="updateChat()" />
Avec les autres chats
</label>

<label>
<input type="radio" name="ententeChat" [(ngModel)]="chat.ententeChat" [value]="false"
(ngModelChange)="updateChat()" />
Pas avec les autres chats ❌
</label>
</div>

<div>
<!-- Entente avec les chiens -->
<label>
<input type="radio" name="ententeChien" [(ngModel)]="chat.ententeChien" [value]="true"
(ngModelChange)="updateChat()" />
Avec les chiens
</label>

<label>
<input type="radio" name="ententeChien" [(ngModel)]="chat.ententeChien" [value]="false"
(ngModelChange)="updateChat()" />
Pas avec les chiens ❌
</label>
</div>

<div>
<!-- Entente avec les enfants -->
<label>
<input type="radio" name="ententeEnfant" [(ngModel)]="chat.ententeEnfant" [value]="true"
(ngModelChange)="updateChat()" />
Avec les enfants
</label>

<label>
<input type="radio" name="ententeEnfant" [(ngModel)]="chat.ententeEnfant" [value]="false"
(ngModelChange)="updateChat()" />
Pas avec les enfants ❌
</label>
</div>

</div>



</div>


Expand All @@ -98,9 +176,31 @@ <h6 class="mb-2 font-semibold leading-5">
<!-- New description block -->
<div class="max-w-screen-lg mt-8 md:mx-auto lg:max-w-screen-lg md:mt-12">
<h3 class="mb-4 text-xl font-semibold leading-6">Description :</h3>
<p class="text-base text-gray-700">
{{ chat.description }}
<p *ngIf="!isEditMode" class="text-base text-gray-700" [innerHTML]="sanitizeHtml(chat.description)">
</p>

<editor *ngIf="isEditMode" modelEvents="change input undo redo setcontent closewindow"
(ngModelChange)="updateChat()" ignoreEvents="onMouseEnter,onMouseLeave,onMouseOut,onMouseMove"
[(ngModel)]="chat.description" [init]="{

base_url: '/tinymce',
height: 500,
menubar: false,
plugins: [
],
tinycomments_mode: 'embedded',
tinycomments_author: 'Author name',

mergetags_list: [
{ value: 'First.Name', title: 'First Name' },
{ value: 'Email', title: 'Email' },
],

toolbar:
'undo redo | formatselect | bold italic backcolor | \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | removeformat | help'
}"></editor>
</div>

<div *ngIf="chat.vaccinations" class="max-w-screen-lg mt-8 md:mx-auto lg:max-w-screen-lg md:mt-12">
Expand Down
26 changes: 24 additions & 2 deletions src/app/components/animaux/animaux-details/animaux-details.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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 = '<p>Le chat est ....</p>';
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']) {
Expand All @@ -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'),
});
}
}
17 changes: 2 additions & 15 deletions src/app/components/animaux/animaux-list/animaux-list.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<div *ngFor="let chat of chats; let index = index"
class="overflow-hidden transition-shadow duration-300 bg-white rounded shadow-sm">
<img [src]="chat.photos[0].url" loading="lazy" decoding="async" class="object-cover w-full h-64" alt="" />
<div class="p-5 border border-t-0">
<div class="p-5 border h-full">
<p class="mb-3 text-xs font-semibold tracking-wide uppercase">
<a [routerLink]="'/animaux/' + chat.id"
class="transition-colors duration-200 text-blue-gray-900 hover:text-deep-purple-accent-700"
Expand All @@ -21,21 +21,8 @@
class="ml-2" style="color: fuchsia;"></fa-icon>
<fa-icon *ngIf="chat.sexe === 'MALE'" [icon]="faMars" aria-label="Sexe" title="Male" class="ml-2"
style="color: Dodgerblue;"></fa-icon>

</div>
<p class="mb-2 text-gray-700">
{{chat.description}}
</p>
<a [routerLink]="'/animaux/' + chat.id" aria-label=""
class="inline-flex items-center font-semibold transition-colors duration-200 text-deep-purple-accent-400 hover:text-deep-purple-800">
En savoir plus sur {{chat.nom}}
</a>
<button [routerLink]="'/animaux/' + chat.id + '/modifier'"
class="m-2 focus:outline-none text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:focus:ring-yellow-900">
Édition
</button>


<p class="mb-2 text-gray-700" [innerHTML]="sanitizeHtml(chat.description)"></p>
</div>
</div>

Expand Down
Loading
Loading