diff --git a/src/components/create-modal/create-modal/create-modal.component.html b/src/components/create-modal/create-modal/create-modal.component.html
index 5a7d0cc..9527110 100644
--- a/src/components/create-modal/create-modal/create-modal.component.html
+++ b/src/components/create-modal/create-modal/create-modal.component.html
@@ -9,13 +9,17 @@
-
-
+
+
+
+
+
+
diff --git a/src/components/create-modal/create-modal/create-modal.component.ts b/src/components/create-modal/create-modal/create-modal.component.ts
index 24931c2..b503914 100644
--- a/src/components/create-modal/create-modal/create-modal.component.ts
+++ b/src/components/create-modal/create-modal/create-modal.component.ts
@@ -1,6 +1,9 @@
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';
@Component({
selector: 'app-create-modal',
@@ -12,13 +15,16 @@ import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/
})
export class CreateModalComponent {
private activeModal = inject(NgbActiveModal)
+ private showsService = inject(ShowsApiService)
+ private toastService = inject(ToastService)
protected newShowForm: FormGroup
constructor() {
this.newShowForm = new FormGroup({
title: new FormControl("", Validators.required),
- year: new FormControl("", [Validators.required, Validators.min(1900)]),
+ date: new FormControl("", Validators.required),
seasons: new FormControl("", [Validators.required, Validators.min(1)]),
+ episodes: new FormControl("", [Validators.required, Validators.min(1)]),
description: new FormControl("", Validators.required)
})
}
@@ -30,10 +36,28 @@ export class CreateModalComponent {
protected formSubmitted(form: FormGroup) {
let show: {} = {
title: form.get("title")?.value,
- year: form.get("year")?.value,
+ date: form.get("date")?.value,
seasons: form.get("seasons")?.value,
+ episodes: form.get("episodes")?.value,
description: form.get("description")?.value
}
- console.log(show)
+ let newId: string;
+ this.showsService.sendShow(show).subscribe({
+ next: (response: ShowsApiCreation) => {
+ newId = response.newId
+ }, error: err => {
+ this.toastService.show({
+ body: "Could not add show!",
+ htmlClass: "bg-danger text-light"
+ })
+ console.error(err)
+ }, complete: () => {
+ this.toastService.show({
+ body: "Show added successfully!",
+ htmlClass: "bg-success text-light"
+ })
+ this.activeModal.close(newId)
+ }
+ })
}
}
diff --git a/src/interfaces/shows-api-creation.ts b/src/interfaces/shows-api-creation.ts
new file mode 100644
index 0000000..bf97065
--- /dev/null
+++ b/src/interfaces/shows-api-creation.ts
@@ -0,0 +1,5 @@
+export interface ShowsApiCreation {
+ status: string
+ message: string
+ newId: string
+}
diff --git a/src/interfaces/shows-api-id-response.ts b/src/interfaces/shows-api-id-response.ts
new file mode 100644
index 0000000..85307d7
--- /dev/null
+++ b/src/interfaces/shows-api-id-response.ts
@@ -0,0 +1,6 @@
+import {Show} from './show';
+
+export interface ShowsApiIdResponse {
+ status: string
+ show: Show
+}
diff --git a/src/pages/shows/shows.component.html b/src/pages/shows/shows.component.html
index 026e38f..12fb737 100644
--- a/src/pages/shows/shows.component.html
+++ b/src/pages/shows/shows.component.html
@@ -12,7 +12,7 @@
-
+
diff --git a/src/pages/shows/shows.component.ts b/src/pages/shows/shows.component.ts
index 21b1bc6..6d25a13 100644
--- a/src/pages/shows/shows.component.ts
+++ b/src/pages/shows/shows.component.ts
@@ -7,6 +7,7 @@ import {ToastService} from '../../services/toast/toast.service';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
import {CreateModalComponent} from '../../components/create-modal/create-modal/create-modal.component';
import {DatePipe} from '@angular/common';
+import {ShowsApiIdResponse} from '../../interfaces/shows-api-id-response';
@Component({
selector: 'app-shows',
@@ -22,6 +23,7 @@ export class ShowsComponent {
private modalService: NgbModal = inject(NgbModal);
shows: Show[] = [];
+ loading: boolean = true;
constructor() {
let loadToast: Toast = {body: "Loading shows..."};
@@ -37,11 +39,25 @@ export class ShowsComponent {
htmlClass: "bg-success text-light"
}
this.toastService.show(successToast);
+ this.loading = false
}
})
}
createNewShow() {
- this.modalService.open(CreateModalComponent)
+ this.modalService.open(CreateModalComponent).result.then(
+ (result) => {
+ console.log(`Result: ${result}`)
+
+ this.api.getShow(result).subscribe({
+ next: (response: ShowsApiIdResponse) => {
+ console.log(response.show)
+ this.shows.push(response.show)
+ }, error: (err: any) => {
+ console.error(`Error: ${err}`)
+ }, complete: () => {}
+ })
+ }
+ )
}
}
diff --git a/src/services/shows/shows-api.service.ts b/src/services/shows/shows-api.service.ts
index 78b3ad8..d2f0e2e 100644
--- a/src/services/shows/shows-api.service.ts
+++ b/src/services/shows/shows-api.service.ts
@@ -2,6 +2,8 @@ import {inject, Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';
import {ShowsApiResponse} from '../../interfaces/shows-api-response';
+import {ShowsApiCreation} from '../../interfaces/shows-api-creation';
+import {ShowsApiIdResponse} from '../../interfaces/shows-api-id-response';
@Injectable({
providedIn: 'root'
@@ -20,7 +22,11 @@ export class ShowsApiService {
return this.http.get(this.showsEndpoint)
}
+ getShow(id: string): Observable {
+ return this.http.get(this.showsEndpoint + "id/" + id )
+ }
+
sendShow(newShow: {}) {
- return this.http.post(this.showsEndpoint, newShow)
+ return this.http.post(this.showsEndpoint, newShow)
}
}