@ -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 , {
@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 = '' ;
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
