Re-added batch-add for targets

frontend/src/app/competition/competition-builder/competition-builder-task-dialog/competition-form.builder.ts

@@ -124,26 +124,27 @@ export class CompetitionFormBuilder {
   /**
    * Adds a new {@link FormGroup} for the given {@link TaskType.ComponentsEnum}.
    *
-   * @param type The {@link TaskType.TargetTypeEnum} to add a {@link FormGroup} for.
+   * @param type The {@link ApiTargetOption} to add a {@link FormGroup} for.
+   * @param initialise The {@link ApiTarget} to add
    */
-  public addTargetForm(type: ApiTargetOption) {
+  public addTargetForm(type: ApiTargetOption, initialise?: ApiTarget) {
     const array = this.form.get('target') as UntypedFormArray;
     const newIndex = array.length;
     switch (type) {
       case "SINGLE_MEDIA_ITEM":
-        const f = this.singleMediaItemTargetForm(newIndex);
+        const f = this.singleMediaItemTargetForm(newIndex, initialise);
         array.push(f)
         return f;
       case "SINGLE_MEDIA_SEGMENT":
-        const targetForm = this.singleMediaSegmentTargetForm(newIndex);
+        const targetForm = this.singleMediaSegmentTargetForm(newIndex, initialise);
         array.push(targetForm);
         return targetForm;
       case "JUDGEMENT":
       case "VOTE":
         console.warn("Judgement and Vote shouldn't have access to add targets. This is a programmer's error.")
         break;
       case 'TEXT':
-        const form = this.singleTextTargetForm();
+        const form = this.singleTextTargetForm(initialise);
         array.push(form);
         return form;
       default:
@@ -372,8 +373,9 @@ export class CompetitionFormBuilder {
       )
     );
 
+
     /* Load media item from API. */
-    if (initialize?.target && this.data?.collectionId) {
+    if (initialize?.target && this.form.get('mediaCollection')) {
       this.collectionService
         .getApiV2MediaItemByMediaItemId(initialize?.target)
         .pipe(first())
@@ -407,7 +409,7 @@ export class CompetitionFormBuilder {
     );
 
     /* Load media item from API. */
-    if (initialize?.target && this.data.collectionId) {
+    if (initialize?.target && this.form.get('mediaCollection')) {
       this.collectionService
         .getApiV2MediaItemByMediaItemId(initialize.target)
         .pipe(first())

frontend/src/app/template/template-builder/components/batch-add-target-dialog/batch-add-target-dialog.component.html

@@ -0,0 +1,21 @@
+<h1 mat-dialog-title>Batch Add Targets</h1>
+<div mat-dialog-content>
+  <p>
+    Batch-add targets by file or by your input, each on its own line.
+    Please not that the target name must be exactly matching the media item's name.
+  </p>
+  <div>
+    <mat-label>File</mat-label>
+    <input hidden type="file" #fileUpload (change)="processUpload($event)" />
+    <button mat-button (click)="fileUpload.click()">Upload target file</button>
+  </div>
+  <mat-form-field class="width-full">
+    <mat-label>Targets</mat-label>
+    <textarea matInput #targetArea (change)="processInput($event)">
+    </textarea>
+  </mat-form-field>
+</div>
+<div mat-dialog-actions>
+  <button mat-button (click)="close()">Cancel</button>
+  <button mat-button cdkFocusInitial (click)="save()">Add</button>
+</div>

frontend/src/app/template/template-builder/components/batch-add-target-dialog/batch-add-target-dialog.component.ts

@@ -0,0 +1,52 @@
+import { Component, ElementRef, Inject, ViewChild } from "@angular/core";
+import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
+import { ApiMediaItem, CollectionService } from "../../../../../../openapi";
+
+export interface BatchAddTargetDialogData{
+  collectionId: string;
+}
+
+@Component({
+  selector: 'app-batch-add-target-dialog',
+  templateUrl: './batch-add-target-dialog.component.html',
+  styleUrls: ['./batch-add-target-dialog.component.scss']
+})
+export class BatchAddTargetDialogComponent {
+
+  @ViewChild('targetArea') textArea: ElementRef<HTMLTextAreaElement>
+
+  private targets: string[] = [];
+
+  private failedNames: string[] = [];
+
+  constructor(
+    private dialogRef: MatDialogRef<BatchAddTargetDialogComponent>,
+    private mediaService: CollectionService,
+    @Inject(MAT_DIALOG_DATA) private data: BatchAddTargetDialogData
+  ){
+
+  }
+
+  processUpload(event){
+    const file = event.target.files[0];
+    const reader = new FileReader();
+    reader.readAsText(file);
+    reader.onload = () =>{
+      const text = (reader.result as string)
+      this.textArea.nativeElement.value = text;
+    }
+  }
+
+  processInput(event){
+
+  }
+
+  close(){
+    this.dialogRef.close(null)
+  }
+
+  save(){
+    this.dialogRef.close(this.textArea.nativeElement.value?.split('\n'))
+  }
+
+}

frontend/src/app/template/template-builder/components/task-template-editor/task-template-editor.component.html

@@ -87,8 +87,6 @@ <h2>
           </mat-button-toggle>
         </mat-button-toggle-group>
         -->
-        <!--
-        TODO Properly re-add
         <button
           mat-button
           aria-label="Batch Target Add"
@@ -97,7 +95,6 @@ <h2>
         >
           <mat-icon>library_add</mat-icon>
         </button>
-        -->
       </h2>
       <div *ngIf="viewLayout === 'list'">
         <div *ngFor="let target of form.get('target')['controls']; let i = index"

frontend/src/app/template/template-builder/components/task-template-editor/task-template-editor.component.ts

@@ -1,14 +1,14 @@
 import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from "@angular/core";
 import { TemplateBuilderService } from "../../template-builder.service";
-import { Observable, Subscription } from "rxjs";
+import { forkJoin, Observable, Subscription } from "rxjs";
 import {
   ApiHintOption, ApiHintType,
-  ApiMediaCollection, ApiMediaItem, ApiTargetOption,
+  ApiMediaCollection, ApiMediaItem, ApiTarget, ApiTargetOption, ApiTargetType,
   ApiTaskGroup,
   ApiTaskTemplate,
   ApiTaskType, ApiTemporalPoint, ApiTemporalRange,
   ApiTemporalUnit,
-  CollectionService
+  CollectionService, MediaService
 } from "../../../../../../openapi";
 import { UntypedFormControl, UntypedFormGroup } from "@angular/forms";
 import {
@@ -19,12 +19,13 @@ import {
 } from "../../../../competition/competition-builder/competition-builder-task-dialog/video-player-segment-builder/video-player-segment-builder.component";
 import { AppConfig } from "../../../../app.config";
 import { MatDialog, MatDialogConfig } from "@angular/material/dialog";
-import { filter, first } from "rxjs/operators";
+import { filter, first, map } from "rxjs/operators";
 import { TimeUtilities } from "../../../../utilities/time.utilities";
 import {
   AdvancedBuilderDialogComponent,
   AdvancedBuilderDialogData
 } from "../../../../competition/competition-builder/competition-builder-task-dialog/advanced-builder-dialog/advanced-builder-dialog.component";
+import { BatchAddTargetDialogComponent, BatchAddTargetDialogData } from "../batch-add-target-dialog/batch-add-target-dialog.component";
 
 @Component({
   selector: 'app-task-template-editor',
@@ -368,35 +369,42 @@ export class TaskTemplateEditorComponent  implements OnInit, OnDestroy {
 
   batchAddTargets() {
     const config = {
-      width: '400px',
-      height: '600px',
-      data: { builder: this.formBuilder },
-    } as MatDialogConfig<AdvancedBuilderDialogData>;
-    const dialogRef = this.dialog.open(AdvancedBuilderDialogComponent, config);
+      width: '400px'
+    } as MatDialogConfig;
+    const dialogRef = this.dialog.open(BatchAddTargetDialogComponent, config);
     dialogRef
       .afterClosed()
       .pipe(filter((r) => r != null))
       .subscribe((r: Array<string>) => {
-        this.formBuilder.removeTargetForm(0);
-        const mediaCollectionId = this.formBuilder.form.get('mediaCollection').value;
-        this.collectionService.postApiV2CollectionByCollectionIdResolve(mediaCollectionId, r).subscribe((items) => {
-          items.forEach((item) => {
-            const form = this.formBuilder.addTargetForm("SINGLE_MEDIA_ITEM");
-            console.log(`Adding new mediaItem as target ${mediaCollectionId}/${item.name}`);
-            form.get('mediaItem').setValue(item);
-          });
-        });
-        /*r.forEach((name, idx) => {
-                    const form = this.builder.addTargetForm(ConfiguredOptionTargetOption.OptionEnum.MULTIPLE_MEDIA_ITEMS);
-                    console.log(`${mediaCollectionId} ? ${name}`);
-                    const nameNoExt = name.substring(0, name.lastIndexOf('.'));
-                    this.collectionService.getApiV1CollectionWithCollectionidWithStartswith(mediaCollectionId, nameNoExt)
-                        .subscribe(item => {
-                                console.log(`Added ${item[0]}`);
-                                form.get('mediaItem').setValue(item[0]);
-                            }
-                        );
-                });*/
+        let targets : ApiTarget[]
+        switch(this.taskType.targetOption){
+          case "SINGLE_MEDIA_ITEM":
+          case "SINGLE_MEDIA_SEGMENT":
+            const obs = r.map(it =>{
+              return this.collectionService.getApiV2CollectionByCollectionIdByStartsWith(this.form.get('mediaCollection').value, it.trim())
+            });
+            forkJoin(obs).subscribe(itemsList => {
+              itemsList.forEach(it => {
+                if(it.length > 0){
+                  const type = this.taskType.targetOption === "SINGLE_MEDIA_ITEM" ? ApiTargetType.MEDIA_ITEM : ApiTargetType.MEDIA_ITEM_TEMPORAL_RANGE;
+                  this.formBuilder.addTargetForm(this.taskType.targetOption, {type: type, target: it[0].mediaItemId} as ApiTarget)
+                }
+              })
+            })
+            break;
+          case "JUDGEMENT":
+          case "VOTE":
+            console.warn("Cannot batch-add targets for target option JUDGEMENT or VOTE.")
+            break;
+          case "TEXT":
+            const targets = r.map(it => {
+              return {target: it, type: ApiTargetType.TEXT} as ApiTarget
+            });
+            targets.forEach(target => {
+              this.formBuilder.addTargetForm(this.taskType.targetOption, target)
+            })
+            break;
+        }
       });
   }
 

frontend/src/app/template/template-builder/components/template-builder-components.module.ts

@@ -51,6 +51,7 @@ import { MatCardModule } from "@angular/material/card";
 import { ViewersListComponent } from './viewers-list/viewers-list.component';
 import { UserListFilterPipe } from './team-builder-dialog/user-list-filter.pipe';
 import { UserListInOtherFilterPipe } from './team-builder-dialog/user-list-in-other-filter.pipe';
+import { BatchAddTargetDialogComponent } from './batch-add-target-dialog/batch-add-target-dialog.component';
 
 
 @NgModule({
@@ -73,7 +74,8 @@ import { UserListInOtherFilterPipe } from './team-builder-dialog/user-list-in-ot
     TeamBuilderDialogComponent,
     ViewersListComponent,
     UserListFilterPipe,
-    UserListInOtherFilterPipe
+    UserListInOtherFilterPipe,
+    BatchAddTargetDialogComponent
   ],
   imports: [
     CommonModule,