Components/create-modal: show toast on error

src/components/create-modal/create-modal/create-modal.component.html

@@ -9,13 +9,17 @@
       <input formControlName="title" type="text" class="form-control"/>
     </div>
     <div class="mb-3">
-      <label class="form-label">Year</label>
+      <label class="form-label">Date</label>
-      <input formControlName="year" type="number" class="form-control"/>
+      <input formControlName="date" type="date" class="form-control"/>
     </div>
     <div class="mb-3">
       <label class="form-label">Seasons</label>
       <input formControlName="seasons" type="number" class="form-control"/>
     </div>
+    <div class="mb-3">
+      <label class="form-label">Episodes</label>
+      <input formControlName="episodes" type="number" class="form-control"/>
+    </div>
     <div class="mb-3">
       <label class="form-label">Description</label>
       <input formControlName="description" type="text" class="form-control"/>

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)
+      }
+    })
   }
 }

src/interfaces/shows-api-creation.ts

@@ -0,0 +1,5 @@
+export interface ShowsApiCreation {
+  status: string
+  message: string
+  newId: string
+}

src/interfaces/shows-api-id-response.ts

@@ -0,0 +1,6 @@
+import {Show} from './show';
+
+export interface ShowsApiIdResponse {
+  status: string
+  show: Show
+}

src/pages/shows/shows.component.html

@@ -12,7 +12,7 @@
   </div>
   <div class="row justify-content-end mt-3">
     <div class="col-2">
-      <button type="button" class="btn btn-primary" (click)="createNewShow()">Add new show</button>
+      <button type="button" class="btn btn-primary" (click)="createNewShow()" [disabled]="loading">Add new show</button>
     </div>
   </div>
 </div>

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: () => {}
+        })
+      }
+    )
   }
 }

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<ShowsApiResponse>(this.showsEndpoint)
   }
 
+  getShow(id: string): Observable<ShowsApiIdResponse> {
+    return this.http.get<ShowsApiIdResponse>(this.showsEndpoint + "id/" + id )
+  }
+
   sendShow(newShow: {}) {
-    return this.http.post(this.showsEndpoint, newShow)
+    return this.http.post<ShowsApiCreation>(this.showsEndpoint, newShow)
   }
 }