From 1cb0bb72e4af2192a43ac0cac3451cdccc3165f6 Mon Sep 17 00:00:00 2001 From: lotte Date: Mon, 29 Jun 2020 22:17:41 +0200 Subject: [PATCH] added create-from functionality --- .../detail/process-detail.component.html | 62 ++++---- .../form/process-form.component.html | 25 +++ .../process-form.component.scss} | 0 .../form/process-form.component.spec.ts | 86 +++++++++++ .../form/process-form.component.ts | 146 ++++++++++++++++++ .../parameter-select.component.html | 2 +- .../parameter-select.component.scss} | 0 .../parameter-select.component.spec.ts | 0 .../parameter-select.component.ts | 18 +-- .../boolean-value-input.component.html | 0 .../boolean-value-input.component.scss} | 0 .../boolean-value-input.component.spec.ts | 0 .../boolean-value-input.component.ts | 2 +- .../date-value-input.component.html | 0 .../date-value-input.component.scss} | 0 .../date-value-input.component.spec.ts | 0 .../date-value-input.component.ts | 9 +- .../file-value-input.component.html | 0 .../file-value-input.component.scss | 0 .../file-value-input.component.spec.ts | 0 .../file-value-input.component.ts | 2 +- .../parameter-value-input.component.html | 7 + .../parameter-value-input.component.scss} | 0 .../parameter-value-input.component.spec.ts | 0 .../parameter-value-input.component.ts | 4 +- .../string-value-input.component.html | 0 .../string-value-input.component.scss} | 0 .../string-value-input.component.spec.ts | 0 .../string-value-input.component.ts | 9 +- .../value-input.component.ts | 0 .../process-parameters.component.html | 0 .../process-parameters.component.scss} | 0 .../process-parameters.component.spec.ts | 0 .../process-parameters.component.ts | 23 ++- .../script-help/script-help.component.html | 0 .../script-help/script-help.component.scss} | 0 .../script-help/script-help.component.spec.ts | 0 .../script-help/script-help.component.ts | 0 .../scripts-select.component.html | 0 .../scripts-select.component.scss | 0 .../scripts-select.component.spec.ts | 0 .../scripts-select.component.ts | 17 +- .../new/new-process.component.html | 31 +--- .../new/new-process.component.spec.ts | 18 +-- .../process-page/new/new-process.component.ts | 144 +++-------------- .../parameter-value-input.component.html | 7 - src/app/process-page/process-page.module.ts | 22 +-- .../process-page/processes/process.model.ts | 3 +- src/app/shared/testing/test-module.ts | 6 +- src/assets/i18n/en.json5 | 2 + 50 files changed, 408 insertions(+), 237 deletions(-) create mode 100644 src/app/process-page/form/process-form.component.html rename src/app/process-page/{new/process-parameters/parameter-select/parameter-select.component.scss => form/process-form.component.scss} (100%) create mode 100644 src/app/process-page/form/process-form.component.spec.ts create mode 100644 src/app/process-page/form/process-form.component.ts rename src/app/process-page/{new => form}/process-parameters/parameter-select/parameter-select.component.html (75%) rename src/app/process-page/{new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.scss => form/process-parameters/parameter-select/parameter-select.component.scss} (100%) rename src/app/process-page/{new => form}/process-parameters/parameter-select/parameter-select.component.spec.ts (100%) rename src/app/process-page/{new => form}/process-parameters/parameter-select/parameter-select.component.ts (86%) rename src/app/process-page/{new => form}/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.html (100%) rename src/app/process-page/{new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.scss => form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.scss} (100%) rename src/app/process-page/{new => form}/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.spec.ts (100%) rename src/app/process-page/{new => form}/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.ts (90%) rename src/app/process-page/{new => form}/process-parameters/parameter-value-input/date-value-input/date-value-input.component.html (100%) rename src/app/process-page/{new/process-parameters/parameter-value-input/parameter-value-input.component.scss => form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.scss} (100%) rename src/app/process-page/{new => form}/process-parameters/parameter-value-input/date-value-input/date-value-input.component.spec.ts (100%) rename src/app/process-page/{new => form}/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts (75%) rename src/app/process-page/{new => form}/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html (100%) rename src/app/process-page/{new => form}/process-parameters/parameter-value-input/file-value-input/file-value-input.component.scss (100%) rename src/app/process-page/{new => form}/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts (100%) rename src/app/process-page/{new => form}/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts (91%) create mode 100644 src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.html rename src/app/process-page/{new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.scss => form/process-parameters/parameter-value-input/parameter-value-input.component.scss} (100%) rename src/app/process-page/{new => form}/process-parameters/parameter-value-input/parameter-value-input.component.spec.ts (100%) rename src/app/process-page/{new => form}/process-parameters/parameter-value-input/parameter-value-input.component.ts (91%) rename src/app/process-page/{new => form}/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html (100%) rename src/app/process-page/{new/process-parameters/process-parameters.component.scss => form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.scss} (100%) rename src/app/process-page/{new => form}/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts (100%) rename src/app/process-page/{new => form}/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts (76%) rename src/app/process-page/{new => form}/process-parameters/parameter-value-input/value-input.component.ts (100%) rename src/app/process-page/{new => form}/process-parameters/process-parameters.component.html (100%) rename src/app/process-page/{new/script-help/script-help.component.scss => form/process-parameters/process-parameters.component.scss} (100%) rename src/app/process-page/{new => form}/process-parameters/process-parameters.component.spec.ts (100%) rename src/app/process-page/{new => form}/process-parameters/process-parameters.component.ts (84%) rename src/app/process-page/{new => form}/script-help/script-help.component.html (100%) rename src/app/process-page/{new/scripts-select/scripts-select.component.scss => form/script-help/script-help.component.scss} (100%) rename src/app/process-page/{new => form}/script-help/script-help.component.spec.ts (100%) rename src/app/process-page/{new => form}/script-help/script-help.component.ts (100%) rename src/app/process-page/{new => form}/scripts-select/scripts-select.component.html (100%) create mode 100644 src/app/process-page/form/scripts-select/scripts-select.component.scss rename src/app/process-page/{new => form}/scripts-select/scripts-select.component.spec.ts (100%) rename src/app/process-page/{new => form}/scripts-select/scripts-select.component.ts (83%) delete mode 100644 src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.html diff --git a/src/app/process-page/detail/process-detail.component.html b/src/app/process-page/detail/process-detail.component.html index f274469f0d..eb6d0a6674 100644 --- a/src/app/process-page/detail/process-detail.component.html +++ b/src/app/process-page/detail/process-detail.component.html @@ -1,38 +1,42 @@
-

{{'process.detail.title' | translate:{ id: process?.processId, name: process?.scriptName } }}

- - -
{{ process?.scriptName }}
- - - -
{{ argument?.name }} {{ argument?.value }}
- - -
- -
- {{getFileName(file)}} - ({{file?.sizeBytes | dsFileSize}}) -
+
+

{{'process.detail.title' | translate:{id: process?.processId, name: process?.scriptName} }}

+ +
+ +
{{ process?.scriptName }}
 -
- -
{{ process.startTime }}
- + +
{{ argument?.name }} {{ argument?.value }}
+ - -
{{ process.endTime }}
- +
+ +
+ {{getFileName(file)}} + ({{file?.sizeBytes | dsFileSize}}) +
+ +
- -
{{ process.processStatus }}
- + +
{{ process.startTime }}
+ - + +
{{ process.endTime }}
+ + + +
{{ process.processStatus }}
+ + + - + - {{'process.detail.back' | translate}} + {{'process.detail.back' | translate}}
diff --git a/src/app/process-page/form/process-form.component.html b/src/app/process-page/form/process-form.component.html new file mode 100644 index 0000000000..b587fe3943 --- /dev/null +++ b/src/app/process-page/form/process-form.component.html @@ -0,0 +1,25 @@ +
+
+

+ {{headerKey | translate}} +

+
+
+ + + + +
+
+
+ +
+
+ +
+ {{'process.new.parameter.required.missing' | translate}} +
    +
  • {{missing}}
    • +
+
+
diff --git a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.scss b/src/app/process-page/form/process-form.component.scss similarity index 100% rename from src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.scss rename to src/app/process-page/form/process-form.component.scss diff --git a/src/app/process-page/form/process-form.component.spec.ts b/src/app/process-page/form/process-form.component.spec.ts new file mode 100644 index 0000000000..78ea5fc271 --- /dev/null +++ b/src/app/process-page/form/process-form.component.spec.ts @@ -0,0 +1,86 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FormsModule } from '@angular/forms'; +import { TranslateLoader, TranslateModule } from '@ngx-translate/core'; +import { NO_ERRORS_SCHEMA } from '@angular/core'; +import { ProcessFormComponent } from './process-form.component'; +import { ScriptDataService } from '../../core/data/processes/script-data.service'; +import { ScriptParameter } from '../scripts/script-parameter.model'; +import { Script } from '../scripts/script.model'; +import { ProcessParameter } from '../processes/process-parameter.model'; +import { NotificationsService } from '../../shared/notifications/notifications.service'; +import { of as observableOf } from 'rxjs'; +import { NotificationsServiceStub } from '../../shared/testing/notifications-service.stub'; +import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock'; +import { RequestService } from '../../core/data/request.service'; +import { Router } from '@angular/router'; + +describe('NewProcessComponent', () => { + let component: ProcessFormComponent; + let fixture: ComponentFixture; + let scriptService; + let parameterValues; + let script; + + function init() { + const param1 = new ScriptParameter(); + const param2 = new ScriptParameter(); + script = Object.assign(new Script(), { parameters: [param1, param2] }); + parameterValues = [ + Object.assign(new ProcessParameter(), { name: '-a', value: 'bla' }), + Object.assign(new ProcessParameter(), { name: '-b', value: '123' }), + Object.assign(new ProcessParameter(), { name: '-c', value: 'value' }), + ]; + scriptService = jasmine.createSpyObj( + 'scriptService', + { + invoke: observableOf({ + response: + { + isSuccessful: true + } + }) + } + ) + } + + beforeEach(async(() => { + init(); + TestBed.configureTestingModule({ + imports: [ + FormsModule, + TranslateModule.forRoot({ + loader: { + provide: TranslateLoader, + useClass: TranslateLoaderMock + } + })], + declarations: [ProcessFormComponent], + providers: [ + { provide: ScriptDataService, useValue: scriptService }, + { provide: NotificationsService, useClass: NotificationsServiceStub }, + { provide: RequestService, useValue: {} }, + { provide: Router, useValue: {} }, + ], + schemas: [NO_ERRORS_SCHEMA] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ProcessFormComponent); + component = fixture.componentInstance; + component.parameters = parameterValues; + component.selectedScript = script; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); + + it('should call invoke on the scriptService on submit', () => { + component.submitForm({ invalid: false } as any); + expect(scriptService.invoke).toHaveBeenCalled(); + }); +}); diff --git a/src/app/process-page/form/process-form.component.ts b/src/app/process-page/form/process-form.component.ts new file mode 100644 index 0000000000..25c47e584b --- /dev/null +++ b/src/app/process-page/form/process-form.component.ts @@ -0,0 +1,146 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { Script } from '../scripts/script.model'; +import { Process } from '../processes/process.model'; +import { ProcessParameter } from '../processes/process-parameter.model'; +import { ScriptDataService } from '../../core/data/processes/script-data.service'; +import { ControlContainer, NgForm } from '@angular/forms'; +import { ScriptParameter } from '../scripts/script-parameter.model'; +import { RequestEntry } from '../../core/data/request.reducer'; +import { NotificationsService } from '../../shared/notifications/notifications.service'; +import { TranslateService } from '@ngx-translate/core'; +import { take } from 'rxjs/operators'; +import { RequestService } from '../../core/data/request.service'; +import { Router } from '@angular/router'; + +/** + * Component to create a new script + */ +@Component({ + selector: 'ds-process-form', + templateUrl: './process-form.component.html', + styleUrls: ['./process-form.component.scss'], +}) +export class ProcessFormComponent implements OnInit { + /** + * The currently selected script + */ + @Input() public selectedScript: Script = undefined; + + /** + * The process to create + */ + @Input() public process: Process = undefined; + + /** + * The parameter values to use to start the process + */ + @Input() public parameters: ProcessParameter[]; + + /** + * Optional files that are used as parameter values + */ + public files: File[] = []; + + @Input() public headerKey: string; + + /** + * Contains the missing parameters on submission + */ + public missingParameters = []; + + constructor( + private scriptService: ScriptDataService, + private notificationsService: NotificationsService, + private translationService: TranslateService, + private requestService: RequestService, + private router: Router) { + } + + ngOnInit(): void { + this.process = new Process(); + } + + /** + * Validates the form, sets the parameters to correct values and invokes the script with the correct parameters + * @param form + */ + submitForm(form: NgForm) { + if (!this.validateForm(form) || this.isRequiredMissing()) { + return; + } + + const stringParameters: ProcessParameter[] = this.parameters.map((parameter: ProcessParameter) => { + return { + name: parameter.name, + value: this.checkValue(parameter) + }; + } + ); + this.scriptService.invoke(this.selectedScript.id, stringParameters, this.files) + .pipe(take(1)) + .subscribe((requestEntry: RequestEntry) => { + if (requestEntry.response.isSuccessful) { + const title = this.translationService.get('process.new.notification.success.title'); + const content = this.translationService.get('process.new.notification.success.content'); + this.notificationsService.success(title, content) + this.sendBack(); + } else { + const title = this.translationService.get('process.new.notification.error.title'); + const content = this.translationService.get('process.new.notification.error.content'); + this.notificationsService.error(title, content) + } + }) + } + + /** + * Checks whether the parameter values are files + * Replaces file parameters by strings and stores the files in a separate list + * @param processParameter The parameter value to check + */ + private checkValue(processParameter: ProcessParameter): string { + if (typeof processParameter.value === 'object') { + this.files = [...this.files, processParameter.value]; + return processParameter.value.name; + } + return processParameter.value; + } + + /** + * Validates the form + * Returns false if the form is invalid + * Returns true if the form is valid + * @param form The NgForm object to validate + */ + private validateForm(form: NgForm) { + if (form.invalid) { + Object.keys(form.controls).forEach((key) => { + form.controls[key].markAsDirty(); + }); + return false; + } + return true; + } + + private isRequiredMissing() { + const setParams: string[] = this.parameters + .map((param) => param.name); + const requiredParams: ScriptParameter[] = this.selectedScript.parameters.filter((param) => param.mandatory); + for (const rp of requiredParams) { + if (!setParams.includes(rp.name)) { + this.missingParameters.push(rp.name); + } + } + return this.missingParameters.length > 0; + } + + private sendBack() { + this.requestService.removeByHrefSubstring('/processes'); + /* should subscribe on the previous method to know the action is finished and then navigate, + will fix this when the removeByHrefSubstring changes are merged */ + this.router.navigateByUrl('/processes'); + } +} + +export function controlContainerFactory(controlContainer?: ControlContainer) { + return controlContainer; +} diff --git a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html b/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.html similarity index 75% rename from src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html rename to src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.html index f12596c6e4..4bf06bbade 100644 --- a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.html +++ b/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.html @@ -9,7 +9,7 @@ {{param.nameLong || param.name}} - + diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.scss b/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.scss similarity index 100% rename from src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.scss rename to src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.scss diff --git a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.spec.ts b/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.spec.ts similarity index 100% rename from src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.spec.ts rename to src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.spec.ts diff --git a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.ts b/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.ts similarity index 86% rename from src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.ts rename to src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.ts index 0c3dc0d55a..89f69c0980 100644 --- a/src/app/process-page/new/process-parameters/parameter-select/parameter-select.component.ts +++ b/src/app/process-page/form/process-parameters/parameter-select/parameter-select.component.ts @@ -3,7 +3,7 @@ import { ProcessParameter } from '../../../processes/process-parameter.model'; import { ScriptParameter } from '../../../scripts/script-parameter.model'; import { hasNoValue } from '../../../../shared/empty.util'; import { ControlContainer, NgForm } from '@angular/forms'; -import { controlContainerFactory } from '../../new-process.component'; +import { controlContainerFactory } from '../../process-form.component'; /** * Component to select a single parameter for a process @@ -12,17 +12,19 @@ import { controlContainerFactory } from '../../new-process.component'; selector: 'ds-parameter-select', templateUrl: './parameter-select.component.html', styleUrls: ['./parameter-select.component.scss'], - viewProviders: [ { provide: ControlContainer, + viewProviders: [{ + provide: ControlContainer, useFactory: controlContainerFactory, - deps: [[new Optional(), NgForm]] } ] + deps: [[new Optional(), NgForm]] + }] }) -export class ParameterSelectComponent implements OnInit { +export class ParameterSelectComponent { @Input() index: number; /** * The current parameter value of the selected parameter */ - @Input() parameterValue: ProcessParameter; + @Input() parameterValue: ProcessParameter = new ProcessParameter(); /** * The available script parameters for the script @@ -44,12 +46,6 @@ export class ParameterSelectComponent implements OnInit { */ @Output() changeParameter: EventEmitter = new EventEmitter(); - ngOnInit(): void { - if (hasNoValue(this.parameterValue)) { - this.parameterValue = new ProcessParameter(); - } - } - /** * Returns the script parameter based on the currently selected name */ diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.html b/src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.html similarity index 100% rename from src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.html rename to src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.html diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.scss b/src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.scss similarity index 100% rename from src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.scss rename to src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.scss diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.spec.ts b/src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.spec.ts similarity index 100% rename from src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.spec.ts rename to src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.spec.ts diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.ts b/src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.ts similarity index 90% rename from src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.ts rename to src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.ts index 383c9e9f97..51b93cb6a1 100644 --- a/src/app/process-page/new/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.ts +++ b/src/app/process-page/form/process-parameters/parameter-value-input/boolean-value-input/boolean-value-input.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit, Optional } from '@angular/core'; import { ValueInputComponent } from '../value-input.component'; import { ControlContainer, NgForm } from '@angular/forms'; -import { controlContainerFactory } from '../../../new-process.component'; +import { controlContainerFactory } from '../../../process-form.component'; /** * Represents the value of a boolean parameter diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.html b/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.html similarity index 100% rename from src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.html rename to src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.html diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.scss b/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.scss similarity index 100% rename from src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.scss rename to src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.scss diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.spec.ts b/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.spec.ts similarity index 100% rename from src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.spec.ts rename to src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.spec.ts diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts b/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts similarity index 75% rename from src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts rename to src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts index 37e6385791..600dcbb946 100644 --- a/src/app/process-page/new/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts +++ b/src/app/process-page/form/process-parameters/parameter-value-input/date-value-input/date-value-input.component.ts @@ -1,7 +1,7 @@ -import { Component, OnInit, Optional } from '@angular/core'; +import { Component, OnInit, Optional, Input } from '@angular/core'; import { ValueInputComponent } from '../value-input.component'; import { ControlContainer, NgForm } from '@angular/forms'; -import { controlContainerFactory } from '../../../new-process.component'; +import { controlContainerFactory } from '../../../process-form.component'; /** * Represents the user inputted value of a date parameter @@ -19,6 +19,11 @@ export class DateValueInputComponent extends ValueInputComponent { * The current value of the date string */ value: string; + @Input() initialValue; + + ngOnInit() { + this.value = this.initialValue; + } setValue(value) { this.value = value; diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html b/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html similarity index 100% rename from src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html rename to src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.html diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.scss b/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.scss similarity index 100% rename from src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.scss rename to src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.scss diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts b/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts similarity index 100% rename from src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts rename to src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.spec.ts diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts b/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts similarity index 91% rename from src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts rename to src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts index b0c16eb2de..796a5de58e 100644 --- a/src/app/process-page/new/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts +++ b/src/app/process-page/form/process-parameters/parameter-value-input/file-value-input/file-value-input.component.ts @@ -1,7 +1,7 @@ import { Component, Optional } from '@angular/core'; import { ValueInputComponent } from '../value-input.component'; import { ControlContainer, NgForm } from '@angular/forms'; -import { controlContainerFactory } from '../../../new-process.component'; +import { controlContainerFactory } from '../../../process-form.component'; /** * Represents the user inputted value of a file parameter diff --git a/src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.html b/src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.html new file mode 100644 index 0000000000..57bd4ee7e5 --- /dev/null +++ b/src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.html @@ -0,0 +1,7 @@ +
+ + + + + +
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/form/process-parameters/parameter-value-input/parameter-value-input.component.scss similarity index 100% rename from src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.scss rename to src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.scss diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.spec.ts b/src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.spec.ts similarity index 100% rename from src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.spec.ts rename to src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.spec.ts diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.ts b/src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.ts similarity index 91% rename from src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.ts rename to src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.ts index bcc9b49192..6626639068 100644 --- a/src/app/process-page/new/process-parameters/parameter-value-input/parameter-value-input.component.ts +++ b/src/app/process-page/form/process-parameters/parameter-value-input/parameter-value-input.component.ts @@ -2,7 +2,7 @@ import { Component, EventEmitter, Input, OnChanges, OnInit, Optional, Output } f import { ScriptParameterType } from '../../../scripts/script-parameter-type.model'; import { ScriptParameter } from '../../../scripts/script-parameter.model'; import { ControlContainer, NgForm } from '@angular/forms'; -import { controlContainerFactory } from '../../new-process.component'; +import { controlContainerFactory } from '../../process-form.component'; /** * Component that renders the correct parameter value input based the script parameter's type @@ -23,6 +23,8 @@ export class ParameterValueInputComponent { */ @Input() parameter: ScriptParameter; + + @Input() initialValue: any; /** * Emits the value of the input when its updated */ 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/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html similarity index 100% rename from src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html rename to src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.html diff --git a/src/app/process-page/new/process-parameters/process-parameters.component.scss b/src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.scss similarity index 100% rename from src/app/process-page/new/process-parameters/process-parameters.component.scss rename to src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.scss 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/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts similarity index 100% rename from src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts rename to src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.spec.ts 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/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts similarity index 76% rename from src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts rename to src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts index 02a16b367b..12278a0e18 100644 --- a/src/app/process-page/new/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts +++ b/src/app/process-page/form/process-parameters/parameter-value-input/string-value-input/string-value-input.component.ts @@ -1,7 +1,7 @@ -import { Component, Optional } from '@angular/core'; +import { Component, Optional, Input } from '@angular/core'; import { ValueInputComponent } from '../value-input.component'; import { ControlContainer, NgForm } from '@angular/forms'; -import { controlContainerFactory } from '../../../new-process.component'; +import { controlContainerFactory } from '../../../process-form.component'; /** * Represents the user inputted value of a string parameter @@ -19,7 +19,12 @@ export class StringValueInputComponent extends ValueInputComponent { * The current value of the string */ value: string; + @Input() initialValue; + ngOnInit() { + this.value = this.initialValue; + } + setValue(value) { this.value = value; this.updateValue.emit(value) diff --git a/src/app/process-page/new/process-parameters/parameter-value-input/value-input.component.ts b/src/app/process-page/form/process-parameters/parameter-value-input/value-input.component.ts similarity index 100% rename from src/app/process-page/new/process-parameters/parameter-value-input/value-input.component.ts rename to src/app/process-page/form/process-parameters/parameter-value-input/value-input.component.ts diff --git a/src/app/process-page/new/process-parameters/process-parameters.component.html b/src/app/process-page/form/process-parameters/process-parameters.component.html similarity index 100% rename from src/app/process-page/new/process-parameters/process-parameters.component.html rename to src/app/process-page/form/process-parameters/process-parameters.component.html diff --git a/src/app/process-page/new/script-help/script-help.component.scss b/src/app/process-page/form/process-parameters/process-parameters.component.scss similarity index 100% rename from src/app/process-page/new/script-help/script-help.component.scss rename to src/app/process-page/form/process-parameters/process-parameters.component.scss diff --git a/src/app/process-page/new/process-parameters/process-parameters.component.spec.ts b/src/app/process-page/form/process-parameters/process-parameters.component.spec.ts similarity index 100% rename from src/app/process-page/new/process-parameters/process-parameters.component.spec.ts rename to src/app/process-page/form/process-parameters/process-parameters.component.spec.ts diff --git a/src/app/process-page/new/process-parameters/process-parameters.component.ts b/src/app/process-page/form/process-parameters/process-parameters.component.ts similarity index 84% rename from src/app/process-page/new/process-parameters/process-parameters.component.ts rename to src/app/process-page/form/process-parameters/process-parameters.component.ts index 8df2ac4b31..4f5c61c8d7 100644 --- a/src/app/process-page/new/process-parameters/process-parameters.component.ts +++ b/src/app/process-page/form/process-parameters/process-parameters.component.ts @@ -4,7 +4,7 @@ import { ProcessParameter } from '../../processes/process-parameter.model'; import { hasValue } from '../../../shared/empty.util'; import { ControlContainer, NgForm } from '@angular/forms'; import { ScriptParameter } from '../../scripts/script-parameter.model'; -import { controlContainerFactory } from '../new-process.component'; +import { controlContainerFactory } from '../process-form.component'; /** * Component that represents the selected list of parameters for a script @@ -13,15 +13,18 @@ import { controlContainerFactory } from '../new-process.component'; selector: 'ds-process-parameters', templateUrl: './process-parameters.component.html', styleUrls: ['./process-parameters.component.scss'], - viewProviders: [ { provide: ControlContainer, + viewProviders: [{ + provide: ControlContainer, useFactory: controlContainerFactory, - deps: [[new Optional(), NgForm]] } ] + deps: [[new Optional(), NgForm]] + }] }) export class ProcessParametersComponent implements OnChanges { /** * The currently selected script */ @Input() script: Script; + @Input() initialParams: ProcessParameter[]; /** * Emits the parameter values when they're updated */ @@ -32,6 +35,12 @@ export class ProcessParametersComponent implements OnChanges { */ parameterValues: ProcessParameter[]; + ngOnInit() { + if (hasValue(this.initialParams)) { + this.parameterValues = this.initialParams; + } + } + /** * Makes sure the parameters are reset when the script changes * @param changes @@ -47,8 +56,12 @@ export class ProcessParametersComponent implements OnChanges { * Initializes the first parameter value */ initParameters() { - this.parameterValues = []; - this.initializeParameter(); + if (hasValue(this.initialParams)) { + this.parameterValues = this.initialParams; + } else { + this.parameterValues = []; + this.initializeParameter(); + } } /** diff --git a/src/app/process-page/new/script-help/script-help.component.html b/src/app/process-page/form/script-help/script-help.component.html similarity index 100% rename from src/app/process-page/new/script-help/script-help.component.html rename to src/app/process-page/form/script-help/script-help.component.html diff --git a/src/app/process-page/new/scripts-select/scripts-select.component.scss b/src/app/process-page/form/script-help/script-help.component.scss similarity index 100% rename from src/app/process-page/new/scripts-select/scripts-select.component.scss rename to src/app/process-page/form/script-help/script-help.component.scss diff --git a/src/app/process-page/new/script-help/script-help.component.spec.ts b/src/app/process-page/form/script-help/script-help.component.spec.ts similarity index 100% rename from src/app/process-page/new/script-help/script-help.component.spec.ts rename to src/app/process-page/form/script-help/script-help.component.spec.ts diff --git a/src/app/process-page/new/script-help/script-help.component.ts b/src/app/process-page/form/script-help/script-help.component.ts similarity index 100% rename from src/app/process-page/new/script-help/script-help.component.ts rename to src/app/process-page/form/script-help/script-help.component.ts diff --git a/src/app/process-page/new/scripts-select/scripts-select.component.html b/src/app/process-page/form/scripts-select/scripts-select.component.html similarity index 100% rename from src/app/process-page/new/scripts-select/scripts-select.component.html rename to src/app/process-page/form/scripts-select/scripts-select.component.html diff --git a/src/app/process-page/form/scripts-select/scripts-select.component.scss b/src/app/process-page/form/scripts-select/scripts-select.component.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/src/app/process-page/new/scripts-select/scripts-select.component.spec.ts b/src/app/process-page/form/scripts-select/scripts-select.component.spec.ts similarity index 100% rename from src/app/process-page/new/scripts-select/scripts-select.component.spec.ts rename to src/app/process-page/form/scripts-select/scripts-select.component.spec.ts diff --git a/src/app/process-page/new/scripts-select/scripts-select.component.ts b/src/app/process-page/form/scripts-select/scripts-select.component.ts similarity index 83% rename from src/app/process-page/new/scripts-select/scripts-select.component.ts rename to src/app/process-page/form/scripts-select/scripts-select.component.ts index 475dfd0798..98ed9f6dce 100644 --- a/src/app/process-page/new/scripts-select/scripts-select.component.ts +++ b/src/app/process-page/form/scripts-select/scripts-select.component.ts @@ -1,14 +1,14 @@ -import { Component, EventEmitter, OnDestroy, OnInit, Optional, Output } from '@angular/core'; +import { Component, EventEmitter, Input, OnDestroy, OnInit, Optional, Output } from '@angular/core'; import { ScriptDataService } from '../../../core/data/processes/script-data.service'; import { Script } from '../../scripts/script.model'; import { Observable, Subscription } from 'rxjs'; +import { distinctUntilChanged, filter, map, switchMap, take } from 'rxjs/operators'; import { getRemoteDataPayload, getSucceededRemoteData } from '../../../core/shared/operators'; import { PaginatedList } from '../../../core/data/paginated-list'; -import { distinctUntilChanged, map, switchMap, take } from 'rxjs/operators'; import { ActivatedRoute, Params, Router } from '@angular/router'; -import { hasValue } from '../../../shared/empty.util'; -import { ControlContainer, FormControl, NgForm } from '@angular/forms'; -import { controlContainerFactory } from '../new-process.component'; +import { hasNoValue, hasValue } from '../../../shared/empty.util'; +import { ControlContainer, NgForm } from '@angular/forms'; +import { controlContainerFactory } from '../process-form.component'; const SCRIPT_QUERY_PARAMETER = 'script'; @@ -50,6 +50,7 @@ export class ScriptsSelectComponent implements OnInit, OnDestroy { this.routeSub = this.route.queryParams .pipe( + filter((params: Params) => hasNoValue(params.id)), map((params: Params) => params[SCRIPT_QUERY_PARAMETER]), distinctUntilChanged(), switchMap((id: string) => @@ -82,11 +83,15 @@ export class ScriptsSelectComponent implements OnInit, OnDestroy { this.router.navigate([], { queryParams: { [SCRIPT_QUERY_PARAMETER]: value }, - queryParamsHandling: 'merge' } ); } + @Input() + set script(value: Script) { + this._selectedScript = value; + } + ngOnDestroy(): void { if (hasValue(this.routeSub)) { this.routeSub.unsubscribe(); diff --git a/src/app/process-page/new/new-process.component.html b/src/app/process-page/new/new-process.component.html index f965ae43e9..f61764ffd2 100644 --- a/src/app/process-page/new/new-process.component.html +++ b/src/app/process-page/new/new-process.component.html @@ -1,25 +1,6 @@ -
-
-

- {{'process.new.header' | translate}} -

-
-
- - - - -
-
-
- -
-
- -
- {{'process.new.parameter.required.missing' | translate}} -
    -
  • {{missing}}
    • -
-
-
+ + + + + + diff --git a/src/app/process-page/new/new-process.component.spec.ts b/src/app/process-page/new/new-process.component.spec.ts index 826f2744ff..bb3ad24ed3 100644 --- a/src/app/process-page/new/new-process.component.spec.ts +++ b/src/app/process-page/new/new-process.component.spec.ts @@ -13,7 +13,10 @@ import { of as observableOf } from 'rxjs'; import { NotificationsServiceStub } from '../../shared/testing/notifications-service.stub'; import { TranslateLoaderMock } from '../../shared/mocks/translate-loader.mock'; import { RequestService } from '../../core/data/request.service'; -import { Router } from '@angular/router'; +import { ActivatedRoute } from '@angular/router'; +import { LinkService } from '../../core/cache/builders/link.service'; +import { VarDirective } from '../../shared/utils/var.directive'; +import { ProcessDataService } from '../../core/data/processes/process-data.service'; describe('NewProcessComponent', () => { let component: NewProcessComponent; @@ -55,12 +58,14 @@ describe('NewProcessComponent', () => { useClass: TranslateLoaderMock } })], - declarations: [NewProcessComponent], + declarations: [NewProcessComponent, VarDirective], providers: [ { provide: ScriptDataService, useValue: scriptService }, { provide: NotificationsService, useClass: NotificationsServiceStub }, { provide: RequestService, useValue: {} }, - { provide: Router, useValue: {} }, + { provide: ActivatedRoute, useValue: { snapshot: { queryParams: {} } } }, + { provide: LinkService, useValue: {} }, + { provide: ProcessDataService, useValue: {} }, ], schemas: [NO_ERRORS_SCHEMA] }) @@ -70,17 +75,10 @@ describe('NewProcessComponent', () => { beforeEach(() => { fixture = TestBed.createComponent(NewProcessComponent); component = fixture.componentInstance; - component.parameters = parameterValues; - component.selectedScript = script; fixture.detectChanges(); }); it('should create', () => { expect(component).toBeTruthy(); }); - - it('should call invoke on the scriptService on submit', () => { - component.submitForm({ invalid: false } as any); - expect(scriptService.invoke).toHaveBeenCalled(); - }); }); diff --git a/src/app/process-page/new/new-process.component.ts b/src/app/process-page/new/new-process.component.ts index 8bd5232e6d..882d974a6c 100644 --- a/src/app/process-page/new/new-process.component.ts +++ b/src/app/process-page/new/new-process.component.ts @@ -1,16 +1,13 @@ import { Component, OnInit } from '@angular/core'; -import { Script } from '../scripts/script.model'; import { Process } from '../processes/process.model'; -import { ProcessParameter } from '../processes/process-parameter.model'; -import { ScriptDataService } from '../../core/data/processes/script-data.service'; -import { ControlContainer, NgForm } from '@angular/forms'; -import { ScriptParameter } from '../scripts/script-parameter.model'; -import { RequestEntry } from '../../core/data/request.reducer'; -import { NotificationsService } from '../../shared/notifications/notifications.service'; -import { TranslateService } from '@ngx-translate/core'; -import { take } from 'rxjs/operators'; -import { RequestService } from '../../core/data/request.service'; -import { Router } from '@angular/router'; +import { ActivatedRoute } from '@angular/router'; +import { ProcessDataService } from '../../core/data/processes/process-data.service'; +import { getFirstSucceededRemoteDataPayload } from '../../core/shared/operators'; +import { Observable } from 'rxjs'; +import { map, switchMap } from 'rxjs/operators'; +import { LinkService } from '../../core/cache/builders/link.service'; +import { followLink } from '../../shared/utils/follow-link-config.model'; +import { Script } from '../scripts/script.model'; /** * Component to create a new script @@ -21,124 +18,23 @@ import { Router } from '@angular/router'; styleUrls: ['./new-process.component.scss'], }) export class NewProcessComponent implements OnInit { - /** - * The currently selected script - */ - public selectedScript: Script; + fromExisting$?: Observable; + script$?: Observable