diff --git a/docs/process-services-cloud/components/group-cloud.component.md b/docs/process-services-cloud/components/group-cloud.component.md index 7967a002b4c..0303b10ba41 100644 --- a/docs/process-services-cloud/components/group-cloud.component.md +++ b/docs/process-services-cloud/components/group-cloud.component.md @@ -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 | diff --git a/docs/process-services-cloud/components/people-cloud.component.md b/docs/process-services-cloud/components/people-cloud.component.md index d069e737cdd..021b6123888 100644 --- a/docs/process-services-cloud/components/people-cloud.component.md +++ b/docs/process-services-cloud/components/people-cloud.component.md @@ -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 | diff --git a/e2e-playwright/process-services-cloud/specs/groups-cloud.e2e.ts b/e2e-playwright/process-services-cloud/specs/groups-cloud.e2e.ts index f79d257eb3e..0d837201e22 100644 --- a/e2e-playwright/process-services-cloud/specs/groups-cloud.e2e.ts +++ b/e2e-playwright/process-services-cloud/specs/groups-cloud.e2e.ts @@ -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); }); }); diff --git a/e2e-playwright/process-services-cloud/specs/people-cloud.e2e.ts b/e2e-playwright/process-services-cloud/specs/people-cloud.e2e.ts index ff8d9b5c291..555aa9c1d9a 100644 --- a/e2e-playwright/process-services-cloud/specs/people-cloud.e2e.ts +++ b/e2e-playwright/process-services-cloud/specs/people-cloud.e2e.ts @@ -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 }) => { diff --git a/lib/core/form/components/form-renderer.component.spec.ts b/lib/core/form/components/form-renderer.component.spec.ts index 9f349b407f7..57766a4748d 100644 --- a/lib/core/form/components/form-renderer.component.spec.ts +++ b/lib/core/form/components/form-renderer.component.spec.ts @@ -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): 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): 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(); diff --git a/lib/core/form/components/widgets/amount/amount.widget.html b/lib/core/form/components/widgets/amount/amount.widget.html index 198eae35dba..63f4322862d 100644 --- a/lib/core/form/components/widgets/amount/amount.widget.html +++ b/lib/core/form/components/widgets/amount/amount.widget.html @@ -1,8 +1,8 @@
+ [attr.for]="field.id">{{field.name | translate }}* {{ currency }}   + [disabled]="field.readOnly" + (blur)="markAsTouched()"> -
diff --git a/lib/core/form/components/widgets/amount/amount.widget.spec.ts b/lib/core/form/components/widgets/amount/amount.widget.spec.ts index a6a6707e618..8e842a289d6 100644 --- a/lib/core/form/components/widgets/amount/amount.widget.spec.ts +++ b/lib/core/form/components/widgets/amount/amount.widget.spec.ts @@ -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; + 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: '' }), { + 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', () => { diff --git a/lib/core/form/components/widgets/checkbox/checkbox.widget.html b/lib/core/form/components/widgets/checkbox/checkbox.widget.html index 44c9886fe03..ca292a9a613 100644 --- a/lib/core/form/components/widgets/checkbox/checkbox.widget.html +++ b/lib/core/form/components/widgets/checkbox/checkbox.widget.html @@ -1,16 +1,19 @@
+ [class.adf-invalid]="!field.isValid && isTouched()"> {{field.name | translate }} - * + * + +
diff --git a/lib/core/form/components/widgets/checkbox/checkbox.widget.spec.ts b/lib/core/form/components/widgets/checkbox/checkbox.widget.spec.ts index 5fea34247a2..d72faa5d8b5 100644 --- a/lib/core/form/components/widgets/checkbox/checkbox.widget.spec.ts +++ b/lib/core/form/components/widgets/checkbox/checkbox.widget.spec.ts @@ -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')).toBeTruthy(); + }); + + it('should be able to display label with asterisk', async () => { fixture.detectChanges(); await fixture.whenStable(); - expect(element.querySelector('.adf-invalid')).not.toBeNull(); + const asterisk: HTMLElement = element.querySelector('.adf-asterisk'); + + expect(asterisk).toBeTruthy(); + expect(asterisk.textContent).toEqual('*'); }); it('should be checked if boolean true is passed', fakeAsync(() => { diff --git a/lib/core/form/components/widgets/date-time/date-time.widget.html b/lib/core/form/components/widgets/date-time/date-time.widget.html index 6d6d4d5e56a..50210dfbed0 100644 --- a/lib/core/form/components/widgets/date-time/date-time.widget.html +++ b/lib/core/form/components/widgets/date-time/date-time.widget.html @@ -1,6 +1,6 @@ -
+
- + - + { @@ -106,6 +107,38 @@ describe('DateTimeWidgetComponent', () => { expect(widget.onFieldChanged).toHaveBeenCalledWith(field); }); + describe('when is required', () => { + + beforeEach(() => { + widget.field = new FormFieldModel( new FormModel({ taskId: '' }), { + 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 () => { diff --git a/lib/core/form/components/widgets/date/date.widget.html b/lib/core/form/components/widgets/date/date.widget.html index 7c40a06a649..266e80e6350 100644 --- a/lib/core/form/components/widgets/date/date.widget.html +++ b/lib/core/form/components/widgets/date/date.widget.html @@ -1,17 +1,19 @@ -
+
- + + [placeholder]="field.placeholder" + (blur)="markAsTouched()"> - + { @@ -98,6 +99,38 @@ describe('DateWidgetComponent', () => { expect(widget.onFieldChanged).toHaveBeenCalledWith(field); }); + describe('when is required', () => { + + beforeEach(() => { + widget.field = new FormFieldModel( new FormModel({ taskId: '' }), { + 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(() => { diff --git a/lib/core/form/components/widgets/dropdown/dropdown.widget.html b/lib/core/form/components/widgets/dropdown/dropdown.widget.html index fa2d9eb593c..c77a1db3e92 100644 --- a/lib/core/form/components/widgets/dropdown/dropdown.widget.html +++ b/lib/core/form/components/widgets/dropdown/dropdown.widget.html @@ -1,12 +1,13 @@
- + [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly"> + + (ngModelChange)="onFieldChanged(field)" + (blur)="markAsTouched()"> {{opt.name}} @@ -15,6 +16,6 @@ -
diff --git a/lib/core/form/components/widgets/dropdown/dropdown.widget.spec.ts b/lib/core/form/components/widgets/dropdown/dropdown.widget.spec.ts index 3f94b0a913a..f343c3b0f30 100644 --- a/lib/core/form/components/widgets/dropdown/dropdown.widget.spec.ts +++ b/lib/core/form/components/widgets/dropdown/dropdown.widget.spec.ts @@ -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(); }); }); diff --git a/lib/core/form/components/widgets/dropdown/dropdown.widget.ts b/lib/core/form/components/widgets/dropdown/dropdown.widget.ts index 38a8d6bc68f..7db578acd15 100644 --- a/lib/core/form/components/widgets/dropdown/dropdown.widget.ts +++ b/lib/core/form/components/widgets/dropdown/dropdown.widget.ts @@ -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(); + } } diff --git a/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.html b/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.html index ac7d467fcec..f8b46cb3170 100644 --- a/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.html +++ b/lib/core/form/components/widgets/dynamic-table/dynamic-table.widget.html @@ -1,6 +1,6 @@
-
{{content.name | translate }}*
+
{{content.name | translate }}*
diff --git a/lib/core/form/components/widgets/error/error.component.html b/lib/core/form/components/widgets/error/error.component.html index 6a42f7b1148..99ae5edcba0 100644 --- a/lib/core/form/components/widgets/error/error.component.html +++ b/lib/core/form/components/widgets/error/error.component.html @@ -1,9 +1,10 @@ -
-
+
+
+ error_outline
{{error.message | translate:translateParameters}}
- warning
-
-
{{required}}
+
+ error_outline +
{{required}}
diff --git a/lib/core/form/components/widgets/error/error.component.scss b/lib/core/form/components/widgets/error/error.component.scss index 92b5d6ea4ca..faa6bfac4e2 100644 --- a/lib/core/form/components/widgets/error/error.component.scss +++ b/lib/core/form/components/widgets/error/error.component.scss @@ -1,3 +1,3 @@ -.adf-error-text { - width: 85%; +.adf-error { + display: flex; } diff --git a/lib/core/form/components/widgets/error/error.component.spec.ts b/lib/core/form/components/widgets/error/error.component.spec.ts new file mode 100644 index 00000000000..bbcea3bc595 --- /dev/null +++ b/lib/core/form/components/widgets/error/error.component.spec.ts @@ -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; + 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); + }); +}); diff --git a/lib/core/form/components/widgets/error/error.component.ts b/lib/core/form/components/widgets/error/error.component.ts index f15e781e032..6bc611a3963 100644 --- a/lib/core/form/components/widgets/error/error.component.ts +++ b/lib/core/form/components/widgets/error/error.component.ts @@ -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'; } } } diff --git a/lib/core/form/components/widgets/file-viewer/file-viewer.widget.html b/lib/core/form/components/widgets/file-viewer/file-viewer.widget.html index 95e3b0497fe..00c6489b02b 100644 --- a/lib/core/form/components/widgets/file-viewer/file-viewer.widget.html +++ b/lib/core/form/components/widgets/file-viewer/file-viewer.widget.html @@ -1,6 +1,6 @@
- diff --git a/lib/core/form/components/widgets/form.theme.scss b/lib/core/form/components/widgets/form.theme.scss index 544d66495c3..de0ec421144 100644 --- a/lib/core/form/components/widgets/form.theme.scss +++ b/lib/core/form/components/widgets/form.theme.scss @@ -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); - } - } } } diff --git a/lib/core/form/components/widgets/functional-group/functional-group.widget.html b/lib/core/form/components/widgets/functional-group/functional-group.widget.html index 9e044c6b75a..6fcfbd6d6e9 100644 --- a/lib/core/form/components/widgets/functional-group/functional-group.widget.html +++ b/lib/core/form/components/widgets/functional-group/functional-group.widget.html @@ -1,11 +1,11 @@
- + - +
diff --git a/lib/core/form/components/widgets/functional-group/functional-group.widget.spec.ts b/lib/core/form/components/widgets/functional-group/functional-group.widget.spec.ts index ffa7b4338c4..881c443e43e 100644 --- a/lib/core/form/components/widgets/functional-group/functional-group.widget.spec.ts +++ b/lib/core/form/components/widgets/functional-group/functional-group.widget.spec.ts @@ -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; 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: '' }), { + 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('*'); + }); + }); }); diff --git a/lib/core/form/components/widgets/hyperlink/hyperlink.widget.html b/lib/core/form/components/widgets/hyperlink/hyperlink.widget.html index 05e6d61eb34..8a75d32156f 100644 --- a/lib/core/form/components/widgets/hyperlink/hyperlink.widget.html +++ b/lib/core/form/components/widgets/hyperlink/hyperlink.widget.html @@ -1,5 +1,5 @@
-
{{linkText}} diff --git a/lib/core/form/components/widgets/multiline-text/multiline-text.widget.html b/lib/core/form/components/widgets/multiline-text/multiline-text.widget.html index ce924836721..2e1e552062a 100644 --- a/lib/core/form/components/widgets/multiline-text/multiline-text.widget.html +++ b/lib/core/form/components/widgets/multiline-text/multiline-text.widget.html @@ -1,7 +1,7 @@
+ [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly"> - + @@ -21,6 +22,7 @@ {{field?.value?.length || 0}}/{{field.maxLength}}
- + +
diff --git a/lib/core/form/components/widgets/multiline-text/multiline-text.widget.spec.ts b/lib/core/form/components/widgets/multiline-text/multiline-text.widget.spec.ts index e662f2d2104..b817b6e57fa 100644 --- a/lib/core/form/components/widgets/multiline-text/multiline-text.widget.spec.ts +++ b/lib/core/form/components/widgets/multiline-text/multiline-text.widget.spec.ts @@ -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; + 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: '' }), { + 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('*'); + }); + }); }); diff --git a/lib/core/form/components/widgets/number/number.widget.html b/lib/core/form/components/widgets/number/number.widget.html index 4e27656c0d3..1981d8d5a81 100644 --- a/lib/core/form/components/widgets/number/number.widget.html +++ b/lib/core/form/components/widgets/number/number.widget.html @@ -1,7 +1,7 @@
+ [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly"> - + - +
diff --git a/lib/core/form/components/widgets/people/people.widget.html b/lib/core/form/components/widgets/people/people.widget.html index d7ad337211b..c06884c234c 100644 --- a/lib/core/form/components/widgets/people/people.widget.html +++ b/lib/core/form/components/widgets/people/people.widget.html @@ -1,9 +1,9 @@
- + @@ -33,5 +34,5 @@ - +
diff --git a/lib/core/form/components/widgets/people/people.widget.spec.ts b/lib/core/form/components/widgets/people/people.widget.spec.ts index 82649a9d256..8ece4deae2d 100644 --- a/lib/core/form/components/widgets/people/people.widget.spec.ts +++ b/lib/core/form/components/widgets/people/people.widget.spec.ts @@ -155,6 +155,38 @@ describe('PeopleWidgetComponent', () => { }); }); + describe('when is required', () => { + + beforeEach(() => { + widget.field = new FormFieldModel( new FormModel({ taskId: '' }), { + 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 = [ diff --git a/lib/core/form/components/widgets/radio-buttons/radio-buttons.widget.html b/lib/core/form/components/widgets/radio-buttons/radio-buttons.widget.html index 5bafdf0fb59..98d625c0235 100644 --- a/lib/core/form/components/widgets/radio-buttons/radio-buttons.widget.html +++ b/lib/core/form/components/widgets/radio-buttons/radio-buttons.widget.html @@ -1,7 +1,7 @@
+ [class.adf-readonly]="field.readOnly" [id]="field.id">
- +
-
diff --git a/lib/core/form/components/widgets/text/text.widget.html b/lib/core/form/components/widgets/text/text.widget.html index 67b4e91432d..616c2fd54f6 100644 --- a/lib/core/form/components/widgets/text/text.widget.html +++ b/lib/core/form/components/widgets/text/text.widget.html @@ -1,7 +1,7 @@
+ [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly"> - + - +
diff --git a/lib/core/form/components/widgets/text/text.widget.spec.ts b/lib/core/form/components/widgets/text/text.widget.spec.ts index 686e3798ef5..bc34c4c05b7 100644 --- a/lib/core/form/components/widgets/text/text.widget.spec.ts +++ b/lib/core/form/components/widgets/text/text.widget.spec.ts @@ -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; diff --git a/lib/core/form/components/widgets/upload-folder/upload-folder.widget.html b/lib/core/form/components/widgets/upload-folder/upload-folder.widget.html index a2da544643f..7ab49c52d80 100644 --- a/lib/core/form/components/widgets/upload-folder/upload-folder.widget.html +++ b/lib/core/form/components/widgets/upload-folder/upload-folder.widget.html @@ -1,7 +1,7 @@
- +
diff --git a/lib/core/form/components/widgets/upload-folder/upload-folder.widget.spec.ts b/lib/core/form/components/widgets/upload-folder/upload-folder.widget.spec.ts index b453ec68575..e5ec401dafd 100644 --- a/lib/core/form/components/widgets/upload-folder/upload-folder.widget.spec.ts +++ b/lib/core/form/components/widgets/upload-folder/upload-folder.widget.spec.ts @@ -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; + 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: '' }), { + type: FormFieldTypes.UPLOAD, + required: true + }); + + fixture.detectChanges(); + await fixture.whenStable(); + + const asterisk: HTMLElement = element.querySelector('.adf-asterisk'); + + expect(asterisk).toBeTruthy(); + expect(asterisk.textContent).toEqual('*'); + }); + }); +}); diff --git a/lib/core/form/components/widgets/upload/upload.widget.html b/lib/core/form/components/widgets/upload/upload.widget.html index 6d71c63b04b..9e0fa1be717 100644 --- a/lib/core/form/components/widgets/upload/upload.widget.html +++ b/lib/core/form/components/widgets/upload/upload.widget.html @@ -1,7 +1,7 @@
- +
diff --git a/lib/core/form/components/widgets/widget.component.ts b/lib/core/form/components/widgets/widget.component.ts index a71c46779a8..53dcd838ed4 100644 --- a/lib/core/form/components/widgets/widget.component.ts +++ b/lib/core/form/components/widgets/widget.component.ts @@ -56,6 +56,8 @@ export class WidgetComponent implements AfterViewInit { @Output() fieldChanged: EventEmitter = new EventEmitter(); + 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; + } } diff --git a/lib/core/i18n/en.json b/lib/core/i18n/en.json index 6798f8606b4..276e84da086 100644 --- a/lib/core/i18n/en.json +++ b/lib/core/i18n/en.json @@ -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", diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.html b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.html index e307bf59eaf..00c714492fc 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.html +++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.html @@ -1,10 +1,10 @@
-
-
+
- +
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss index 17013e2be82..61446f8d34b 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss +++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.scss @@ -73,6 +73,7 @@ border-bottom: none; background: var(--theme-colors-mat-grey); min-height: 27px; + margin-bottom: 12px; .adf-label { width: 32px; diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.spec.ts b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.spec.ts index 55b388defa3..e2bc6d734c1 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.spec.ts +++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.spec.ts @@ -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: '' }), { + 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 () => { diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.ts b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.ts index ad55e625904..6f32e4f4eff 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.ts +++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/attach-file-cloud-widget.component.ts @@ -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 = []; } diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/upload-cloud.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/upload-cloud.widget.html index 932720d0042..7ecfeabc5da 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/upload-cloud.widget.html +++ b/lib/process-services-cloud/src/lib/form/components/widgets/attach-file/upload-cloud.widget.html @@ -1,6 +1,6 @@
-
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html index f0c71043cc4..b52db10c997 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html +++ b/lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html @@ -1,6 +1,7 @@ -
- - +
+ + - + + [class.adf-invalid]="(!field.isValid && isTouched()) || isRestApiFailed" [class.adf-readonly]="field.readOnly">
-
@@ -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 @@ - diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.scss b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.scss index 87fc50fd8f4..f523361fbd8 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.scss +++ b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.scss @@ -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; } } diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts index 8f05d60f792..df87d5b005a 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts +++ b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts @@ -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: '' }), { + 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'); diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts index a95dcfeb39e..8925ccd0369 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts +++ b/lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts @@ -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; + } } diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.html index c0b97224a7d..e364b5ca272 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.html +++ b/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.html @@ -1,20 +1,22 @@
-
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.spec.ts b/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.spec.ts new file mode 100644 index 00000000000..0359e3a8601 --- /dev/null +++ b/lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.spec.ts @@ -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; + 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: '' }), { + 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(); + }); + }); +}); diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.html index d316754c7bc..6b1da8b26f4 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.html +++ b/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.html @@ -1,6 +1,6 @@
- + [class.adf-invalid]="!field.isValid && isTouched()" [class.adf-readonly]="field.readOnly"> + +
diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.spec.ts b/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.spec.ts index 52d04a9b0e5..07194bd348d 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.spec.ts +++ b/lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.spec.ts @@ -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; 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: '' }), { + 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(); + }); + }); }); diff --git a/lib/process-services-cloud/src/lib/form/components/widgets/properties-viewer/properties-viewer.widget.html b/lib/process-services-cloud/src/lib/form/components/widgets/properties-viewer/properties-viewer.widget.html index 406bd712c42..8db67552c3a 100644 --- a/lib/process-services-cloud/src/lib/form/components/widgets/properties-viewer/properties-viewer.widget.html +++ b/lib/process-services-cloud/src/lib/form/components/widgets/properties-viewer/properties-viewer.widget.html @@ -1,6 +1,6 @@
- + [class.adf-readonly]="field.readOnly" [id]="field.id">
- +
-
diff --git a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.html b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.html index 7dc6f2c91ff..6d97f4742b2 100644 --- a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.html +++ b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.html @@ -1,5 +1,5 @@
- + {{ (title || 'ADF_CLOUD_GROUPS.SEARCH-GROUP') | translate }} @@ -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> @@ -58,23 +59,32 @@ mode="indeterminate"> - - warning - {{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate : { groupName : validateGroupsMessage } }} - - warning - {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_PATTERN' | translate: { pattern: getValidationPattern() } }} - - warning - {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MAX_LENGTH' | translate: { requiredLength: getValidationMaxLength() } }} - - - warning - {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MIN_LENGTH' | translate: { requiredLength: getValidationMinLength() } }} - - warning - {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.REQUIRED' | translate }} - - warning - {{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate : { groupName : searchedValue } }} +
+ + error_outline +
{{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate : { groupName : validateGroupsMessage } }}
+ + + error_outline +
{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_PATTERN' | translate: { pattern: getValidationPattern() } }}
+ + + error_outline +
{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MAX_LENGTH' | translate: { requiredLength: getValidationMaxLength() } }}
+ + + error_outline +
{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MIN_LENGTH' | translate: { requiredLength: getValidationMinLength() } }}
+ + + error_outline +
{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.REQUIRED' | translate }}
+ + + error_outline +
{{ 'ADF_CLOUD_GROUPS.ERROR.NOT_FOUND' | translate : { groupName : searchedValue } }}
+ +
diff --git a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.spec.ts index c0130f6795b..1c1e90340e8 100644 --- a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.spec.ts +++ b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.spec.ts @@ -219,6 +219,26 @@ describe('GroupCloudComponent', () => { done(); }); }); + + it('should display proper error icon', (done) => { + findGroupsByNameSpy.and.returnValue(of([])); + fixture.detectChanges(); + + const input = getElement('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', () => { diff --git a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts index bb99b0b5988..3fa2a168919 100644 --- a/lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts @@ -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(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; } diff --git a/lib/process-services-cloud/src/lib/i18n/en.json b/lib/process-services-cloud/src/lib/i18n/en.json index 98c4b72c243..3dfa95b0668 100644 --- a/lib/process-services-cloud/src/lib/i18n/en.json +++ b/lib/process-services-cloud/src/lib/i18n/en.json @@ -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": { diff --git a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html index de6e144309e..0a00b873523 100644 --- a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html +++ b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.html @@ -1,5 +1,5 @@
- + {{ title | translate }} @@ -53,23 +54,32 @@ mode="indeterminate"> - - warning - {{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName : validateUsersMessage } }} - - warning - {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_PATTERN' | translate: { pattern: getValidationPattern() } }} - - warning - {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MAX_LENGTH' | translate: { requiredLength: getValidationMaxLength() } }} - - - warning - {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MIN_LENGTH' | translate: { requiredLength: getValidationMinLength() } }} - - warning - {{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.REQUIRED' | translate }} - - warning - {{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName : searchedValue } }} +
+ + error_outline +
{{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName : validateUsersMessage } }}
+ + + error_outline +
{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_PATTERN' | translate: { pattern: getValidationPattern() } }}
+ + + error_outline +
{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MAX_LENGTH' | translate: { requiredLength: getValidationMaxLength() } }}
+ + + error_outline +
{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.INVALID_MIN_LENGTH' | translate: { requiredLength: getValidationMinLength() } }}
+ + + error_outline +
{{ 'ADF_CLOUD_PEOPLE_GROUPS.ERROR.REQUIRED' | translate }}
+ + + error_outline +
{{ 'ADF_CLOUD_USERS.ERROR.NOT_FOUND' | translate : { userName : searchedValue } }}
+ +
diff --git a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts index f3701baa600..d823a538b4d 100644 --- a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts +++ b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts @@ -327,6 +327,26 @@ describe('PeopleCloudComponent', () => { done(); }); }); + + it('should display proper error icon', (done) => { + findUsersByNameSpy.and.returnValue(of([])); + fixture.detectChanges(); + + const input = getElement('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', () => { diff --git a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts index b56b96dc320..f2779cb9629 100644 --- a/lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts @@ -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(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; } diff --git a/lib/process-services-cloud/src/lib/testing/process-service-cloud.testing.module.ts b/lib/process-services-cloud/src/lib/testing/process-service-cloud.testing.module.ts index 46e6f924b6d..98dca60f4a7 100644 --- a/lib/process-services-cloud/src/lib/testing/process-service-cloud.testing.module.ts +++ b/lib/process-services-cloud/src/lib/testing/process-service-cloud.testing.module.ts @@ -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, diff --git a/lib/process-services/src/lib/content-widget/attach-file-widget.component.html b/lib/process-services/src/lib/content-widget/attach-file-widget.component.html index 272310a6385..7fe8b4b00bd 100644 --- a/lib/process-services/src/lib/content-widget/attach-file-widget.component.html +++ b/lib/process-services/src/lib/content-widget/attach-file-widget.component.html @@ -1,8 +1,7 @@
@@ -16,7 +15,8 @@ (change)="onAttachFileChanged($event)" />
-
+
- + diff --git a/lib/process-services/src/lib/content-widget/attach-file-widget.component.ts b/lib/process-services/src/lib/content-widget/attach-file-widget.component.ts index 8f1c2e450a0..89cb550ffaa 100644 --- a/lib/process-services/src/lib/content-widget/attach-file-widget.component.ts +++ b/lib/process-services/src/lib/content-widget/attach-file-widget.component.ts @@ -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); diff --git a/lib/process-services/src/lib/task-list/components/start-task.component.scss b/lib/process-services/src/lib/task-list/components/start-task.component.scss index e070e4541f6..01c877d6572 100644 --- a/lib/process-services/src/lib/task-list/components/start-task.component.scss +++ b/lib/process-services/src/lib/task-list/components/start-task.component.scss @@ -49,7 +49,7 @@ adf-start-task { line-height: 0; } - .adf-error-text-container { + .adf-error-container { margin-top: -10px; } } diff --git a/lib/testing/src/lib/protractor/core/pages/form/form-fields.ts b/lib/testing/src/lib/protractor/core/pages/form/form-fields.ts index 56610e3dcd5..2c64fb4f18b 100644 --- a/lib/testing/src/lib/protractor/core/pages/form/form-fields.ts +++ b/lib/testing/src/lib/protractor/core/pages/form/form-fields.ts @@ -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']`);