SAE3A_MemoryMap
/
front
5
0
Fork 0
Code Issues 6 Pull Requests Packages Projects 1 Releases Wiki Activity

⚡️ 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

Browse Source
timeline
Alix JEUDI--LEMOINE 1 week ago
parent 8c9b32a9ad
commit f3ea54f8af
2 changed files with 193 additions and 219 deletions
Show Stats Download Patch File Download Diff File

23
src/app/components/edit-pin-popup/edit-pin-popup.component.html
Unescape View File

@ -1,8 +1,8 @@
<!-- Modal toggle -->
<button
class="p-1 text-blue-500 rounded hover:bg-blue-100 focus:outline-none flex items-center"
aria-label="Edit"
(click)="openPinModal()"
class="p-1 text-blue-500 rounded hover:bg-blue-100 focus:outline-none flex items-center"
aria-label="Edit"
(click)="openPinModal()"
>
<svg
class="w-[1.125rem] h-[1.125rem] text-gray-800"
@ -23,20 +23,19 @@
</svg>
</button>
<!-- Fond assombri -->
<div
<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"
[ngClass]="{
'opacity-0 pointer-events-none': !isPinModalOpen,
'opacity-100': isPinModalOpen
}"
(click)="closePinModal()"
id="pin-modal-background"
></div>
></div>
<!-- Main modal -->
<div
id="pin-modal"
<!-- Main modal -->
<div
tabindex="-1"
aria-hidden="true"
[ngClass]="{
@ -44,7 +43,7 @@
'opacity-100 scale-100': isPinModalOpen
}"
class="fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full h-full transition-transform duration-300 ease-in-out overflow-y-auto"
>
>
<div class="relative p-4 w-full max-w-xl max-h-full">
<!-- Modal content -->
<div
@ -136,6 +135,7 @@
>Images</label
>
<app-drag-drop
*ngIf="isPinModalOpen"
[initialFiles]="getFileNames()"
(filesSelected)="onFilesReceived($event)"
(fileRemoved)="removeFile($event)"
@ -192,4 +192,5 @@
</div>
</div>
</div>
</div>
</div>

95
src/app/components/edit-pin-popup/edit-pin-popup.component.ts
Unescape View File

@ -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 = '';
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,41 +89,18 @@ 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
@ -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

Write Preview
Loading…
Cancel
Save