diff --git a/src/app/deck-list.component.html b/src/app/deck-list.component.html index cf15336..9e0a105 100644 --- a/src/app/deck-list.component.html +++ b/src/app/deck-list.component.html @@ -15,14 +15,29 @@

{{ deck.name }}

({{ deck.images.length }} images) - +
+ + + + + + +
@@ -96,4 +111,22 @@ (moveCompleted)="onImageMoved()" (closed)="imageToMove = null"> + + +
+

Are you sure you want to delete this deck?

+
+ + +
+
+ + +
+

Enter the new name for the deck:

+ +
+ + +
\ No newline at end of file diff --git a/src/app/deck-list.component.ts b/src/app/deck-list.component.ts index c82e0fe..a50d839 100644 --- a/src/app/deck-list.component.ts +++ b/src/app/deck-list.component.ts @@ -12,6 +12,16 @@ import { MoveImageModalComponent } from './move-image-modal/move-image-modal.com selector: 'app-deck-list', templateUrl: './deck-list.component.html', standalone: true, + styles:` + .popover { + padding: 1rem; + border: 1px solid #ccc; + border-radius: 0.5rem; + background-color: white; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + max-width: 300px; + } + `, imports: [ CommonModule, CreateDeckModalComponent, @@ -25,7 +35,10 @@ import { MoveImageModalComponent } from './move-image-modal/move-image-modal.com export class DeckListComponent implements OnInit { decks: Deck[] = []; selectedDeck: Deck | null = null; - + // Zustandsvariablen für die Popover-Interaktion + private deckToDelete: string | null = null; + private deckToRename: Deck | null = null; + @ViewChild(CreateDeckModalComponent) createDeckModal!: CreateDeckModalComponent; @ViewChild(UploadImageModalComponent) uploadImageModal!: UploadImageModalComponent; @ViewChild(EditImageModalComponent) editModal!: EditImageModalComponent; @@ -54,17 +67,101 @@ export class DeckListComponent implements OnInit { error: (err) => console.error('Error loading decks', err) }); } - - deleteDeck(deckName: string): void { - if (!confirm(`Are you sure you want to delete the deck "${deckName}"?`)) { - return; + // Methode zum Öffnen des Lösch-Popovers + openDeletePopover(deckName: string): void { + this.deckToDelete = deckName; + const deletePopover = document.getElementById('deletePopover'); + if (deletePopover) { + deletePopover.showPopover(); } - this.deckService.deleteDeck(deckName).subscribe({ - next: () => this.loadDecks(), - error: (err) => console.error('Error deleting deck', err) - }); } + // Methode zum Bestätigen des Löschens + confirmDelete(): void { + if (this.deckToDelete) { + this.deckService.deleteDeck(this.deckToDelete).subscribe({ + next: () => { + this.loadDecks(); + this.closeDeletePopover(); + }, + error: (err) => console.error('Error deleting deck', err), + }); + } + } + + // Methode zum Abbrechen des Löschens + cancelDelete(): void { + this.closeDeletePopover(); + } + + // Methode zum Schließen des Lösch-Popovers + closeDeletePopover(): void { + const deletePopover = document.getElementById('deletePopover'); + if (deletePopover) { + deletePopover.hidePopover(); + } + this.deckToDelete = null; + } + + // Methode zum Öffnen des Umbenennungs-Popovers + openRenamePopover(deck: Deck): void { + this.deckToRename = deck; + const renamePopover = document.getElementById('renamePopover'); + if (renamePopover) { + renamePopover.showPopover(); + } + } + + // Methode zum Bestätigen des Umbenennens + confirmRename(): void { + const newDeckNameInput = document.getElementById('newDeckNameInput') as HTMLInputElement; + if (newDeckNameInput && this.deckToRename) { + const newDeckName = newDeckNameInput.value.trim(); + if (newDeckName && newDeckName !== this.deckToRename.name) { + this.deckService.renameDeck(this.deckToRename.name, newDeckName).subscribe({ + next: () => { + this.loadDecks(); + this.closeRenamePopover(); + }, + error: (err) => console.error('Error renaming deck', err), + }); + } + } + } + + // Methode zum Abbrechen des Umbenennens + cancelRename(): void { + this.closeRenamePopover(); + } + + // Methode zum Schließen des Umbenennungs-Popovers + closeRenamePopover(): void { + const renamePopover = document.getElementById('renamePopover'); + if (renamePopover) { + renamePopover.hidePopover(); + } + this.deckToRename = null; + } + // deleteDeck(deckName: string): void { + // if (!confirm(`Are you sure you want to delete the deck "${deckName}"?`)) { + // return; + // } + // this.deckService.deleteDeck(deckName).subscribe({ + // next: () => this.loadDecks(), + // error: (err) => console.error('Error deleting deck', err) + // }); + // } + + // renameDeck(deck: Deck): void { + // const newDeckName = prompt('Enter the new name for the deck:', deck.name); + // if (newDeckName && newDeckName !== deck.name) { + // this.deckService.renameDeck(deck.name, newDeckName).subscribe({ + // next: () => this.loadDecks(), + // error: (err) => console.error('Error renaming deck', err) + // }); + // } + // } + deleteImage(deck: Deck, image: DeckImage): void { if (!confirm(`Are you sure you want to delete the image "${image.name}"?`)) { return; diff --git a/src/app/deck.service.ts b/src/app/deck.service.ts index 7212275..bd51375 100644 --- a/src/app/deck.service.ts +++ b/src/app/deck.service.ts @@ -109,7 +109,9 @@ export class DeckService { deleteDeck(deckName: string): Observable { return this.http.delete(`${this.apiUrl}/${encodeURIComponent(deckName)}`); } - + renameDeck(oldDeckName: string, newDeckName: string): Observable { + return this.http.put(`${this.apiUrl}/${encodeURIComponent(oldDeckName)}/rename`, { newDeckName }); + } saveImageData(data: any): Observable { return this.http.post(`${this.apiUrl}/image`, data); }