move image, edit image

src/app/deck-list.component.ts

@@ -7,6 +7,7 @@ import { TrainingComponent } from './training/training.component';
 import { UploadImageModalComponent } from './upload-image-modal/upload-image-modal.component';
 import { EditImageModalComponent } from './edit-image-modal/edit-image-modal.component';
 import { firstValueFrom } from 'rxjs';
+import { MoveImageModalComponent } from './move-image-modal/move-image-modal.component';
 
 @Component({
   selector: 'app-deck-list',
@@ -18,6 +19,7 @@ import { firstValueFrom } from 'rxjs';
     UploadImageModalComponent,
     TrainingComponent,
     EditImageModalComponent,
+    MoveImageModalComponent, // Hinzufügen der neuen Komponente
     UploadImageModalComponent
   ]
 })
@@ -30,13 +32,16 @@ export class DeckListComponent implements OnInit {
   @ViewChild(EditImageModalComponent) editModal!: EditImageModalComponent;
   @ViewChild(UploadImageModalComponent) uploadModal!: UploadImageModalComponent;
 
-  imageData: { imageSrc: string | ArrayBuffer | null, deckImage:DeckImage} | null = null;
+  imageData: { imageSrc: string | ArrayBuffer | null, deckImage: DeckImage } | null = null;
 
   currentUploadDeckName: string = '';
 
   // Set zur Verfolgung erweiterter Decks
   expandedDecks: Set<number> = new Set<number>();
 
+  // State für das Verschieben von Bildern
+  imageToMove: { image: DeckImage, sourceDeck: Deck } | null = null;
+
   constructor(private deckService: DeckService) { }
 
   ngOnInit(): void {
@@ -73,8 +78,10 @@ export class DeckListComponent implements OnInit {
       error: (err) => console.error('Fehler beim Löschen des Bildes', err)
     });
   }
+  
   editImage(deck: Deck, image: DeckImage): void {
     let imageSrc = null
+    this.currentUploadDeckName = deck.name;
     fetch(`/api/debug_image/${image.id}/original_compressed.jpg`)
     .then(response => {
       if (!response.ok) {
@@ -86,7 +93,7 @@ export class DeckListComponent implements OnInit {
       const reader = new FileReader();
       reader.onloadend = () => {
         imageSrc = reader.result; // Base64-String
-        this.imageData = {imageSrc,deckImage:image}
+        this.imageData = { imageSrc, deckImage: image }
       };
       reader.readAsDataURL(blob);
     })
@@ -94,6 +101,7 @@ export class DeckListComponent implements OnInit {
       console.error('Fehler beim Laden des Bildes:', error);
     });        
   }
+  
   openTraining(deck: Deck): void {
     this.selectedDeck = deck;
   }
@@ -139,18 +147,8 @@ export class DeckListComponent implements OnInit {
         console.error('Fehler beim Parsen der erweiterten Decks aus sessionStorage', e);
       }
     } else {
-      // Wenn keine Daten gespeichert sind, alle Decks standardmäßig erweitern
+      // Wenn keine Daten gespeichert sind, alle Decks standardmäßig nicht erweitern
       this.expandedDecks = new Set<number>();
-      // Dieser Teil wird nach dem Laden der Decks initialisiert
-      // Wir erweitern alle Decks, sobald sie geladen sind
-      this.deckService.getDecks().subscribe({
-        next: (data) => {
-          data.forEach(deck => this.expandedDecks.add(deck.id));
-          this.saveExpandedDecks();
-          this.decks = data;
-        },
-        error: (err) => console.error('Fehler beim Laden der Decks', err)
-      });
     }
   }
 
@@ -169,12 +167,25 @@ export class DeckListComponent implements OnInit {
   onImageUploaded(imageData: any): void {
     this.imageData = imageData;
   }
+
   onClosed(){
     this.imageData = null;
   }
+
   async onImageSaved() {
     // Handle das Speichern der Bilddaten, z.B. aktualisiere die Liste der Bilder
     this.imageData = null;
     this.decks = await firstValueFrom(this.deckService.getDecks())
   }
+
+  // Methode zum Öffnen des MoveImageModal
+  openMoveImageModal(deck: Deck, image: DeckImage): void {
+    this.imageToMove = { image, sourceDeck: deck };
+  }
+
+  // Handler für das moveCompleted Event
+  onImageMoved(): void {
+    this.imageToMove = null;
+    this.loadDecks();
+  }
 }