From 7c9c45b7cb9628a1a1bbfd6bac43d7a79557d08d Mon Sep 17 00:00:00 2001
From: lotte <lotte_hofstede@hotmail.com>
Date: Fri, 20 Mar 2020 15:56:35 +0100
Subject: [PATCH] added script parameters & route updates

---
 .../new/new-process.component.html            |  6 +-
 .../process-page/new/new-process.component.ts | 10 ++-
 .../parameter-select.component.html           | 14 +++++
 .../parameter-select.component.scss           |  0
 .../parameter-select.component.spec.ts        | 25 ++++++++
 .../parameter-select.component.ts             | 39 ++++++++++++
 .../string-value-input.component.html         |  1 +
 .../string-value-input.component.scss         |  0
 .../string-value-input.component.spec.ts      | 25 ++++++++
 .../string-value-input.component.ts           | 15 +++++
 .../process-parameters.component.html         |  8 +++
 .../process-parameters.component.scss         |  0
 .../process-parameters.component.spec.ts      | 25 ++++++++
 .../process-parameters.component.ts           | 35 +++++++++++
 .../script-help/script-help.component.html    |  2 +-
 .../scripts-select.component.html             | 26 ++++++--
 .../scripts-select.component.ts               | 63 ++++++++++++++-----
 src/app/process-page/process-page.module.ts   |  8 ++-
 18 files changed, 277 insertions(+), 25 deletions(-)
 create mode 100644 src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html
 create mode 100644 src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.scss
 create mode 100644 src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.spec.ts
 create mode 100644 src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.ts
 create mode 100644 src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html
 create mode 100644 src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.scss
 create mode 100644 src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts
 create mode 100644 src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts
 create mode 100644 src/app/process-page/new/process-parameters/process-parameters.component.html
 create mode 100644 src/app/process-page/new/process-parameters/process-parameters.component.scss
 create mode 100644 src/app/process-page/new/process-parameters/process-parameters.component.spec.ts
 create mode 100644 src/app/process-page/new/process-parameters/process-parameters.component.ts

diff --git a/src/app/process-page/new/new-process.component.html b/src/app/process-page/new/new-process.component.html
index 9e050c37b5..ca3e18546d 100644
--- a/src/app/process-page/new/new-process.component.html
+++ b/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>
diff --git a/src/app/process-page/new/new-process.component.ts b/src/app/process-page/new/new-process.component.ts
index c5fc786442..57da770dd9 100644
--- a/src/app/process-page/new/new-process.component.ts
+++ b/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;
diff --git a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html
new file mode 100644
index 0000000000..4d72645772
--- /dev/null
+++ b/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>
diff --git a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.scss b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.spec.ts b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.spec.ts
new file mode 100644
index 0000000000..0a435f6e27
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.ts b/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.ts
new file mode 100644
index 0000000000..3212fb4310
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html b/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html
new file mode 100644
index 0000000000..e572624f22
--- /dev/null
+++ b/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">
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.scss b/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts b/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts
new file mode 100644
index 0000000000..11af3a4b23
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts b/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts
new file mode 100644
index 0000000000..5c88523d8d
--- /dev/null
+++ b/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() {
+  }
+
+}
diff --git a/src/app/process-page/new/process-parameters/process-parameters.component.html b/src/app/process-page/new/process-parameters/process-parameters.component.html
new file mode 100644
index 0000000000..7ec2f25a6b
--- /dev/null
+++ b/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>
diff --git a/src/app/process-page/new/process-parameters/process-parameters.component.scss b/src/app/process-page/new/process-parameters/process-parameters.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/process-page/new/process-parameters/process-parameters.component.spec.ts b/src/app/process-page/new/process-parameters/process-parameters.component.spec.ts
new file mode 100644
index 0000000000..0eb4edb864
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/process-page/new/process-parameters/process-parameters.component.ts b/src/app/process-page/new/process-parameters/process-parameters.component.ts
new file mode 100644
index 0000000000..4979307f4a
--- /dev/null
+++ b/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()];
+  }
+}
diff --git a/src/app/process-page/new/script-help/script-help.component.html b/src/app/process-page/new/script-help/script-help.component.html
index 937f7c007f..a12fafdf4c 100644
--- a/src/app/process-page/new/script-help/script-help.component.html
+++ b/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>
diff --git a/src/app/process-page/new/scripts-select/scripts-select.component.html b/src/app/process-page/new/scripts-select/scripts-select.component.html
index 69b1830941..781566aec8 100644
--- a/src/app/process-page/new/scripts-select/scripts-select.component.html
+++ b/src/app/process-page/new/scripts-select/scripts-select.component.html
@@ -1,6 +1,20 @@
-<select [(ngModel)]="selectedScript">
-  <option selected>Choose a script...</option>
-  <option *ngFor="let script of scripts | async" [ngValue]="script">
-    {{script.name}}
-  </option>
-</select>
+<div class="form-group" *ngIf="scripts$ | async">
+    <label for="process-script">Script</label>
+    <select required id="process-script"
+            class="form-control"
+            name="script"
+            [(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>
diff --git a/src/app/process-page/new/scripts-select/scripts-select.component.ts b/src/app/process-page/new/scripts-select/scripts-select.component.ts
index 70b13c2e62..75f9b6d5ed 100644
--- a/src/app/process-page/new/scripts-select/scripts-select.component.ts
+++ b/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[]>;
-  private _selectedScript;
+  scripts$: Observable<Script[]>;
+  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() {
-    return this._selectedScript;
+  get selectedScript(): string {
+    return this._selectedScript ? this._selectedScript.id : undefined;
   }
 
-  set selectedScript(value) {
-    this._selectedScript = value;
-    this.select.emit(value);
+  set selectedScript(value: string) {
+    this.router.navigate([],
+      {
+        queryParams: { [SCRIPT_QUERY_PARAMETER]: value },
+        queryParamsHandling: 'merge'
+      }
+    );
+  }
+
+  ngOnDestroy(): void {
+    if (hasValue(this.routeSub)) {
+      this.routeSub.unsubscribe();
+    }
   }
 }
diff --git a/src/app/process-page/process-page.module.ts b/src/app/process-page/process-page.module.ts
index 34252703dc..3fb3afce96 100644
--- a/src/app/process-page/process-page.module.ts
+++ b/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: [
   ],