Skip to content

Commit

Permalink
EZP-30263 : User date format don't apply to date fields in content it…
Browse files Browse the repository at this point in the history 
…em update and preview (ezsystems#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
  • Loading branch information
@pawbuj
pawbuj authored and konradoboza committed May 29, 2019
1 parent d228e04 commit abad157
Show file tree
Hide file tree
Showing 7 changed files with 98 additions and 47 deletions.
2 changes: 1 addition & 1 deletion src/bundle/Resources/public/js/scripts/fieldType/ezdate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
3 changes: 1 addition & 2 deletions src/bundle/Resources/public/js/scripts/fieldType/ezdatetime.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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) {
Expand All @@ -111,7 +111,6 @@
onChange: updateInputValue.bind(null, sourceInput),
defaultDate,
enableSeconds: secondsEnabled,
formatDate,
})
);

Expand Down
49 changes: 27 additions & 22 deletions src/bundle/Resources/public/js/scripts/fieldType/eztime.js
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -29,7 +29,7 @@

return {
isError,
errorMessage
errorMessage,
};
}
}
Expand Down Expand Up @@ -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);
Expand All @@ -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);
};
Expand All @@ -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);
Expand Down
58 changes: 45 additions & 13 deletions src/bundle/Resources/public/js/scripts/helpers/timezone.helper.js
View file
Original file line number Diff line number Diff line change
@@ -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);
5 changes: 5 additions & 0 deletions src/bundle/Resources/translations/fieldtypes_preview.en.xliff
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,11 @@
<target state="new">yes</target>
<note>key: ezboolean.yes</note>
</trans-unit>
<trans-unit id="a871dec7f18c06b9061bc2aae9af1aafe1ad1600" resname="ezdatetime.useseconds.enabled">
<source>`The date format is based on your user preferences and does not include seconds even if the field allows it`</source>
<target state="new">`The date format is based on your user preferences and does not include seconds even if the field allows it`</target>
<note>key: ezdatetime.useseconds.enabled</note>
</trans-unit>
<trans-unit id="bf1525899659fa5ea6c18aa4bf63d596fecbf97e" resname="ezgmaplocation.address">
<source>Address</source>
<target state="new">Address</target>
Expand Down
20 changes: 11 additions & 9 deletions src/bundle/Resources/views/fieldtypes/preview/content_fields.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,20 +67,21 @@
{% 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']) %}
<div class="ez-alert ez-alert--info mt-2">
{{ '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`') }}
</div>
{% endif %}
{{ block( 'simple_block_field' ) }}
{% endif %}
{% endspaceless %}
{% endblock %}

{% 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 %}
Expand All @@ -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' ) %}
<div class="ez-alert ez-alert--info mt-2">
{{ '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`') }}
</div>
{% endif %}
{{ block( 'simple_block_field' ) }}
{% endif %}
{% endspaceless %}
{% endblock %}
Expand Down
8 changes: 8 additions & 0 deletions src/lib/UI/Config/Provider/DateFormat.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
];
}
Expand Down

0 comments on commit abad157

Please sign in to comment.