From 26cf6d2c917085f1ed81bed20ee6bd300c86e820 Mon Sep 17 00:00:00 2001 From: Alexis Feron Date: Wed, 28 May 2025 14:25:51 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20edit=20modal=20and=20drag-?= =?UTF-8?q?drop=20files?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../add-pin-popup.component.html | 2 + .../add-pin-popup/add-pin-popup.component.ts | 60 +++++++---- .../drag-drop/drag-drop.component.html | 2 +- .../drag-drop/drag-drop.component.ts | 37 ++++++- .../edit-pin-popup.component.html | 2 + .../edit-pin-popup.component.ts | 99 +++++++++++++++---- .../leaflet-map/leaflet-map.component.ts | 12 +-- src/app/services/pin/pin.service.ts | 2 + 8 files changed, 164 insertions(+), 52 deletions(-) diff --git a/src/app/components/add-pin-popup/add-pin-popup.component.html b/src/app/components/add-pin-popup/add-pin-popup.component.html index 18cb5ba..fc1dac7 100644 --- a/src/app/components/add-pin-popup/add-pin-popup.component.html +++ b/src/app/components/add-pin-popup/add-pin-popup.component.html @@ -119,7 +119,9 @@ >Images diff --git a/src/app/components/add-pin-popup/add-pin-popup.component.ts b/src/app/components/add-pin-popup/add-pin-popup.component.ts index 4c47738..c23c07e 100644 --- a/src/app/components/add-pin-popup/add-pin-popup.component.ts +++ b/src/app/components/add-pin-popup/add-pin-popup.component.ts @@ -1,5 +1,11 @@ import { CommonModule } from '@angular/common'; -import { Component, Input, OnInit } from '@angular/core'; +import { + AfterViewInit, + Component, + Input, + OnInit, + ViewChild, +} from '@angular/core'; import { FormBuilder, FormControl, @@ -28,11 +34,12 @@ import { DragDropComponent } from '../drag-drop/drag-drop.component'; templateUrl: './add-pin-popup.component.html', }) export class AddPinPopupComponent implements OnInit { + @ViewChild(DragDropComponent) dragDropComponent!: DragDropComponent; form: FormGroup; suggestions: any[] = []; inputFocused: boolean = false; @Input() isHomePage: boolean = false; - files: any[] = []; + files: File[] = []; isPinModalOpen: boolean = false; modalId: string = 'add-pin-modal'; private modalSub!: Subscription; @@ -76,6 +83,13 @@ export class AddPinPopupComponent implements OnInit { if (images && images.length > 0) { this.files = images; this.form.patchValue({ files: images }); + // Convertir les fichiers en FileList pour le composant drag-drop + const dataTransfer = new DataTransfer(); + images.forEach((file) => dataTransfer.items.add(file)); + const fileList = dataTransfer.files; + if (this.dragDropComponent) { + this.dragDropComponent.updateFileNamesFromFileList(fileList); + } } } }); @@ -113,6 +127,12 @@ export class AddPinPopupComponent implements OnInit { async onFilesReceived(files: FileList): Promise { this.files = Array.from(files); + if (this.dragDropComponent) { + this.dragDropComponent.updateFileNamesFromFileList(files); + } else { + console.warn('AddPinPopupComponent - dragDropComponent not available'); + } + for (let i = 0; i < this.files.length; i++) { try { const data = await this.exifService.getLocation(this.files[i]); @@ -121,33 +141,28 @@ export class AddPinPopupComponent implements OnInit { .getAddressFromCoordinates(data.latitude, data.longitude) .toPromise(); if (address) { - console.error('Data : ' + JSON.stringify(address)); this.form.get('location')?.setValue(address.display_name); break; } } } catch (error) { - console.error('Error : ' + error); + console.error( + 'AddPinPopupComponent - Error processing EXIF data:', + error + ); } } } + getFileNames(): string[] { + return this.files.map((file) => file.name); + } + ngOnDestroy() { this.modalSub.unsubscribe(); } submitForm(): void { - // if (this.form.valid) { - // this.files = this.files.map((file) => { - // // return file.name; //TODO: Mettre le hash du fichier - // this.imageService.postImage(file).subscribe((response) => { - // // console.log('Image uploaded:', response); - // let imageId = response.json(); - // return imageId.id; - // }); - // }); - // console.log('Files : ' + JSON.stringify(this.files)); - if (this.form.valid) { const uploadObservables = this.files.map((file) => this.imageService.postImage(file) @@ -163,9 +178,6 @@ export class AddPinPopupComponent implements OnInit { date: this.form.get('date')?.value || null, }; - console.log('Files : ' + JSON.stringify(this.files)); - console.log('Pin Data : ' + JSON.stringify(pinData)); - this.pinService.addPin(pinData)?.subscribe(() => { this.mapReloadService.requestReload(); // Demander le rechargement de la carte this.closePinModal(); @@ -190,4 +202,16 @@ export class AddPinPopupComponent implements OnInit { getImagePreview(file: File): string { return URL.createObjectURL(file); } + + removeFile(fileName: string): void { + const index = this.files.findIndex((file) => file.name === fileName); + if (index > -1) { + this.files.splice(index, 1); + + // Mettre à jour le form control + const dataTransfer = new DataTransfer(); + this.files.forEach((file) => dataTransfer.items.add(file)); + this.form.patchValue({ files: dataTransfer.files }); + } + } } diff --git a/src/app/components/drag-drop/drag-drop.component.html b/src/app/components/drag-drop/drag-drop.component.html index 495e7d9..8c1d342 100644 --- a/src/app/components/drag-drop/drag-drop.component.html +++ b/src/app/components/drag-drop/drag-drop.component.html @@ -50,7 +50,7 @@