From fcda2228faeadc48f71f735e563032913db0b843 Mon Sep 17 00:00:00 2001 From: Vito Date: Wed, 11 Oct 2017 10:11:52 +0100 Subject: [PATCH] [ADF-1679] added translation for form field validators (#2455) * [ADF-1679] added translation for form field validators * [ADF-1679] fixed typeahead test --- .../activiti/demo-field-validator.ts | 2 +- .../widgets/core/error-message.model.ts | 45 +++++++++++++++++++ .../widgets/core/form-field-validator.spec.ts | 11 ++--- .../widgets/core/form-field-validator.ts | 30 ++++++++----- .../widgets/core/form-field.model.ts | 6 ++- .../src/components/widgets/core/index.ts | 1 + .../components/widgets/date/date.widget.html | 4 +- .../components/widgets/date/date.widget.ts | 19 +++----- .../widgets/error/error.component.html | 4 +- .../widgets/error/error.component.ts | 21 +++++---- .../widgets/people/people.widget.ts | 4 +- .../typeahead/typeahead.widget.spec.ts | 2 +- .../ng2-activiti-form/src/i18n/en.json | 11 ++++- 13 files changed, 110 insertions(+), 50 deletions(-) create mode 100644 ng2-components/ng2-activiti-form/src/components/widgets/core/error-message.model.ts diff --git a/demo-shell-ng2/app/components/activiti/demo-field-validator.ts b/demo-shell-ng2/app/components/activiti/demo-field-validator.ts index 3d0c391afa..d17fd63645 100644 --- a/demo-shell-ng2/app/components/activiti/demo-field-validator.ts +++ b/demo-shell-ng2/app/components/activiti/demo-field-validator.ts @@ -26,7 +26,7 @@ export class DemoFieldValidator implements FormFieldValidator { validate(field: FormFieldModel): boolean { if (this.isSupported(field)) { if (field.value && field.value.toLowerCase() === 'admin') { - field.validationSummary = 'Sorry, the value cannot be "admin".'; + field.validationSummary.message = 'Sorry, the value cannot be "admin".'; return false; } } diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/core/error-message.model.ts b/ng2-components/ng2-activiti-form/src/components/widgets/core/error-message.model.ts new file mode 100644 index 0000000000..0caf0b9665 --- /dev/null +++ b/ng2-components/ng2-activiti-form/src/components/widgets/core/error-message.model.ts @@ -0,0 +1,45 @@ +/*! + * @license + * Copyright 2016 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. + */ + +/* tslint:disable:component-selector */ + +export class ErrorMessageModel { + + message: string = ''; + attributes: Map = null; + + constructor(obj?: any) { + this.message = obj && obj.message ? obj.message : ''; + this.attributes = new Map(); + } + + isActive() { + return this.message ? true : false; + } + + getAttributesAsJsonObj() { + let result = {}; + if (this.attributes.size > 0) { + let obj = Object.create(null); + this.attributes.forEach((value, key) => { + obj[key] = value; + }); + result = JSON.stringify(obj); + } + return result; + } +} diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-validator.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-validator.spec.ts index 5a480e7773..cf517aa816 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-validator.spec.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-validator.spec.ts @@ -15,6 +15,7 @@ * limitations under the License. */ +import { ErrorMessageModel } from './error-message.model'; import { FormFieldOption } from './form-field-option'; import { FormFieldTypes } from './form-field-types'; import { @@ -229,7 +230,7 @@ describe('FormFieldValidator', () => { value: '' }); - field.validationSummary = null; + field.validationSummary = new ErrorMessageModel(); expect(validator.validate(field)).toBeFalsy(); expect(field.validationSummary).not.toBeNull(); }); @@ -282,7 +283,7 @@ describe('FormFieldValidator', () => { value: '12' }); - field.validationSummary = null; + field.validationSummary = new ErrorMessageModel(); expect(validator.validate(field)).toBeFalsy(); expect(field.validationSummary).not.toBeNull(); }); @@ -335,7 +336,7 @@ describe('FormFieldValidator', () => { value: '1234' }); - field.validationSummary = null; + field.validationSummary = new ErrorMessageModel(); expect(validator.validate(field)).toBeFalsy(); expect(field.validationSummary).not.toBeNull(); }); @@ -406,7 +407,7 @@ describe('FormFieldValidator', () => { minValue: '10' }); - field.validationSummary = null; + field.validationSummary = new ErrorMessageModel(); expect(validator.validate(field)).toBeFalsy(); expect(field.validationSummary).not.toBeNull(); }); @@ -478,7 +479,7 @@ describe('FormFieldValidator', () => { maxValue: '10' }); - field.validationSummary = null; + field.validationSummary = new ErrorMessageModel(); expect(validator.validate(field)).toBeFalsy(); expect(field.validationSummary).not.toBeNull(); }); diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-validator.ts b/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-validator.ts index 51639b3ca6..696e21d700 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-validator.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-validator.ts @@ -118,7 +118,7 @@ export class NumberFieldValidator implements FormFieldValidator { if (valueStr.match(pattern)) { return true; } - field.validationSummary = 'Incorrect number format'; + field.validationSummary.message = 'FORM.FIELD.VALIDATOR.INVALID_NUMBER'; return false; } return true; @@ -150,7 +150,7 @@ export class DateFieldValidator implements FormFieldValidator { if (DateFieldValidator.isValidDate(field.value, field.dateDisplayFormat)) { return true; } - field.validationSummary = field.dateDisplayFormat; + field.validationSummary.message = field.dateDisplayFormat; return false; } return true; @@ -173,7 +173,7 @@ export class MinDateFieldValidator implements FormFieldValidator { const dateFormat = field.dateDisplayFormat; if (!DateFieldValidator.isValidDate(field.value, dateFormat)) { - field.validationSummary = 'Invalid date format'; + field.validationSummary.message = 'FORM.FIELD.VALIDATOR.INVALID_DATE'; return false; } @@ -187,7 +187,8 @@ export class MinDateFieldValidator implements FormFieldValidator { let min = moment(field.minValue, dateFormat); if (d.isBefore(min)) { - field.validationSummary = `Should not be less than ${field.minValue}`; + field.validationSummary.message = `FORM.FIELD.VALIDATOR.NOT_LESS_THAN`; + field.validationSummary.attributes.set('minValue', field.minValue.toLocaleString()); return false; } } @@ -211,7 +212,7 @@ export class MaxDateFieldValidator implements FormFieldValidator { const dateFormat = field.dateDisplayFormat; if (!DateFieldValidator.isValidDate(field.value, dateFormat)) { - field.validationSummary = 'Invalid date format'; + field.validationSummary.message = 'FORM.FIELD.VALIDATOR.INVALID_DATE'; return false; } @@ -225,7 +226,8 @@ export class MaxDateFieldValidator implements FormFieldValidator { let max = moment(field.maxValue, dateFormat); if (d.isAfter(max)) { - field.validationSummary = `Should not be greater than ${field.maxValue}`; + field.validationSummary.message = `FORM.FIELD.VALIDATOR.NOT_GREATER_THAN`; + field.validationSummary.attributes.set('maxValue', field.maxValue.toLocaleString()); return false; } } @@ -251,7 +253,8 @@ export class MinLengthFieldValidator implements FormFieldValidator { if (field.value.length >= field.minLength) { return true; } - field.validationSummary = `Should be at least ${field.minLength} characters long.`; + field.validationSummary.message = `FORM.FIELD.VALIDATOR.AT_LEAST_LONG`; + field.validationSummary.attributes.set('minLength', field.minLength.toLocaleString()); return false; } return true; @@ -276,7 +279,8 @@ export class MaxLengthFieldValidator implements FormFieldValidator { if (field.value.length <= field.maxLength) { return true; } - field.validationSummary = `Should be ${field.maxLength} characters maximum.`; + field.validationSummary.message = `FORM.FIELD.VALIDATOR.NO_LONGER_THAN`; + field.validationSummary.attributes.set('maxLength', field.maxLength.toLocaleString()); return false; } return true; @@ -304,7 +308,8 @@ export class MinValueFieldValidator implements FormFieldValidator { if (value >= minValue) { return true; } - field.validationSummary = `Should not be less than ${field.minValue}`; + field.validationSummary.message = `FORM.FIELD.VALIDATOR.NOT_LESS_THAN`; + field.validationSummary.attributes.set('minValue', field.minValue.toLocaleString()); return false; } @@ -333,7 +338,8 @@ export class MaxValueFieldValidator implements FormFieldValidator { if (value <= maxValue) { return true; } - field.validationSummary = `Should not be greater than ${field.maxValue}`; + field.validationSummary.message = `FORM.FIELD.VALIDATOR.NOT_GREATER_THAN`; + field.validationSummary.attributes.set('maxValue', field.maxValue.toLocaleString()); return false; } @@ -358,7 +364,7 @@ export class RegExFieldValidator implements FormFieldValidator { if (field.value.length > 0 && field.value.match(new RegExp('^' + field.regexPattern + '$'))) { return true; } - field.validationSummary = 'Invalid value format'; + field.validationSummary.message = 'FORM.FIELD.VALIDATOR.INVALID_VALUE'; return false; } return true; @@ -399,7 +405,7 @@ export class FixedValueFieldValidator implements FormFieldValidator { validate(field: FormFieldModel): boolean { if (this.isSupported(field)) { if (this.hasStringValue(field) && this.hasOptions(field) && !this.hasValidNameOrValidId(field)) { - field.validationSummary = 'Invalid data inserted'; + field.validationSummary.message = 'FORM.FIELD.VALIDATOR.INVALID_VALUE'; return false; } } diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.ts b/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.ts index 8221e0a4ff..ce0dc170f6 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.ts @@ -19,6 +19,7 @@ import * as moment from 'moment'; import { WidgetVisibilityModel } from '../../../models/widget-visibility.model'; import { ContainerColumnModel } from './container-column.model'; +import { ErrorMessageModel } from './error-message.model'; import { FormFieldMetadata } from './form-field-metadata'; import { FormFieldOption } from './form-field-option'; import { FormFieldTypes } from './form-field-types'; @@ -75,7 +76,7 @@ export class FormFieldModel extends FormWidgetModel { // util members emptyOption: FormFieldOption; - validationSummary: string; + validationSummary: ErrorMessageModel; get value(): any { return this._value; @@ -117,7 +118,7 @@ export class FormFieldModel extends FormWidgetModel { } validate(): boolean { - this.validationSummary = null; + this.validationSummary = new ErrorMessageModel(); let validators = this.form.fieldValidators || []; for (let validator of validators) { @@ -165,6 +166,7 @@ export class FormFieldModel extends FormWidgetModel { this.currency = json.currency; this.dateDisplayFormat = json.dateDisplayFormat || this.defaultDateFormat; this._value = this.parseValue(json); + this.validationSummary = new ErrorMessageModel(); if (json.placeholder && json.placeholder !== '' && json.placeholder !== 'null') { this.placeholder = json.placeholder; diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/core/index.ts b/ng2-components/ng2-activiti-form/src/components/widgets/core/index.ts index 4c4cdbee83..4cd936b504 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/core/index.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/core/index.ts @@ -32,3 +32,4 @@ export * from './form-outcome.model'; export * from './form-outcome-event.model'; export * from './form-field-validator'; export * from './content-link.model'; +export * from './error-message.model'; diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.html index 3a890e20bb..275ead0059 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.html +++ b/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.html @@ -1,4 +1,4 @@ -
+
- +
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.ts index e02a174005..f4434775f0 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/date/date.widget.ts @@ -59,24 +59,15 @@ export class DateWidgetComponent extends WidgetComponent implements OnInit { this.maxDate = moment(this.field.maxValue, this.field.dateDisplayFormat); } } - this.displayDate = moment(this.field.value, this.field.dateDisplayFormat); - } onDateChanged(newDateValue) { - this.field.validationSummary = ''; - - if (newDateValue) { - let momentDate = newDateValue.value; - if (!momentDate.isValid()) { - this.field.validationSummary = this.field.dateDisplayFormat; - this.field.value = null; - } else { - this.field.value = momentDate; - this.displayDate = moment(this.field.value, this.field.dateDisplayFormat); - } - } else { + if (newDateValue && newDateValue.value) { + this.field.value = newDateValue.value.format(this.field.dateDisplayFormat); + }else if ( newDateValue ) { + this.field.value = newDateValue; + }else { this.field.value = null; } this.checkVisibility(this.field); diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/error/error.component.html b/ng2-components/ng2-activiti-form/src/components/widgets/error/error.component.html index abfc26a064..b683987faa 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/error/error.component.html +++ b/ng2-components/ng2-activiti-form/src/components/widgets/error/error.component.html @@ -1,6 +1,6 @@
-
-
{{error}}
+
+
{{error.message | translate:translateParameters}}
warning
diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/error/error.component.ts b/ng2-components/ng2-activiti-form/src/components/widgets/error/error.component.ts index b8450d22e5..f6fa7fc3bf 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/error/error.component.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/error/error.component.ts @@ -18,7 +18,8 @@ /* tslint:disable:component-selector */ import { animate, state, style, transition, trigger } from '@angular/animations'; -import { AfterViewInit, Component, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core'; +import { Component, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core'; +import { ErrorMessageModel } from '../core/index'; import { FormService } from './../../../services/form.service'; import { baseHost , WidgetComponent } from './../widget.component'; @@ -38,29 +39,33 @@ import { baseHost , WidgetComponent } from './../widget.component'; host: baseHost, encapsulation: ViewEncapsulation.None }) -export class ErrorWidgetComponent extends WidgetComponent implements AfterViewInit, OnChanges { +export class ErrorWidgetComponent extends WidgetComponent implements OnChanges { @Input() - error: string; + error: ErrorMessageModel; @Input() required: string; + translateParameters: any = null; + _subscriptAnimationState: string = ''; constructor(public formService: FormService) { super(formService); } - ngAfterViewInit() { - this._subscriptAnimationState = 'enter'; - } - ngOnChanges(changes: SimpleChanges) { if (changes['required']) { this.required = changes.required.currentValue; this._subscriptAnimationState = 'enter'; } + if (changes['error']) { + if (changes.error.currentValue.isActive()) { + this.error = changes.error.currentValue; + this.translateParameters = this.error.getAttributesAsJsonObj(); + this._subscriptAnimationState = 'enter'; + } + } } - } diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.ts index 48310cbe49..89ca390ab2 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/people/people.widget.ts @@ -93,12 +93,12 @@ export class PeopleWidgetComponent extends WidgetComponent implements OnInit { validateValue() { let validUserName = this.getUserFromValue(); if (validUserName) { - this.field.validationSummary = ''; + this.field.validationSummary.message = ''; this.field.value = validUserName; this.value = this.getDisplayName(validUserName); } else { this.field.value = ''; - this.field.validationSummary = 'Invalid value provided'; + this.field.validationSummary.message = 'Invalid value provided'; this.field.markAsInvalid(); this.field.form.markAsInvalid(); } diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.spec.ts index 681902efdb..63c629189c 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.spec.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/typeahead/typeahead.widget.spec.ts @@ -336,7 +336,7 @@ describe('TypeaheadWidgetComponent', () => { fixture.whenStable().then(() => { fixture.detectChanges(); expect(element.querySelector('.adf-error-text')).not.toBeNull(); - expect(element.querySelector('.adf-error-text').textContent).toContain('Invalid data inserted'); + expect(element.querySelector('.adf-error-text').textContent).toContain('FORM.FIELD.VALIDATOR.INVALID_VALUE'); }); })); diff --git a/ng2-components/ng2-activiti-form/src/i18n/en.json b/ng2-components/ng2-activiti-form/src/i18n/en.json index c4b7a443ad..c2aa16f79f 100644 --- a/ng2-components/ng2-activiti-form/src/i18n/en.json +++ b/ng2-components/ng2-activiti-form/src/i18n/en.json @@ -7,7 +7,16 @@ "IMAGE_NOT_AVAILABLE": "Preview not available" }, "FIELD": { - "REQUIRED" : "*Required" + "REQUIRED" : "*Required", + "VALIDATOR" : { + "INVALID_NUMBER" : "Incorrect number format", + "INVALID_DATE" : "Invalid date format", + "INVALID_VALUE": "Invalid value inserted", + "NOT_GREATER_THAN" : "Should not be greater than {{ maxValue }}", + "NOT_LESS_THAN" : "Should not be less than {{ minValue }}", + "AT_LEAST_LONG" : "Should be at least {{ minLength }} characters long.", + "NO_LONGER_THAN" : "Should be {{ maxLength }} characters maximum." + } } } }