60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
import { CommonModule } from '@angular/common';
|
|
import { AfterViewInit, Component, ElementRef, EventEmitter, Output, ViewChild } from '@angular/core';
|
|
import { FormsModule } from '@angular/forms';
|
|
import { Modal } from 'flowbite';
|
|
import { DeckService } from '../services/deck.service';
|
|
import { PopoverService } from '../services/popover.service';
|
|
|
|
@Component({
|
|
selector: 'app-create-deck-modal',
|
|
templateUrl: './create-deck-modal.component.html',
|
|
standalone: true,
|
|
imports: [CommonModule, FormsModule],
|
|
})
|
|
export class CreateDeckModalComponent implements AfterViewInit {
|
|
@Output() deckCreated = new EventEmitter<void>();
|
|
@ViewChild('createDeckModal') modalElement!: ElementRef;
|
|
deckName: string = '';
|
|
modal!: Modal;
|
|
|
|
constructor(private deckService: DeckService, private popoverService: PopoverService) {}
|
|
|
|
ngAfterViewInit(): void {
|
|
this.modal = new Modal(this.modalElement.nativeElement);
|
|
}
|
|
|
|
open(): void {
|
|
this.modal.show();
|
|
}
|
|
|
|
createDeck(event: Event): void {
|
|
event.preventDefault();
|
|
if (this.deckName.trim() === '') {
|
|
this.popoverService.show({
|
|
title: 'Information',
|
|
message: 'Please enter a deck name !',
|
|
});
|
|
return;
|
|
}
|
|
|
|
this.deckService.createDeck(this.deckName).subscribe({
|
|
next: () => {
|
|
this.deckName = '';
|
|
this.deckCreated.emit();
|
|
this.modal.hide();
|
|
},
|
|
error: err => {
|
|
console.error('Error creating deck', err);
|
|
this.popoverService.show({
|
|
title: 'Error',
|
|
message: 'Error creating deck.',
|
|
});
|
|
},
|
|
});
|
|
}
|
|
|
|
closeModal(): void {
|
|
this.modal.hide();
|
|
}
|
|
}
|