From d2a6cd64aa7e0989c0c80455c883a1fcaf4d248e Mon Sep 17 00:00:00 2001 From: Abel Cota Date: Mon, 31 Aug 2026 16:08:03 -0600 Subject: [PATCH 1/3] -Applying changes to display properly the input warnings and submit form button --- .../form/process-form.component.html | 4 +-- .../form/process-form.component.spec.ts | 25 +++++++++++++++++++ .../form/process-form.component.ts | 24 ++++++++++++++++-- .../scripts-select.component.html | 2 +- .../scripts-select.component.spec.ts | 19 ++++++++++++++ .../scripts-select.component.ts | 5 ++++ 6 files changed, 74 insertions(+), 5 deletions(-) diff --git a/src/app/process-page/form/process-form.component.html b/src/app/process-page/form/process-form.component.html index 3bb6a796c6c..edf0ac4fc5e 100644 --- a/src/app/process-page/form/process-form.component.html +++ b/src/app/process-page/form/process-form.component.html @@ -5,10 +5,10 @@

- + {{ 'process.new.cancel' | translate }} - +
diff --git a/src/app/process-page/form/process-form.component.spec.ts b/src/app/process-page/form/process-form.component.spec.ts index 9d84f2774ca..c4acafd3e15 100644 --- a/src/app/process-page/form/process-form.component.spec.ts +++ b/src/app/process-page/form/process-form.component.spec.ts @@ -110,6 +110,31 @@ describe('ProcessFormComponent', () => { expect(scriptService.invoke).toHaveBeenCalled(); }); + it('should mark the form as submitted when submit is attempted', () => { + expect(component.submitted).toBeFalse(); + component.submitForm({ controls: {} } as any); + expect(component.submitted).toBeTrue(); + }); + + describe('when no script is selected', () => { + beforeEach(() => { + component.selectedScript = undefined; + }); + + it('should not invoke the script on submit', () => { + component.submitForm({ controls: {} } as any); + expect(scriptService.invoke).not.toHaveBeenCalled(); + }); + + it('should report that a script is not selected', () => { + expect(component.isScriptSelected).toBeFalse(); + }); + }); + + it('should report that a script is selected', () => { + expect(component.isScriptSelected).toBeTrue(); + }); + describe('when undefined parameters are provided', () => { beforeEach(() => { component.parameters = undefined; diff --git a/src/app/process-page/form/process-form.component.ts b/src/app/process-page/form/process-form.component.ts index 72f9e08d4a2..69f9fb78822 100644 --- a/src/app/process-page/form/process-form.component.ts +++ b/src/app/process-page/form/process-form.component.ts @@ -21,7 +21,10 @@ import { ProcessParameter } from '@dspace/core/processes/process-parameter.model import { getFirstCompletedRemoteData } from '@dspace/core/shared/operators'; import { Script } from '@dspace/core/shared/scripts/script.model'; import { ScriptParameter } from '@dspace/core/shared/scripts/script-parameter.model'; -import { isEmpty } from '@dspace/shared/utils/empty.util'; +import { + hasValue, + isEmpty, +} from '@dspace/shared/utils/empty.util'; import { TranslateModule, TranslateService, @@ -79,6 +82,19 @@ export class ProcessFormComponent implements OnInit { */ public missingParameters = []; + /** + * Indicates whether the form has been submitted + * Used to surface validation errors on an interrupted submission + */ + public submitted = false; + + /** + * Indicates whether a script has been selected + */ + get isScriptSelected(): boolean { + return hasValue(this.selectedScript); + } + constructor( private scriptService: ScriptDataService, private notificationsService: NotificationsService, @@ -95,10 +111,11 @@ export class ProcessFormComponent implements OnInit { * @param form */ submitForm(form: NgForm) { + this.submitted = true; if (isEmpty(this.parameters)) { this.parameters = []; } - if (!this.validateForm(form) || this.isRequiredMissing()) { + if (!this.isScriptSelected || !this.validateForm(form) || this.isRequiredMissing()) { return; } @@ -157,6 +174,9 @@ export class ProcessFormComponent implements OnInit { private isRequiredMissing() { this.missingParameters = []; + if (!this.isScriptSelected || isEmpty(this.selectedScript.parameters)) { + return false; + } const setParams: string[] = this.parameters .map((param) => param.name); const requiredParams: ScriptParameter[] = this.selectedScript.parameters.filter((param) => param.mandatory); diff --git a/src/app/process-page/form/scripts-select/scripts-select.component.html b/src/app/process-page/form/scripts-select/scripts-select.component.html index 2954e962716..86965046e63 100644 --- a/src/app/process-page/form/scripts-select/scripts-select.component.html +++ b/src/app/process-page/form/scripts-select/scripts-select.component.html @@ -39,7 +39,7 @@
- @if (script.invalid && (script.dirty || script.touched)) { + @if (script.invalid && (script.dirty || script.touched || submitted)) {
@if (script.errors.required) { diff --git a/src/app/process-page/form/scripts-select/scripts-select.component.spec.ts b/src/app/process-page/form/scripts-select/scripts-select.component.spec.ts index 2765edf3a11..dff5e60a0cb 100644 --- a/src/app/process-page/form/scripts-select/scripts-select.component.spec.ts +++ b/src/app/process-page/form/scripts-select/scripts-select.component.spec.ts @@ -110,6 +110,25 @@ describe('ScriptsSelectComponent', () => { expect(validationError).toBeFalsy(); })); + it('should show a validation error if the form was submitted but the input was left empty', fakeAsync(() => { + component.submitted = true; + fixture.detectChanges(); + tick(); + + const validationError = fixture.debugElement.query(By.css('.validation-error')); + expect(validationError).toBeTruthy(); + })); + + it('should not show a validation error if the form was submitted but the input was not left empty', fakeAsync(() => { + (component as any)._selectedScript.id = 'testValue'; + component.submitted = true; + fixture.detectChanges(); + tick(); + + const validationError = fixture.debugElement.query(By.css('.validation-error')); + expect(validationError).toBeFalsy(); + })); + it('should load more scripts when scrolled to the bottom', fakeAsync(() => { spyOn(component, 'loadScripts'); const event = { diff --git a/src/app/process-page/form/scripts-select/scripts-select.component.ts b/src/app/process-page/form/scripts-select/scripts-select.component.ts index a3564e520aa..205503fbc22 100644 --- a/src/app/process-page/form/scripts-select/scripts-select.component.ts +++ b/src/app/process-page/form/scripts-select/scripts-select.component.ts @@ -67,6 +67,11 @@ export class ScriptsSelectComponent implements OnInit, OnDestroy { * Emits the selected script when the selection changes */ @Output() select: EventEmitter