inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-6345] New start process page APA (#7521)

Browse Source 
* [AAE-6345] New start process page APA

* [AAE-6345] Added test

* [AAE-6345] Update

* CR

* Revrite wrapper to component

* Quick fix to e2e

* Show errors as ng-content

* Add Inplace word

* Fix unit tests

* Fix e2e
This commit is contained in:
Bartosz Sekuła
2022-03-03 20:02:36 +01:00
committed by GitHub
parent 75f7360a35
commit 14a777c5d4
12 changed files with 240 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.html
View File

@@ -1,6 +1,8 @@
<mat-card class="adf-start-process">
<mat-card-title class="adf-title">{{'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.TITLE' | translate}}
<mat-card-title
*ngIf="showTitle"
class="adf-title">
{{'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.TITLE' | translate}}
</mat-card-title>
<mat-card-content>
@@ -9,8 +11,13 @@
</mat-card-subtitle>
<div *ngIf="!isProcessDefinitionsEmpty(); else emptyProcessDefinitionsList">
<form [formGroup]="processForm">
<mat-form-field class="adf-process-input-container" [floatLabel]="'always'">
<form [formGroup]="processForm" class="adf-select-process-form">
<mat-form-field
class="adf-process-input-container"
floatLabel="always"
*ngIf="showSelectProcessDropdown"
data-automation-id="adf-select-cloud-process-dropdown"
>
<mat-label>{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.TYPE' | translate }}</mat-label>
<input
#inputAutocomplete
@@ -25,7 +32,7 @@
{{ getProcessDefinitionValue(processDef) }}
</mat-option>
</mat-autocomplete>
<button id="adf-select-process-dropdown" *ngIf="showSelectProcessDropdown" mat-icon-button (click)="displayDropdown($event)">
<button id="adf-select-process-dropdown" mat-icon-button (click)="displayDropdown($event)">
<mat-icon>arrow_drop_down</mat-icon>
</button>
</div>
@@ -34,22 +41,17 @@
</mat-error>
</mat-form-field>
<mat-form-field class="adf-process-input-container" [floatLabel]="'always'">
<mat-label>{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.NAME' | translate }}</mat-label>
<input
matInput
formControlName="processInstanceName"
id="processName">
<mat-error id="adf-start-process-required-error" *ngIf="processInstanceName.hasError('required')">
<adf-inplace-form-input [control]="processInstanceName">
<span *ngIf="processInstanceName.hasError('required')">
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_NAME_REQUIRED' | translate }}
</mat-error>
<mat-error id="adf-start-process-maxlength-error" *ngIf="processInstanceName.hasError('maxlength')">
</span>
<span id="adf-start-process-maxlength-error" *ngIf="processInstanceName.hasError('maxlength')">
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.MAXIMUM_LENGTH' | translate : { characters : maxNameLength } }}
</mat-error>
<mat-error *ngIf="processInstanceName.hasError('pattern')">
</span>
<span *ngIf="processInstanceName.hasError('pattern')">
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.SPACE_VALIDATOR' | translate }}
</mat-error>
</mat-form-field>
</span>
</adf-inplace-form-input>
</form>
<ng-container *ngIf="hasForm() else taskFormCloudButtons">

15
lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.scss
View File

@@ -1,9 +1,5 @@
.adf {
&-start-process {
mat-form-field {
width: 100%;
}
.mat-form-field-label {
color: var(--theme-colors-mat-grey-dark);
}
@@ -17,14 +13,17 @@
}
}
&-select-process-form {
display: flex;
flex-direction: column;
}
&-title {
padding-bottom: 1.25em;
}
&-process-input-container {
mat-form-field {
width: 100%;
}
margin: 0 7px;
}
&-process-input-autocomplete {
@@ -37,7 +36,7 @@
}
}
&-start-form-container {
&-form-container {
.mat-card {
box-shadow: none !important;
padding: 0 !important;

56
lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.spec.ts
View File

@@ -165,7 +165,7 @@ describe('StartProcessCloudComponent', () => {
component.ngOnChanges({ appName: change });
fixture.detectChanges();
tick();
typeValueInto('#processName', 'OLE');
typeValueInto('[data-automation-id="adf-inplace-input"]', 'OLE');
typeValueInto('#processDefinitionName', 'processwithoutform2');
fixture.detectChanges();
tick(550);
@@ -242,7 +242,7 @@ describe('StartProcessCloudComponent', () => {
component.ngOnChanges({ appName: change });
fixture.detectChanges();
tick();
typeValueInto('#processName', 'My new process with form');
typeValueInto('[data-automation-id="adf-inplace-input"]', 'My new process with form');
typeValueInto('#processDefinitionName', 'processwithform');
fixture.detectChanges();
tick(550);
@@ -269,7 +269,7 @@ describe('StartProcessCloudComponent', () => {
fixture.detectChanges();
tick();
typeValueInto('#processName', 'My new process with form');
typeValueInto('[data-automation-id="adf-inplace-input"]', 'My new process with form');
typeValueInto('#processDefinitionName', 'processwithform');
fixture.detectChanges();
tick(550);
@@ -297,7 +297,7 @@ describe('StartProcessCloudComponent', () => {
fixture.detectChanges();
tick();
typeValueInto('#processName', 'My new process with form');
typeValueInto('[data-automation-id="adf-inplace-input"]', 'My new process with form');
typeValueInto('#processDefinitionName', 'processwithform');
fixture.detectChanges();
tick(550);
@@ -327,7 +327,7 @@ describe('StartProcessCloudComponent', () => {
fixture.detectChanges();
tick();
typeValueInto('#processName', 'My new process with form');
typeValueInto('[data-automation-id="adf-inplace-input"]', 'My new process with form');
typeValueInto('#processDefinitionName', 'processwithform');
fixture.detectChanges();
tick(4500);
@@ -582,18 +582,6 @@ describe('StartProcessCloudComponent', () => {
fixture.detectChanges();
});
it('should have labels for process name and type', async () => {
component.appName = 'myApp';
component.processDefinitionName = 'NewProcess 2';
component.ngOnChanges({ appName: firstChange });
fixture.detectChanges();
await fixture.whenStable();
const inputLabelsNodes = document.querySelectorAll('.adf-start-process .adf-process-input-container mat-label');
expect(inputLabelsNodes.length).toBe(2);
});
it('should have floating labels for process name and type', async () => {
component.appName = 'myApp';
component.processDefinitionName = 'NewProcess 2';
@@ -862,5 +850,39 @@ describe('StartProcessCloudComponent', () => {
expect(escapeKeyboardEvent.cancelBubble).toBe(true);
});
it('should hide title', () => {
component.showTitle = false;
fixture.detectChanges();
const title = fixture.debugElement.query(By.css('.adf-title'));
expect(title).toBeFalsy();
});
it('should show title', () => {
const title = fixture.debugElement.query(By.css('.adf-title'));
expect(title).toBeTruthy();
});
it('should show process definition dropdown', () => {
component.processDefinitionList = fakeProcessDefinitions;
fixture.detectChanges();
const processDropdown = fixture.debugElement.query(By.css('[data-automation-id="adf-select-cloud-process-dropdown"]'));
expect(processDropdown).toBeTruthy();
});
it('should hide process definition dropdown', () => {
component.processDefinitionList = fakeProcessDefinitions;
component.showSelectProcessDropdown = false;
fixture.detectChanges();
const processDropdown = fixture.debugElement.query(By.css('#processDefinitionName'));
expect(processDropdown).toBeFalsy();
});
});
});

8
lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.ts
View File

@@ -74,6 +74,10 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
@Input()
showSelectProcessDropdown: boolean = true;
/** Show/hide title. */
@Input()
showTitle: boolean = true;
/** Emitted when the process is successfully started. */
@Output()
success = new EventEmitter<ProcessInstanceCloud>();
@@ -369,8 +373,8 @@ export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy
return !!process.name ? process.name : process.key;
}
get processInstanceName(): AbstractControl {
return this.processForm.get('processInstanceName');
get processInstanceName(): FormControl {
return this.processForm.get('processInstanceName') as FormControl;
}
get processDefinition(): AbstractControl {