From d2f7a6858f8b109a148349ea7c261a645ee7194b Mon Sep 17 00:00:00 2001 From: Maurizio Vitale Date: Fri, 7 Apr 2017 14:44:06 +0100 Subject: [PATCH] Activiti form - Custom date format (#1806) * Fix format date| #1704 * Add unit tests on custom format date #1704 * Update form-field.model.ts * Update display-value.widget.ts --- .../widgets/core/form-field.model.spec.ts | 103 ++++++++++++++++++ .../widgets/core/form-field.model.ts | 24 ++-- .../display-value.widget.spec.ts | 59 ++++++++++ .../display-value/display-value.widget.ts | 14 ++- 4 files changed, 189 insertions(+), 11 deletions(-) diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.spec.ts index 1ae3a0c119..45b47162a5 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.spec.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.spec.ts @@ -121,6 +121,109 @@ describe('FormFieldModel', () => { expect(field.value).toBe('deferred'); }); + it('should parse the date with the default format (D-M-YYYY) if the display format is missing', () => { + let form = new FormModel(); + let field = new FormFieldModel(form, { + fieldType: 'FormFieldRepresentation', + id: 'mmddyyyy', + name: 'MM-DD-YYYY', + type: 'date', + value: '2017-04-28T00:00:00.000+0000', + required: false, + readOnly: false, + params: { + field: { + id: 'mmddyyyy', + name: 'MM-DD-YYYY', + type: 'date', + value: null, + required: false, + readOnly: false + } + } + }); + expect(field.value).toBe('28-4-2017'); + expect(form.values['mmddyyyy']).toEqual('2017-04-28T00:00:00.000Z'); + }); + + it('should parse the date with the format MM-DD-YYYY', () => { + let form = new FormModel(); + let field = new FormFieldModel(form, { + fieldType: 'FormFieldRepresentation', + id: 'mmddyyyy', + name: 'MM-DD-YYYY', + type: 'date', + value: '2017-04-28T00:00:00.000+0000', + required: false, + readOnly: false, + params: { + field: { + id: 'mmddyyyy', + name: 'MM-DD-YYYY', + type: 'date', + value: null, + required: false, + readOnly: false + } + }, + dateDisplayFormat: 'MM-DD-YYYY' + }); + expect(field.value).toBe('04-28-2017'); + expect(form.values['mmddyyyy']).toEqual('2017-04-28T00:00:00.000Z'); + }); + + it('should parse the date with the format MM-YY-DD', () => { + let form = new FormModel(); + let field = new FormFieldModel(form, { + fieldType: 'FormFieldRepresentation', + id: 'mmyydd', + name: 'MM-YY-DD', + type: 'date', + value: '2017-04-28T00:00:00.000+0000', + required: false, + readOnly: false, + params: { + field: { + id: 'mmyydd', + name: 'MM-YY-DD', + type: 'date', + value: null, + required: false, + readOnly: false + } + }, + dateDisplayFormat: 'MM-YY-DD' + }); + expect(field.value).toBe('04-17-28'); + expect(form.values['mmyydd']).toEqual('2017-04-28T00:00:00.000Z'); + }); + + it('should parse the date with the format DD-MM-YYYY', () => { + let form = new FormModel(); + let field = new FormFieldModel(form, { + fieldType: 'FormFieldRepresentation', + id: 'ddmmyyy', + name: 'DD-MM-YYYY', + type: 'date', + value: '2017-04-28T00:00:00.000+0000', + required: false, + readOnly: false, + params: { + field: { + id: 'ddmmyyy', + name: 'DD-MM-YYYY', + type: 'date', + value: null, + required: false, + readOnly: false + } + }, + dateDisplayFormat: 'DD-MM-YYYY' + }); + expect(field.value).toBe('28-04-2017'); + expect(form.values['ddmmyyy']).toEqual('2017-04-28T00:00:00.000Z'); + }); + it('should return the label of selected dropdown value ', () => { let field = new FormFieldModel(new FormModel(), { type: FormFieldTypes.DROPDOWN, 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 cba2e95728..6a20425aee 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 @@ -76,7 +76,7 @@ export class FormFieldModel extends FormWidgetModel { visibilityCondition: WidgetVisibilityModel = null; enableFractions: boolean = false; currency: string = null; - dateDisplayFormat: string = this.defaultDateFormat; + dateDisplayFormat: string = this.dateDisplayFormat || this.defaultDateFormat; // container model members numberOfColumns: number = 1; @@ -249,9 +249,14 @@ export class FormFieldModel extends FormWidgetModel { */ if (json.type === FormFieldTypes.DATE) { if (value) { - let d = moment(value.split('T')[0], 'YYYY-M-D'); - if (d.isValid()) { - value = d.format(this.dateDisplayFormat); + let dateValue; + if (NumberFieldValidator.isNumber(value)) { + dateValue = moment(value); + } else { + dateValue = moment(value.split('T')[0], 'YYYY-M-D'); + } + if (dateValue && dateValue.isValid()) { + value = dateValue.format(this.dateDisplayFormat); } } } @@ -307,9 +312,14 @@ export class FormFieldModel extends FormWidgetModel { } break; case FormFieldTypes.DATE: - let d = moment(this.value, this.dateDisplayFormat); - if (d.isValid()) { - this.form.values[this.id] = `${d.format('YYYY-MM-DD')}T00:00:00.000Z`; + let dateValue; + if (NumberFieldValidator.isNumber(this.value)) { + dateValue = moment(this.value); + } else { + dateValue = moment(this.value, this.dateDisplayFormat); + } + if (dateValue && dateValue.isValid()) { + this.form.values[this.id] = `${dateValue.format('YYYY-MM-DD')}T00:00:00.000Z`; } else { this.form.values[this.id] = null; } diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.spec.ts b/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.spec.ts index 207e51f4a1..49d5339b79 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.spec.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.spec.ts @@ -441,6 +441,65 @@ describe('DisplayValueWidget', () => { expect(widget.value).toBe(''); }); + it('should show the [DATE] field with the default format (D-M-YYYY) if the display format is missing', () => { + widget.field = new FormFieldModel(null, { + type: FormFieldTypes.DISPLAY_VALUE, + value: '1982-03-13T00:00:00.000Z', + params: { + field: { + type: FormFieldTypes.DATE + } + } + }); + widget.ngOnInit(); + expect(widget.value).toBe('13-3-1982'); + }); + + it('should show the [DATE] field with the custom display format (MM-DD-YYYY)', () => { + widget.field = new FormFieldModel(null, { + type: FormFieldTypes.DISPLAY_VALUE, + value: '1982-03-13T00:00:00.000Z', + dateDisplayFormat: 'MM-DD-YYYY', + params: { + field: { + type: FormFieldTypes.DATE + } + } + }); + widget.ngOnInit(); + expect(widget.value).toBe('03-13-1982'); + }); + + it('should show the [DATE] field with the custom display format (MM-YY-DD)', () => { + widget.field = new FormFieldModel(null, { + type: FormFieldTypes.DISPLAY_VALUE, + value: '1982-03-13T00:00:00.000Z', + dateDisplayFormat: 'MM-YY-DD', + params: { + field: { + type: FormFieldTypes.DATE + } + } + }); + widget.ngOnInit(); + expect(widget.value).toBe('03-82-13'); + }); + + it('should show the [DATE] field with the custom display format (DD-MM-YYYY)', () => { + widget.field = new FormFieldModel(null, { + type: FormFieldTypes.DISPLAY_VALUE, + value: '1982-03-13T00:00:00.000Z', + dateDisplayFormat: 'DD-MM-YYYY', + params: { + field: { + type: FormFieldTypes.DATE + } + } + }); + widget.ngOnInit(); + expect(widget.value).toBe('13-03-1982'); + }); + it('should not setup [DATE] field when missing value', () => { widget.field = new FormFieldModel(null, { type: FormFieldTypes.DISPLAY_VALUE, diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.ts b/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.ts index 12fcd4f040..b50edcce45 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.ts +++ b/ng2-components/ng2-activiti-form/src/components/widgets/display-value/display-value.widget.ts @@ -24,6 +24,7 @@ import { FormService } from '../../../services/form.service'; import { FormFieldOption } from './../core/form-field-option'; import { DynamicTableColumn, DynamicTableRow } from './../dynamic-table/dynamic-table.widget.model'; import { WidgetVisibilityService } from '../../../services/widget-visibility.service'; +import { NumberFieldValidator } from '../core/form-field-validator'; @Component({ moduleId: module.id, @@ -115,10 +116,15 @@ export class DisplayValueWidget extends WidgetComponent implements OnInit { break; case FormFieldTypes.DATE: if (this.value) { - let d = moment(this.value.split('T')[0], 'YYYY-M-D'); - if (d.isValid()) { - const displayFormat = originalField['dateDisplayFormat'] || this.field.defaultDateFormat; - this.value = d.format(displayFormat); + let dateValue; + if (NumberFieldValidator.isNumber(this.value)) { + dateValue = moment(this.value); + } else { + dateValue = moment(this.value.split('T')[0], 'YYYY-M-D'); + } + if (dateValue && dateValue.isValid()) { + const displayFormat = this.field.dateDisplayFormat || this.field.defaultDateFormat; + this.value = dateValue.format(displayFormat); } } break;