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

@@ -60,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) {
@@ -74,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()
   }
@@ -93,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,
@@ -101,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: form.get("genres")?.value
-      genres: []
     }
 
     if (!this.editMode) {