WS-349: Create new capability request version skeleton UI

apps/web/src/app/workspaces/components/capability-request/capability-request.component.html

@@ -16,12 +16,23 @@
           class="d-flex justify-content-center py-3"
           *ngIf="capabilityRequest.state === 'Complete' && capabilityExecution.delivery_url"
         >
-          <a class="btn btn-warning" href="{{ capabilityExecution.delivery_url }}">Download</a>
+          <a
+            id="download-button"
+            class="btn btn-warning"
+            href="{{ capabilityExecution.delivery_url }}"
+            >Download</a
+          >
         </div>
       </div>
       <div id="parameters-container" class="col">
         <span id="parameters-label">Parameters</span>
         <app-parameters id="parameters" [capabilityRequest]="capabilityRequest"></app-parameters>
+        <div class="d-flex justify-content-center py-3">
+          <app-create-new-version-form
+            id="create-new-version-form"
+            [capabilityRequest]="capabilityRequest"
+          ></app-create-new-version-form>
+        </div>
       </div>
     </div>
   </div>

apps/web/src/app/workspaces/components/capability-request/capability-request.component.ts

@@ -4,6 +4,7 @@ import { ActivatedRoute } from "@angular/router";
 import { DataRetrieverService } from "../../services/data-retriever.service";
 import { CapabilityExecution } from "../../model/capability-execution";
 import { Capability } from "../../model/capability";
+import { CapabilityRequestService } from "../../services/capability-request.service";
 
 @Component({
   selector: "app-capability-request",
@@ -15,6 +16,7 @@ export class CapabilityRequestComponent implements OnInit {
   public capability: Capability;
   public capabilityExecution: CapabilityExecution;
 
+  // Observer for capability request objects
   private capabilityRequestObserver = {
     next: (request) => {
       this.capabilityRequest = request;
@@ -25,6 +27,7 @@ export class CapabilityRequestComponent implements OnInit {
     },
     error: (error) => console.error("Error when retrieving capability request:" + error),
   };
+  // Observer for capability objects
   private capabilityObserver = {
     next: (capability) => {
       this.capability = capability;
@@ -32,9 +35,15 @@ export class CapabilityRequestComponent implements OnInit {
     error: (error) => console.error("Error when retrieving capability:" + error),
   };
 
-  constructor(private route: ActivatedRoute, private dataRetriever: DataRetrieverService) {
+  constructor(
+    private route: ActivatedRoute,
+    private dataRetriever: DataRetrieverService,
+    private capabilityRequestService: CapabilityRequestService,
+  ) {
     const requestID = parseInt(this.route.snapshot.paramMap.get("id"));
-    this.dataRetriever.getCapabilityRequest(requestID).subscribe(this.capabilityRequestObserver);
+    this.capabilityRequestService
+      .getCapabilityRequest(requestID)
+      .subscribe(this.capabilityRequestObserver);
   }
 
   ngOnInit(): void {}

apps/web/src/app/workspaces/components/capability-request/components/create-new-version-form/create-new-version-form.component.html

+<button
+  id="create-new-version-button"
+  type="button"
+  class="btn btn-success"
+  (click)="open(createNewVersionsModal)"
+>
+  <span class="fas fa-plus"></span> Create New Version
+</button>
+<ng-template #createNewVersionsModal let-modal>
+  <div class="modal-header">
+    <h5 class="modal-title" id="modal-label">Create New Version</h5>
+    <button type="button" class="close" aria-label="Close" (click)="modal.close('exit')">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+  <div class="modal-body">
+    <form id="create-version-form">
+      <div class="md-form">
+        <label for="parameters">Parameters</label>
+        <input
+          type="textarea"
+          class="form-control"
+          id="parameters"
+          [value]="getStringifiedParameters()"
+          (change)="parametersString = $event.target.value"
+        />
+        <hr />
+        <label for="input-files">Input Files</label>
+        <input
+          type="file"
+          class="form-control-file"
+          id="input-files"
+          multiple="multiple"
+          (change)="setInputFileList($event.target.files)"
+        />
+        <div id="uploadedFiles" *ngFor="let file of inputFileList">
+          {{ file.name }}
+        </div>
+      </div>
+    </form>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-secondary" (click)="modal.close('exit')">Cancel</button>
+    <button type="button" class="btn btn-primary" (click)="modal.close('create')">Create</button>
+  </div>
+</ng-template>
+
+<pre>{{ closeResult }}</pre>

apps/web/src/app/workspaces/components/capability-request/components/create-new-version-form/create-new-version-form.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateNewVersionFormComponent } from './create-new-version-form.component';
+
+describe('CreateNewVersionFormComponent', () => {
+  let component: CreateNewVersionFormComponent;
+  let fixture: ComponentFixture<CreateNewVersionFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CreateNewVersionFormComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreateNewVersionFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/web/src/app/workspaces/components/capability-request/components/create-new-version-form/create-new-version-form.component.ts

+import { Component, Input, OnInit } from "@angular/core";
+import { ModalDismissReasons, NgbModal } from "@ng-bootstrap/ng-bootstrap";
+import { CapabilityRequest } from "../../../../model/capability-request";
+import { CapabilityRequestService } from "../../../../services/capability-request.service";
+
+@Component({
+  selector: "app-create-new-version-form",
+  templateUrl: "./create-new-version-form.component.html",
+  styleUrls: ["./create-new-version-form.component.scss"],
+})
+export class CreateNewVersionFormComponent implements OnInit {
+  closeResult = "";
+  @Input() capabilityRequest: CapabilityRequest;
+  parametersString: string;
+  inputFileList: FileList;
+
+  constructor(
+    private modalService: NgbModal,
+    private capabilityRequestService: CapabilityRequestService,
+  ) {}
+
+  /**
+   * Open and display modal and process method by which the modal is closed
+   * @param content  Content of modal; in this case, parameters and files field
+   */
+  public open(content) {
+    this.modalService.open(content, { ariaLabelledBy: "modal-title", centered: true }).result.then(
+      (result) => {
+        if (result === "create") {
+          // Create button clicked; create new version from given settings
+          this.createNewVersion();
+        } else {
+          // Form was exited by clicking out of it or pressing ESC
+          this.resetForm();
+        }
+      },
+      (reason) => {
+        // Form was exited using Cancel button or X
+        this.resetForm();
+      },
+    );
+  }
+
+  /**
+   * Reset any form values set
+   * @private
+   */
+  private resetForm() {
+    this.parametersString = null;
+    this.inputFileList = null;
+  }
+
+  /**
+   * Get string version of capability request parameters
+   * @return string  Stringified parameters
+   */
+  public getStringifiedParameters(): string {
+    return JSON.stringify(this.capabilityRequest.parameters);
+  }
+
+  /**
+   * NOTE: May not need this; currently unused
+   * Get list of files already associated with the capability request
+   * @return FileList  List of file associated with request
+   */
+  public getFileList(): FileList {
+    const idNumber = parseInt(this.capabilityRequest.id);
+    const fileListObservable = {
+      next: (fileList) => {
+        // TODO: Fill in with logic of what to do when a file list is obtained from the REST API
+      },
+      error: (error) => console.error("Error when retriving file list:" + error),
+    };
+
+    // return this.capabilityRequestService.getInputFileList(idNumber).subscribe(fileListObservable);
+    return new FileList();
+  }
+
+  /**
+   * Set files to be uploaded to variable
+   * @param inputFileList  List of files from modal form
+   */
+  public setInputFileList(inputFileList: FileList) {
+    this.inputFileList = inputFileList;
+  }
+
+  /**
+   * Operation performed when the modal is submitted; passes form results to capability request service
+   * @private
+   */
+  private createNewVersion() {
+    // Make REST call to create new version with entered parameters and files
+    const idNumber = parseInt(this.capabilityRequest.id);
+    this.capabilityRequestService.createNewVersion(
+      idNumber,
+      this.parametersString,
+      this.inputFileList,
+    );
+  }
+
+  ngOnInit() {}
+}

apps/web/src/app/workspaces/components/capability-request/components/parameters/parameters.component.html

 <div id="parameters-container" class="container-fluid rounded-top rounded-3 p-3">
-  <div class="row" *ngFor="let parameter of capabilityRequest.parameters | keyvalue">
+  <div class="row my-2" *ngFor="let parameter of capabilityRequest.parameters | keyvalue">
     <div class="col">
       <span class="rounded-pill px-2 py-1 argument-key">{{ parameter.key }}</span>
       <span class="px-1"> = </span>

apps/web/src/app/workspaces/services/capability-request.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { CapabilityRequestService } from './capability-request.service';
+
+describe('CapabilityRequestService', () => {
+  let service: CapabilityRequestService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CapabilityRequestService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

apps/web/src/app/workspaces/services/capability-request.service.ts

+import { Injectable } from "@angular/core";
+import { HttpClient } from "@angular/common/http";
+import { Observable } from "rxjs";
+import { CapabilityRequest } from "../model/capability-request";
+
+@Injectable({
+  providedIn: "root",
+})
+export class CapabilityRequestService {
+  constructor(private httpClient: HttpClient) {}
+
+  /**
+   * Gets JSON representation of a capability request given an ID
+   * @param id  The ID of the request
+   */
+  public getCapabilityRequest(id: number): Observable<CapabilityRequest> {
+    const url = `capability/request/${id}`;
+    return this.httpClient.get<CapabilityRequest>(url);
+  }
+
+  /**
+   * Get list of files associated with the latest version of a capability request
+   * @param id  The ID of the request
+   * @return FileList  List of input files of the latest version of the given request
+   */
+  public getInputFileList(id: number): Observable<FileList> {
+    // FIXME: Update this when file API is known
+    const url = `capability/request/${id}/version/latest/files`;
+    return this.httpClient.get<FileList>(url);
+  }
+
+  /**
+   * Create a new version of the specified capability request with specified settings
+   * @param id  ID of request to add new version to
+   * @param parametersString  Parameters of the new version as a string
+   * @param inputFiles  Input files to give to the new version
+   */
+  public createNewVersion(id: number, parametersString: string, inputFiles: FileList) {
+    // FIXME: Update this when parameters API is known
+    const parameters = JSON.parse(parametersString);
+    const newVersionUrl = `capability/request/${id}/version/create`;
+    // const parametersUrl = `capability/request/${id}/version/latest/parameters`;
+    // console.log(parameters);
+    // this.httpClient.post(parametersUrl, parameters);
+
+    // FIXME: Update this when file API is known
+    // const filesUrl = `capability/request/${id}/version/latest/files`;
+    // for (const file in inputFiles) {
+    //   this.httpClient.post(filesUrl, file);
+    // }
+
+    // this.httpClient.post(url, parameters, inputFiles);
+  }
+}

apps/web/src/app/workspaces/services/data-retriever.service.ts

 import { Injectable } from "@angular/core";
 import { HttpClient } from "@angular/common/http";
 import { Observable } from "rxjs";
-import { CapabilityRequest } from "../model/capability-request";
 import { Capability } from "../model/capability";
 
 @Injectable({
@@ -10,14 +9,6 @@ import { Capability } from "../model/capability";
 export class DataRetrieverService {
   constructor(private httpClient: HttpClient) {}
 
-  /**
-   * Gets JSON representation of a capability request given an ID
-   * @param id  The ID of the request
-   */
-  getCapabilityRequest(id: number): Observable<CapabilityRequest> {
-    const url = `capability/request/${id}`;
-    return this.httpClient.get<CapabilityRequest>(url);
-  }
   /**
    * Gets JSON representation of a capability given a name
    * @param name  The name of the capability

apps/web/src/app/workspaces/workspaces.module.ts

@@ -8,6 +8,7 @@ import { RequestHeaderComponent } from "./components/capability-request/componen
 import { RunningStatusButtonComponent } from "./components/capability-request/components/status-buttons/running-status-button/running-status-button.component";
 import { CapabilityDefinitionComponent } from "./components/capability-request/components/capability-definition/capability-definition.component";
 import { ParametersComponent } from "./components/capability-request/components/parameters/parameters.component";
+import { CreateNewVersionFormComponent } from './components/capability-request/components/create-new-version-form/create-new-version-form.component';
 
 @NgModule({
   declarations: [
@@ -17,6 +18,7 @@ import { ParametersComponent } from "./components/capability-request/components/
     RunningStatusButtonComponent,
     CapabilityDefinitionComponent,
     ParametersComponent,
+    CreateNewVersionFormComponent,
   ],
   imports: [CommonModule, WorkspacesRoutingModule, ReactiveFormsModule, FormsModule],
 })