Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

EZP-30263 : User date format don't apply to date fields in content item update and preview #909

Merged
merged 5 commits into from
Mar 28, 2019
Merged

EZP-30263 : User date format don't apply to date fields in content item update and preview #909

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4fea4f0
EZP-30263 : User date format don't apply to date fields in content it…
pawbuj Mar 19, 2019
87a653d
forces UTC on ezdate and eztime
pawbuj Mar 22, 2019
7e3ec50
formats ezdate, eztime, ezdatetime according to user preferences
pawbuj Mar 27, 2019
f8d80a5
fixes cs
pawbuj Mar 27, 2019
a03b952
default timezone form user preferences
pawbuj Mar 28, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/bundle/Resources/public/js/scripts/fieldType/ezdate.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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) => {
pawbuj marked this conversation as resolved.
Show resolved Hide resolved
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,
Copy link
Member

@dew326 dew326 Mar 27, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What about other bundles which are using those deprecated methods? We should correct them to not use the deprecated one.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

there you go
https://github.com/ezsystems/ezplatform-page-builder/pull/327
ezsystems/ezplatform-admin-ui-modules#173

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think there is also one in data-based-publisher.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://github.com/ezsystems/date-based-publisher/pull/97

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
Open in desktop
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
Open in desktop
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 %}
pawbuj marked this conversation as resolved.
Show resolved Hide resolved
{{ 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') %}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We will be displaying ezdate in UTC, regardless of user time zone from settings?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tischsoic same as in the prev implementation, I do not change this behaviour

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now it will be inconsistent with date picked in edit mode considering last changes: #893
Or maybe we are going to revert those changes?
ping @SylvainGuittard

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@webhdx

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It cannot be UTC. The editor will be confused.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree with @webhdx especially that this is a fieldtype value not a regular UI date or time

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lserwatka @webhdx I understand your point. But the date picker depends on the user preferences and the time zone can be different than UTC. So the date in preview might be different from the date the user selected. Or did I miss something?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's discuss this in private on Monday.

Copy link
Contributor

@tischsoic tischsoic Mar 22, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was thinking about it and it actully makes sense for me to have eztime and ezdate always in UTC.
For timezone caclulations to work predictably you basically have to have time + date and only ezdatetime has both.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After internal discussion, ezdate and eztime should use UTC.
Thanks guys.

{{ 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
Open in desktop
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