added script parameters & route updates

src/app/process-page/new/new-process.component.html

@@ -1,10 +1,14 @@
 <div class="container">
     <div class="row">
         <div class="col-12 col-md-6">
-            <ds-scripts-select (select)="selectScript($event)"></ds-scripts-select>
+            <form>
+                <ds-scripts-select (select)="selectScript($event)"></ds-scripts-select>
+                <ds-process-parameters [script]="selectedScript"></ds-process-parameters>
+            </form>
         </div>
         <div class="col-12 col-md-6">
             <ds-script-help [script]="selectedScript"></ds-script-help>
         </div>
     </div>
+
 </div>

src/app/process-page/new/new-process.component.ts

@@ -1,13 +1,19 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Script } from '../scripts/script.model';
+import { Process } from '../processes/process.model';
 
 @Component({
   selector: 'ds-new-process',
   templateUrl: './new-process.component.html',
   styleUrls: ['./new-process.component.scss'],
 })
-export class NewProcessComponent {
+export class NewProcessComponent implements OnInit {
   public selectedScript: Script;
+  public process: Process;
+
+  ngOnInit(): void {
+    this.process = new Process();
+  }
 
   selectScript(script: Script) {
     this.selectedScript = script;

src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html

@@ -0,0 +1,14 @@
+<div class="form-group">
+    <select required id="process-parameters"
+            class="form-control"
+            name="script"
+            [(ngModel)]="selectedParameter"
+            #param="ngModel">
+        <option [ngValue]="undefined">Add a parameter...</option>
+        <option *ngFor="let param of parameters">
+            {{param.nameLong || param.name}}
+        </option>
+    </select>
+    <ds-string-input></ds-string-input>
+    <button><span class="fas fa-trash"></span></button>
+</div>

src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ParameterSelectComponent } from './parameter-select.component';
+
+describe('ParameterSelectComponent', () => {
+  let component: ParameterSelectComponent;
+  let fixture: ComponentFixture<ParameterSelectComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ParameterSelectComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ParameterSelectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.ts

@@ -0,0 +1,39 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ProcessParameter } from '../../../processes/process-parameter.model';
+import { ScriptParameter } from '../../../scripts/script-parameter.model';
+import { hasNoValue } from '../../../../shared/empty.util';
+
+@Component({
+  selector: 'ds-parameter-select',
+  templateUrl: './parameter-select.component.html',
+  styleUrls: ['./parameter-select.component.scss']
+})
+export class ParameterSelectComponent implements OnInit {
+  @Input() parameterValue: ProcessParameter;
+  @Input() parameters: ScriptParameter[];
+  @Output() changeParameter: EventEmitter<ProcessParameter> = new EventEmitter<ProcessParameter>();
+
+  ngOnInit(): void {
+    if (hasNoValue(this.parameterValue)) {
+      this.parameterValue = new ProcessParameter();
+    }
+  }
+
+  get selectedParameter(): string {
+    return this.parameterValue ? this.parameterValue.name : undefined;
+  }
+
+  set selectedParameter(value: string) {
+    this.parameterValue.name = value;
+    this.changeParameter.emit(this.parameterValue);
+  }
+
+  get selectedParameterValue(): any {
+    return this.parameterValue ? this.parameterValue.value : undefined;
+  }
+
+  set selectedParameterValue(value: any) {
+    this.parameterValue.value = value;
+    this.changeParameter.emit(this.parameterValue);
+  }
+}

src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html

@@ -0,0 +1 @@
+<input type="input" class="form-control" id="string-value-input">

src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StringValueInputComponent } from './string-value-input.component';
+
+describe('StringValueInputComponent', () => {
+  let component: StringValueInputComponent;
+  let fixture: ComponentFixture<StringValueInputComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ StringValueInputComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(StringValueInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ds-string-value-input',
+  templateUrl: './string-value-input.component.html',
+  styleUrls: ['./string-value-input.component.scss']
+})
+export class StringValueInputComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/process-page/new/process-parameters/process-parameters.component.html

@@ -0,0 +1,8 @@
+<div class="form-group" *ngIf="script">
+    <label>Parameters</label>
+    <ds-parameter-select
+            *ngFor="let value of parameterValues; let i = index;"
+            [parameters]="script.parameters"
+            [parameterValue]="value"
+            (changeParameter)="updateParameter($event, i)"></ds-parameter-select>
+</div>

src/app/process-page/new/process-parameters/process-parameters.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProcessParametersComponent } from './process-parameters.component';
+
+describe('ProcessParametersComponent', () => {
+  let component: ProcessParametersComponent;
+  let fixture: ComponentFixture<ProcessParametersComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ProcessParametersComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ProcessParametersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/process-page/new/process-parameters/process-parameters.component.ts

@@ -0,0 +1,35 @@
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { Script } from '../../scripts/script.model';
+import { ProcessParameter } from '../../processes/process-parameter.model';
+
+@Component({
+  selector: 'ds-process-parameters',
+  templateUrl: './process-parameters.component.html',
+  styleUrls: ['./process-parameters.component.scss']
+})
+export class ProcessParametersComponent implements OnChanges {
+  @Input() script: Script;
+  parameterValues: ProcessParameter[];
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.script) {
+      this.initParameters()
+    }
+  }
+
+  initParameters() {
+    this.parameterValues = [];
+    this.addParameter();
+  }
+
+  updateParameter(processParameter: ProcessParameter, index: number) {
+    this.parameterValues[index] = processParameter;
+    if (index === this.parameterValues.length - 1) {
+      this.addParameter();
+    }
+  }
+
+  addParameter() {
+    this.parameterValues = [...this.parameterValues, new ProcessParameter()];
+  }
+}

src/app/process-page/new/script-help/script-help.component.html

@@ -3,7 +3,7 @@
 
 <table class="table-border less mt-3">
     <tr *ngFor="let param of script?.parameters">
-        <td>{{param.name}} {{param.nameLong}}{{param.type !== 'boolean' ? '<<' + param.type + '>>' : ''}}</td>
+        <td>{{param.name}} {{param.nameLong}} {{param.type !== 'boolean' ? '<' + param.type + '>' : ''}}</td>
         <td>{{param.description}}</td>
     </tr>
 </table>

src/app/process-page/new/scripts-select/scripts-select.component.html

@@ -1,6 +1,20 @@
-<select [(ngModel)]="selectedScript">
+<div class="form-group" *ngIf="scripts$ | async">
-  <option selected>Choose a script...</option>
+    <label for="process-script">Script</label>
-  <option *ngFor="let script of scripts | async" [ngValue]="script">
+    <select required id="process-script"
-    {{script.name}}
+            class="form-control"
-  </option>
+            name="script"
-</select>
+            [(ngModel)]="selectedScript"
+            #script="ngModel">
+        <option [ngValue]="undefined">Choose a script...</option>
+        <option *ngFor="let script of scripts$ | async" [ngValue]="script.id">
+            {{script.name}}
+        </option>
+    </select>
+
+    <div *ngIf="script.invalid && (script.dirty || script.touched)"
+         class="alert alert-danger">
+        <div *ngIf="script.errors.required">
+            Script is required.
+        </div>
+    </div>
+</div>

src/app/process-page/new/scripts-select/scripts-select.component.ts

@@ -1,41 +1,76 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
 import { ScriptDataService } from '../../scripts/script-data.service';
 import { Script } from '../../scripts/script.model';
-import { Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
 import { getRemoteDataPayload, getSucceededRemoteData } from '../../../core/shared/operators';
 import { PaginatedList } from '../../../core/data/paginated-list';
-import { map } from 'rxjs/operators';
+import { distinctUntilChanged, map, switchMap, take } from 'rxjs/operators';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { hasValue, hasValueOperator } from '../../../shared/empty.util';
+
+const SCRIPT_QUERY_PARAMETER = 'script';
 
 @Component({
   selector: 'ds-scripts-select',
   templateUrl: './scripts-select.component.html',
   styleUrls: ['./scripts-select.component.scss']
 })
-export class ScriptsSelectComponent implements OnInit {
+export class ScriptsSelectComponent implements OnInit, OnDestroy {
   @Output() select: EventEmitter<Script> = new EventEmitter<Script>();
-  scripts: Observable<Script[]>;
+  scripts$: Observable<Script[]>;
-  private _selectedScript;
+  private _selectedScript: Script;
+  private routeSub: Subscription;
 
   constructor(
-    private scriptService: ScriptDataService
+    private scriptService: ScriptDataService,
+    private router: Router,
+    private route: ActivatedRoute,
   ) {
   }
 
   ngOnInit() {
-    this.scripts = this.scriptService.findAll({ elementsPerPage: Number.MAX_SAFE_INTEGER })
+    this.scripts$ = this.scriptService.findAll({ elementsPerPage: Number.MAX_SAFE_INTEGER })
       .pipe(
         getSucceededRemoteData(),
         getRemoteDataPayload(),
         map((paginatedList: PaginatedList<Script>) => paginatedList.page)
-      )
+      );
+
+    this.routeSub = this.route.queryParams
+      .pipe(
+        map((params: Params) => params[SCRIPT_QUERY_PARAMETER]),
+        distinctUntilChanged(),
+        switchMap((id: string) =>
+          this.scripts$
+            .pipe(
+              take(1),
+              map((scripts) =>
+                scripts.find((script) => script.id === id)
+              )
+            )
+        )
+      ).subscribe((script: Script) => {
+        this._selectedScript = script;
+        this.select.emit(script);
+      });
   }
 
-  get selectedScript() {
+  get selectedScript(): string {
-    return this._selectedScript;
+    return this._selectedScript ? this._selectedScript.id : undefined;
   }
 
-  set selectedScript(value) {
+  set selectedScript(value: string) {
-    this._selectedScript = value;
+    this.router.navigate([],
-    this.select.emit(value);
+      {
+        queryParams: { [SCRIPT_QUERY_PARAMETER]: value },
+        queryParamsHandling: 'merge'
+      }
+    );
+  }
+
+  ngOnDestroy(): void {
+    if (hasValue(this.routeSub)) {
+      this.routeSub.unsubscribe();
+    }
   }
 }

src/app/process-page/process-page.module.ts

@@ -6,6 +6,9 @@ import { ScriptDataService } from './scripts/script-data.service';
 import { NewProcessComponent } from './new/new-process.component';
 import { ScriptsSelectComponent } from './new/scripts-select/scripts-select.component';
 import { ScriptHelpComponent } from './new/script-help/script-help.component';
+import { ParameterSelectComponent } from './new/process-parameters/parameter-select/parameter-select.component';
+import { ProcessParametersComponent } from './new/process-parameters/process-parameters.component';
+import { StringValueInputComponent } from './new/process-parameters/parameter-value-input/string-value-input/string-value-input.component';
 
 @NgModule({
   imports: [
@@ -15,7 +18,10 @@ import { ScriptHelpComponent } from './new/script-help/script-help.component';
   declarations: [
     NewProcessComponent,
     ScriptsSelectComponent,
-    ScriptHelpComponent
+    ScriptHelpComponent,
+    ParameterSelectComponent,
+    ProcessParametersComponent,
+    StringValueInputComponent,
   ],
   entryComponents: [
   ],