Components/create-edit-modal: add genres to form

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

@@ -55,6 +55,32 @@
         </li>
       </ul>
     </div>
+    <label class="form-label">Genres</label>
+    @defer (when allGenres != undefined) {
+      <div class="card" formArrayName="genres">
+        <ul class="list-group list-group-flush">
+          @for (genreControl of genres.controls; track genreControl) {
+            <li class="list-group-item">
+              <div class="input-group">
+                <select class="form-select" formControlName="{{$index}}">
+                  @for (genre of allGenres; track genre._id) {
+                    <option value="{{genre._id}}">{{ genre.name }}</option>
+                  }
+                </select>
+                <button type="button" class="btn btn-outline-danger" (click)="removeGenreControl($index)">
+                  <i class="bi bi-x-lg"></i>
+                </button>
+              </div>
+            </li>
+          }
+          <li class="list-group-item">
+            <button type="button" class="btn btn-outline-primary" (click)="addGenreControl()">
+              <i class="bi bi-plus-lg"></i> Add new genre
+            </button>
+          </li>
+        </ul>
+      </div>
+    }
   </div>
   <div class="modal-footer">
     <button type="submit" class="btn btn-success" [disabled]="newShowForm.invalid">Submit</button>

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

@@ -7,6 +7,9 @@ import {ToastService} from '../../services/toast/toast.service';
 import {Show} from '../../interfaces/show';
 import {formatDate} from '@angular/common';
 import {ApiDeletionEditResponse} from '../../interfaces/api-deletion-edit-response';
+import {Genre} from '../../interfaces/genre';
+import {GenresService} from '../../services/genres/genres.service';
+import {ApiResponse} from '../../interfaces/api-response';
 
 @Component({
   selector: 'app-create-edit-modal',
@@ -19,16 +22,29 @@ import {ApiDeletionEditResponse} from '../../interfaces/api-deletion-edit-respon
 export class CreateEditModalComponent {
   private activeModal = inject(NgbActiveModal)
   private showsService = inject(ShowsApiService)
+  private genreService = inject(GenresService)
   private toastService = inject(ToastService)
   protected newShowForm: FormGroup = new FormGroup({})
 
   protected editMode: boolean = false
   protected show?: Show
+  protected allGenres?: Genre[]
   protected requiredImages: number
 
   constructor() {
     this.requiredImages = 3
     this.initForm()
+    this.genreService.getGenres().subscribe({
+      next: (response: ApiResponse) => {
+        this.allGenres = response.genres;
+      }, error: (err) => {
+        this.toastService.show({
+          body: "Could not fetch genres!",
+          htmlClass: "bg-danger text-light"
+        })
+      }, complete: () => {
+      }
+    })
   }
 
   private initForm() {
@@ -44,7 +60,8 @@ export class CreateEditModalComponent {
       date: new FormControl(formattedDate, Validators.required),
       episodes: new FormControl(this.show?.episodes, [Validators.required, Validators.min(1)]),
       description: new FormControl(this.show?.description, Validators.required),
-      images: new FormArray([])
+      images: new FormArray([]),
+      genres: new FormArray([])
     })
 
     if (this.show?.images !== undefined) {
@@ -58,12 +75,22 @@ export class CreateEditModalComponent {
         i--
       } while (i != 0)
     }
+
+    if (this.show?.genres !== undefined) {
+      this.show.genres.forEach((genreID: string) => {
+        this.addGenreControl(genreID)
+      })
+    }
   }
 
   get images(): FormArray {
     return this.newShowForm.get("images") as FormArray
   }
 
+  get genres(): FormArray {
+    return this.newShowForm.get("genres") as FormArray
+  }
+
   protected dismiss() {
     this.activeModal.dismiss()
   }
@@ -77,6 +104,14 @@ export class CreateEditModalComponent {
     this.images.removeAt(index)
   }
 
+  protected addGenreControl(value: string = "") {
+    this.genres.push(new FormControl(value, Validators.required))
+  }
+
+  protected removeGenreControl(index: number) {
+    this.genres.removeAt(index)
+  }
+
   protected formSubmitted(form: FormGroup) {
     let show: Show = {
       title: form.get("title")?.value,
@@ -85,8 +120,7 @@ export class CreateEditModalComponent {
       episodes: form.get("episodes")?.value,
       description: form.get("description")?.value,
       images: form.get("images")?.value,
-      //TODO: Allow user to specify genres
-      genres: []
+      genres: form.get("genres")?.value
     }
 
     if (!this.editMode) {

src/interfaces/genre.ts

@@ -2,5 +2,5 @@ export interface Genre {
   // ID is assigned by the DB, so I don't want to have to specify it
   _id?: string
   name: string
-  showIDs: string[]
+  image: string
 }