diff --git a/src/app/components/edit-pin-popup/edit-pin-popup.component.html b/src/app/components/edit-pin-popup/edit-pin-popup.component.html index 01153c1..a04c735 100644 --- a/src/app/components/edit-pin-popup/edit-pin-popup.component.html +++ b/src/app/components/edit-pin-popup/edit-pin-popup.component.html @@ -1,8 +1,8 @@ - -
+
+ +
- - +
\ No newline at end of file diff --git a/src/app/components/edit-pin-popup/edit-pin-popup.component.ts b/src/app/components/edit-pin-popup/edit-pin-popup.component.ts index c901f33..8a769f0 100644 --- a/src/app/components/edit-pin-popup/edit-pin-popup.component.ts +++ b/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; @ViewChild(DragDropComponent) dragDropComponent!: DragDropComponent; + + private modalOpenSubscription!: Subscription; + form!: FormGroup; suggestions: any[] = []; inputFocused: boolean = false; files: File[] = []; isPinModalOpen: boolean = false; - @Input() modalId!: string; uploadError: string = ''; - - private modalOpenSubscription!: Subscription; - private routerSubscription!: Subscription; - private locationSubscription!: Subscription; + modalId: string = ''; 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,42 +89,19 @@ export class EditPinPopupComponent implements OnInit, AfterViewInit, OnDestroy { } ngOnInit(): void { - // 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.modalId = 'edit-pin-popup-' + this.pinId; + // 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 - .pipe(filter((event) => event instanceof NavigationEnd)) - .subscribe(() => { - // Attendre que le DOM soit mis à jour après la navigation - setTimeout(() => this.moveModalToBody(), 0); - }); + this.pinOpened.subscribe(() => { + this.moveModalToBody(); + }); // Configuration de l'autocomplétion pour le champ d'adresse this.form @@ -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 = ''; - if (this.dragDropComponent) { - this.dragDropComponent.updateFileNamesFromFileList(new DataTransfer().files); - this.dragDropComponent.errorMessage = ''; - } + this.modalService.closeModal(this.modalId); } 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