From 86c8cd76cca662b4b179d2ca0c20568f65a10eb5 Mon Sep 17 00:00:00 2001
From: Romain Derie <rde@odoo.com>
Date: Fri, 27 Aug 2021 10:22:14 +0000
Subject: [PATCH] [IMP] web_editor, website_event: hide duplicate dates on edit
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 addons/web_editor/static/src/js/wysiwyg/wysiwyg.js        | 6 ++++++
 addons/website_event/views/event_templates_list.xml       | 4 ++--
 .../views/event_templates_page_registration.xml           | 8 ++++----
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
index 3942ae72a07..2ed3d99ab1e 100644
--- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
+++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
@@ -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") {
diff --git a/addons/website_event/views/event_templates_list.xml b/addons/website_event/views/event_templates_list.xml
index 65220120adc..e3e0359711f 100644
--- a/addons/website_event/views/event_templates_list.xml
+++ b/addons/website_event/views/event_templates_list.xml
@@ -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'}"/>
diff --git a/addons/website_event/views/event_templates_page_registration.xml b/addons/website_event/views/event_templates_page_registration.xml
index a18203cc6fa..bb82f43fa57 100644
--- a/addons/website_event/views/event_templates_page_registration.xml
+++ b/addons/website_event/views/event_templates_page_registration.xml
@@ -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'}"/>