114 lines
3.6 KiB
TypeScript
114 lines
3.6 KiB
TypeScript
import {Component, inject} from '@angular/core';
|
|
import {NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
|
|
import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
|
|
import {ShowsApiService} from '../../../services/shows/shows-api.service';
|
|
import {ShowsApiCreation} from '../../../interfaces/shows-api-creation';
|
|
import {ToastService} from '../../../services/toast/toast.service';
|
|
import {Show} from '../../../interfaces/show';
|
|
import {formatDate} from '@angular/common';
|
|
import {ShowsApiDeletionEdit} from '../../../interfaces/shows-api-deletion-edit';
|
|
|
|
@Component({
|
|
selector: 'app-create-edit-modal',
|
|
imports: [
|
|
ReactiveFormsModule
|
|
],
|
|
templateUrl: './create-edit-modal.component.html',
|
|
styleUrl: './create-edit-modal.component.css'
|
|
})
|
|
export class CreateEditModalComponent {
|
|
private activeModal = inject(NgbActiveModal)
|
|
private showsService = inject(ShowsApiService)
|
|
private toastService = inject(ToastService)
|
|
protected newShowForm: FormGroup = new FormGroup({})
|
|
|
|
protected editMode: boolean = false
|
|
protected show?: Show
|
|
|
|
constructor() {
|
|
this.initForm()
|
|
}
|
|
|
|
private initForm() {
|
|
let formattedDate: string
|
|
this.newShowForm = new FormGroup({
|
|
title: new FormControl(this.show?.title, Validators.required),
|
|
seasons: new FormControl(this.show?.seasons, [Validators.required, Validators.min(1)]),
|
|
episodes: new FormControl(this.show?.episodes, [Validators.required, Validators.min(1)]),
|
|
description: new FormControl(this.show?.description, Validators.required)
|
|
})
|
|
if (this.show?.date !== undefined) {
|
|
formattedDate = formatDate(this.show?.date, "YYYY-MM-dd", "en")
|
|
} else {
|
|
formattedDate = ""
|
|
}
|
|
this.newShowForm.addControl("date", new FormControl(formattedDate, Validators.required))
|
|
}
|
|
|
|
protected dismiss() {
|
|
this.activeModal.dismiss()
|
|
}
|
|
|
|
protected formSubmitted(form: FormGroup) {
|
|
let show: Show = {
|
|
title: form.get("title")?.value,
|
|
date: form.get("date")?.value,
|
|
seasons: form.get("seasons")?.value,
|
|
episodes: form.get("episodes")?.value,
|
|
description: form.get("description")?.value,
|
|
//TODO: Allow user to specify genres
|
|
genres: []
|
|
}
|
|
|
|
|
|
if (!this.editMode) {
|
|
this.showsService.sendShow(show).subscribe({
|
|
next: (response: ShowsApiCreation) => {
|
|
show._id = response.newId
|
|
}, error: err => {
|
|
this.showToast(true, "created")
|
|
console.error(err)
|
|
}, complete: () => {
|
|
this.showToast(false, "created")
|
|
this.activeModal.close(show)
|
|
}
|
|
})
|
|
} else {
|
|
// The API requires the show to also have an ID, so
|
|
// I add it here
|
|
show._id = this.show?._id
|
|
this.showsService.updateShow(show).subscribe({
|
|
next: (response: ShowsApiDeletionEdit) => {
|
|
// Do nothing
|
|
}, error: err => {
|
|
this.showToast(true, "edited")
|
|
console.error(err)
|
|
}, complete: () => {
|
|
this.showToast(false, "edited")
|
|
this.activeModal.close(show)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
private showToast(error: boolean, action: "edited" | "created") {
|
|
let htmlClass: string = "bg-success text-light"
|
|
let body: string;
|
|
if (error) {
|
|
htmlClass = htmlClass.replace("success", "danger")
|
|
let temp: string
|
|
switch (action) {
|
|
case "created":
|
|
temp = "created"
|
|
break
|
|
case "edited":
|
|
temp = "edit"
|
|
break
|
|
}
|
|
body = `Could not ${temp} show!`
|
|
} else {
|
|
body = `Show ${action} successfully!`
|
|
}
|
|
this.toastService.show({body, htmlClass})
|
|
}
|
|
}
|