Services/shows: add update show function

src/app/app.component.html

@@ -1,6 +1,7 @@
 <app-toast-container aria-live="polite" aria-atomic="true"/>
 <nav class="navbar navbar-expand-sm bg-body-secondary">
   <div class="container-fluid">
+    <i class="bi bi-film navbar-brand"></i>
     <button class="navbar-toggler" type="button" (click)="isMenuCollapsed = !isMenuCollapsed">&#9776;</button>
     <div [ngbCollapse]="isMenuCollapsed" class="collapse navbar-collapse">
       <ul class="navbar-nav">

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

@@ -1,5 +1,11 @@
 <div class="modal-header">
-  <h4 class="modal-title"> Add new show</h4>
+  <h4 class="modal-title">
+    @if (editMode) {
+      Edit show
+    } @else {
+      Add new show
+    }
+  </h4>
   <button type="button" class="btn-close" aria-label="Close" (click)="dismiss()"></button>
 </div>
 <form [formGroup]="newShowForm" (submit)="formSubmitted(newShowForm)">

src/components/create-modal/create-edit-modal/create-edit-modal.component.spec.ts

@@ -1,18 +1,18 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 
-import {CreateModalComponent} from './create-modal.component';
+import {CreateEditModalComponent} from './create-edit-modal.component';
 
 describe('CreateModalComponent', () => {
-  let component: CreateModalComponent;
-  let fixture: ComponentFixture<CreateModalComponent>;
+  let component: CreateEditModalComponent;
+  let fixture: ComponentFixture<CreateEditModalComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [CreateModalComponent]
+      imports: [CreateEditModalComponent]
     })
       .compileComponents();
 
-    fixture = TestBed.createComponent(CreateModalComponent);
+    fixture = TestBed.createComponent(CreateEditModalComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/components/create-modal/create-edit-modal/create-edit-modal.component.ts

@@ -4,29 +4,45 @@ import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/
 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-modal',
+  selector: 'app-create-edit-modal',
   imports: [
     ReactiveFormsModule
   ],
-  templateUrl: './create-modal.component.html',
-  styleUrl: './create-modal.component.css'
+  templateUrl: './create-edit-modal.component.html',
+  styleUrl: './create-edit-modal.component.css'
 })
-export class CreateModalComponent {
+export class CreateEditModalComponent {
   private activeModal = inject(NgbActiveModal)
   private showsService = inject(ShowsApiService)
   private toastService = inject(ToastService)
-  protected newShowForm: FormGroup
+  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("", Validators.required),
-      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)
+      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() {
@@ -34,17 +50,18 @@ export class CreateModalComponent {
   }
 
   protected formSubmitted(form: FormGroup) {
-    let show: {} = {
+    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
+      description: form.get("description")?.value,
+      //TODO: Allow user to specify genres
+      genres: []
     }
-    let newId: string;
     this.showsService.sendShow(show).subscribe({
       next: (response: ShowsApiCreation) => {
-        newId = response.newId
+        show._id = response.newId
       }, error: err => {
         this.toastService.show({
           body: "Could not add show!",
@@ -56,7 +73,7 @@ export class CreateModalComponent {
           body: "Show added successfully!",
           htmlClass: "bg-success text-light"
         })
-        this.activeModal.close(newId)
+        this.activeModal.close(show)
       }
     })
   }

src/components/delete-modal/delete-modal.component.ts

@@ -33,10 +33,11 @@ export class DeleteModalComponent {
 
 
   deletePressed() {
+    if (this.formHidden) {
+      // Only add the control the first time the button is pressed
       const regex = new RegExp(this.showName)
       const control = new FormControl("", [Validators.required, Validators.pattern(regex)])
       this.confirmationForm.setControl("name", control)
-    if (this.formHidden) {
       this.formHidden = false;
       this.buttonDisabled = true;
     } else {

src/interfaces/show.ts

@@ -1,5 +1,6 @@
 export interface Show {
-  _id: string
+  // ID is assigned by the DB, so I don't want to have to specify it
+  _id?: string
   title: string
   date: Date
   seasons: number

src/interfaces/shows-api-deletion-edit.ts

@@ -0,0 +1,4 @@
+export interface ShowsApiDeletionEdit {
+  status: string
+  message: string
+}

src/interfaces/shows-api-deletion.ts

@@ -1,4 +0,0 @@
-export interface ShowsApiDeletion {
-  status: string
-  message: string
-}

src/pages/shows/shows.component.ts

@@ -5,11 +5,10 @@ import {ShowsApiResponse} from '../../interfaces/shows-api-response';
 import {Toast} from '../../interfaces/toast';
 import {ToastService} from '../../services/toast/toast.service';
 import {NgbModal, NgbModalRef} from '@ng-bootstrap/ng-bootstrap';
-import {CreateModalComponent} from '../../components/create-modal/create-modal/create-modal.component';
+import {CreateEditModalComponent} from '../../components/create-modal/create-edit-modal/create-edit-modal.component';
 import {DatePipe} from '@angular/common';
-import {ShowsApiIdResponse} from '../../interfaces/shows-api-id-response';
 import {DeleteModalComponent} from '../../components/delete-modal/delete-modal.component';
-import {ShowsApiDeletion} from '../../interfaces/shows-api-deletion';
+import {ShowsApiDeletionEdit} from '../../interfaces/shows-api-deletion-edit';
 
 @Component({
   selector: 'app-shows',
@@ -47,30 +46,25 @@ export class ShowsComponent {
   }
 
   createNewShow() {
-    this.modalService.open(CreateModalComponent).result.then(
+    this.modalService.open(CreateEditModalComponent).result.then(
+      (result: Show) => {
+        this.shows.push(result)
+      },
       (result) => {
-        console.log(`Result: ${result}`)
-
-        this.api.getShow(result).subscribe({
-          next: (response: ShowsApiIdResponse) => {
-            this.shows.push(response.show)
-          }, error: (err: any) => {
-            console.error(`Error: ${err}`)
-          }, complete: () => {
-          }
-        })
+        // Dismissed, do nothing
       }
     )
   }
 
   deleteShow(show: Show) {
-    let modal: NgbModalRef = this.modalService.open(DeleteModalComponent)
+    const modal: NgbModalRef = this.modalService.open(DeleteModalComponent)
     modal.componentInstance.showName = show.title;
     modal.result.then(
       (result) => {
         if (result) {
+          if (show._id != null) {
             this.api.deleteShw(show._id).subscribe({
-              next: (response: ShowsApiDeletion) => {
+                next: (response: ShowsApiDeletionEdit) => {
                   // Do nothing
                 }, error: (err: any) => {
                   console.log(err)
@@ -81,6 +75,7 @@ export class ShowsComponent {
               }
             )
           }
+        }
       },
       (result) => {
         // Dismissed, do nothing

src/services/shows/shows-api.service.ts

@@ -4,7 +4,8 @@ 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';
-import {ShowsApiDeletion} from '../../interfaces/shows-api-deletion';
+import {ShowsApiDeletionEdit} from '../../interfaces/shows-api-deletion-edit';
+import {Show} from '../../interfaces/show';
 
 @Injectable({
   providedIn: 'root'
@@ -27,11 +28,15 @@ export class ShowsApiService {
     return this.http.get<ShowsApiIdResponse>(this.showsEndpoint + "id/" + id)
   }
 
-  sendShow(newShow: {}) {
+  sendShow(newShow: Show): Observable<ShowsApiCreation> {
     return this.http.post<ShowsApiCreation>(this.showsEndpoint, newShow)
   }
 
-  deleteShw(id: string): Observable<ShowsApiDeletion> {
-    return this.http.delete<ShowsApiDeletion>(this.showsEndpoint + "id/" + id)
+  deleteShw(id: string): Observable<ShowsApiDeletionEdit> {
+    return this.http.delete<ShowsApiDeletionEdit>(this.showsEndpoint + "id/" + id)
+  }
+
+  updateShow(show: Show): Observable<ShowsApiDeletionEdit> {
+    return this.http.put<ShowsApiDeletionEdit>(this.showsEndpoint + "id/" + show._id, show)
   }
 }