inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-06-30 18:15:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-7765] Improved display mandatory form fields (#7531)

Browse Source 
* [MNT-22765] Improved display mandatory form fields

* [MNT-22765] added unit tests

* [MNT-22765] fixed test with error icon on rest fail

* Trigger travis

* [MNT-22765] removed underscore from var name

* [AAE-7765] removed underscore from unit test

* [AAE-7765] fixed css lint

* [AAE-7765] fixed e2e error message css class

* [AAE-7765] fixed storybook e2e
This commit is contained in:
Tomasz Gnyp 2022-03-07 19:29:12 +01:00 committed by GitHub
parent e877cd822b
commit 3dc9f7cdfd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
67 changed files with 915 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/process-services-cloud/components/group-cloud.component.md
View File

@ -42,6 +42,7 @@ Searches Groups.
| mode | [`ComponentSelectionMode`](../../../lib/process-services-cloud/src/lib/types.ts) | "single" | Group selection mode (single/multiple). |
| preSelectGroups | [`IdentityGroupModel`](../../../lib/core/models/identity-group.model.ts)`[]` | \[] | Array of groups to be pre-selected. This pre-selects all groups in multi selection mode and only the first group of the array in single selection mode. |
| readOnly | `boolean` | false | Show the info in readonly mode |
| required | `boolean` | false | Mark this field as required |
| roles | `string[]` | \[] | Role names of the groups to be listed. |
| searchGroupsControl | `FormControl` | | FormControl to search the group |
| title | `string` | | Title of the field |

1
docs/process-services-cloud/components/people-cloud.component.md
View File

@ -30,6 +30,7 @@ Allows one or more users to be selected (with auto-suggestion) based on the inpu
| mode | [`ComponentSelectionMode`](../../../lib/process-services-cloud/src/lib/types.ts) | "single" | User selection mode (single/multiple). |
| preSelectUsers | [`IdentityUserModel`](../../../lib/core/models/identity-user.model.ts)`[]` | \[] | Array of users to be pre-selected. All users in the array are pre-selected in multi selection mode, but only the first user is pre-selected in single selection mode. Mandatory properties are: id, email, username |
| readOnly | `boolean` | false | Show the info in readonly mode |
| required | `boolean` | false | Mark this field as required |
| roles | `string[]` | | Role names of the users to be listed. |
| searchUserCtrl | `FormControl` | | FormControl to search the user |
| title | `string` | | Placeholder translation key |

5
e2e-playwright/process-services-cloud/specs/groups-cloud.e2e.ts
View File

@ -40,11 +40,12 @@ test.describe('Groups component stories tests', () => {
});
test('Invalid Preselected Groups', async ({ processServicesCloud, groupComponent }) => {
const expectedWarningMessage = 'warning No group found with the name invalid groups';
const expectedWarningMessage = 'No group found with the name invalid groups';
const expectedWarningIcon = 'error_outline';
await processServicesCloud.navigateTo({ componentName: 'group', story: 'invalid-preselected-groups' });
await expect(groupComponent.error.content).toContainText(expectedWarningMessage);
await expect(groupComponent.error.content).toContainText(expectedWarningIcon + expectedWarningMessage);
});
});

5
e2e-playwright/process-services-cloud/specs/people-cloud.e2e.ts
View File

@ -39,11 +39,12 @@ test.describe('People component stories tests', () => {
});
test('Invalid Preselected Users', async ({ processServicesCloud, peopleComponent }) => {
const expectedWarningMessage = 'warning No user found with the username invalid user';
const expectedWarningMessage = 'No user found with the username invalid user';
const expectedWarningIcon = 'error_outline';
await processServicesCloud.navigateTo({ componentName: 'people', story: 'invalid-preselected-users' });
await expect(peopleComponent.error.content).toContainText(expectedWarningMessage);
await expect(peopleComponent.error.content).toContainText(expectedWarningIcon + expectedWarningMessage);
});
test('Excluded Users', async ({ processServicesCloud, peopleComponent }) => {

25
lib/core/form/components/form-renderer.component.spec.ts
View File

@ -45,43 +45,39 @@ import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
const typeIntoInput = (targetInput: HTMLInputElement, message: string) => {
expect(targetInput).not.toBeNull('Expected input to set to be valid and not null');
expect(targetInput).toBeTruthy('Expected input to set to be valid and not null');
targetInput.value = message;
targetInput.dispatchEvent(new Event('input'));
};
const typeIntoDate = (targetInput: DebugElement, date: { srcElement: { value: string } }) => {
expect(targetInput).not.toBeNull('Expected input to set to be valid and not null');
expect(targetInput).toBeTruthy('Expected input to set to be valid and not null');
targetInput.triggerEventHandler('change', date);
};
const expectElementToBeHidden = (targetElement: HTMLElement): void => {
expect(targetElement).not.toBeNull();
expect(targetElement).toBeDefined();
expect(targetElement).toBeTruthy();
expect(targetElement.hidden).toBe(true, `${targetElement.id} should be hidden but it is not`);
};
const expectElementToBeVisible = (targetElement: HTMLElement): void => {
expect(targetElement).not.toBeNull();
expect(targetElement).toBeDefined();
expect(targetElement).toBeTruthy();
expect(targetElement.hidden).toBe(false, `${targetElement.id} should be visibile but it is not`);
};
const expectInputElementValueIs = (targetElement: HTMLInputElement, value: string): void => {
expect(targetElement).not.toBeNull();
expect(targetElement).toBeDefined();
expect(targetElement).toBeTruthy();
expect(targetElement.value).toBe(value, `invalid value for ${targetElement.name}`);
};
const expectElementToBeInvalid = (fieldId: string, fixture: ComponentFixture<FormRendererComponent>): void => {
const invalidElementContainer = fixture.nativeElement.querySelector(`#field-${fieldId}-container .adf-invalid`);
expect(invalidElementContainer).not.toBeNull();
expect(invalidElementContainer).toBeDefined();
expect(invalidElementContainer).toBeTruthy();
};
const expectElementToBeValid = (fieldId: string, fixture: ComponentFixture<FormRendererComponent>): void => {
const invalidElementContainer = fixture.nativeElement.querySelector(`#field-${fieldId}-container .adf-invalid`);
expect(invalidElementContainer).toBeNull();
expect(invalidElementContainer).toBeFalsy();
};
describe('Form Renderer Component', () => {
@ -407,6 +403,12 @@ describe('Form Renderer Component', () => {
const numberInputRequired: HTMLInputElement = fixture.nativeElement.querySelector('#Number0x8cbv');
expectElementToBeVisible(numberInputRequired);
expectElementToBeValid('Number0x8cbv', fixture);
numberInputRequired.dispatchEvent(new Event('blur'));
fixture.detectChanges();
await fixture.whenStable();
expectElementToBeInvalid('Number0x8cbv', fixture);
typeIntoInput(numberInputRequired, '5');
@ -444,6 +446,7 @@ describe('Form Renderer Component', () => {
expectElementToBeVisible(numberInputElement);
expectElementToBeValid('Number0him2z', fixture);
numberInputElement.dispatchEvent(new Event('blur'));
typeIntoInput(numberInputElement, '9');
fixture.detectChanges();
await fixture.whenStable();

9
lib/core/form/components/widgets/amount/amount.widget.html
View File

@ -1,8 +1,8 @@
<div class="adf-amount-widget__container adf-amount-widget {{field.className}}"
[class.adf-invalid]="!field.isValid"
[class.adf-invalid]="!field.isValid && isTouched()"
[class.adf-readonly]="field.readOnly">
<label class="adf-label"
[attr.for]="field.id">{{field.name | translate }}<span *ngIf="isRequired()">*</span></label>
[attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
<mat-form-field class="adf-amount-widget__input" [hideRequiredMarker]="true">
<span matPrefix class="adf-amount-widget__prefix-spacing">{{ currency }} &nbsp;</span>
<input matInput
@ -17,9 +17,10 @@
[value]="field.value"
[(ngModel)]="field.value"
(ngModelChange)="onFieldChanged(field)"
[disabled]="field.readOnly">
[disabled]="field.readOnly"
(blur)="markAsTouched()">
</mat-form-field>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired()"
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()"
required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>

38
lib/core/form/components/widgets/amount/amount.widget.spec.ts
View File

@ -20,14 +20,16 @@ import { FormFieldModel } from './../core/form-field.model';
import { AmountWidgetComponent, ADF_AMOUNT_SETTINGS } from './amount.widget';
import { setupTestBed } from '../../../../testing/setup-test-bed';
import { FormBaseModule } from '../../../form-base.module';
import { FormModel } from '../core';
import { FormFieldTypes } from '../core/form-field-types';
import { CoreTestingModule } from '../../../../testing/core.testing.module';
import { TranslateModule } from '@ngx-translate/core';
import { FormModel } from '../core/form.model';
describe('AmountWidgetComponent', () => {
let widget: AmountWidgetComponent;
let fixture: ComponentFixture<AmountWidgetComponent>;
let element: HTMLElement;
setupTestBed({
imports: [
@ -39,8 +41,8 @@ describe('AmountWidgetComponent', () => {
beforeEach(() => {
fixture = TestBed.createComponent(AmountWidgetComponent);
widget = fixture.componentInstance;
element = fixture.nativeElement;
});
it('should setup currency from field', () => {
@ -78,6 +80,38 @@ describe('AmountWidgetComponent', () => {
widget.ngOnInit();
expect(widget.placeholder).toBe('1234');
});
describe('when is required', () => {
beforeEach(() => {
widget.field = new FormFieldModel( new FormModel({ taskId: '<id>' }), {
type: FormFieldTypes.AMOUNT,
required: true
});
});
it('should be marked as invalid after interaction', async () => {
const amount = fixture.nativeElement.querySelector('input');
expect(element.querySelector('.adf-invalid')).toBeFalsy();
amount.dispatchEvent(new Event('blur'));
fixture.detectChanges();
await fixture.whenStable();
expect(fixture.nativeElement.querySelector('.adf-invalid')).toBeTruthy();
});
it('should be able to display label with asterisk', async () => {
fixture.detectChanges();
await fixture.whenStable();
const asterisk: HTMLElement = element.querySelector('.adf-asterisk');
expect(asterisk).toBeTruthy();
expect(asterisk.textContent).toEqual('*');
});
});
});
describe('AmountWidgetComponent - rendering', () => {

9
lib/core/form/components/widgets/checkbox/checkbox.widget.html
View File

@ -1,16 +1,19 @@
<div [ngClass]="field.className"
[class.adf-invalid]="!field.isValid">
[class.adf-invalid]="!field.isValid && isTouched()">
<mat-checkbox
[id]="field.id"
color="primary"
[required]="field.required"
[required]="isRequired()"
[disabled]="field.readOnly || readOnly"
[(ngModel)]="field.value"
(ngModelChange)="onFieldChanged(field)"
[matTooltip]="field.tooltip"
(click)="markAsTouched()"
matTooltipPosition="right"
matTooltipShowDelay="1000">
{{field.name | translate }}
<span *ngIf="field.required" >*</span>
<span class="adf-asterisk" *ngIf="isRequired()" >*</span>
</mat-checkbox>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>

24
lib/core/form/components/widgets/checkbox/checkbox.widget.spec.ts
View File

@ -21,9 +21,9 @@ import { FormFieldModel } from '../core/form-field.model';
import { FormModel } from '../core/form.model';
import { CheckboxWidgetComponent } from './checkbox.widget';
import { setupTestBed } from '../../../../testing/setup-test-bed';
import { FormBaseModule } from 'core/form/form-base.module';
import { FormBaseModule } from '../../../form-base.module';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateLoaderService } from 'core/services';
import { TranslateLoaderService } from '../../../../services/translate-loader.service';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { CoreTestingModule } from '../../../../testing';
import { MatTooltipModule } from '@angular/material/tooltip';
@ -69,11 +69,27 @@ describe('CheckboxWidgetComponent', () => {
});
});
it('should be marked as invalid when required', async () => {
it('should be marked as invalid when required after interaction', async () => {
const checkbox = element.querySelector('mat-checkbox');
expect(element.querySelector('.adf-invalid')).toBeFalsy();
checkbox.dispatchEvent(new Event('click'));
checkbox.dispatchEvent(new Event('click'));
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('.adf-invalid')).not.toBeNull();
expect(element.querySelector('.adf-invalid')).toBeTruthy();
});
it('should be able to display label with asterisk', async () => {
fixture.detectChanges();
await fixture.whenStable();
const asterisk: HTMLElement = element.querySelector('.adf-asterisk');
expect(asterisk).toBeTruthy();
expect(asterisk.textContent).toEqual('*');
});
it('should be checked if boolean true is passed', fakeAsync(() => {

7
lib/core/form/components/widgets/date-time/date-time.widget.html
View File

@ -1,6 +1,6 @@
<div class="{{field.className}}" id="data-time-widget" [class.adf-invalid]="!field.isValid">
<div class="{{field.className}}" id="data-time-widget" [class.adf-invalid]="!field.isValid && isTouched()">
<mat-form-field class="adf-date-time-widget" [hideRequiredMarker]="true">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }} ({{field.dateDisplayFormat}})<span *ngIf="isRequired()">*</span></label>
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }} ({{field.dateDisplayFormat}})<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
<input matInput
[id]="field.id"
[value]="field.value"
@ -9,13 +9,14 @@
(change)="onDateChanged($any($event).srcElement.value)"
[placeholder]="field.placeholder"
[matTooltip]="field.tooltip"
(blur)="markAsTouched()"
matTooltipPosition="above"
matTooltipShowDelay="1000"
(focus)="datetimePicker.open()">
<mat-datetimepicker-toggle matSuffix [for]="datetimePicker" [disabled]="field.readOnly"></mat-datetimepicker-toggle>
</mat-form-field>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
<mat-datetimepicker #datetimePicker type="datetime" [touchUi]="true" [timeInterval]="5" [disabled]="field.readOnly"></mat-datetimepicker>
<input
type="hidden"

33
lib/core/form/components/widgets/date-time/date-time.widget.spec.ts
View File

@ -24,6 +24,7 @@ import { setupTestBed } from '../../../../testing/setup-test-bed';
import { CoreTestingModule } from '../../../../testing/core.testing.module';
import { TranslateModule } from '@ngx-translate/core';
import { MatTooltipModule } from '@angular/material/tooltip';
import { FormFieldTypes } from '../core/form-field-types';
describe('DateTimeWidgetComponent', () => {
@ -106,6 +107,38 @@ describe('DateTimeWidgetComponent', () => {
expect(widget.onFieldChanged).toHaveBeenCalledWith(field);
});
describe('when is required', () => {
beforeEach(() => {
widget.field = new FormFieldModel( new FormModel({ taskId: '<id>' }), {
type: FormFieldTypes.DATETIME,
required: true
});
});
it('should be marked as invalid after interaction', async () => {
const dateTimeInput = fixture.nativeElement.querySelector('input');
expect(fixture.nativeElement.querySelector('.adf-invalid')).toBeFalsy();
dateTimeInput.dispatchEvent(new Event('blur'));
fixture.detectChanges();
await fixture.whenStable();
expect(fixture.nativeElement.querySelector('.adf-invalid')).toBeTruthy();
});
it('should be able to display label with asterisk', async () => {
fixture.detectChanges();
await fixture.whenStable();
const asterisk: HTMLElement = element.querySelector('.adf-asterisk');
expect(asterisk).toBeTruthy();
expect(asterisk.textContent).toEqual('*');
});
});
describe('template check', () => {
it('should show visible date widget', async () => {

10
lib/core/form/components/widgets/date/date.widget.html
View File

@ -1,17 +1,19 @@
<div class="{{field.className}}" id="data-widget" [class.adf-invalid]="!field.isValid">
<div class="{{field.className}}" id="data-widget" [class.adf-invalid]="!field.isValid && isTouched()">
<mat-form-field class="adf-date-widget" [hideRequiredMarker]="true">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }} ({{field.dateDisplayFormat}})<span *ngIf="isRequired()">*</span></label>
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }} ({{field.dateDisplayFormat}})<span class="adf-asterisk"
*ngIf="isRequired()">*</span></label>
<input matInput
[id]="field.id"
[value]="field.value"
[required]="isRequired()"
[disabled]="field.readOnly"
(change)="onDateChanged($any($event).srcElement.value)"
[placeholder]="field.placeholder">
[placeholder]="field.placeholder"
(blur)="markAsTouched()">
<mat-datepicker-toggle matSuffix [for]="datePicker" [disabled]="field.readOnly" ></mat-datepicker-toggle>
</mat-form-field>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
<mat-datepicker #datePicker [touchUi]="true" [startAt]="field.value | adfMomentDate: field.dateDisplayFormat" [disabled]="field.readOnly"></mat-datepicker>
<input
type="hidden"

33
lib/core/form/components/widgets/date/date.widget.spec.ts
View File

@ -23,6 +23,7 @@ import { DateWidgetComponent } from './date.widget';
import { setupTestBed } from '../../../../testing/setup-test-bed';
import { CoreTestingModule } from '../../../../testing/core.testing.module';
import { TranslateModule } from '@ngx-translate/core';
import { FormFieldTypes } from '../core/form-field-types';
describe('DateWidgetComponent', () => {
@ -98,6 +99,38 @@ describe('DateWidgetComponent', () => {
expect(widget.onFieldChanged).toHaveBeenCalledWith(field);
});
describe('when is required', () => {
beforeEach(() => {
widget.field = new FormFieldModel( new FormModel({ taskId: '<id>' }), {
type: FormFieldTypes.DATE,
required: true
});
});
it('should be marked as invalid after interaction', async () => {
const dateInput = fixture.nativeElement.querySelector('input');
expect(fixture.nativeElement.querySelector('.adf-invalid')).toBeFalsy();
dateInput.dispatchEvent(new Event('blur'));
fixture.detectChanges();
await fixture.whenStable();
expect(fixture.nativeElement.querySelector('.adf-invalid')).toBeTruthy();
});
it('should be able to display label with asterix', async () => {
fixture.detectChanges();
await fixture.whenStable();
const asterisk: HTMLElement = element.querySelector('.adf-asterisk');
expect(asterisk).toBeTruthy();
expect(asterisk.textContent).toEqual('*');
});
});
describe('template check', () => {
afterEach(() => {

9
lib/core/form/components/widgets/dropdown/dropdown.widget.html
View File

@ -1,12 +1,13 @@
<div class="adf-dropdown-widget {{field.className}}"
[class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span *ngIf="isRequired()">*</span></label>
[class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
<mat-form-field>
<mat-select class="adf-select"
[id]="field.id"
[(ngModel)]="field.value"
[disabled]="field.readOnly"
(ngModelChange)="onFieldChanged(field)">
(ngModelChange)="onFieldChanged(field)"
(blur)="markAsTouched()">
<mat-option *ngFor="let opt of field.options"
[value]="getOptionValue(opt, field.value)"
[id]="opt.id">{{opt.name}}
@ -15,6 +16,6 @@
</mat-select>
</mat-form-field>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired()"
<error-widget class="adf-dropdown-required-message" *ngIf="showRequiredMessage()"
required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>

22
lib/core/form/components/widgets/dropdown/dropdown.widget.spec.ts
View File

@ -130,22 +130,26 @@ describe('DropdownWidgetComponent', () => {
});
});
it('should be able to display label with asterix', async () => {
const label = 'MyLabel123';
widget.field.name = label;
it('should be able to display label with asterisk', async () => {
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('label').innerText).toBe(label + '*');
const asterisk: HTMLElement = element.querySelector('.adf-asterisk');
expect(asterisk).toBeTruthy();
expect(asterisk.textContent).toEqual('*');
});
it('should be invalid if no default option', async () => {
it('should be invalid if no default option after interaction', async () => {
expect(element.querySelector('.adf-invalid')).toBeFalsy();
const dropdownSelect = element.querySelector('.adf-select');
dropdownSelect.dispatchEvent(new Event('blur'));
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('.adf-invalid')).toBeDefined();
expect(element.querySelector('.adf-invalid')).not.toBeNull();
expect(element.querySelector('.adf-invalid')).toBeTruthy();
});
it('should be valid if default option', async () => {
@ -155,7 +159,7 @@ describe('DropdownWidgetComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('.adf-invalid')).toBeNull();
expect(element.querySelector('.adf-invalid')).toBeFalsy();
});
});

3
lib/core/form/components/widgets/dropdown/dropdown.widget.ts
View File

@ -113,4 +113,7 @@ export class DropdownWidgetComponent extends WidgetComponent implements OnInit {
return this.field.type === 'readonly';
}
showRequiredMessage(): boolean {
return (this.isInvalidFieldRequired() || this.field.value === 'empty') && this.isTouched();
}
}

2
lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.html
View File

@ -1,6 +1,6 @@
<div class="adf-dynamic-table-scrolling {{field.className}}"
[class.adf-invalid]="!isValid()">
<div class="adf-label">{{content.name | translate }}<span *ngIf="isRequired()">*</span></div>
<div class="adf-label">{{content.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></div>
<div *ngIf="!editMode">
<div class="adf-table-container">

11
lib/core/form/components/widgets/error/error.component.html
View File

@ -1,9 +1,10 @@
<div class="adf-error-text-container">
<div *ngIf="error?.isActive()" [@transitionMessages]="_subscriptAnimationState">
<div class="adf-error-container">
<div *ngIf="error?.isActive()" [@transitionMessages]="subscriptAnimationState" class="adf-error">
<mat-icon class="adf-error-icon">error_outline</mat-icon>
<div class="adf-error-text">{{error.message | translate:translateParameters}}</div>
<mat-icon class="adf-error-icon">warning</mat-icon>
</div>
<div *ngIf="required" [@transitionMessages]="_subscriptAnimationState">
<div class="adf-error-text">{{required}}</div>
<div *ngIf="required" [@transitionMessages]="subscriptAnimationState" class="adf-error">
<mat-icon class="adf-error-icon">error_outline</mat-icon>
<div class="adf-error-text">{{required}}</div>
</div>
</div>

4
lib/core/form/components/widgets/error/error.component.scss
View File

@ -1,3 +1,3 @@
.adf-error-text {
width: 85%;
.adf-error {
display: flex;
}

73
lib/core/form/components/widgets/error/error.component.spec.ts Normal file
View File

@ -0,0 +1,73 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { SimpleChange, SimpleChanges } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { setupTestBed } from '../../../../testing/setup-test-bed';
import { ErrorWidgetComponent } from './error.component';
import { CoreTestingModule } from '../../../../testing';
import { ErrorMessageModel } from '..';
describe('ErrorWidgetComponent', () => {
let widget: ErrorWidgetComponent;
let fixture: ComponentFixture<ErrorWidgetComponent>;
let element: HTMLElement;
setupTestBed({
imports: [
CoreTestingModule
]
});
beforeEach(() => {
fixture = TestBed.createComponent(ErrorWidgetComponent);
widget = fixture.componentInstance;
element = fixture.nativeElement;
});
const errorMessage: string = 'fake-error';
const errorMessageModel: ErrorMessageModel = new ErrorMessageModel({message: errorMessage});
const errorChanges: SimpleChanges = {
error: new SimpleChange(errorMessageModel, errorMessageModel, false)
};
it('should display proper error icon', async () => {
widget.ngOnChanges(errorChanges);
await fixture.whenStable();
fixture.detectChanges();
const errorIcon = element.querySelector('.adf-error-icon').textContent;
expect(errorIcon).toEqual('error_outline');
});
it('should set subscriptAnimationState value', () => {
widget.ngOnChanges(errorChanges);
expect(widget.subscriptAnimationState).toEqual('enter');
});
it('should check proper error message', async () => {
widget.ngOnChanges(errorChanges);
await fixture.whenStable();
fixture.detectChanges();
const requiredErrorText = element.querySelector('.adf-error-text').textContent;
expect(requiredErrorText).toEqual(errorMessage);
});
});

6
lib/core/form/components/widgets/error/error.component.ts
View File

@ -59,7 +59,7 @@ export class ErrorWidgetComponent extends WidgetComponent implements OnChanges {
translateParameters: any = null;
_subscriptAnimationState: string = '';
subscriptAnimationState: string = '';
constructor(public formService: FormService) {
super(formService);
@ -68,13 +68,13 @@ export class ErrorWidgetComponent extends WidgetComponent implements OnChanges {
ngOnChanges(changes: SimpleChanges) {
if (changes['required']) {
this.required = changes.required.currentValue;
this._subscriptAnimationState = 'enter';
this.subscriptAnimationState = 'enter';
}
if (changes['error'] && changes['error'].currentValue) {
if (changes.error.currentValue.isActive()) {
this.error = changes.error.currentValue;
this.translateParameters = this.error.getAttributesAsJsonObj();
this._subscriptAnimationState = 'enter';
this.subscriptAnimationState = 'enter';
}
}
}

2
lib/core/form/components/widgets/file-viewer/file-viewer.widget.html
View File

@ -1,6 +1,6 @@
<div class="adf-file-viewer-widget {{field.className}}" [class.adf-invalid]="!field.isValid"
[class.adf-readonly]="field.readOnly">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk"
*ngIf="isRequired()">*</span></label>
<adf-viewer [overlayMode]="false" [nodeId]="field.value" [showViewer]="field.value" [allowGoBack]="false"></adf-viewer>
<error-widget [error]="field.validationSummary"></error-widget>

43
lib/core/form/components/widgets/form.theme.scss
View File

@ -5,8 +5,12 @@ ul > li > form-field > .adf-focus {
}
}
.mat-form-field-label {
color: var(--theme-colors-mat-grey-dark) !important;
}
.adf {
&-error-text-container {
&-error-container {
height: 20px;
margin-top: -12px;
}
@ -16,40 +20,35 @@ ul > li > form-field > .adf-focus {
height: 16px;
font-size: var(--theme-caption-font-size);
line-height: 1.33;
float: left;
color: var(--theme-warn-color);
}
&-error-icon {
float: right;
font-size: var(--theme-adf-icon-1-font-size);
color: var(--theme-warn-color);
}
&-label {
color: rgb(186, 186, 186);
color: var(--theme-secondary-text-color);
}
&-asterisk {
padding-left: 2px;
color: var(--theme-warn-color);
}
&-invalid {
.mat-form-field-underline {
background-color: #f44336 !important;
.mat-checkbox-layout {
padding-bottom: 12px;
}
.mat-checkbox {
color: var(--theme-warn-color);
.mat-checkbox-frame {
border-color: var(--theme-warn-color);
}
.mat-form-field-underline {
background-color: var(--theme-warn-color) !important;
}
.mat-select {
&-value {
color: var(--theme-warn-color);
}
&-arrow {
color: var(--theme-warn-color);
color: var(--theme-secondary-text-color) !important;
}
}
@ -58,20 +57,12 @@ ul > li > form-field > .adf-focus {
}
.mat-form-field-prefix {
color: var(--theme-warn-color);
color: var(--theme-secondary-text-color);
}
.adf-input {
border-color: var(--theme-warn-color);
}
.adf-label {
color: var(--theme-warn-color);
&::after {
background-color: var(--theme-warn-color);
}
}
}
}

7
lib/core/form/components/widgets/functional-group/functional-group.widget.html
View File

@ -1,11 +1,11 @@
<div class="adf-group-widget {{field.className}}"
[class.is-dirty]="!!field.value"
[class.adf-invalid]="!field.isValid"
[class.adf-invalid]="!field.isValid && isTouched()"
[class.adf-readonly]="field.readOnly"
id="functional-group-div">
<mat-form-field>
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span *ngIf="isRequired()">*</span></label>
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
<input matInput
class="adf-input"
type="text"
@ -13,6 +13,7 @@
[id]="field.id"
[formControl]="searchTerm"
[placeholder]="field.placeholder"
(blur)="markAsTouched()"
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="updateOption($event.option.value)" [displayWith]="getDisplayName">
<mat-option *ngFor="let item of groups$ | async; let i = index"
@ -25,5 +26,5 @@
</mat-form-field>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>

35
lib/core/form/components/widgets/functional-group/functional-group.widget.spec.ts
View File

@ -24,12 +24,14 @@ import { FunctionalGroupWidgetComponent } from './functional-group.widget';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CoreTestingModule, setupTestBed } from '../../../../testing';
import { TranslateModule } from '@ngx-translate/core';
import { FormFieldTypes } from '../core/form-field-types';
describe('FunctionalGroupWidgetComponent', () => {
let fixture: ComponentFixture<FunctionalGroupWidgetComponent>;
let component: FunctionalGroupWidgetComponent;
let formService: FormService;
let getWorkflowGroupsSpy: jasmine.Spy;
let element: HTMLElement;
const groups: GroupModel[] = [
{ id: '1', name: 'group 1' },
{ id: '2', name: 'group 2' }
@ -49,6 +51,7 @@ describe('FunctionalGroupWidgetComponent', () => {
fixture = TestBed.createComponent(FunctionalGroupWidgetComponent);
component = fixture.componentInstance;
component.field = new FormFieldModel(new FormModel());
element = fixture.nativeElement;
fixture.detectChanges();
});
@ -148,4 +151,36 @@ describe('FunctionalGroupWidgetComponent', () => {
await typeIntoInput('123');
expect(getWorkflowGroupsSpy).not.toHaveBeenCalled();
});
describe('when is required', () => {
beforeEach(() => {
component.field = new FormFieldModel( new FormModel({ taskId: '<id>' }), {
type: FormFieldTypes.FUNCTIONAL_GROUP,
required: true
});
});
it('should be marked as invalid after interaction', async () => {
const functionalGroupInput = fixture.nativeElement.querySelector('input');
expect(fixture.nativeElement.querySelector('.adf-invalid')).toBeFalsy();
functionalGroupInput.dispatchEvent(new Event('blur'));
fixture.detectChanges();
await fixture.whenStable();
expect(fixture.nativeElement.querySelector('.adf-invalid')).toBeTruthy();
});
it('should be able to display label with asterisk', async () => {
fixture.detectChanges();
await fixture.whenStable();
const asterisk: HTMLElement = element.querySelector('.adf-asterisk');
expect(asterisk).toBeTruthy();
expect(asterisk.textContent).toEqual('*');
});
});
});

2
lib/core/form/components/widgets/hyperlink/hyperlink.widget.html
View File

@ -1,5 +1,5 @@
<div class="adf-hyperlink-widget {{field.className}}">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk"
*ngIf="isRequired()">*</span></label>
<div [matTooltip]="field.tooltip" matTooltipPosition="above" matTooltipShowDelay="1000">
<a [href]="linkUrl" target="_blank" rel="nofollow">{{linkText}}</a>

8
lib/core/form/components/widgets/multiline-text/multiline-text.widget.html
View File

@ -1,7 +1,7 @@
<div class="adf-multiline-text-widget {{field.className}}"
[class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly">
[class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly">
<mat-form-field floatPlaceholder="never" [hideRequiredMarker]="true">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span *ngIf="isRequired()">*</span></label>
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
<textarea matInput class="adf-input"
[matTextareaAutosize]="true"
type="text"
@ -13,6 +13,7 @@
[disabled]="field.readOnly || readOnly"
[placeholder]="field.placeholder"
[matTooltip]="field.tooltip"
(blur)="markAsTouched()"
matTooltipPosition="above"
matTooltipShowDelay="1000">
</textarea>
@ -21,6 +22,7 @@
<span>{{field?.value?.length || 0}}/{{field.maxLength}}</span>
</div>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget class="adf-multiline-required-message" *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
<error-widget class="adf-multiline-required-message" *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}">
</error-widget>
</div>

52
lib/core/form/components/widgets/multiline-text/multiline-text.widget.spec.ts
View File

@ -15,17 +15,67 @@
* limitations under the License.
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TranslateModule } from '@ngx-translate/core';
import { setupTestBed } from '../../../../testing/setup-test-bed';
import { MultilineTextWidgetComponentComponent } from './multiline-text.widget';
import { CoreTestingModule } from '../../../../testing/core.testing.module';
import { FormFieldModel } from '../core/form-field.model';
import { FormModel } from '../core/form.model';
import { FormFieldTypes } from '../core/form-field-types';
describe('MultilineTextWidgetComponentComponent', () => {
let widget: MultilineTextWidgetComponentComponent;
let fixture: ComponentFixture<MultilineTextWidgetComponentComponent>;
let element: HTMLElement;
setupTestBed({
imports: [
TranslateModule.forRoot(),
CoreTestingModule
]
});
beforeEach(() => {
widget = new MultilineTextWidgetComponentComponent(null);
fixture = TestBed.createComponent(MultilineTextWidgetComponentComponent);
widget = fixture.componentInstance;
element = fixture.nativeElement;
});
it('should exist', () => {
expect(widget).toBeDefined();
});
describe('when is required', () => {
beforeEach(() => {
widget.field = new FormFieldModel( new FormModel({ taskId: '<id>' }), {
type: FormFieldTypes.MULTILINE_TEXT,
required: true
});
});
it('should be marked as invalid after interaction', async () => {
const multilineTextarea = fixture.nativeElement.querySelector('textarea');
expect(fixture.nativeElement.querySelector('.adf-invalid')).toBeFalsy();
multilineTextarea.dispatchEvent(new Event('blur'));
fixture.detectChanges();
await fixture.whenStable();
expect(fixture.nativeElement.querySelector('.adf-invalid')).toBeTruthy();
});
it('should be able to display label with asterisk', async () => {
fixture.detectChanges();
await fixture.whenStable();
const asterisk: HTMLElement = element.querySelector('.adf-asterisk');
expect(asterisk).toBeTruthy();
expect(asterisk.textContent).toEqual('*');
});
});
});

7
lib/core/form/components/widgets/number/number.widget.html
View File

@ -1,7 +1,7 @@
<div class="adf-textfield adf-number-widget {{field.className}}"
[class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly">
[class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly">
<mat-form-field [hideRequiredMarker]="true">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span *ngIf="isRequired()">*</span></label>
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
<input matInput
class="adf-input"
type="text"
@ -14,9 +14,10 @@
[disabled]="field.readOnly"
[placeholder]="field.placeholder"
[matTooltip]="field.tooltip"
(blur)="markAsTouched()"
matTooltipPosition="above"
matTooltipShowDelay="1000">
</mat-form-field>
<error-widget [error]="field.validationSummary" ></error-widget>
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>

7
lib/core/form/components/widgets/people/people.widget.html
View File

@ -1,9 +1,9 @@
<div class="adf-people-widget {{field.className}}"
[class.adf-invalid]="!field.isValid"
[class.adf-invalid]="!field.isValid && isTouched()"
[class.adf-readonly]="field.readOnly"
id="people-widget-content">
<mat-form-field>
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span *ngIf="isRequired()">*</span></label>
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
<input #inputValue
matInput
class="adf-input"
@ -13,6 +13,7 @@
[formControl]="searchTerm"
[placeholder]="field.placeholder"
[matAutocomplete]="auto"
(blur)="markAsTouched()"
[matTooltip]="field.tooltip"
matTooltipPosition="above"
matTooltipShowDelay="1000">
@ -33,5 +34,5 @@
</mat-autocomplete>
</mat-form-field>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>

32
lib/core/form/components/widgets/people/people.widget.spec.ts
View File

@ -155,6 +155,38 @@ describe('PeopleWidgetComponent', () => {
});
});
describe('when is required', () => {
beforeEach(() => {
widget.field = new FormFieldModel( new FormModel({ taskId: '<id>' }), {
type: FormFieldTypes.PEOPLE,
required: true
});
});
it('should be marked as invalid after interaction', async () => {
const peopleInput = fixture.nativeElement.querySelector('input');
expect(fixture.nativeElement.querySelector('.adf-invalid')).toBeFalsy();
peopleInput.dispatchEvent(new Event('blur'));
fixture.detectChanges();
await fixture.whenStable();
expect(fixture.nativeElement.querySelector('.adf-invalid')).toBeTruthy();
});
it('should be able to display label with asterisk', async () => {
fixture.detectChanges();
await fixture.whenStable();
const asterisk: HTMLElement = element.querySelector('.adf-asterisk');
expect(asterisk).toBeTruthy();
expect(asterisk.textContent).toEqual('*');
});
});
describe('when template is ready', () => {
const fakeUserResult = [

5
lib/core/form/components/widgets/radio-buttons/radio-buttons.widget.html
View File

@ -1,7 +1,7 @@
<div class="adf-radio-buttons-widget {{field.className}}"
[class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly" [id]="field.id">
[class.adf-readonly]="field.readOnly" [id]="field.id">
<div class="adf-radio-button-container">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span *ngIf="isRequired()">*</span></label>
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
<mat-radio-group class="adf-radio-group" [(ngModel)]="field.value" [disabled]="field.readOnly">
<mat-radio-button
[matTooltip]="field.tooltip"
@ -19,5 +19,4 @@
</mat-radio-group>
</div>
<error-widget [error]="field.validationSummary" ></error-widget>
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>

7
lib/core/form/components/widgets/text/text.widget.html
View File

@ -1,7 +1,7 @@
<div class="adf-textfield adf-text-widget {{field.className}}"
[class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly">
[class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly">
<mat-form-field [hideRequiredMarker]="true">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span *ngIf="isRequired()">*</span></label>
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
<input matInput
class="adf-input"
type="text"
@ -14,9 +14,10 @@
[textMask]="{mask: mask, isReversed: isMaskReversed}"
[placeholder]="placeholder"
[matTooltip]="field.tooltip"
(blur)="markAsTouched()"
matTooltipPosition="above"
matTooltipShowDelay="1000">
</mat-form-field>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>

63
lib/core/form/components/widgets/text/text.widget.spec.ts
View File

@ -93,33 +93,6 @@ describe('TextWidgetComponent', () => {
expect(textWidgetLabel.innerText).toBe('text-name');
});
it('should be able to set a Text Widget as required', async () => {
widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
id: 'text-id',
name: 'text-name',
value: '',
type: FormFieldTypes.TEXT,
readOnly: false,
required: true
});
fixture.detectChanges();
const textWidgetLabel = element.querySelector('label');
expect(textWidgetLabel.innerText).toBe('text-name*');
expect(widget.field.isValid).toBe(false);
enterValueInTextField(element.querySelector('#text-id'), 'TEXT');
await fixture.whenStable();
fixture.detectChanges();
expect(widget.field.isValid).toBe(true);
enterValueInTextField(element.querySelector('#text-id'), '');
await fixture.whenStable();
fixture.detectChanges();
expect(widget.field.isValid).toBe(false);
});
it('should be able to set a placeholder for Text widget', async () => {
widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
id: 'text-id',
@ -222,6 +195,42 @@ describe('TextWidgetComponent', () => {
});
});
describe('when is required', () => {
beforeEach(() => {
widget.field = new FormFieldModel(new FormModel({ taskId: 'fake-task-id' }), {
id: 'text-id',
name: 'text-name',
value: '',
type: FormFieldTypes.TEXT,
readOnly: false,
required: true
});
});
it('should be marked as invalid after interaction', async () => {
const textInput = fixture.nativeElement.querySelector('input');
expect(fixture.nativeElement.querySelector('.adf-invalid')).toBeFalsy();
textInput.dispatchEvent(new Event('blur'));
fixture.detectChanges();
await fixture.whenStable();
expect(fixture.nativeElement.querySelector('.adf-invalid')).toBeTruthy();
});
it('should be able to display label with asterisk', async () => {
fixture.detectChanges();
await fixture.whenStable();
const asterisk: HTMLElement = element.querySelector('.adf-asterisk');
expect(asterisk).toBeTruthy();
expect(asterisk.textContent).toEqual('*');
});
});
describe('and no mask is configured on text element', () => {
let inputElement: HTMLInputElement;

2
lib/core/form/components/widgets/upload-folder/upload-folder.widget.html
View File

@ -1,7 +1,7 @@
<div class="adf-upload-folder-widget {{field.className}}"
[class.adf-invalid]="!field.isValid"
[class.adf-readonly]="field.readOnly">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span *ngIf="isRequired()">*</span></label>
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
<div class="adf-upload-widget-container">
</div>
</div>

45
lib/core/form/components/widgets/upload-folder/upload-folder.widget.spec.ts
View File

@ -14,3 +14,48 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { setupTestBed } from '../../../../testing/setup-test-bed';
import { CoreTestingModule } from '../../../../testing';
import { UploadFolderWidgetComponent } from './upload-folder.widget';
import { FormFieldModel } from '../core/form-field.model';
import { FormModel } from '../core/form.model';
import { FormFieldTypes } from '../core/form-field-types';
describe('UploadFolderWidgetComponent', () => {
let widget: UploadFolderWidgetComponent;
let fixture: ComponentFixture<UploadFolderWidgetComponent>;
let element: HTMLElement;
setupTestBed({
imports: [
CoreTestingModule
]
});
beforeEach(() => {
fixture = TestBed.createComponent(UploadFolderWidgetComponent);
widget = fixture.componentInstance;
element = fixture.nativeElement;
});
describe('when is required', () => {
it('should be able to display label with asterisk', async () => {
widget.field = new FormFieldModel( new FormModel({ taskId: '<id>' }), {
type: FormFieldTypes.UPLOAD,
required: true
});
fixture.detectChanges();
await fixture.whenStable();
const asterisk: HTMLElement = element.querySelector('.adf-asterisk');
expect(asterisk).toBeTruthy();
expect(asterisk.textContent).toEqual('*');
});
});
});

2
lib/core/form/components/widgets/upload/upload.widget.html
View File

@ -1,7 +1,7 @@
<div class="adf-upload-widget {{field.className}}"
[class.adf-invalid]="!field.isValid"
[class.adf-readonly]="field.readOnly">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span *ngIf="isRequired()">*</span></label>
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
<div class="adf-upload-widget-container">
<div>
<mat-list *ngIf="hasFile">

12
lib/core/form/components/widgets/widget.component.ts
View File

@ -56,6 +56,8 @@ export class WidgetComponent implements AfterViewInit {
@Output()
fieldChanged: EventEmitter<FormFieldModel> = new EventEmitter<FormFieldModel>();
touched: boolean = false;
constructor(public formService?: FormService) {
}
@ -76,6 +78,10 @@ export class WidgetComponent implements AfterViewInit {
return !!this.field.validationSummary;
}
isTouched(): boolean {
return this.touched;
}
hasValue(): boolean {
return this.field &&
this.field.value !== null &&
@ -83,7 +89,7 @@ export class WidgetComponent implements AfterViewInit {
}
isInvalidFieldRequired() {
return !this.field.isValid && !this.field.validationSummary && this.isRequired();
return !this.field.isValid && (!this.field.validationSummary || !this.field.value) && this.isRequired();
}
ngAfterViewInit() {
@ -101,4 +107,8 @@ export class WidgetComponent implements AfterViewInit {
event(event: Event): void {
this.formService.formEvents.next(event);
}
markAsTouched() {
this.touched = true;
}
}

2
lib/core/i18n/en.json
View File

@ -41,7 +41,7 @@
"DOWNLOAD_FILE": "Download",
"REMOVE_FILE": "Remove",
"UPLOAD": "UPLOAD",
"REQUIRED": "*Required",
"REQUIRED": "This is a required field",
"REST_API_FAILED": "The server `{{ hostname }}` is not reachable",
"FILE_NAME": "File Name",
"NO_FILE_ATTACHED": "No file attached",

8
lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.html
View File

@ -1,10 +1,10 @@
<div class="adf-attach-file-widget-container">
<div class="adf-attach-widget {{field.className}}" [class.adf-invalid]="!field.isValid"
<div class="adf-attach-widget {{field.className}}"
[class.adf-readonly]="field.readOnly">
<label class="adf-label" [attr.for]="field.id">{{field.name}}
<span *ngIf="isRequired()">*</span>
<span class="adf-asterisk" *ngIf="isRequired()">*</span>
</label>
<div class="adf-attach-widget-container">
<div class="adf-attach-widget-container" (focusout)="markAsTouched()">
<div class="adf-attach-widget__menu-upload" *ngIf="isUploadButtonVisible()">
<button (click)="openSelectDialog()" mat-raised-button color="primary" [id]="field.id"
[matTooltip]="field.tooltip" matTooltipPosition="above" matTooltipShowDelay="1000">
@ -36,5 +36,5 @@
</div>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
<error-widget *ngIf="!field.isValid && isTouched() && !isSelected()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>

1
lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss
View File

@ -73,6 +73,7 @@
border-bottom: none;
background: var(--theme-colors-mat-grey);
min-height: 27px;
margin-bottom: 12px;
.adf-label {
width: 32px;

18
lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.spec.ts
View File

@ -201,6 +201,24 @@ describe('AttachFileCloudWidgetComponent', () => {
expect(contentNodeSelectorPanelService.customModels).toEqual([]);
});
describe('when is required', () => {
it('should be able to display label with asterisk', async () => {
widget.field = new FormFieldModel( new FormModel({ taskId: '<id>' }), {
type: FormFieldTypes.UPLOAD,
required: true
});
fixture.detectChanges();
await fixture.whenStable();
const asterisk: HTMLElement = element.querySelector('.adf-asterisk');
expect(asterisk).toBeTruthy();
expect(asterisk.textContent).toEqual('*');
});
});
describe('Upload widget with displayable ContentModel properties', () => {
it('should display CM Properties if the file contains value', async () => {

4
lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.ts
View File

@ -255,6 +255,10 @@ export class AttachFileCloudWidgetComponent extends UploadCloudWidgetComponent i
return alias && VALID_ALIAS.includes(alias);
}
isSelected(): boolean {
return this.hasFile;
}
ngOnDestroy() {
this.contentNodeSelectorPanelService.customModels = [];
}

2
lib/process-services-cloud/src/lib/form/components/widgets/attach-file/upload-cloud.widget.html
View File

@ -1,6 +1,6 @@
<div class="adf-upload-widget {{field.className}}" [class.adf-invalid]="!field.isValid"
[class.adf-readonly]="field.readOnly">
<label class="adf-label" [attr.for]="field.id">{{ field.name | translate }}<span
<label class="adf-label" [attr.for]="field.id">{{ field.name | translate }}<span class="adf-asterisk"
*ngIf="isRequired()">*</span></label>
<div class="adf-cloud-upload-widget-container">
<div>

10
lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html
View File

@ -1,6 +1,7 @@
<div class="{{field.className}}" id="data-widget" [class.adf-invalid]="!field.isValid">
<mat-form-field class="adf-date-widget">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }} ({{field.dateDisplayFormat}})<span *ngIf="isRequired()">*</span></label>
<div class="{{field.className}}" id="data-widget" [class.adf-invalid]="!field.isValid && isTouched()">
<mat-form-field class="adf-date-widget" [hideRequiredMarker]="true">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }} ({{field.dateDisplayFormat}})<span class="adf-asterisk"
*ngIf="isRequired()">*</span></label>
<input matInput
[id]="field.id"
[value]="field.value"
@ -9,12 +10,13 @@
(change)="onDateChanged($any($event).srcElement.value)"
[placeholder]="field.placeholder"
[matTooltip]="field.tooltip"
(blur)="markAsTouched()"
matTooltipPosition="above"
matTooltipShowDelay="1000">
<mat-datepicker-toggle matSuffix [for]="datePicker" [disabled]="field.readOnly" ></mat-datepicker-toggle>
</mat-form-field>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired() && isTouched()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
<mat-datepicker #datePicker [touchUi]="true" [startAt]="field.value | adfMomentDate: field.dateDisplayFormat" [disabled]="field.readOnly"></mat-datepicker>
<input
type="hidden"

8
lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html
View File

@ -1,7 +1,7 @@
<div class="adf-dropdown-widget {{field.className}}"
[class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly">
[class.adf-invalid]="(!field.isValid && isTouched()) || isRestApiFailed" [class.adf-readonly]="field.readOnly">
<div class="adf-dropdown-widget-top-labels">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk"
*ngIf="isRequired()">*</span>
</label>
</div>
@ -13,7 +13,9 @@
[compareWith]="compareDropdownValues"
(ngModelChange)="selectionChangedForField(field)"
[matTooltip]="field.tooltip"
[required]="isRequired()"
panelClass="adf-select-filter"
(blur)="markAsTouched()"
matTooltipPosition="above"
matTooltipShowDelay="1000"
[multiple]="field.hasMultipleValues">
@ -27,7 +29,7 @@
</mat-select>
</mat-form-field>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired()"
<error-widget class="adf-dropdown-required-message" *ngIf="showRequiredMessage()"
required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
<error-widget class="adf-dropdown-failed-message" *ngIf="isRestApiFailed"
required="{{ 'FORM.FIELD.REST_API_FAILED' | translate: { hostname: restApiHostName } }}"></error-widget>

4
lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.scss
View File

@ -16,11 +16,11 @@
width: 100%;
}
&-dropdown-required-message .adf-error-text-container {
&-dropdown-required-message .adf-error-container {
margin-top: 1px !important;
}
&-dropdown-failed-message .adf-error-text-container {
&-dropdown-failed-message .adf-error-container {
margin-top: 1px !important;
}
}

44
lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts
View File

@ -19,7 +19,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { of, throwError } from 'rxjs';
import { DropdownCloudWidgetComponent } from './dropdown-cloud.widget';
import { FormFieldModel, FormModel, FormService, setupTestBed, FormFieldEvent } from '@alfresco/adf-core';
import { FormFieldModel, FormModel, FormService, setupTestBed, FormFieldEvent, FormFieldTypes } from '@alfresco/adf-core';
import { FormCloudService } from '../../../services/form-cloud.service';
import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module';
import { TranslateModule } from '@ngx-translate/core';
@ -160,6 +160,7 @@ describe('DropdownCloudWidgetComponent', () => {
it('should show error message if the restUrl failed to fetch options', async () => {
const jsonDataSpy = spyOn(formCloudService, 'getRestWidgetData').and.returnValue(throwError('Failed to fetch options'));
const errorIcon: string = 'error_outline';
widget.field.restUrl = 'https://fake-rest-url';
widget.field.optionType = 'rest';
widget.field.restIdProperty = 'name';
@ -173,11 +174,10 @@ describe('DropdownCloudWidgetComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const failedErrorMsgElement = fixture.debugElement.query(By.css('.adf-dropdown-failed-message'));
expect(jsonDataSpy).toHaveBeenCalled();
expect(widget.isRestApiFailed).toBe(true);
expect(widget.field.options.length).toEqual(0);
expect(failedErrorMsgElement.nativeElement.innerText.trim()).toBe('FORM.FIELD.REST_API_FAILED');
expect(failedErrorMsgElement.nativeElement.textContent.trim()).toBe(errorIcon + 'FORM.FIELD.REST_API_FAILED');
});
it('should preselect dropdown widget value when Json (rest call) passed', async () => {
@ -234,6 +234,41 @@ describe('DropdownCloudWidgetComponent', () => {
});
});
describe('when is required', () => {
beforeEach(() => {
widget.field = new FormFieldModel( new FormModel({ taskId: '<id>' }), {
type: FormFieldTypes.DROPDOWN,
required: true
});
});
it('should be able to display label with asterisk', async () => {
fixture.detectChanges();
await fixture.whenStable();
const asterisk: HTMLElement = element.querySelector('.adf-asterisk');
expect(asterisk).toBeTruthy();
expect(asterisk.textContent).toEqual('*');
});
it('should be invalid if no default option after interaction', async () => {
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('.adf-invalid')).toBeFalsy();
const dropdownSelect = element.querySelector('.adf-select');
dropdownSelect.dispatchEvent(new Event('blur'));
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('.adf-invalid')).toBeTruthy();
});
});
describe('filter', () => {
beforeEach(() => {
@ -391,6 +426,7 @@ describe('DropdownCloudWidgetComponent', () => {
it('should reset previous child options if the rest url failed for a linked dropdown', async () => {
const jsonDataSpy = spyOn(formCloudService, 'getRestWidgetData').and.returnValue(of(mockRestDropdownOptions));
const errorIcon: string = 'error_outline';
const mockParentDropdown = { id: 'parentDropdown', value: 'mock-value', validate: () => true };
spyOn(widget.field.form, 'getFormFields').and.returnValue([mockParentDropdown]);
@ -415,7 +451,7 @@ describe('DropdownCloudWidgetComponent', () => {
expect(widget.isRestApiFailed).toBe(true);
expect(widget.field.options.length).toBe(0);
expect(failedErrorMsgElement2.nativeElement.innerText.trim()).toBe('FORM.FIELD.REST_API_FAILED');
expect(failedErrorMsgElement2.nativeElement.textContent.trim()).toBe(errorIcon + 'FORM.FIELD.REST_API_FAILED');
jsonDataSpy.and.returnValue(of(mockSecondRestDropdownOptions));
selectParentOption('IT');

4
lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts
View File

@ -310,4 +310,8 @@ export class DropdownCloudWidgetComponent extends WidgetComponent implements OnI
return this.field?.restUrl;
}
}
showRequiredMessage(): boolean {
return (this.isInvalidFieldRequired() || this.field.value === 'empty') && this.isTouched() && !this.isRestApiFailed;
}
}

8
lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.html
View File

@ -1,20 +1,22 @@
<div class="adf-dropdown-widget {{field.className}}"
[class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span
[class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk"
*ngIf="isRequired()">*</span></label>
<adf-cloud-group [mode]="mode"
[title]="title"
[readOnly]="field.readOnly"
[roles]="roles"
[searchGroupsControl]="search"
[required]="isRequired()"
(changedGroups)="onChangedGroup($event)"
[preSelectGroups]="preSelectGroup"
(blur)="markAsTouched()"
[matTooltip]="field.tooltip"
[matTooltipPosition]="'above'"
[matTooltipShowDelay]="1000">
</adf-cloud-group>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired()"
<error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired() && isTouched()"
required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>

83
lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.spec.ts Normal file
View File

@ -0,0 +1,83 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { FormFieldModel, FormFieldTypes, FormModel, setupTestBed } from '@alfresco/adf-core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { GroupCloudWidgetComponent } from './group-cloud.widget';
import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module';
import { TranslateModule } from '@ngx-translate/core';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
describe('GroupCloudWidgetComponent', () => {
let fixture: ComponentFixture<GroupCloudWidgetComponent>;
let widget: GroupCloudWidgetComponent;
let element: HTMLElement;
setupTestBed({
imports: [
TranslateModule.forRoot(),
ProcessServiceCloudTestingModule
],
declarations: [
GroupCloudWidgetComponent
],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
});
beforeEach(() => {
fixture = TestBed.createComponent(GroupCloudWidgetComponent);
widget = fixture.componentInstance;
element = fixture.nativeElement;
});
describe('when is required', () => {
beforeEach(() => {
widget.field = new FormFieldModel( new FormModel({ taskId: '<id>' }), {
type: FormFieldTypes.GROUP,
required: true
});
});
it('should be able to display label with asterisk', async () => {
fixture.detectChanges();
await fixture.whenStable();
const asterisk: HTMLElement = element.querySelector('.adf-asterisk');
expect(asterisk).toBeTruthy();
expect(asterisk.textContent).toEqual('*');
});
it('should be invalid if no default option after interaction', async () => {
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('.adf-invalid')).toBeFalsy();
const cloudGroupInput = element.querySelector('adf-cloud-group');
cloudGroupInput.dispatchEvent(new Event('blur'));
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('.adf-invalid')).toBeTruthy();
});
});
});

8
lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.html
View File

@ -1,6 +1,6 @@
<div class="adf-dropdown-widget {{field.className}}"
[class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span *ngIf="isRequired()">*</span></label>
[class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
<adf-cloud-people
[preSelectUsers]="preSelectUsers"
[validate]="true"
@ -8,13 +8,17 @@
[title]="title"
[readOnly]="field.readOnly"
[searchUserCtrl]="search"
[required]="isRequired()"
(changedUsers)="onChangedUser($event)"
[roles]="roles"
[mode]="mode"
(blur)="markAsTouched()"
[matTooltip]="field.tooltip"
matTooltipPosition="above"
matTooltipShowDelay="1000">
</adf-cloud-people>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget class="adf-dropdown-required-message" *ngIf="isInvalidFieldRequired() && isTouched()"
required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>

42
lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.spec.ts
View File

@ -15,15 +15,17 @@
* limitations under the License.
*/
import { CoreTestingModule, FormFieldModel, FormModel, IdentityUserService, setupTestBed } from '@alfresco/adf-core';
import { FormFieldModel, FormFieldTypes, FormModel, IdentityUserService, setupTestBed } from '@alfresco/adf-core';
import { TranslateModule } from '@ngx-translate/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PeopleCloudWidgetComponent } from './people-cloud.widget';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { ProcessServiceCloudTestingModule } from '../../../../testing/process-service-cloud.testing.module';
describe('PeopleCloudWidgetComponent', () => {
let fixture: ComponentFixture<PeopleCloudWidgetComponent>;
let widget: PeopleCloudWidgetComponent;
let element: HTMLElement;
let identityUserService: IdentityUserService;
const currentUser = { id: 'id', username: 'user' };
const fakeUser = { id: 'fake-id', username: 'fake' };
@ -31,7 +33,7 @@ describe('PeopleCloudWidgetComponent', () => {
setupTestBed({
imports: [
TranslateModule.forRoot(),
CoreTestingModule
ProcessServiceCloudTestingModule
],
declarations: [
PeopleCloudWidgetComponent
@ -45,6 +47,7 @@ describe('PeopleCloudWidgetComponent', () => {
identityUserService = TestBed.inject(IdentityUserService);
fixture = TestBed.createComponent(PeopleCloudWidgetComponent);
widget = fixture.componentInstance;
element = fixture.nativeElement;
spyOn(identityUserService, 'getCurrentUserInfo').and.returnValue(fakeUser);
});
@ -61,4 +64,39 @@ describe('PeopleCloudWidgetComponent', () => {
expect(widget.preSelectUsers).toEqual([currentUser]);
expect(identityUserService.getCurrentUserInfo).not.toHaveBeenCalled();
});
describe('when is required', () => {
beforeEach(() => {
widget.field = new FormFieldModel( new FormModel({ taskId: '<id>' }), {
type: FormFieldTypes.PEOPLE,
required: true
});
});
it('should be able to display label with asterisk', async () => {
fixture.detectChanges();
await fixture.whenStable();
const asterisk: HTMLElement = element.querySelector('.adf-asterisk');
expect(asterisk).toBeTruthy();
expect(asterisk.textContent).toEqual('*');
});
it('should be invalid if no default option after interaction', async () => {
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('.adf-invalid')).toBeFalsy();
const cloudPeopleInput = element.querySelector('adf-cloud-people');
cloudPeopleInput.dispatchEvent(new Event('blur'));
fixture.detectChanges();
await fixture.whenStable();
expect(element.querySelector('.adf-invalid')).toBeTruthy();
});
});
});

2
lib/process-services-cloud/src/lib/form/components/widgets/properties-viewer/properties-viewer.widget.html
View File

@ -1,6 +1,6 @@
<div class="adf-file-viewer-widget {{field.className}}" [class.adf-invalid]="!field.isValid"
[class.adf-readonly]="field.readOnly">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk"
*ngIf="isRequired()">*</span></label>
<ng-template #properties [ngTemplateOutlet]="properties" let-properties="properties" [ngTemplateOutletContext]="{ properties: field.params?.propertiesViewerOptions }">
<adf-properties-viewer-wrapper *ngIf="field.value" [nodeId]="field.value"

5
lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.html
View File

@ -1,7 +1,7 @@
<div class="adf-radio-buttons-widget-cloud {{field.className}}"
[class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly" [id]="field.id">
[class.adf-readonly]="field.readOnly" [id]="field.id">
<div class="adf-radio-button-container">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span *ngIf="isRequired()">*</span></label>
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" *ngIf="isRequired()">*</span></label>
<mat-radio-group class="adf-radio-group" [(ngModel)]="field.value" [disabled]="field.readOnly">
<mat-radio-button
[matTooltip]="field.tooltip"
@ -19,5 +19,4 @@
</mat-radio-group>
</div>
<error-widget [error]="field.validationSummary" ></error-widget>
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div>

52
lib/process-services-cloud/src/lib/group/components/group-cloud.component.html
View File

@ -1,5 +1,5 @@
<form>
<mat-form-field class="adf-cloud-group">
<mat-form-field class="adf-cloud-group" [class.adf-invalid]="hasError() && isDirty()">
<mat-label *ngIf="!isReadonly()"
id="adf-group-cloud-title-id">{{ (title || 'ADF_CLOUD_GROUPS.SEARCH-GROUP') | translate }}</mat-label>
<mat-chip-list #groupChipList [disabled]="isReadonly() || isValidationLoading()" data-automation-id="adf-cloud-group-chip-list">
@ -20,8 +20,9 @@
[formControl]="searchGroupsControl"
[matAutocomplete]="auto"
[matChipInputFor]="groupChipList"
[required]="required"
(focus)="setFocus(true)"
(blur)="setFocus(false)"
(blur)="setFocus(false); markAsTouched()"
class="adf-group-input"
data-automation-id="adf-cloud-group-search-input" #groupInput>
</mat-chip-list>
@ -58,23 +59,32 @@
mode="indeterminate">
</mat-progress-bar>
<mat-error *ngIf="hasPreselectError() && !isValidationLoading()">
<mat-icon class="adf-start-task-cloud-error-icon">warning</mat-icon>
{{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate : { groupName : validateGroupsMessage } }}</mat-error>
<mat-error *ngIf="searchGroupsControl.hasError('pattern')">
<mat-icon class="adf-start-task-cloud-error-icon">warning</mat-icon>
{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_PATTERN' | translate: { pattern: getValidationPattern() } }}</mat-error>
<mat-error *ngIf="searchGroupsControl.hasError('maxlength')">
<mat-icon class="adf-start-task-cloud-error-icon">warning</mat-icon>
{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MAX_LENGTH' | translate: { requiredLength: getValidationMaxLength() } }}
</mat-error>
<mat-error *ngIf="searchGroupsControl.hasError('minlength')">
<mat-icon class="adf-start-task-cloud-error-icon">warning</mat-icon>
{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MIN_LENGTH' | translate: { requiredLength: getValidationMinLength() } }}</mat-error>
<mat-error *ngIf="searchGroupsControl.hasError('required') || groupChipsCtrl.hasError('required')">
<mat-icon class="adf-start-task-cloud-error-icon">warning</mat-icon>
{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.REQUIRED' | translate }} </mat-error>
<mat-error *ngIf="searchGroupsControl.hasError('searchTypingError') && !this.isFocused" data-automation-id="invalid-groups-typing-error">
<mat-icon class="adf-start-task-cloud-error-icon">warning</mat-icon>
{{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate : { groupName : searchedValue } }}</mat-error>
<div class="adf-error-container">
<mat-error *ngIf="hasPreselectError() && !isValidationLoading()" [@transitionMessages]="subscriptAnimationState" class="adf-error">
<mat-icon class="adf-error-icon">error_outline</mat-icon>
<div class="adf-error-text">{{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate : { groupName : validateGroupsMessage } }}</div>
</mat-error>
<mat-error *ngIf="searchGroupsControl.hasError('pattern')" [@transitionMessages]="subscriptAnimationState" class="adf-error">
<mat-icon class="adf-error-icon">error_outline</mat-icon>
<div class="adf-error-text">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_PATTERN' | translate: { pattern: getValidationPattern() } }}</div>
</mat-error>
<mat-error *ngIf="searchGroupsControl.hasError('maxlength')" [@transitionMessages]="subscriptAnimationState" class="adf-error">
<mat-icon class="adf-error-icon">error_outline</mat-icon>
<div class="adf-error-text">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MAX_LENGTH' | translate: { requiredLength: getValidationMaxLength() } }}</div>
</mat-error>
<mat-error *ngIf="searchGroupsControl.hasError('minlength')" [@transitionMessages]="subscriptAnimationState" class="adf-error">
<mat-icon class="adf-error-icon">error_outline</mat-icon>
<div class="adf-error-text">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MIN_LENGTH' | translate: { requiredLength: getValidationMinLength() } }}</div>
</mat-error>
<mat-error *ngIf="(searchGroupsControl.hasError('required') || groupChipsCtrl.hasError('required')) && isDirty()"
[@transitionMessages]="subscriptAnimationState" class="adf-error">
<mat-icon class="adf-error-icon">error_outline</mat-icon>
<div class="adf-error-text">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.REQUIRED' | translate }} </div>
</mat-error>
<mat-error *ngIf="searchGroupsControl.hasError('searchTypingError') && !this.isFocused"
data-automation-id="invalid-groups-typing-error" [@transitionMessages]="subscriptAnimationState" class="adf-error">
<mat-icon class="adf-error-icon">error_outline</mat-icon>
<div class="adf-error-text">{{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate : { groupName : searchedValue } }}</div>
</mat-error>
</div>
</form>

20
lib/process-services-cloud/src/lib/group/components/group-cloud.component.spec.ts
View File

@ -219,6 +219,26 @@ describe('GroupCloudComponent', () => {
done();
});
});
it('should display proper error icon', (done) => {
findGroupsByNameSpy.and.returnValue(of([]));
fixture.detectChanges();
const input = getElement<HTMLInputElement>('input');
input.focus();
input.value = 'ZZZ';
input.dispatchEvent(new Event('keyup'));
input.dispatchEvent(new Event('input'));
fixture.detectChanges();
fixture.whenStable().then(() => {
input.blur();
fixture.detectChanges();
const errorIcon = element.querySelector('.adf-error-icon').textContent;
expect(errorIcon).toEqual('error_outline');
done();
});
});
});
describe('when application name defined', () => {

24
lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts
View File

@ -83,6 +83,11 @@ export class GroupCloudComponent implements OnInit, OnChanges, OnDestroy {
@Input()
readOnly = false;
/** Mark this field as required
*/
@Input()
required = false;
/** FormControl to list of group */
@Input()
groupChipsCtrl = new FormControl({ value: '', disabled: false });
@ -121,9 +126,10 @@ export class GroupCloudComponent implements OnInit, OnChanges, OnDestroy {
invalidGroups: IdentityGroupModel[] = [];
searchGroups$ = new BehaviorSubject<IdentityGroupModel[]>(this.searchGroups);
_subscriptAnimationState = 'enter';
subscriptAnimationState: string = 'enter';
clientId: string;
isFocused: boolean;
touched: boolean = false;
validateGroupsMessage: string;
searchedValue = '';
@ -472,6 +478,22 @@ export class GroupCloudComponent implements OnInit, OnChanges, OnDestroy {
return this.isValidationEnabled() && this.validationLoading;
}
markAsTouched(): void {
this.touched = true;
}
isTouched(): boolean {
return this.touched;
}
isSelected(): boolean {
return this.selectedGroups && !!this.selectedGroups.length;
}
isDirty(): boolean {
return this.isTouched() && !this.isSelected();
}
setFocus(isFocused: boolean) {
this.isFocused = isFocused;
}

2
lib/process-services-cloud/src/lib/i18n/en.json
View File

@ -302,7 +302,7 @@
"INVALID_PATTERN": "Must match the pattern {{pattern}}",
"INVALID_MIN_LENGTH": "Must be at least {{requiredLength}} characters",
"INVALID_MAX_LENGTH": "Length exceeded, {{requiredLength}} characters max",
"REQUIRED": "Field required"
"REQUIRED": "This is a required field"
}
},
"ADF_CLOUD_TASK_HEADER": {

52
lib/process-services-cloud/src/lib/people/components/people-cloud.component.html
View File

@ -1,5 +1,5 @@
<form>
<mat-form-field [floatLabel]="'auto'" class="adf-people-cloud">
<mat-form-field [floatLabel]="'auto'" class="adf-people-cloud" [class.adf-invalid]="hasError() && isDirty()">
<mat-label *ngIf="!isReadonly()" id="adf-people-cloud-title-id">{{ title | translate }}</mat-label>
<mat-chip-list #userMultipleChipList [disabled]="isReadonly() || isValidationLoading()" data-automation-id="adf-cloud-people-chip-list">
<mat-chip
@ -20,8 +20,9 @@
[formControl]="searchUserCtrl"
[matAutocomplete]="auto"
[matChipInputFor]="userMultipleChipList"
[required]="required"
(focus)="setFocus(true)"
(blur)="setFocus(false)"
(blur)="setFocus(false); markAsTouched()"
class="adf-cloud-input"
data-automation-id="adf-people-cloud-search-input" #userInput>
</mat-chip-list>
@ -53,23 +54,32 @@
mode="indeterminate">
</mat-progress-bar>
<mat-error *ngIf="hasPreselectError() && !isValidationLoading()">
<mat-icon class="adf-start-task-cloud-error-icon">warning</mat-icon>
{{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName : validateUsersMessage } }}</mat-error>
<mat-error *ngIf="searchUserCtrl.hasError('pattern')">
<mat-icon class="adf-start-task-cloud-error-icon">warning</mat-icon>
{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_PATTERN' | translate: { pattern: getValidationPattern() } }}</mat-error>
<mat-error *ngIf="searchUserCtrl.hasError('maxlength')">
<mat-icon class="adf-start-task-cloud-error-icon">warning</mat-icon>
{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MAX_LENGTH' | translate: { requiredLength: getValidationMaxLength() } }}
</mat-error>
<mat-error *ngIf="searchUserCtrl.hasError('minlength')">
<mat-icon class="adf-start-task-cloud-error-icon">warning</mat-icon>
{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MIN_LENGTH' | translate: { requiredLength: getValidationMinLength() } }}</mat-error>
<mat-error *ngIf="searchUserCtrl.hasError('required') || userChipsCtrl.hasError('required')">
<mat-icon class="adf-start-task-cloud-error-icon">warning</mat-icon>
{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.REQUIRED' | translate }} </mat-error>
<mat-error *ngIf="searchUserCtrl.hasError('searchTypingError') && !this.isFocused" data-automation-id="invalid-users-typing-error">
<mat-icon class="adf-start-task-cloud-error-icon">warning</mat-icon>
{{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName : searchedValue } }}</mat-error>
<div class="adf-error-container">
<mat-error *ngIf="hasPreselectError() && !isValidationLoading()" [@transitionMessages]="subscriptAnimationState" class="adf-error">
<mat-icon class="adf-error-icon">error_outline</mat-icon>
<div class="adf-error-text">{{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName : validateUsersMessage } }}</div>
</mat-error>
<mat-error *ngIf="searchUserCtrl.hasError('pattern')" [@transitionMessages]="subscriptAnimationState" class="adf-error">
<mat-icon class="adf-error-icon">error_outline</mat-icon>
<div class="adf-error-text">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_PATTERN' | translate: { pattern: getValidationPattern() } }}</div>
</mat-error>
<mat-error *ngIf="searchUserCtrl.hasError('maxlength')" [@transitionMessages]="subscriptAnimationState" class="adf-error">
<mat-icon class="adf-error-icon">error_outline</mat-icon>
<div class="adf-error-text">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MAX_LENGTH' | translate: { requiredLength: getValidationMaxLength() } }}</div>
</mat-error>
<mat-error *ngIf="searchUserCtrl.hasError('minlength')" [@transitionMessages]="subscriptAnimationState" class="adf-error">
<mat-icon class="adf-error-icon">error_outline</mat-icon>
<div class="adf-error-text">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MIN_LENGTH' | translate: { requiredLength: getValidationMinLength() } }}</div>
</mat-error>
<mat-error *ngIf="(searchUserCtrl.hasError('required') || userChipsCtrl.hasError('required')) && isDirty()"
[@transitionMessages]="subscriptAnimationState" class="adf-error">
<mat-icon class="adf-error-icon">error_outline</mat-icon>
<div class="adf-error-text">{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.REQUIRED' | translate }}</div>
</mat-error>
<mat-error *ngIf="searchUserCtrl.hasError('searchTypingError') && !this.isFocused"
[@transitionMessages]="subscriptAnimationState" data-automation-id="invalid-users-typing-error" class="adf-error">
<mat-icon class="adf-error-icon">error_outline</mat-icon>
<div class="adf-error-text">{{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName : searchedValue } }}</div>
</mat-error>
</div>
</form>

20
lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts
View File

@ -327,6 +327,26 @@ describe('PeopleCloudComponent', () => {
done();
});
});
it('should display proper error icon', (done) => {
findUsersByNameSpy.and.returnValue(of([]));
fixture.detectChanges();
const input = getElement<HTMLInputElement>('input');
input.focus();
input.value = 'ZZZ';
input.dispatchEvent(new Event('keyup'));
input.dispatchEvent(new Event('input'));
fixture.detectChanges();
fixture.whenStable().then(() => {
input.blur();
fixture.detectChanges();
const errorIcon = element.querySelector('.adf-error-icon').textContent;
expect(errorIcon).toEqual('error_outline');
done();
});
});
});
describe('when application name defined', () => {

24
lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts
View File

@ -84,6 +84,11 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy {
@Input()
readOnly: boolean = false;
/** Mark this field as required
*/
@Input()
required = false;
/** Array of users to be pre-selected. All users in the
* array are pre-selected in multi selection mode, but only the first user
* is pre-selected in single selection mode.
@ -137,9 +142,10 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy {
invalidUsers: IdentityUserModel[] = [];
searchUsers$ = new BehaviorSubject<IdentityUserModel[]>(this._searchUsers);
_subscriptAnimationState: string = 'enter';
subscriptAnimationState: string = 'enter';
clientId: string;
isFocused: boolean;
touched: boolean = false;
validateUsersMessage: string;
searchedValue = '';
@ -535,6 +541,22 @@ export class PeopleCloudComponent implements OnInit, OnChanges, OnDestroy {
return this.isValidationEnabled() && this.validationLoading;
}
markAsTouched(): void {
this.touched = true;
}
isTouched(): boolean {
return this.touched;
}
isSelected(): boolean {
return this.selectedUsers && !!this.selectedUsers.length;
}
isDirty(): boolean {
return this.isTouched() && !this.isSelected();
}
setFocus(isFocused: boolean) {
this.isFocused = isFocused;
}

10
lib/process-services-cloud/src/lib/testing/process-service-cloud.testing.module.ts
View File

@ -25,7 +25,11 @@ import {
AppConfigServiceMock,
TranslationService,
TranslationMock,
CoreModule
CoreModule,
IdentityUserService,
IdentityUserServiceMock,
IdentityGroupService,
IdentityGroupServiceMock
} from '@alfresco/adf-core';
import { TranslateModule } from '@ngx-translate/core';
import { ProcessServicesCloudModule } from '../process-services-cloud.module';
@ -43,7 +47,9 @@ import { RouterTestingModule } from '@angular/router/testing';
providers: [
{ provide: AlfrescoApiService, useClass: AlfrescoApiServiceMock },
{ provide: AppConfigService, useClass: AppConfigServiceMock },
{ provide: TranslationService, useClass: TranslationMock }
{ provide: TranslationService, useClass: TranslationMock },
{ provide: IdentityUserService, useClass: IdentityUserServiceMock },
{ provide: IdentityGroupService, useClass: IdentityGroupServiceMock }
],
exports: [
NoopAnimationsModule,

8
lib/process-services/src/lib/content-widget/attach-file-widget.component.html
View File

@ -1,8 +1,7 @@
<div class="adf-attach-widget {{field.className}}"
[class.adf-invalid]="!field.isValid"
[class.adf-readonly]="field.readOnly">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate}}
<span *ngIf="isRequired()">*</span>
<span class="adf-asterisk" *ngIf="isRequired()">*</span>
</label>
<div class="adf-attach-widget-container">
<div id="adf-attach-widget-simple-upload" *ngIf="isSimpleUploadButton() && isUploadButtonVisible()">
@ -16,7 +15,8 @@
(change)="onAttachFileChanged($event)" />
</a>
</div>
<div class="adf-attach-widget__menu-upload" *ngIf="isUploadButtonVisible() && isMultipleSourceUpload()">
<div class="adf-attach-widget__menu-upload" (focusout)="markAsTouched()"
*ngIf="isUploadButtonVisible() && isMultipleSourceUpload()">
<button mat-raised-button color="primary" [matMenuTriggerFor]="menu" [id]="field.id">
{{ 'FORM.FIELD.UPLOAD' | translate }}
<mat-icon>attach_file</mat-icon>
@ -99,4 +99,4 @@
</div>
<error-widget [error]="field.validationSummary"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
<error-widget *ngIf="!field.isValid && isTouched() && !isSelected()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>

4
lib/process-services/src/lib/content-widget/attach-file-widget.component.ts
View File

@ -227,6 +227,10 @@ export class AttachFileWidgetComponent extends UploadWidgetComponent implements
}
}
isSelected(): boolean {
return this.hasFile;
}
private isExternalHost(repository: AlfrescoEndpointRepresentation): boolean {
const currentECMHost = this.getDomainHost(this.appConfigService.get(AppConfigValues.ECMHOST));
const chosenRepositoryHost = this.getDomainHost(repository.repositoryUrl);

2
lib/process-services/src/lib/task-list/components/start-task.component.scss
View File

@ -49,7 +49,7 @@ adf-start-task {
line-height: 0;
}
.adf-error-text-container {
.adf-error-container {
margin-top: -10px;
}
}

2
lib/testing/src/lib/protractor/core/pages/form/form-fields.ts
View File

@ -36,7 +36,7 @@ export class FormFields {
completeButton = $('#adf-form-complete');
completeNoFormButton = $('#adf-no-form-complete-button');
cancelButton = $('#adf-no-form-cancel-button');
errorMessage: Locator = by.css('.adf-error-text-container .adf-error-text');
errorMessage: Locator = by.css('.adf-error-container .adf-error-text');
getWidget = (fieldId: string): ElementFinder => $(`adf-form-field div[id='field-${fieldId}-container']`);