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
This commit is contained in:
Maurizio Vitale 2017-04-07 14:44:06 +01:00 committed by Mario Romano
parent 02052c3ea9
commit d2f7a6858f
4 changed files with 189 additions and 11 deletions

View File

@ -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,

View File

@ -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;
}

View File

@ -441,6 +441,65 @@ describe('DisplayValueWidget', () => {
expect(widget.value).toBe('<invalid value>');
});
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,

View File

@ -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;