From 26cf6d2c917085f1ed81bed20ee6bd300c86e820 Mon Sep 17 00:00:00 2001
From: Alexis Feron <alexisferon081@gmail.com>
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</label
             >
             <app-drag-drop
+              [initialFiles]="getFileNames()"
               (filesSelected)="onFilesReceived($event)"
+              (fileRemoved)="removeFile($event)"
             ></app-drag-drop>
           </div>
 
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<void> {
     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 @@
       <button
         type="button"
         class="end-2.5 text-gray-400 bg-transparent hover:text-gray-900 rounded-lg text-sm w-6 h-6 ms-auto inline-flex justify-center items-center dark:hover:text-white"
-        (click)="removeFile(fileName)"
+        (click)="removeFile(fileName, $event)"
       >
         <svg
           class="w-2 h-2"
diff --git a/src/app/components/drag-drop/drag-drop.component.ts b/src/app/components/drag-drop/drag-drop.component.ts
index b1b3bb4..a014f24 100644
--- a/src/app/components/drag-drop/drag-drop.component.ts
+++ b/src/app/components/drag-drop/drag-drop.component.ts
@@ -1,14 +1,35 @@
 import { CommonModule } from '@angular/common';
-import { Component, EventEmitter, Output } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
 
 @Component({
   selector: 'app-drag-drop',
   imports: [CommonModule],
   templateUrl: './drag-drop.component.html',
 })
-export class DragDropComponent {
+export class DragDropComponent implements OnChanges {
+  @Input() initialFiles: string[] = [];
   fileNames: string[] = [];
   @Output() filesSelected = new EventEmitter<FileList>();
+  @Output() fileRemoved = new EventEmitter<string>();
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['initialFiles']) {
+      this.fileNames = [...this.initialFiles];
+    }
+  }
+
+  ngOnInit() {
+    if (this.initialFiles && this.initialFiles.length > 0) {
+      this.fileNames = [...this.initialFiles];
+    }
+  }
 
   onFilesSelected(event: Event): void {
     const input = event.target as HTMLInputElement;
@@ -35,14 +56,22 @@ export class DragDropComponent {
     event.preventDefault();
   }
 
+  updateFileNamesFromFileList(files: FileList): void {
+    this.fileNames = Array.from(files).map((file) => file.name);
+  }
+
   private updateFileNames(files: FileList): void {
     for (let i = 0; i < files.length; i++) {
       this.fileNames.push(files[i].name);
     }
   }
 
-  removeFile(fileName: string): void {
+  removeFile(fileName: string, event: Event): void {
+    event.stopPropagation(); // Empêcher la propagation du clic
     const index = this.fileNames.indexOf(fileName);
-    this.fileNames.splice(index, 1);
+    if (index > -1) {
+      this.fileNames.splice(index, 1);
+      this.fileRemoved.emit(fileName);
+    }
   }
 }
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 d1addd5..9b6cf44 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
@@ -136,7 +136,9 @@
               >Images</label
             >
             <app-drag-drop
+              [initialFiles]="form.get('files')?.value"
               (filesSelected)="onFilesReceived($event)"
+              (fileRemoved)="removeFile($event)"
             ></app-drag-drop>
           </div>
 
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 f56b6d7..b7daffa 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
@@ -13,7 +13,7 @@ import {
   ReactiveFormsModule,
 } from '@angular/forms';
 import { NavigationEnd, Router } from '@angular/router';
-import { of, Subscription } from 'rxjs';
+import { forkJoin, of, Subscription } from 'rxjs';
 import {
   catchError,
   debounceTime,
@@ -25,6 +25,7 @@ import {
 import { Pin } from '../../model/Pin';
 import { AutocompleteService } from '../../services/auto-complete/auto-complete.service';
 import { ExifService } from '../../services/exif/exif.service';
+import { ImageService } from '../../services/image/image.service';
 import { MapReloadService } from '../../services/map-reload/map-reload.service';
 import { ModalService } from '../../services/modal/modal.service';
 import { PinService } from '../../services/pin/pin.service';
@@ -58,7 +59,8 @@ export class EditPinPopupComponent implements OnInit, AfterViewInit, OnDestroy {
     private exifService: ExifService,
     private modalService: ModalService,
     private router: Router,
-    private mapReloadService: MapReloadService
+    private mapReloadService: MapReloadService,
+    private imageService: ImageService
   ) {
     // Initialiser le formulaire avec des valeurs par défaut
     this.form = this.fb.group({
@@ -86,9 +88,15 @@ export class EditPinPopupComponent implements OnInit, AfterViewInit, OnDestroy {
       title: this.pin?.title || '',
       description: this.pin?.description || '',
       location: "Chargement de l'adresse...",
-      date: this.pin?.date || '',
+      files: this.pin?.files || [],
+      date: this.pin?.date
+        ? new Date(this.pin.date).toISOString().split('T')[0]
+        : '',
     });
 
+    // Initialiser les fichiers existants
+    this.files = this.pin?.files || [];
+
     // Vérifier si nous avons des coordonnées valides dans pin.location
     if (
       this.pin?.location &&
@@ -209,14 +217,14 @@ export class EditPinPopupComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   async onFilesReceived(files: FileList): Promise<void> {
-    this.files = Array.from(files);
+    // Ajouter les nouveaux fichiers à la liste existante
+    this.files = [...this.files, ...Array.from(files)];
 
-    for (let i = 0; i < this.files.length; i++) {
+    for (let i = 0; i < files.length; i++) {
       try {
-        const data = await this.exifService.getLocation(this.files[i]);
+        const data = await this.exifService.getLocation(files[i]);
         if (data.latitude !== undefined && data.longitude !== undefined) {
           try {
-            // Utiliser pipe(take(1)) pour s'assurer que l'observable se termine
             const address = await this.autocompleteService
               .getAddressFromCoordinates(data.latitude, data.longitude)
               .pipe(take(1))
@@ -231,7 +239,6 @@ export class EditPinPopupComponent implements OnInit, AfterViewInit, OnDestroy {
               "Erreur lors de la récupération de l'adresse:",
               addressError
             );
-            // Utiliser les coordonnées brutes en cas d'échec
             this.form
               .get('location')
               ?.setValue(`${data.latitude}, ${data.longitude}`);
@@ -245,21 +252,57 @@ export class EditPinPopupComponent implements OnInit, AfterViewInit, OnDestroy {
 
   submitForm(): void {
     if (this.form.valid) {
-      this.files = this.files.map((file) => {
-        return file.name; //TODO: Mettre le hash du fichier
-      });
+      // Filtrer les fichiers qui sont déjà des IDs (images existantes)
+      const existingFiles = this.files.filter(
+        (file) => typeof file === 'string'
+      );
+      const newFiles = this.files.filter((file) => file instanceof File);
 
-      const pinData = {
-        ...this.form.value,
-        files: this.files,
-        user_id: this.pin.user_id,
-        date: this.form.get('date')?.value || null,
-      };
+      // Récupérer la date et la formater correctement
+      const dateValue = this.form.get('date')?.value;
+      const formattedDate = dateValue
+        ? new Date(dateValue).toISOString()
+        : null;
 
-      this.pinService.updatePin(this.pin.id, pinData).subscribe(() => {
-        this.mapReloadService.requestReload(); // Demander le rechargement de la carte
-        this.closePinModal();
-      });
+      if (newFiles.length > 0) {
+        // Upload des nouveaux fichiers
+        const uploadObservables = newFiles.map((file) =>
+          this.imageService.postImage(file)
+        );
+
+        forkJoin(uploadObservables).subscribe((responses) => {
+          // Combiner les IDs des nouvelles images avec les IDs existants
+          const allFileIds = [
+            ...existingFiles,
+            ...responses.map((res: any) => res.id),
+          ];
+
+          const pinData = {
+            ...this.form.getRawValue(),
+            files: allFileIds,
+            user_id: this.pin.user_id,
+            date: formattedDate,
+          };
+
+          this.pinService.updatePin(this.pin.id, pinData).subscribe(() => {
+            this.mapReloadService.requestReload();
+            this.closePinModal();
+          });
+        });
+      } else {
+        // Si pas de nouveaux fichiers, mettre à jour directement avec les fichiers existants
+        const pinData = {
+          ...this.form.getRawValue(),
+          files: existingFiles,
+          user_id: this.pin.user_id,
+          date: formattedDate,
+        };
+
+        this.pinService.updatePin(this.pin.id, pinData).subscribe(() => {
+          this.mapReloadService.requestReload();
+          this.closePinModal();
+        });
+      }
     } else {
       console.error('Le formulaire est invalide');
     }
@@ -272,4 +315,18 @@ export class EditPinPopupComponent implements OnInit, AfterViewInit, OnDestroy {
   closePinModal() {
     this.modalService.closeModal(this.modalId);
   }
+
+  removeFile(fileName: string): void {
+    const index = this.files.findIndex((file) => {
+      if (typeof file === 'string') {
+        return file === fileName;
+      }
+      return file.name === fileName;
+    });
+
+    if (index > -1) {
+      this.files.splice(index, 1);
+      this.form.patchValue({ files: this.files });
+    }
+  }
 }
diff --git a/src/app/components/leaflet-map/leaflet-map.component.ts b/src/app/components/leaflet-map/leaflet-map.component.ts
index 342b408..af28e33 100644
--- a/src/app/components/leaflet-map/leaflet-map.component.ts
+++ b/src/app/components/leaflet-map/leaflet-map.component.ts
@@ -12,9 +12,9 @@ import * as L from 'leaflet';
 import { Pin } from '../../model/Pin';
 import { AutocompleteService } from '../../services/auto-complete/auto-complete.service';
 import { MapReloadService } from '../../services/map-reload/map-reload.service';
+import { ModalService } from '../../services/modal/modal.service';
 import { PinService } from '../../services/pin/pin.service';
 import { PinMarkerComponent } from '../pin-marker/pin-marker.component';
-import { ModalService } from '../../services/modal/modal.service';
 
 @Component({
   selector: 'app-leaflet-map',
@@ -241,8 +241,6 @@ export class LeafletMapComponent implements OnInit {
     });
   }
 
-
-
   async onFilesSelected(event: Event): Promise<void> {
     const input = event.target as HTMLInputElement;
     if (input.files && input.files.length > 0) {
@@ -259,11 +257,9 @@ export class LeafletMapComponent implements OnInit {
   onDrop(event: DragEvent) {
     event.preventDefault();
     if (event.dataTransfer && event.dataTransfer.files.length > 0) {
-      this.filesSelected.emit(event.dataTransfer.files);
-      const images: File[] = Array.from(event.dataTransfer.files);
-      this.modalService.openModal('add-pin-modal', images);
+      const files = event.dataTransfer.files;
+      this.filesSelected.emit(files);
+      this.modalService.openModal('add-pin-modal', Array.from(files));
     }
-
-    console.log('Image dropped on map : ', event.dataTransfer?.files);
   }
 }
diff --git a/src/app/services/pin/pin.service.ts b/src/app/services/pin/pin.service.ts
index 4d11d82..62c18e1 100644
--- a/src/app/services/pin/pin.service.ts
+++ b/src/app/services/pin/pin.service.ts
@@ -68,6 +68,7 @@ export class PinService {
       location: string;
       files: any[];
       user_id: string;
+      date: string;
     }
   ) {
     const url = `${this.apiURL}/pin/${id}`;
@@ -88,6 +89,7 @@ export class PinService {
             location: coords,
             files: pin.files,
             user_id: pin.user_id,
+            date: pin.date,
           },
           { headers }
         );