From abad15728ee02eb6debb570db0398841e7bc804c Mon Sep 17 00:00:00 2001 From: pawbuj Date: Thu, 28 Mar 2019 18:14:09 +0100 Subject: [PATCH] EZP-30263 : User date format don't apply to date fields in content item update and preview (#909) * EZP-30263 : User date format don't apply to date fields in content item update and preview * forces UTC on ezdate and eztime * formats ezdate, eztime, ezdatetime according to user preferences * fixes cs * default timezone form user preferences --- .../public/js/scripts/fieldType/ezdate.js | 2 +- .../public/js/scripts/fieldType/ezdatetime.js | 3 +- .../public/js/scripts/fieldType/eztime.js | 49 +++++++++------- .../js/scripts/helpers/timezone.helper.js | 58 ++++++++++++++----- .../translations/fieldtypes_preview.en.xliff | 5 ++ .../preview/content_fields.html.twig | 20 ++++--- src/lib/UI/Config/Provider/DateFormat.php | 8 +++ 7 files changed, 98 insertions(+), 47 deletions(-) diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezdate.js b/src/bundle/Resources/public/js/scripts/fieldType/ezdate.js index 142fef8bb5..d147d2f410 100644 --- a/src/bundle/Resources/public/js/scripts/fieldType/ezdate.js +++ b/src/bundle/Resources/public/js/scripts/fieldType/ezdate.js @@ -61,7 +61,7 @@ const dateFields = [...doc.querySelectorAll(SELECTOR_FIELD)]; const dateConfig = { - formatDate: (date) => new Date(date).toLocaleDateString(), + formatDate: (date) => eZ.helpers.timezone.formatFullDateTime(date, null, eZ.adminUiConfig.dateFormat.fullDate), }; const updateInputValue = (sourceInput, date) => { const event = new CustomEvent(EVENT_VALUE_CHANGED); diff --git a/src/bundle/Resources/public/js/scripts/fieldType/ezdatetime.js b/src/bundle/Resources/public/js/scripts/fieldType/ezdatetime.js index 9c4025bb27..dbc2fc676c 100644 --- a/src/bundle/Resources/public/js/scripts/fieldType/ezdatetime.js +++ b/src/bundle/Resources/public/js/scripts/fieldType/ezdatetime.js @@ -65,6 +65,7 @@ const datetimeConfig = { enableTime: true, time_24hr: true, + formatDate: (date) => eZ.helpers.timezone.formatFullDateTime(date, null), }; const updateInputValue = (sourceInput, dates) => { const event = new CustomEvent(EVENT_VALUE_CHANGED); @@ -95,7 +96,6 @@ const flatPickrInput = field.querySelector(SELECTOR_FLATPICKR_INPUT); const btnClear = field.querySelector('.ez-data-source__btn--clear-input'); const secondsEnabled = sourceInput.dataset.seconds === '1'; - const formatDate = secondsEnabled ? (date) => date.toLocaleString() : (date) => eZ.helpers.timezone.formatDate(date); let defaultDate = null; if (sourceInput.value) { @@ -111,7 +111,6 @@ onChange: updateInputValue.bind(null, sourceInput), defaultDate, enableSeconds: secondsEnabled, - formatDate, }) ); diff --git a/src/bundle/Resources/public/js/scripts/fieldType/eztime.js b/src/bundle/Resources/public/js/scripts/fieldType/eztime.js index 52a63afdf4..d29c10d62a 100644 --- a/src/bundle/Resources/public/js/scripts/fieldType/eztime.js +++ b/src/bundle/Resources/public/js/scripts/fieldType/eztime.js @@ -1,4 +1,4 @@ -(function (global) { +(function(global) { const SELECTOR_FIELD = '.ez-field-edit--eztime'; const SELECTOR_INPUT = '.ez-data-source__input:not(.flatpickr-input)'; const SELECTOR_LABEL_WRAPPER = '.ez-field-edit__label-wrapper'; @@ -29,7 +29,7 @@ return { isError, - errorMessage + errorMessage, }; } } @@ -57,15 +57,14 @@ validator.init(); - global.eZ.fieldTypeValidators = global.eZ.fieldTypeValidators ? - [...global.eZ.fieldTypeValidators, validator] : - [validator]; + global.eZ.fieldTypeValidators = global.eZ.fieldTypeValidators ? [...global.eZ.fieldTypeValidators, validator] : [validator]; const timeFields = [...document.querySelectorAll(SELECTOR_FIELD)]; const timeConfig = { enableTime: true, noCalendar: true, - time_24hr: true + time_24hr: true, + formatDate: (date) => eZ.helpers.timezone.formatFullDateTime(date, null, eZ.adminUiConfig.dateFormat.fullTime), }; const updateInputValue = (sourceInput, date) => { const event = new CustomEvent(EVENT_VALUE_CHANGED); @@ -78,7 +77,7 @@ } date = new Date(date[0]); - sourceInput.value = (date.getHours() * 3600) + (date.getMinutes() * 60) + date.getSeconds(); + sourceInput.value = date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds(); sourceInput.dispatchEvent(event); }; @@ -94,27 +93,33 @@ const date = new Date(); date.setHours(Math.floor(value / 3600)); - date.setMinutes(Math.floor(value % 3600 / 60)); - date.setSeconds(Math.floor(value % 3600 % 60)); + date.setMinutes(Math.floor((value % 3600) / 60)); + date.setSeconds(Math.floor((value % 3600) % 60)); defaultDate = date; } - btnClear.addEventListener('click', (event) => { - event.preventDefault(); + btnClear.addEventListener( + 'click', + (event) => { + event.preventDefault(); - flatPickrInput.value = ''; - sourceInput.value = ''; - - sourceInput.dispatchEvent(new CustomEvent(EVENT_VALUE_CHANGED)); - }, false); + flatPickrInput.value = ''; + sourceInput.value = ''; - window.flatpickr(flatPickrInput, Object.assign({}, timeConfig, { - enableSeconds, - onChange: updateInputValue.bind(null, sourceInput), - dateFormat: enableSeconds ? 'H:i:S' : 'H:i', - defaultDate - })); + sourceInput.dispatchEvent(new CustomEvent(EVENT_VALUE_CHANGED)); + }, + false + ); + + window.flatpickr( + flatPickrInput, + Object.assign({}, timeConfig, { + enableSeconds, + onChange: updateInputValue.bind(null, sourceInput), + defaultDate, + }) + ); if (sourceInput.hasAttribute('required')) { flatPickrInput.setAttribute('required', true); diff --git a/src/bundle/Resources/public/js/scripts/helpers/timezone.helper.js b/src/bundle/Resources/public/js/scripts/helpers/timezone.helper.js index ea4d754bcd..c0f8efb661 100644 --- a/src/bundle/Resources/public/js/scripts/helpers/timezone.helper.js +++ b/src/bundle/Resources/public/js/scripts/helpers/timezone.helper.js @@ -1,29 +1,61 @@ (function(global, doc, eZ, moment) { const userPreferedTimezone = eZ.adminUiConfig.timezone; - const userPreferedFullDateFormat = eZ.adminUiConfig.dateFormat.full; - const userPreferedShortDateFormat = eZ.adminUiConfig.dateFormat.short; + const userPreferedFullDateTimeFormat = eZ.adminUiConfig.dateFormat.fullDateTime; + const userPreferedShortDateTimeFormat = eZ.adminUiConfig.dateFormat.shortDateTime; const convertDateToTimezone = (date, timezone = userPreferedTimezone, forceSameTime = false) => { return moment(date).tz(timezone, forceSameTime); }; - const formatDate = (date, format = userPreferedFullDateFormat) => { + const formatDate = (date, timezone = null, format) => { + if (timezone) { + date = convertDateToTimezone(date, timezone); + } + return moment(date).formatICU(format); }; - const formatDateWithTimezone = (date, timezone = userPreferedTimezone, format = userPreferedFullDateFormat) => { - return formatDate(convertDateToTimezone(date, timezone), format); + const formatFullDateTime = (date, timezone = userPreferedTimezone, format = userPreferedFullDateTimeFormat) => { + return formatDate(date, timezone, format); }; - const formatShortDate = (date, format = userPreferedShortDateFormat) => { - return formatDate(date, format); + const formatShortDateTime = (date, timezone = userPreferedTimezone, format = userPreferedShortDateTimeFormat) => { + return formatDate(date, timezone, format); }; - const formatShortDateWithTimezone = (date, timezone = userPreferedTimezone, format = userPreferedShortDateFormat) => { - return formatDateWithTimezone(date, timezone, format); + + const deprecatedFormatDate = (date, format = userPreferedFullDateTimeFormat) => { + console.warn('[DEPRECATED] formatDate function is deprecated'); + console.warn('[DEPRECATED] it will change behaviour from ezplatform-admin-ui 2.0'); + console.warn('[DEPRECATED] use formatFullDateTime instead'); + + return formatFullDateTime(date, null, format); + }; + const deprecatedFormatShortDate = (date, format = userPreferedShortDateTimeFormat) => { + console.warn('[DEPRECATED] formatShortDate function is deprecated'); + console.warn('[DEPRECATED] it will change behaviour from ezplatform-admin-ui 2.0'); + console.warn('[DEPRECATED] use formatShortDateTime instead'); + + return formatShortDateTime(date, null, format); + }; + const deprecatedFormatDateWithTimezone = (date, timezone = userPreferedTimezone, format = userPreferedFullDateTimeFormat) => { + console.warn('[DEPRECATED] formatDateWithTimezone function is deprecated'); + console.warn('[DEPRECATED] it will be removed from ezplatform-admin-ui 2.0'); + console.warn('[DEPRECATED] use formatFullDateTime instead'); + + return formatFullDateTime(date, timezone, format); + }; + const deprecatedFormatShortDateWithTimezone = (date, timezone = userPreferedTimezone, format = userPreferedShortDateTimeFormat) => { + console.warn('[DEPRECATED] formatShortDateWithTimezone function is deprecated'); + console.warn('[DEPRECATED] it will be removed from ezplatform-admin-ui 2.0'); + console.warn('[DEPRECATED] use formatShortDateTime instead'); + + return formatShortDateTime(date, timezone, format); }; eZ.addConfig('helpers.timezone', { convertDateToTimezone, - formatDate, - formatShortDate, - formatDateWithTimezone, - formatShortDateWithTimezone, + formatFullDateTime, + formatShortDateTime, + formatDate: deprecatedFormatDate, + formatShortDate: deprecatedFormatShortDate, + formatDateWithTimezone: deprecatedFormatDateWithTimezone, + formatShortDateWithTimezone: deprecatedFormatShortDateWithTimezone, }); })(window, document, window.eZ, window.moment); diff --git a/src/bundle/Resources/translations/fieldtypes_preview.en.xliff b/src/bundle/Resources/translations/fieldtypes_preview.en.xliff index 88af07863e..c398f979f2 100644 --- a/src/bundle/Resources/translations/fieldtypes_preview.en.xliff +++ b/src/bundle/Resources/translations/fieldtypes_preview.en.xliff @@ -16,6 +16,11 @@ yes key: ezboolean.yes + + `The date format is based on your user preferences and does not include seconds even if the field allows it` + `The date format is based on your user preferences and does not include seconds even if the field allows it` + key: ezdatetime.useseconds.enabled + Address Address diff --git a/src/bundle/Resources/views/fieldtypes/preview/content_fields.html.twig b/src/bundle/Resources/views/fieldtypes/preview/content_fields.html.twig index 77587676b2..619beb303a 100644 --- a/src/bundle/Resources/views/fieldtypes/preview/content_fields.html.twig +++ b/src/bundle/Resources/views/fieldtypes/preview/content_fields.html.twig @@ -67,12 +67,13 @@ {% block ezdatetime_field %} {% spaceless %} {% if not ez_is_field_empty( content, field ) %} + {% set field_value = field.value.value|ez_full_datetime %} + {{ block( 'simple_block_field' ) }} {% if fieldSettings.useSeconds %} - {% set field_value = field.value.value|localizeddate('short', 'medium', null, ez_user_settings['timezone']) %} - {% else %} - {% set field_value = field.value.value|localizeddate('short', 'short', null, ez_user_settings['timezone']) %} +
+ {{ 'ezdatetime.useseconds.enabled'|trans()|desc('`The date format is based on your user preferences and does not include seconds even if the field allows it`') }} +
{% endif %} - {{ block( 'simple_block_field' ) }} {% endif %} {% endspaceless %} {% endblock %} @@ -80,7 +81,7 @@ {% block ezdate_field %} {% spaceless %} {% if not ez_is_field_empty( content, field ) %} - {% set field_value = field.value.date|localizeddate( 'short', 'none', parameters.locale, 'UTC' ) %} + {% set field_value = field.value.date|ez_full_date('UTC') %} {{ block( 'simple_block_field' ) }} {% endif %} {% endspaceless %} @@ -89,12 +90,13 @@ {% block eztime_field %} {% spaceless %} {% if not ez_is_field_empty( content, field ) %} + {% set field_value = field.value.time|ez_full_time('UTC') %} + {{ block( 'simple_block_field' ) }} {% if fieldSettings.useSeconds %} - {% set field_value = field.value.time|localizeddate( 'none', 'medium', parameters.locale, 'UTC' ) %} - {% else %} - {% set field_value = field.value.time|localizeddate( 'none', 'short', parameters.locale, 'UTC' ) %} +
+ {{ 'ezdatetime.useseconds.enabled'|trans()|desc('`The date format is based on your user preferences and does not include seconds even if the field allows it`') }} +
{% endif %} - {{ block( 'simple_block_field' ) }} {% endif %} {% endspaceless %} {% endblock %} diff --git a/src/lib/UI/Config/Provider/DateFormat.php b/src/lib/UI/Config/Provider/DateFormat.php index b8e0fd2392..dd363cee64 100644 --- a/src/lib/UI/Config/Provider/DateFormat.php +++ b/src/lib/UI/Config/Provider/DateFormat.php @@ -46,7 +46,15 @@ public function getConfig(): array ); return [ + 'fullDateTime' => (string)$fullDateTimeFormat, + 'fullDate' => $fullDateTimeFormat->getDateFormat(), + 'fullTime' => $fullDateTimeFormat->getTimeFormat(), + 'shortDateTime' => (string)$shortDateTimeFormat, + 'shortDate' => $shortDateTimeFormat->getDateFormat(), + 'shortTime' => $shortDateTimeFormat->getTimeFormat(), + /** @deprecated */ 'full' => (string)$fullDateTimeFormat, + /** @deprecated */ 'short' => (string)$shortDateTimeFormat, ]; }