diff --git a/lib/process-services/src/lib/process-list/components/start-process.component.html b/lib/process-services/src/lib/process-list/components/start-process.component.html index fc7cc0c1e4..fdba0a79c0 100644 --- a/lib/process-services/src/lib/process-list/components/start-process.component.html +++ b/lib/process-services/src/lib/process-list/components/start-process.component.html @@ -14,7 +14,7 @@ + [attr.data-automation-id]="'adf-start-process-apps-option-' + application.name"> {{ application.name }} @@ -38,13 +38,18 @@ {{ processDef.name }} - + + + + + + diff --git a/lib/process-services/src/lib/process-list/components/start-process.component.scss b/lib/process-services/src/lib/process-list/components/start-process.component.scss index 49e5be1581..fa69c869cc 100644 --- a/lib/process-services/src/lib/process-list/components/start-process.component.scss +++ b/lib/process-services/src/lib/process-list/components/start-process.component.scss @@ -33,6 +33,11 @@ right: -14px; top: 0; } + mat-spinner { + position: absolute; + right: -1px; + top: 0; + } } &-start-form-container { .mat-card { diff --git a/lib/process-services/src/lib/process-list/components/start-process.component.spec.ts b/lib/process-services/src/lib/process-list/components/start-process.component.spec.ts index 623a2c55b1..637a5936fc 100644 --- a/lib/process-services/src/lib/process-list/components/start-process.component.spec.ts +++ b/lib/process-services/src/lib/process-list/components/start-process.component.spec.ts @@ -686,5 +686,65 @@ describe('StartFormComponent', () => { const appsSelector = fixture.nativeElement.querySelector('[data-automation-id="adf-start-process-apps-drop-down"]'); expect(appsSelector).toBeNull(); }); + + it('Should be able to disable process name and definitions inputs if there is no application selected by default', () => { + component.appId = 12345; + const change = new SimpleChange(null, 12345, true); + component.ngOnChanges({ 'appId': change }); + fixture.detectChanges(); + expect(getDeployedApplicationsSpy).toHaveBeenCalled(); + expect(component.applications.length).toEqual(6); + expect(component.selectedApplication).toBeUndefined(); + + const processDefinitionSelectInput = fixture.nativeElement.querySelector('#processDefinitionName'); + const processNameInput = fixture.nativeElement.querySelector('#processName'); + + expect(processDefinitionSelectInput.disabled).toEqual(true); + expect(processNameInput.disabled).toEqual(true); + }); + + it('Should be able to enable process name and definitions inputs if the application selected by given appId', () => { + component.appId = 2; + const change = new SimpleChange(null, 2, true); + component.ngOnChanges({ 'appId': change }); + fixture.detectChanges(); + expect(getDeployedApplicationsSpy).toHaveBeenCalled(); + expect(component.applications.length).toEqual(6); + expect(component.selectedApplication.id).toEqual(component.appId); + + const processDefinitionSelectInput = fixture.nativeElement.querySelector('#processDefinitionName'); + const processNameInput = fixture.nativeElement.querySelector('#processName'); + + expect(processDefinitionSelectInput.disabled).toEqual(false); + expect(processNameInput.disabled).toEqual(false); + }); + + it('Should be able to enable process name and definitions inputs when the application selected from the apps drop-down', () => { + component.appId = 12345; + const change = new SimpleChange(null, 12345, true); + component.ngOnChanges({ 'appId': change }); + fixture.detectChanges(); + expect(getDeployedApplicationsSpy).toHaveBeenCalled(); + expect(component.applications.length).toEqual(6); + expect(component.selectedApplication).toBeUndefined(); + + const appsSelectElement = fixture.nativeElement.querySelector('[data-automation-id="adf-start-process-apps-drop-down"]'); + const processDefinitionSelectInput = fixture.nativeElement.querySelector('#processDefinitionName'); + const processNameInput = fixture.nativeElement.querySelector('#processName'); + + expect(processDefinitionSelectInput.disabled).toEqual(true); + expect(processNameInput.disabled).toEqual(true); + + appsSelectElement.click(); + fixture.detectChanges(); + const sortOptions = document.querySelector('[data-automation-id="adf-start-process-apps-option-App2"]'); + sortOptions.dispatchEvent(new Event('click')); + fixture.detectChanges(); + expect(component.selectedApplication.id).toBe(2); + expect(component.selectedApplication.name).toBe('App2'); + + expect(processDefinitionSelectInput.disabled).toEqual(false); + expect(processNameInput.disabled).toEqual(false); + }); }); }); diff --git a/lib/process-services/src/lib/process-list/components/start-process.component.ts b/lib/process-services/src/lib/process-list/components/start-process.component.ts index 6af624e874..795e4ab6c9 100644 --- a/lib/process-services/src/lib/process-list/components/start-process.component.ts +++ b/lib/process-services/src/lib/process-list/components/start-process.component.ts @@ -123,7 +123,7 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr alfrescoRepositoryName: string; applications: AppDefinitionRepresentationModel[] = []; selectedApplication: AppDefinitionRepresentationModel; - + isProcessDefinitionsLoading = true; private onDestroy$ = new Subject(); constructor(private activitiProcess: ProcessService, private activitiContentService: ActivitiContentService, @@ -217,6 +217,7 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr } loadProcessDefinitions(appId: any): void { + this.isProcessDefinitionsLoading = true; this.resetSelectedProcessDefinition(); this.resetErrorMessage(); @@ -245,9 +246,11 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr this.selectedProcessDef = filteredProcessDefinitions.currentProcessDef; this.processDefinitionInput.setValue(this.selectedProcessDef ? this.selectedProcessDef.name : ''); this.processDefinitionSelection.emit(this.selectedProcessDef); + this.isProcessDefinitionsLoading = false; }, () => { this.errorMessageId = 'ADF_PROCESS_LIST.START_PROCESS.ERROR.LOAD_PROCESS_DEFS'; + this.isProcessDefinitionsLoading = false; }); } @@ -260,6 +263,7 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr if (filteredProcessDef) { this.selectedProcessDef = filteredProcessDef; this.processDefinitionInput.setValue(this.selectedProcessDef ? this.selectedProcessDef.name : ''); + this.processDefinitionSelection.emit(this.selectedProcessDef); } } } @@ -288,6 +292,7 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr this.applications = filteredApps.applications; this.selectedApplication = filteredApps.currentApplication; this.applicationSelection.emit(this.selectedApplication); + this.toggleProcessNameAndDefinitionsDropdown(); this.loadProcessDefinitions(this.selectedApplication ? this.selectedApplication.id : null); }, err => { @@ -300,9 +305,14 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr onAppSelectionChange(selectedApplication: any) { this.selectedApplication = selectedApplication.value; this.applicationSelection.emit(this.selectedApplication); + this.toggleProcessNameAndDefinitionsDropdown(); this.loadProcessDefinitions(this.selectedApplication.id); } + private isAppSelected(): boolean { + return !!(this.selectedApplication && this.selectedApplication.id); + } + private removeDefaultApps(apps: AppDefinitionRepresentationModel []): AppDefinitionRepresentationModel[] { return apps.filter((app) => app.id); @@ -425,6 +435,20 @@ export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestr return this.processNameInput; } + get processDefinitionController(): AbstractControl { + return this.processDefinitionInput; + } + + private toggleProcessNameAndDefinitionsDropdown() { + if (!this.isAppSelected()) { + this.processDefinitionController.disable(); + this.nameController.disable(); + } else { + this.processDefinitionController.enable(); + this.nameController.enable(); + } + } + processDefinitionSelectionChanged(processDefinition) { this.selectedProcessDef = processDefinition; this.processDefinitionSelection.emit(this.selectedProcessDef);