️ 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

timeline
Alix JEUDI--LEMOINE 2 weeks ago
parent 8c9b32a9ad
commit f3ea54f8af

@ -23,6 +23,7 @@
</svg> </svg>
</button> </button>
<div id="edit-pin-popup-{{pinId}}">
<!-- Fond assombri --> <!-- Fond assombri -->
<div <div
class="fixed inset-0 bg-gray-900 bg-opacity-50 w-full h-full transition-opacity duration-300 ease-in-out z-40" 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 'opacity-100': isPinModalOpen
}" }"
(click)="closePinModal()" (click)="closePinModal()"
id="pin-modal-background"
></div> ></div>
<!-- Main modal --> <!-- Main modal -->
<div <div
id="pin-modal"
tabindex="-1" tabindex="-1"
aria-hidden="true" aria-hidden="true"
[ngClass]="{ [ngClass]="{
@ -136,6 +135,7 @@
>Images</label >Images</label
> >
<app-drag-drop <app-drag-drop
*ngIf="isPinModalOpen"
[initialFiles]="getFileNames()" [initialFiles]="getFileNames()"
(filesSelected)="onFilesReceived($event)" (filesSelected)="onFilesReceived($event)"
(fileRemoved)="removeFile($event)" (fileRemoved)="removeFile($event)"
@ -193,3 +193,4 @@
</div> </div>
</div> </div>
</div> </div>
</div>

@ -1,7 +1,7 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { import {
AfterViewInit,
Component, Component,
EventEmitter,
Input, Input,
OnDestroy, OnDestroy,
OnInit, OnInit,
@ -38,22 +38,24 @@ import { DragDropComponent } from '../drag-drop/drag-drop.component';
imports: [ReactiveFormsModule, CommonModule, DragDropComponent], imports: [ReactiveFormsModule, CommonModule, DragDropComponent],
templateUrl: './edit-pin-popup.component.html', templateUrl: './edit-pin-popup.component.html',
}) })
export class EditPinPopupComponent implements OnInit, AfterViewInit, OnDestroy { export class EditPinPopupComponent implements OnInit, OnDestroy {
@Input() isHomePage: boolean = false; @Input() isHomePage: boolean = false;
@Input() pin!: Pin; @Input() pin!: Pin;
@Input() pinId!: string;
@Input() pinOpened!: EventEmitter<void>;
@ViewChild(DragDropComponent) dragDropComponent!: DragDropComponent; @ViewChild(DragDropComponent) dragDropComponent!: DragDropComponent;
private modalOpenSubscription!: Subscription;
form!: FormGroup; form!: FormGroup;
suggestions: any[] = []; suggestions: any[] = [];
inputFocused: boolean = false; inputFocused: boolean = false;
files: File[] = []; files: File[] = [];
isPinModalOpen: boolean = false; isPinModalOpen: boolean = false;
@Input() modalId!: string;
uploadError: string = ''; uploadError: string = '';
modalId: string = '';
private modalOpenSubscription!: Subscription;
private routerSubscription!: Subscription;
private locationSubscription!: Subscription;
constructor( constructor(
private fb: FormBuilder, private fb: FormBuilder,
@ -61,7 +63,6 @@ export class EditPinPopupComponent implements OnInit, AfterViewInit, OnDestroy {
private pinService: PinService, private pinService: PinService,
private exifService: ExifService, private exifService: ExifService,
private modalService: ModalService, private modalService: ModalService,
private router: Router,
private mapReloadService: MapReloadService, private mapReloadService: MapReloadService,
private imageService: ImageService private imageService: ImageService
) { ) {
@ -88,41 +89,18 @@ export class EditPinPopupComponent implements OnInit, AfterViewInit, OnDestroy {
} }
ngOnInit(): void { 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 // S'abonner aux changements d'état du modal
this.modalOpenSubscription = this.modalService this.modalOpenSubscription = this.modalService
.getModalState(this.modalId) .getModalState(this.modalId)
.subscribe((state) => { .subscribe((state) => {
this.isPinModalOpen = state; this.isPinModalOpen = state;
if (state) {
setTimeout(() => this.moveModalToBody(), 0);
}
}); });
// S'abonner aux événements de navigation du router // 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 // 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() { ngOnDestroy() {
// Nettoyage des abonnements pour éviter les fuites de mémoire // Nettoyage des abonnements pour éviter les fuites de mémoire
if (this.modalOpenSubscription) { if (this.modalOpenSubscription) {
this.modalOpenSubscription.unsubscribe(); 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 // Méthode dédiée pour déplacer le modal vers le body
private moveModalToBody(): void { private moveModalToBody(): void {
const modal = document.getElementById('pin-modal'); const modal = document.getElementById(this.modalId);
if (modal && modal.parentElement !== document.body) { if (modal && modal.parentElement !== document.body) {
document.body.appendChild(modal); 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 { selectSuggestion(suggestion: any): void {
@ -257,7 +218,6 @@ export class EditPinPopupComponent implements OnInit, AfterViewInit, OnDestroy {
}); });
forkJoin(uploadObservables).subscribe((responses) => { forkJoin(uploadObservables).subscribe((responses) => {
console.log(responses);
// Vérifier si toutes les réponses sont valides // 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 return; // Ne pas continuer si une erreur s'est produite
@ -287,22 +247,35 @@ export class EditPinPopupComponent implements OnInit, AfterViewInit, OnDestroy {
} }
openPinModal() { 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); this.modalService.openModal(this.modalId);
} }
closePinModal() { closePinModal() {
this.modalService.closeModal(this.modalId);
this.form.reset();
this.files = []; 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 { 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) { if (index > -1) {
this.files.splice(index, 1); this.files.splice(index, 1);
this.uploadError = ''; // Réinitialiser l'erreur lors de la suppression d'un fichier this.uploadError = ''; // Réinitialiser l'erreur lors de la suppression d'un fichier

Loading…
Cancel
Save