⚡️ Unique name for edit modal + fixed bug empty content after closing modal one time + new event from parent to children instead of NavigationEnd + all component in one div (avoid moving two divs in the body at the same time) + check if modal is open for drag&drop events

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

@@ -23,6 +23,7 @@
   </svg>
 </button>
 
+<div id="edit-pin-popup-{{pinId}}">
   <!-- 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"
@@ -31,12 +32,10 @@
       'opacity-100': isPinModalOpen
     }"
     (click)="closePinModal()"
-  id="pin-modal-background"
   ></div>
 
   <!-- Main modal -->
   <div
-  id="pin-modal"
     tabindex="-1"
     aria-hidden="true"
     [ngClass]="{
@@ -136,6 +135,7 @@
                 >Images</label
               >
               <app-drag-drop
+                *ngIf="isPinModalOpen"
                 [initialFiles]="getFileNames()"
                 (filesSelected)="onFilesReceived($event)"
                 (fileRemoved)="removeFile($event)"
@@ -193,3 +193,4 @@
       </div>
     </div>
   </div>
+</div>

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

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import {
-  AfterViewInit,
   Component,
+  EventEmitter,
   Input,
   OnDestroy,
   OnInit,
@@ -38,22 +38,24 @@ import { DragDropComponent } from '../drag-drop/drag-drop.component';
   imports: [ReactiveFormsModule, CommonModule, DragDropComponent],
   templateUrl: './edit-pin-popup.component.html',
 })
-export class EditPinPopupComponent implements OnInit, AfterViewInit, OnDestroy {
+export class EditPinPopupComponent implements OnInit, OnDestroy {
   @Input() isHomePage: boolean = false;
   @Input() pin!: Pin;
+  @Input() pinId!: string;
+  
+  @Input() pinOpened!: EventEmitter<void>; 
 
   @ViewChild(DragDropComponent) dragDropComponent!: DragDropComponent;
+  
+  private modalOpenSubscription!: Subscription;
+
   form!: FormGroup;
   suggestions: any[] = [];
   inputFocused: boolean = false;
   files: File[] = [];
   isPinModalOpen: boolean = false;
-  @Input() modalId!: string;
   uploadError: string = '';
-
+  modalId: string = '';
-  private modalOpenSubscription!: Subscription;
-  private routerSubscription!: Subscription;
-  private locationSubscription!: Subscription;
 
   constructor(
     private fb: FormBuilder,
@@ -61,7 +63,6 @@ export class EditPinPopupComponent implements OnInit, AfterViewInit, OnDestroy {
     private pinService: PinService,
     private exifService: ExifService,
     private modalService: ModalService,
-    private router: Router,
     private mapReloadService: MapReloadService,
     private imageService: ImageService
   ) {
@@ -88,41 +89,18 @@ export class EditPinPopupComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    // Initialiser le formulaire avec les valeurs de base
+    this.modalId = 'edit-pin-popup-' + this.pinId;
-    this.form.patchValue({
-      title: this.pin?.title || '',
-      description: this.pin?.description || '',
-      location: this.pin?.complete_address || '',
-      complete_address: this.pin?.complete_address || '',
-      coordinates: this.pin?.location || [],
-      files: this.pin?.files || [],
-      date: this.pin?.date
-        ? new Date(this.pin.date).toISOString().split('T')[0]
-        : '',
-    });
-
-    this.pin.files.forEach((file) => {
-      this.imageService.getImageMetadata(file).subscribe((metadata) => {
-        this.files.push(new File([], metadata.metadata.original_filename + "|" + file.toString(), { type: metadata.metadata.content_type }));
-      });
-    });
     
     // S'abonner aux changements d'état du modal
     this.modalOpenSubscription = this.modalService
       .getModalState(this.modalId)
       .subscribe((state) => {
         this.isPinModalOpen = state;
-        if (state) {
-          setTimeout(() => this.moveModalToBody(), 0);
-        }
       });
 
     // S'abonner aux événements de navigation du router
-    this.routerSubscription = this.router.events
+    this.pinOpened.subscribe(() => {
-      .pipe(filter((event) => event instanceof NavigationEnd))
+      this.moveModalToBody();
-      .subscribe(() => {
-        // Attendre que le DOM soit mis à jour après la navigation
-        setTimeout(() => this.moveModalToBody(), 0);
     });
 
     // Configuration de l'autocomplétion pour le champ d'adresse
@@ -153,36 +131,19 @@ export class EditPinPopupComponent implements OnInit, AfterViewInit, OnDestroy {
       });
   }
 
-  ngAfterViewInit() {
-    // Appel initial pour déplacer le modal
-    this.moveModalToBody();
-  }
-
   ngOnDestroy() {
     // Nettoyage des abonnements pour éviter les fuites de mémoire
     if (this.modalOpenSubscription) {
       this.modalOpenSubscription.unsubscribe();
     }
-
-    if (this.routerSubscription) {
-      this.routerSubscription.unsubscribe();
-    }
-
-    if (this.locationSubscription) {
-      this.locationSubscription.unsubscribe();
-    }
   }
 
   // Méthode dédiée pour déplacer le modal vers le body
   private moveModalToBody(): void {
-    const modal = document.getElementById('pin-modal');
+    const modal = document.getElementById(this.modalId);
     if (modal && modal.parentElement !== document.body) {
       document.body.appendChild(modal);
     }
-    const bg = document.getElementById('pin-modal-background');
-    if (bg && bg.parentElement !== document.body) {
-      document.body.appendChild(bg);
-    }
   }
 
   selectSuggestion(suggestion: any): void {
@@ -257,7 +218,6 @@ export class EditPinPopupComponent implements OnInit, AfterViewInit, OnDestroy {
       });
 
       forkJoin(uploadObservables).subscribe((responses) => {
-        console.log(responses);
         // Vérifier si toutes les réponses sont valides
         if (responses.some(response => response === null)) {
           return; // Ne pas continuer si une erreur s'est produite
@@ -287,22 +247,35 @@ export class EditPinPopupComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   openPinModal() {
+    // Initialiser le formulaire avec les valeurs de base
+    this.form.patchValue({
+      title: this.pin?.title || '',
+      description: this.pin?.description || '',
+      location: this.pin?.complete_address || '',
+      complete_address: this.pin?.complete_address || '',
+      coordinates: this.pin?.location || [],
+      files: this.pin?.files || [],
+      date: this.pin?.date
+        ? new Date(this.pin.date).toISOString().split('T')[0]
+        : '',
+    });
+    
+    this.pin.files.forEach((file) => {
+      this.imageService.getImageMetadata(file).subscribe((metadata) => {
+        this.files.push(new File([], metadata.metadata.original_filename + "|" + file.toString(), { type: metadata.metadata.content_type }));
+      });
+    });
+    
     this.modalService.openModal(this.modalId);
   }
 
   closePinModal() {
-    this.modalService.closeModal(this.modalId);
-    this.form.reset();
     this.files = [];
-    this.uploadError = '';
+    this.modalService.closeModal(this.modalId);
-    if (this.dragDropComponent) {
-      this.dragDropComponent.updateFileNamesFromFileList(new DataTransfer().files);
-      this.dragDropComponent.errorMessage = '';
-    }
   }
 
   removeFile(fileName: string): void {
-    const index = this.files.findIndex((file) => file.name === fileName);
+    const index = this.files.findIndex((file) => file.name === fileName || file.name.split("|")[0] === fileName);
     if (index > -1) {
       this.files.splice(index, 1);
       this.uploadError = ''; // Réinitialiser l'erreur lors de la suppression d'un fichier