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 3cf2e80..df5d7ed 100644 --- a/src/app/components/associations/associations-list/associations-list.component.html +++ b/src/app/components/associations/associations-list/associations-list.component.html @@ -27,3 +27,138 @@

{{ 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') }} +
+
+
+
+ +
+
+
+
+
+ + + +
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 05ea2b7..bd028d1 100644 --- a/src/app/components/associations/associations-list/associations-list.component.ts +++ b/src/app/components/associations/associations-list/associations-list.component.ts @@ -7,6 +7,7 @@ import { AuthService } from '@auth0/auth0-angular'; import { Subscription } from 'rxjs'; import { Association } from '../../../interfaces/interfaces'; import { faLocationDot, faPen } from '@fortawesome/free-solid-svg-icons'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; @Component({ @@ -19,12 +20,17 @@ export class AssociationsListComponent { isAuthenticated: boolean = false; faLocationDot = faLocationDot; faPen = faPen; + + associationForm!: FormGroup; + + constructor( private appService: AppService, private sanitizer: DomSanitizer, private toastr: ToastrService, public auth: AuthService, - @Inject(DOCUMENT) private doc: Document + @Inject(DOCUMENT) private doc: Document, + private fb: FormBuilder ) {} associations: Association[] = []; @@ -32,13 +38,22 @@ export class AssociationsListComponent { async ngOnInit() { this.getAssociations(); + 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)]] + }); } + getAssociations() { const associationSubscription = this.appService.getAllAssociations().subscribe({ next: (associations) => { this.associations = associations; - console.log('🚀 ~ AssociationsListComponent ~ associationSubscription ~ this.associations:', this.associations); this.isLoaded = true; }, error: (error) => { @@ -51,11 +66,40 @@ export class AssociationsListComponent { this.subscriptions.add(associationSubscription); } - ngOnDestroy() { 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); } diff --git a/src/app/interfaces/interfaces.ts b/src/app/interfaces/interfaces.ts index cb2433f..69f48f6 100644 --- a/src/app/interfaces/interfaces.ts +++ b/src/app/interfaces/interfaces.ts @@ -65,7 +65,7 @@ export interface Utilisateur { } export interface Association { - id: number; + id?: number; nom: string; url: string; ville: string; diff --git a/src/app/services/app.service.ts b/src/app/services/app.service.ts index 21903b5..b9cb877 100644 --- a/src/app/services/app.service.ts +++ b/src/app/services/app.service.ts @@ -100,6 +100,14 @@ export class AppService { ); } + createAsso(asso: Association): Observable { + return this.http.post(this.api + '/associations', asso).pipe( + map((res: any) => res), + share(), + take(1) + ); + } + createFavori(favori: Favori): Observable { return this.http.post(this.api + '/favoris', favori).pipe( map((res: any) => res),