[IMP] web_editor, website_event: hide duplicate dates on edit

In master, when editing a date, the same date will be shown multiple
times next to each other. This is because each date is comprised of a
few times the same field with different formats, and when editing them,
they all remove their formatting and show the entire date.

In this commit, we allow adding the class `oe_hide_on_date_edit` to date
fields we don't want to show when editing, which will be dynamically
hidden (by adding the `d-none` class) when a user clicks on a field with
the same date.
We also add this class to some date fields in website_event.

task-2618494

closes odoo/odoo#75205

Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Co-authored-by: Philémon van Helden <pvh@odoo.com>
Co-authored-by: Romain Derie <rde@odoo.com>
This commit is contained in:
Romain Derie
2021-09-16 18:14:55 +00:00
co-authored by Philémon van Helden
parent 85cb19b294
commit 86c8cd76cc
3 changed files with 12 additions and 6 deletions
@@ -138,6 +138,12 @@ const Wysiwyg = Widget.extend({
if (!$field.hasClass('o_editable_date_field_format_changed')) {
$linkedFieldNodes.text($field.data('oe-original-with-format'));
$linkedFieldNodes.addClass('o_editable_date_field_format_changed');
$linkedFieldNodes.filter('.oe_hide_on_date_edit').addClass('d-none');
setTimeout(() => {
// we might hide the clicked date, focus the one
// supposed to be editable
Wysiwyg.setRange($linkedFieldNodes.filter(':not(.oe_hide_on_date_edit)')[0]);
}, 0);
}
}
if ($field.data('oe-type') === "monetary") {
@@ -174,7 +174,7 @@
<!-- Short Date -->
<div class="o_wevent_event_date position-absolute bg-white shadow-sm text-dark">
<span t-field="event.with_context(tz=event.date_tz).date_begin" t-options="{'format': 'LLL'}" class="o_wevent_event_month"/>
<span t-field="event.with_context(tz=event.date_tz).date_begin" t-options="{'format': 'dd'}" class="o_wevent_event_day"/>
<span t-field="event.with_context(tz=event.date_tz).date_begin" t-options="{'format': 'dd'}" class="o_wevent_event_day oe_hide_on_date_edit"/>
</div>
<!-- Participating -->
<small t-if="event.is_participating" class="o_wevent_participating bg-success">
@@ -199,7 +199,7 @@
<!-- Start Date & Time -->
<time itemprop="startDate" t-att-datetime="event.date_begin">
<span t-field="event.with_context(tz=event.date_tz).date_begin" t-options="{'date_only': 'true', 'format': 'long'}"/> -
<span t-field="event.with_context(tz=event.date_tz).date_begin" t-options="{'time_only': 'true', 'format': 'short'}"/>
<span t-field="event.with_context(tz=event.date_tz).date_begin" t-options="{'time_only': 'true', 'format': 'short'}" class="oe_hide_on_date_edit"/>
</time>
<!-- Location -->
<div itemprop="location" t-field="event.address_id" t-options="{'widget': 'contact', 'fields': ['city'], 'no_marker': 'true'}"/>
@@ -42,8 +42,8 @@
<div class="o_wevent_sidebar_block">
<h6 class="o_wevent_sidebar_title">Date &amp; Time</h6>
<div class="d-flex">
<h5 t-field="event.with_context(tz=event.date_tz).date_begin" class="my-1 mr-1" t-options="{'date_only': 'true', 'format': 'EEEE'}"/>
<h5 class="my-1" t-field="event.with_context(tz=event.date_tz).date_begin" t-options="{'date_only': 'true', 'format': 'long'}" itemprop="startDate" t-att-datetime="event.date_begin"/>
<h5 t-field="event.with_context(tz=event.date_tz).date_begin" class="my-1 mr-1 oe_hide_on_date_edit" t-options="{'date_only': 'true', 'format': 'EEEE'}"/>
<h5 class="my-1 oe_hide_on_date_edit" t-field="event.with_context(tz=event.date_tz).date_begin" t-options="{'date_only': 'true', 'format': 'long'}" itemprop="startDate" t-att-datetime="event.date_begin"/>
</div>
<t t-if="not event.is_one_day">Start -</t>
<span t-field="event.with_context(tz=event.date_tz).date_begin" t-options="{'time_only': 'true', 'format': 'short'}"/>
@@ -54,8 +54,8 @@
<t t-else="">
<i class="fa fa-long-arrow-down d-block text-muted mx-3 my-2" style="font-size: 1.5rem"/>
<div class="d-flex">
<h5 t-field="event.with_context(tz=event.date_tz).date_end" class="my-1 mr-1" t-options="{'date_only': 'true', 'format': 'EEEE'}"/>
<h5 class="my-1" t-field="event.with_context(tz=event.date_tz).date_end" t-options="{'date_only': 'true', 'format': 'long'}"/>
<h5 t-field="event.with_context(tz=event.date_tz).date_end" class="my-1 mr-1 oe_hide_on_date_edit" t-options="{'date_only': 'true', 'format': 'EEEE'}"/>
<h5 class="my-1 oe_hide_on_date_edit" t-field="event.with_context(tz=event.date_tz).date_end" t-options="{'date_only': 'true', 'format': 'long'}"/>
</div>
<t t-if="not event.is_one_day">End -</t>
<span t-field="event.with_context(tz=event.date_tz).date_end" t-options="{'time_only': 'true', 'format': 'short'}"/>