🐛 Fix add & register modal openning

src/app/components/add-pin-popup/add-pin-popup.component.html

@@ -1,12 +1,3 @@
-<!-- Modal toggle -->
-<button
-  (click)="openPinModal()"
-  class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
-  type="button"
->
-  <p *ngIf="!isHomePage">Ajouter un pin</p>
-</button>
-
 <!-- Fond assombri -->
 <div
   class="fixed inset-0 bg-gray-900 bg-opacity-50 w-full h-full transition-opacity duration-300 ease-in-out z-40"

src/app/components/add-pin-popup/add-pin-popup.component.ts

@@ -1,10 +1,5 @@
 import { CommonModule } from '@angular/common';
-import {
-  Component,
-  Input,
-  OnInit,
-  ViewChild,
-} from '@angular/core';
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import {
   FormBuilder,
   FormControl,
@@ -55,8 +50,14 @@ export class AddPinPopupComponent implements OnInit {
     private imageService: ImageService
   ) {
     this.form = this.fb.group({
-      title: new FormControl('', [Validators.required, Validators.minLength(3)]),
-      description: new FormControl('', [Validators.required, Validators.minLength(3)]),
+      title: new FormControl('', [
+        Validators.required,
+        Validators.minLength(3),
+      ]),
+      description: new FormControl('', [
+        Validators.required,
+        Validators.minLength(3),
+      ]),
       location: new FormControl('', [Validators.required]),
       complete_address: new FormControl('', [Validators.required]),
       coordinates: new FormControl<number[]>([]),
@@ -65,7 +66,7 @@ export class AddPinPopupComponent implements OnInit {
     });
   }
 
-    onFocus(): void {
+  onFocus(): void {
     this.inputFocused = true;
   }
 
@@ -109,7 +110,7 @@ export class AddPinPopupComponent implements OnInit {
         debounceTime(200), // Attendre 200ms après la dernière frappe
         distinctUntilChanged(), // Ignorer si la nouvelle valeur est la même que la précédente
         switchMap((query) => {
-          if(query === null) {
+          if (query === null) {
             return of([]);
           }
           const trimmedQuery = query.trim();
@@ -154,13 +155,19 @@ export class AddPinPopupComponent implements OnInit {
       try {
         const data = await this.exifService.getLocation(files[0]);
         if (data.latitude !== undefined && data.longitude !== undefined) {
-          this.autocompleteService.getAddressFromCoordinates(data.latitude, data.longitude).subscribe((address) => {
-            if (address) {
-              this.form.get('location')?.setValue(address.display_name);
-              this.form.get('complete_address')?.setValue(address.display_name);
-              this.form.get('coordinates')?.setValue([data.latitude, data.longitude]);
-            }
-          });
+          this.autocompleteService
+            .getAddressFromCoordinates(data.latitude, data.longitude)
+            .subscribe((address) => {
+              if (address) {
+                this.form.get('location')?.setValue(address.display_name);
+                this.form
+                  .get('complete_address')
+                  ?.setValue(address.display_name);
+                this.form
+                  .get('coordinates')
+                  ?.setValue([data.latitude, data.longitude]);
+              }
+            });
         }
       } catch (error) {
         return;
@@ -178,34 +185,38 @@ export class AddPinPopupComponent implements OnInit {
 
   async submitForm(): Promise<void> {
     // Marquer tous les champs comme touched pour afficher les erreurs
-    Object.keys(this.form.controls).forEach(key => {
+    Object.keys(this.form.controls).forEach((key) => {
       const control = this.form.get(key);
       control?.markAsTouched();
     });
 
     if (this.form.valid) {
-      const uploadObservables = await Promise.all(this.files.map(async (file) => {
-        if(file.size === 0) {
-          this.uploadError = file.name + ' : ' + 'Image vide';
-          return of(null);
-        }
+      const uploadObservables = await Promise.all(
+        this.files.map(async (file) => {
+          if (file.size === 0) {
+            this.uploadError = file.name + ' : ' + 'Image vide';
+            return of(null);
+          }
 
-        const pictureExifDate = await this.exifService.getDateTime(file);
+          const pictureExifDate = await this.exifService.getDateTime(file);
 
-        return this.imageService.postImage(file, pictureExifDate).pipe(
-          catchError(error => {
-            this.uploadError = file.name + ' : ' + error.error.detail || 'Erreur lors de l\'upload de l\'image';
-            if (this.dragDropComponent) {
-              this.dragDropComponent.errorMessage = this.uploadError;
-            }
-            return of(null);
-          })
-        )
-      }));
+          return this.imageService.postImage(file, pictureExifDate).pipe(
+            catchError((error) => {
+              this.uploadError =
+                file.name + ' : ' + error.error.detail ||
+                "Erreur lors de l'upload de l'image";
+              if (this.dragDropComponent) {
+                this.dragDropComponent.errorMessage = this.uploadError;
+              }
+              return of(null);
+            })
+          );
+        })
+      );
 
       forkJoin(uploadObservables).subscribe((responses) => {
         // Vérifier si toutes les réponses sont valides
-        if (responses.some(response => response === null)) {
+        if (responses.some((response) => response === null)) {
           return; // Ne pas continuer si une erreur s'est produite
         }
 
@@ -217,7 +228,9 @@ export class AddPinPopupComponent implements OnInit {
           files: this.files,
           date: this.form.get('date')?.value || null,
           location: coordinates || [0, 0], // Utiliser les coordonnées pour location
-          complete_address: this.form.get('complete_address')?.value || this.form.get('location')?.value,
+          complete_address:
+            this.form.get('complete_address')?.value ||
+            this.form.get('location')?.value,
         };
 
         // Supprimer le champ coordinates qui n'est pas dans le modèle Pin
@@ -236,17 +249,15 @@ export class AddPinPopupComponent implements OnInit {
     }
   }
 
-  openPinModal() {
-    this.modalService.openModal(this.modalId);
-  }
-
   closePinModal() {
     this.modalService.closeModal(this.modalId);
     this.form.reset();
     this.files = [];
     this.uploadError = '';
     if (this.dragDropComponent) {
-      this.dragDropComponent.updateFileNamesFromFileList(new DataTransfer().files);
+      this.dragDropComponent.updateFileNamesFromFileList(
+        new DataTransfer().files
+      );
       this.dragDropComponent.errorMessage = '';
     }
   }

src/app/components/home-navbar/home-navbar.component.html

@@ -1,5 +1,6 @@
 <nav class="bg-white border-gray-200 dark:bg-gray-900">
   <app-login-page></app-login-page>
+  <app-register-page></app-register-page>
   <div
     class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4"
   >
@@ -10,7 +11,7 @@
         >Memory Map</span
       >
     </a>
-    
+
     <button
       type="button"
       (click)="isMenuOpen = !isMenuOpen"
@@ -79,7 +80,13 @@
             class="block text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
           >
             <span>
-              <app-register-page></app-register-page>
+              <button
+                (click)="openRegisterModal()"
+                class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
+                type="button"
+              >
+                Inscription
+              </button>
             </span>
           </a>
         </li>

src/app/components/home-navbar/home-navbar.component.ts

@@ -16,4 +16,8 @@ export class HomeNavbarComponent {
   openLoginModal() {
     this.modalService.openModal('login-modal');
   }
+
+  openRegisterModal() {
+    this.modalService.openModal('register-modal');
+  }
 }

src/app/components/leaflet-map/leaflet-map.component.ts

@@ -12,11 +12,11 @@ import * as L from 'leaflet';
 import 'leaflet.markercluster';
 import { Pin } from '../../model/Pin';
 import { AutocompleteService } from '../../services/auto-complete/auto-complete.service';
+import { IntroService } from '../../services/intro/intro.service';
 import { MapReloadService } from '../../services/map-reload/map-reload.service';
 import { ModalService } from '../../services/modal/modal.service';
 import { PinService } from '../../services/pin/pin.service';
 import { PinMarkerComponent } from '../pin-marker/pin-marker.component';
-import { IntroService } from '../../services/intro/intro.service';
 
 @Component({
   selector: 'app-leaflet-map',
@@ -60,7 +60,7 @@ export class LeafletMapComponent implements OnInit {
     });
 
     this.route.params.subscribe((params) => {
-      if(params['tutorial'] === "true") {
+      if (params['tutorial'] === 'true') {
         this.introService.startIntro();
       }
     });
@@ -222,14 +222,16 @@ export class LeafletMapComponent implements OnInit {
 
     // Pour chaque pin, récupérer ses partages
     pins.forEach((pin) => {
-      this.pinsService.getPinShares(pin.id).subscribe((response: any) => {
-        if (response && response.shares) {
-          response.shares.forEach((share: any) => {
-            personsSet.add(share.username);
-          });
-          this.availablePersons = Array.from(personsSet).sort();
-        }
-      });
+      if (!pin.is_poi) {
+        this.pinsService.getPinShares(pin.id).subscribe((response: any) => {
+          if (response && response.shares) {
+            response.shares.forEach((share: any) => {
+              personsSet.add(share.username);
+            });
+            this.availablePersons = Array.from(personsSet).sort();
+          }
+        });
+      }
     });
   }
 
@@ -265,13 +267,14 @@ export class LeafletMapComponent implements OnInit {
         stroke-width="1"
       />
     </svg>
-  `);  
+  `);
 
     const filteredPins = this.allPins.filter((pin) => {
       const pinCountry = this.pinCountries[pin.id];
-      const matchesCountry = this.selectedCountry === '__all__'
-        ? true
-        : pinCountry === this.selectedCountry;
+      const matchesCountry =
+        this.selectedCountry === '__all__'
+          ? true
+          : pinCountry === this.selectedCountry;
       const matchesPerson =
         this.selectedPerson === '__all__'
           ? true
@@ -334,31 +337,38 @@ export class LeafletMapComponent implements OnInit {
           }
         })
         .unsubscribe();
-        this.markerClusterGroup.addLayer(marker);
-
-        if(this.selectedCountry === '__all__' && this.selectedPerson === '__all__') {
-          this.map.fitBounds(
-            L.latLngBounds(filteredPins.map(pin => pin.location as [number, number])),
-            {
-              padding: [50, 50],
-              maxZoom: 10,
-              animate: true,
-              duration: 1.5
-            }
-          );
-        }
+      this.markerClusterGroup.addLayer(marker);
+
+      if (
+        this.selectedCountry === '__all__' &&
+        this.selectedPerson === '__all__'
+      ) {
+        this.map.fitBounds(
+          L.latLngBounds(
+            filteredPins.map((pin) => pin.location as [number, number])
+          ),
+          {
+            padding: [50, 50],
+            maxZoom: 10,
+            animate: true,
+            duration: 1.5,
+          }
+        );
+      }
     });
 
     this.markerClusterGroup.refreshClusters();
 
     // Ajuster la vue si un pays est sélectionné
     if (this.selectedCountry !== '__all__' && filteredPins.length > 0) {
-      const bounds = L.latLngBounds(filteredPins.map(pin => pin.location as [number, number]));
+      const bounds = L.latLngBounds(
+        filteredPins.map((pin) => pin.location as [number, number])
+      );
       this.map.fitBounds(bounds, {
         padding: [50, 50], // Ajoute un peu d'espace autour des marqueurs
         maxZoom: 10, // Limite le zoom maximum pour garder une vue d'ensemble
         animate: true, // Active l'animation
-        duration: 1.5 // Durée de l'animation en secondes
+        duration: 1.5, // Durée de l'animation en secondes
       });
     }
   }

src/app/components/navbar/navbar.component.html

@@ -1,4 +1,5 @@
 <nav class="bg-white border-gray-200 dark:bg-gray-900">
+  <app-add-pin-popup></app-add-pin-popup>
   <div
     class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-3"
   >
@@ -173,7 +174,13 @@
             >
           </li>
           <li id="add">
-            <app-add-pin-popup></app-add-pin-popup>
+            <button
+              (click)="openPinModal()"
+              class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
+              type="button"
+            >
+              <p>Ajouter un pin</p>
+            </button>
           </li>
           <li id="friend">
             <app-friend-page></app-friend-page>

src/app/components/navbar/navbar.component.ts

@@ -20,11 +20,12 @@ import {
   switchMap,
 } from 'rxjs';
 import { Pin } from '../../model/Pin';
+import { AuthService } from '../../services/auth/auth.service';
+import { ModalService } from '../../services/modal/modal.service';
+import { NavbarService } from '../../services/navbar/navbar.service';
 import { PinService } from '../../services/pin/pin.service';
 import { AddPinPopupComponent } from '../add-pin-popup/add-pin-popup.component';
 import { FriendPageComponent } from '../friend-page/friend-page.component';
-import { AuthService } from '../../services/auth/auth.service';
-import { NavbarService } from '../../services/navbar/navbar.service';
 
 @Component({
   selector: 'app-navbar',
@@ -54,18 +55,19 @@ export class NavbarComponent implements OnInit {
     private pinService: PinService,
     private fb: FormBuilder,
     private authService: AuthService,
-    private navbarService: NavbarService
+    private navbarService: NavbarService,
+    private modalService: ModalService
   ) {
     this.searchForm = this.fb.group({
       searchControl: new FormControl(''),
     });
 
-    this.navbarService.isSearchOpen$.subscribe(isOpen => {
+    this.navbarService.isSearchOpen$.subscribe((isOpen) => {
       this.isSearchOpen = isOpen;
       this.isNavbarOpen = false;
     });
 
-    this.navbarService.isNavbarOpen$.subscribe(isOpen => {
+    this.navbarService.isNavbarOpen$.subscribe((isOpen) => {
       this.isNavbarOpen = isOpen;
       this.isSearchOpen = false;
     });
@@ -79,15 +81,21 @@ export class NavbarComponent implements OnInit {
     this.navbarService.toggleNavbar();
   }
 
+  openPinModal() {
+    this.modalService.openModal('add-modal');
+  }
+
   ngOnInit(): void {
     this.pins = this.pinService.getPins().subscribe((pins: Pin[]) => {
       this.pins = pins;
     });
 
-    this.showTimeline = this.router.url !== '/timeline' && this.router.url !== '/';
+    this.showTimeline =
+      this.router.url !== '/timeline' && this.router.url !== '/';
     this.router.events.subscribe((event) => {
       if (event instanceof NavigationEnd) {
-        this.showTimeline = event.url !== '/timeline' && this.router.url !== '/';
+        this.showTimeline =
+          event.url !== '/timeline' && this.router.url !== '/';
       }
     });
 
@@ -114,7 +122,6 @@ export class NavbarComponent implements OnInit {
       .subscribe((filteredPins) => {
         this.pinsFiltered = filteredPins;
       });
-
   }
 
   filterPins(searchTerm: string): Pin[] {

src/app/components/register-page/register-page.component.html

@@ -1,12 +1,3 @@
-<!-- Modal toggle -->
-<button
-  (click)="openRegisterModal()"
-  class="block py-2 text-gray-900 dark:text-white hover:text-gray-700 dark:hover:text-gray-300"
-  type="button"
->
-  Inscription
-</button>
-
 <!-- Main modal -->
 <div
   class="fixed inset-0 z-40 bg-gray-900 bg-opacity-50 w-full h-full transition-opacity duration-300 ease-in-out"

src/app/components/register-page/register-page.component.ts

@@ -10,8 +10,8 @@ import {
 import { Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { User } from '../../model/User';
-import { ModalService } from '../../services/modal/modal.service';
 import { AuthService } from '../../services/auth/auth.service';
+import { ModalService } from '../../services/modal/modal.service';
 
 @Component({
   selector: 'app-register-page',
@@ -77,25 +77,19 @@ export class RegisterPageComponent {
     this.user.login = this.userForm.value.login;
     this.user.password = this.userForm.value.password;
 
-    this.authService
-      .register(this.user.login, this.user.password)
-      .subscribe({
-        next: () => {
-          this.closeRegisterModal();
+    this.authService.register(this.user.login, this.user.password).subscribe({
+      next: () => {
+        this.closeRegisterModal();
 
-          setTimeout(() => {
-            this.router.navigate(['/map', {tutorial: true}]);
-          }, 1);
-        },
-        error: (response) => {
-          console.error('Register KO: ', response.error.detail);
-          this.errorMessage = response.error.detail;
-        },
-      });
-  }
-
-  openRegisterModal() {
-    this.modalService.openModal(this.modalId);
+        setTimeout(() => {
+          this.router.navigate(['/map', { tutorial: true }]);
+        }, 1);
+      },
+      error: (response) => {
+        console.error('Register KO: ', response.error.detail);
+        this.errorMessage = response.error.detail;
+      },
+    });
   }
 
   closeRegisterModal() {