diff --git a/src/components/ElementEditor/ElementEditor.tsx b/src/components/ElementEditor/ElementEditor.tsx index c355c465..40575d7e 100644 --- a/src/components/ElementEditor/ElementEditor.tsx +++ b/src/components/ElementEditor/ElementEditor.tsx @@ -15,6 +15,7 @@ import { RequestMethod, STRING_ELEMENT_OPTIONS, TEST_IDS, + TIME_TRANSFORMATION_OPTIONS, } from '../../constants'; import { CodeLanguage, LocalFormElement, QueryField } from '../../types'; import { @@ -356,6 +357,18 @@ export const ElementEditor: React.FC = ({ value={element.max} data-testid={TEST_IDS.formElementsEditor.fieldMaxDate} /> + + { + onChange({ + ...element, + isUseLocalTime: value, + }); + }} + /> + )} diff --git a/src/components/FormElement/FormElement.tsx b/src/components/FormElement/FormElement.tsx index ca329fd9..be9c808e 100644 --- a/src/components/FormElement/FormElement.tsx +++ b/src/components/FormElement/FormElement.tsx @@ -283,7 +283,7 @@ export const FormElement: React.FC = ({ element, onChange, highlightClass onChange={(dateTime: DateTime) => { onChange({ ...element, - value: dateTime.toISOString(), + value: dateTime.toISOString(element.isUseLocalTime), }); }} data-testid={TEST_IDS.formElements.fieldDateTime} diff --git a/src/components/FormElementsEditor/FormElementsEditor.test.tsx b/src/components/FormElementsEditor/FormElementsEditor.test.tsx index 3ddf479f..72eb1b70 100644 --- a/src/components/FormElementsEditor/FormElementsEditor.test.tsx +++ b/src/components/FormElementsEditor/FormElementsEditor.test.tsx @@ -1334,6 +1334,29 @@ describe('Form Elements Editor', () => { expect(fieldSelectors.fieldMinDate(true)).not.toBeInTheDocument(); }); + it('Should update timeZone', async () => { + const element = { ...FORM_ELEMENT_DEFAULT, id: 'timeID', type: FormElementType.DATETIME, isUseLocalTime: false }; + const elements = [element]; + const onChange = jest.fn(); + + render(getComponent({ value: elements, onChange })); + + /** + * Open id element + */ + const elementSelectors = openElement(element.id, element.type); + + /** + * Choose hidden option + */ + const fieldVisibilitySelectors = getFormElementsEditorSelectors(within(elementSelectors.fieldTimeZone())); + expect(fieldVisibilitySelectors.timeTransformationOption(false, 'time-utc')).toBeInTheDocument(); + + await act(() => fireEvent.click(fieldVisibilitySelectors.timeTransformationOption(true, 'time-local'))); + + expect(fieldVisibilitySelectors.timeTransformationOption(true, 'time-local')).toBeChecked(); + }); + it('Should update Code Language', async () => { const element = { ...FORM_ELEMENT_DEFAULT, diff --git a/src/constants/form-element.ts b/src/constants/form-element.ts index e2734c02..94d910e2 100644 --- a/src/constants/form-element.ts +++ b/src/constants/form-element.ts @@ -150,6 +150,24 @@ export const STRING_ELEMENT_OPTIONS: SelectableValue[] = [ }, ]; +/** + * Options to Hide String element + */ +export const TIME_TRANSFORMATION_OPTIONS: SelectableValue[] = [ + { + ariaLabel: TEST_IDS.formElementsEditor.timeTransformationOption('time-utc'), + description: 'UTC', + label: 'UTC', + value: false, + }, + { + ariaLabel: TEST_IDS.formElementsEditor.timeTransformationOption('time-local'), + description: 'Local', + label: 'Local', + value: true, + }, +]; + /** * Auto Save timeout ms */ diff --git a/src/constants/tests.ts b/src/constants/tests.ts index db9a6cd2..d2383fd3 100644 --- a/src/constants/tests.ts +++ b/src/constants/tests.ts @@ -90,6 +90,7 @@ export const TEST_IDS = { fieldDisableIf: 'form-elements-editor field-disable-if', fieldUnit: 'data-testid form-elements-editor field-unit', fieldVisibility: 'data-testid form-elements-editor field-visibility', + fieldTimeZone: 'data-testid form-elements-editor field-time-zone', fieldWidth: 'data-testid form-elements-editor field-width', fieldNamePicker: 'data-testid form-elements-editor field-name-picker', fieldAccept: 'data-testid form-elements-editor field-accept', @@ -105,6 +106,7 @@ export const TEST_IDS = { newElementLabel: 'data-testid form-elements-editor new-element-label', newElementType: 'form-elements-editor new-element-type', radioOption: (name: string) => `form-elements-editor option-${name}`, + timeTransformationOption: (name: string) => `form-elements-editor time-option-${name}`, root: 'data-testid form-elements-editor', sectionContent: (id: string, type: string) => `data-testid form-elements-editor section-content-${id}-${type}`, sectionLabel: (id: string, type: string) => `data-testid form-elements-editor section-label-${id}-${type}`, diff --git a/src/types/form-element.ts b/src/types/form-element.ts index e6514568..3b45bfd4 100644 --- a/src/types/form-element.ts +++ b/src/types/form-element.ts @@ -323,6 +323,13 @@ export interface DateTimeOptions { * @type {string} */ value?: string; + + /** + * Is Transfrom to UTC + * + * @type {boolean} + */ + isUseLocalTime: boolean; } /** diff --git a/src/utils/form-element.test.ts b/src/utils/form-element.test.ts index 82c60c7d..d5dd6a5c 100644 --- a/src/utils/form-element.test.ts +++ b/src/utils/form-element.test.ts @@ -305,9 +305,25 @@ describe('Utils', () => { { element: { type: FormElementType.DATETIME, + isUseLocalTime: true, }, name: 'datetime', value: date.toISOString(), + /** + * None UTC format + */ + expectedResult: '2022-02-02T00:00:00.000+00:00', + }, + { + element: { + type: FormElementType.DATETIME, + isUseLocalTime: false, + }, + name: 'datetime', + value: date.toISOString(), + /** + * UTC format + */ expectedResult: date.toISOString(), }, { diff --git a/src/utils/form-element.ts b/src/utils/form-element.ts index eb3a2f87..ec7528da 100644 --- a/src/utils/form-element.ts +++ b/src/utils/form-element.ts @@ -150,6 +150,7 @@ export const getElementWithNewType = ( ...baseValues, value: '', type: newType, + isUseLocalTime: false, }; } case FormElementType.BOOLEAN: { @@ -552,7 +553,7 @@ export const formatElementValue = (element: LocalFormElement, value: unknown): s return '*********'; } case FormElementType.DATETIME: { - return value && typeof value === 'string' ? dateTime(value).toISOString() : ''; + return value && typeof value === 'string' ? dateTime(value).toISOString(element.isUseLocalTime) : ''; } case FormElementType.TIME: { return value && typeof value === 'string'