From 1d61b245e02ee50a3b8d4b8c0fde760d09cbecca Mon Sep 17 00:00:00 2001 From: FazCodeFR <30906528+FazCodeFR@users.noreply.github.com> Date: Sun, 8 Sep 2024 12:35:52 +0200 Subject: [PATCH 1/5] chore: Add AssociationsFormComponent and message averti for login form --- src/app/app.module.ts | 2 + .../associations-form.component.html | 157 ++++++++++++++++++ .../associations-form.component.scss | 0 .../associations-form.component.spec.ts | 21 +++ .../associations-form.component.ts | 76 +++++++++ .../associations-list.component.html | 136 +-------------- .../associations-list.component.ts | 30 ---- 7 files changed, 258 insertions(+), 164 deletions(-) create mode 100644 src/app/components/associations/associations-form/associations-form.component.html create mode 100644 src/app/components/associations/associations-form/associations-form.component.scss create mode 100644 src/app/components/associations/associations-form/associations-form.component.spec.ts create mode 100644 src/app/components/associations/associations-form/associations-form.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index a1f6e94..d61cf8e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -48,6 +48,7 @@ import { BugComponent } from './components/bug/bug.component'; import { AssociationsDetailsComponent } from './components/associations/associations-details/associations-details.component'; import { PaginatorModule } from 'primeng/paginator'; +import { AssociationsFormComponent } from './components/associations/associations-form/associations-form.component'; @NgModule({ @@ -74,6 +75,7 @@ import { PaginatorModule } from 'primeng/paginator'; TchatMessageComponent, AssociationsDetailsComponent, BugComponent, + AssociationsFormComponent, ], imports: [ BrowserModule, diff --git a/src/app/components/associations/associations-form/associations-form.component.html b/src/app/components/associations/associations-form/associations-form.component.html new file mode 100644 index 0000000..a663da4 --- /dev/null +++ b/src/app/components/associations/associations-form/associations-form.component.html @@ -0,0 +1,157 @@ + + +
+ + + +
+ + Rajouter mon association ? +
+ + +
+
+
+

Créer une Association

+ +
+
+
+
+ +
+
+

+ Vous devez être connecté pour créer une association. + S'inscrire ou se connecter +

+
+
+
+
+ +
+

Remplissez les informations ci-dessous pour créer une nouvelle association.

+
+
+ +
+
+ +
+
+ + +
+ {{ getErrorMessage('nom') }} +
+
+
+ + +
+
+ + +
+ {{ getErrorMessage('url') }} +
+
+
+ + +
+
+ + +
+ {{ getErrorMessage('ville') }} +
+
+
+ + +
+
+ + +
+ {{ getErrorMessage('shortDescription') }} +
+
+
+ + +
+
+ + +
+ {{ getErrorMessage('description') }} +
+
+
+ + +
+
+ + +
+ {{ getErrorMessage('tel') }} +
+
+
+ + +
+
+ + +
+ {{ getErrorMessage('urlGoogleMapsEmbled') }} +
+
+
+
+ +
+
+
+
+
+ + + +
\ No newline at end of file diff --git a/src/app/components/associations/associations-form/associations-form.component.scss b/src/app/components/associations/associations-form/associations-form.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/associations/associations-form/associations-form.component.spec.ts b/src/app/components/associations/associations-form/associations-form.component.spec.ts new file mode 100644 index 0000000..3889125 --- /dev/null +++ b/src/app/components/associations/associations-form/associations-form.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AssociationsFormComponent } from './associations-form.component'; + +describe('AssociationsFormComponent', () => { + let component: AssociationsFormComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [AssociationsFormComponent] + }); + fixture = TestBed.createComponent(AssociationsFormComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/associations/associations-form/associations-form.component.ts b/src/app/components/associations/associations-form/associations-form.component.ts new file mode 100644 index 0000000..8a7acf1 --- /dev/null +++ b/src/app/components/associations/associations-form/associations-form.component.ts @@ -0,0 +1,76 @@ +import { DOCUMENT } from '@angular/common'; +import { Component, Inject } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { DomSanitizer } from '@angular/platform-browser'; +import { AuthService } from '@auth0/auth0-angular'; +import { ToastrService } from 'ngx-toastr'; +import { firstValueFrom } from 'rxjs'; +import { AppService } from 'src/app/services/app.service'; + +@Component({ + selector: 'app-associations-form', + templateUrl: './associations-form.component.html', + styleUrls: ['./associations-form.component.scss'] +}) +export class AssociationsFormComponent { + + associationForm!: FormGroup; + isAuthenticated: boolean = false; + + constructor( + private appService: AppService, + private sanitizer: DomSanitizer, + private toastr: ToastrService, + public auth: AuthService, + @Inject(DOCUMENT) private doc: Document, + private fb: FormBuilder + ) {} + + async ngOnInit() { + this.isAuthenticated = await firstValueFrom(this.auth.isAuthenticated$); + this.associationForm = this.fb.group({ + nom: ['', [Validators.required, Validators.minLength(3)]], + url: ['', Validators.required], + ville: ['', Validators.required], + description: ['', [Validators.required, Validators.minLength(10)]], + shortDescription: ['', [Validators.required, Validators.minLength(10)]], + tel: ['', [Validators.required]], + urlGoogleMapsEmbled: ['', [Validators.required, Validators.minLength(10)]] + }); + } + + + getErrorMessage(controlName: string): string { + const control = this.associationForm.get(controlName); + if (control?.hasError('required')) { + return 'Ce champ est requis'; + } + if (control?.hasError('minlength')) { + const minLength = control?.errors?.['minlength'].requiredLength; + return `Ce champ doit contenir au moins ${minLength} caractères`; + } + return ''; + } + + + onSubmit() { + if (this.associationForm.valid) { + console.log('Form Data:', this.associationForm.value); + this.appService.createAsso(this.associationForm.value).subscribe({ + next: (response) => { + console.log('response:', response); + this.toastr.success('Association créée avec succès, elle va être vérifiée par un administrateur', 'Succès'); + this.associationForm.reset(); + }, + error: (error) => { + this.toastr.error('Une erreur est survenue, veuillez réessayer plus tard', 'Erreur'); + console.error('error:', error); + } + }); + } + } + + loginWithRedirect() { + this.auth.loginWithRedirect(); + } +} diff --git a/src/app/components/associations/associations-list/associations-list.component.html b/src/app/components/associations/associations-list/associations-list.component.html index df5d7ed..ba860ea 100644 --- a/src/app/components/associations/associations-list/associations-list.component.html +++ b/src/app/components/associations/associations-list/associations-list.component.html @@ -28,137 +28,5 @@

{{ association.nom }}

- -
- - - -
- - Rajouter mon association ? -
- - -
-
-
-

Créer une Association

-

Remplissez les informations ci-dessous pour créer une nouvelle association.

-
-
-
- -
-
- - -
- {{ getErrorMessage('nom') }} -
-
-
- - -
-
- - -
- {{ getErrorMessage('url') }} -
-
-
- - -
-
- - -
- {{ getErrorMessage('ville') }} -
-
-
- - -
-
- - -
- {{ getErrorMessage('shortDescription') }} -
-
-
- - -
-
- - -
- {{ getErrorMessage('description') }} -
-
-
- - -
-
- - -
- {{ getErrorMessage('tel') }} -
-
-
- - -
-
- - -
- {{ getErrorMessage('urlGoogleMapsEmbled') }} -
-
-
-
- -
-
-
-
-
- - - -
+ + \ No newline at end of file diff --git a/src/app/components/associations/associations-list/associations-list.component.ts b/src/app/components/associations/associations-list/associations-list.component.ts index bd028d1..4a38fb5 100644 --- a/src/app/components/associations/associations-list/associations-list.component.ts +++ b/src/app/components/associations/associations-list/associations-list.component.ts @@ -70,36 +70,6 @@ export class AssociationsListComponent { this.subscriptions.unsubscribe(); } - getErrorMessage(controlName: string): string { - const control = this.associationForm.get(controlName); - if (control?.hasError('required')) { - return 'Ce champ est requis'; - } - if (control?.hasError('minlength')) { - const minLength = control?.errors?.['minlength'].requiredLength; - return `Ce champ doit contenir au moins ${minLength} caractères`; - } - return ''; - } - - - onSubmit() { - if (this.associationForm.valid) { - console.log('Form Data:', this.associationForm.value); - this.appService.createAsso(this.associationForm.value).subscribe({ - next: (response) => { - console.log('response:', response); - this.toastr.success('Association créée avec succès, elle va être vérifiée par un administrateur', 'Succès'); - this.associationForm.reset(); - }, - error: (error) => { - this.toastr.error('Une erreur est survenue, veuillez réessayer plus tard', 'Erreur'); - console.error('error:', error); - } - }); - } - } - sanitizeHtml(html: string): SafeHtml { return this.sanitizer.bypassSecurityTrustHtml(html); } From 1858c429df72c6b7e75ae0c15fb0b5680df43ff2 Mon Sep 17 00:00:00 2001 From: FazCodeFR <30906528+FazCodeFR@users.noreply.github.com> Date: Sun, 8 Sep 2024 12:41:03 +0200 Subject: [PATCH 2/5] Remove animation --- src/app/app.component.ts | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 56b8484..9eab7e3 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -15,24 +15,6 @@ import { AppService } from './services/app.service'; selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], - animations: [ - trigger('routerTransition', [ - transition('* <=> *', [ - query(':enter, :leave', style({ position: 'fixed', width: '100%' }), { optional: true }), - group([ - query(':enter', [ - style({ transform: 'translateX(100%)' }), - animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' })) - ], { optional: true }), - query(':leave', [ - style({ transform: 'translateX(0%)' }), - animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' })) - ], { optional: true }), - ]), - ]), - ]), - - ], }) export class AppComponent { message = ''; From a7b1772e956203b089a81732c3e3df864f646cbc Mon Sep 17 00:00:00 2001 From: FazCodeFR <30906528+FazCodeFR@users.noreply.github.com> Date: Sun, 8 Sep 2024 15:48:24 +0200 Subject: [PATCH 3/5] Remove animation and change design asso list --- src/app/app.component.html | 4 +- src/app/app.component.ts | 24 +-------- .../associations-list.component.html | 53 ++++++++++++------- .../associations-list.component.ts | 3 +- 4 files changed, 39 insertions(+), 45 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index 811ea5f..e2a3e12 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,7 +1,7 @@ -
- +
+
diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 9eab7e3..5578843 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,30 +1,8 @@ -import { Component, ViewChild } from '@angular/core'; -import { - trigger, - animate, - style, - group, - animateChild, - query, - stagger, - transition, - state, -} from '@angular/animations'; -import { AppService } from './services/app.service'; +import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], }) export class AppComponent { - message = ''; - name = ''; - - constructor(private appService: AppService) {} - - getState(outlet: any) { - // Changing the activatedRouteData.state triggers the animation - return outlet.activatedRouteData.state; - } - } diff --git a/src/app/components/associations/associations-list/associations-list.component.html b/src/app/components/associations/associations-list/associations-list.component.html index ba860ea..a1e943d 100644 --- a/src/app/components/associations/associations-list/associations-list.component.html +++ b/src/app/components/associations/associations-list/associations-list.component.html @@ -2,25 +2,41 @@