From 6cfec48ba4d918b67015c8581b6c17536454c318 Mon Sep 17 00:00:00 2001
From: Giacomello Nathan <ngi@odoo.com>
Date: Fri, 28 Aug 2020 15:19:20 +0200
Subject: [PATCH] [FIX] Web: Cannot collapse calendar sidebar

A calendar filter's id is the concatenation of "o_cw_filter_collapse_" and the title of the filter.
When title has space (like "Time Off Type"), the id become "o_cw_filter_collapse_Time Off Type", which is invalid.
So, we can't collapse the filter.
With this fix, it replace space by nothing so if there is space in title (like "Time Off Type"), the id is "o_cw_filter_collapse_TimeOffType".

Task id: 2318645
---
 addons/web/static/src/xml/web_calendar.xml      | 5 +++--
 addons/web/static/tests/views/calendar_tests.js | 7 ++++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/addons/web/static/src/xml/web_calendar.xml b/addons/web/static/src/xml/web_calendar.xml
index f77e1198217..05c71c7312b 100644
--- a/addons/web/static/src/xml/web_calendar.xml
+++ b/addons/web/static/src/xml/web_calendar.xml
@@ -52,14 +52,15 @@
 
     <t t-name="CalendarView.sidebar.filter">
         <t t-set="needCollapse" t-value="widget.filters.length > 2 and widget.title"></t>
+        <t t-set="titleWithoutSpace" t-value="widget.title.split(' ').join('')"></t>
         <div class="o_calendar_filter">
-            <h5 t-if="needCollapse" type="button" data-toggle="collapse" t-attf-data-target="#o_cw_filter_collapse_#{widget.title}" class="d-flex justify-content-between align-items-center">
+            <h5 t-if="needCollapse" type="button" data-toggle="collapse" t-attf-data-target="#o_cw_filter_collapse_#{titleWithoutSpace}" class="d-flex justify-content-between align-items-center">
                 <t t-esc="widget.title"/><i class="o_cw_filter_collapse_icon fa fa-chevron-down"/>
             </h5>
 
             <h5 t-elif="widget.title" t-esc="widget.title"/>
 
-            <div t-attf-class="o_calendar_filter_items #{needCollapse ? 'collapse show' : 0}" aria-expanded="true" t-attf-id="o_cw_filter_collapse_#{widget.title}">
+            <div t-attf-class="o_calendar_filter_items #{needCollapse ? 'collapse show' : 0}" aria-expanded="true" t-attf-id="o_cw_filter_collapse_#{titleWithoutSpace}">
                 <t t-foreach="widget.filters" t-as="filter" t-if="filter.display == null || filter.display">
                     <t t-set="idForLabel" t-value="_.uniqueId('o_calendar_filter_item_')"/>
                     <t t-set="color" t-value="widget.getColor(filter.color_index)"/>
diff --git a/addons/web/static/tests/views/calendar_tests.js b/addons/web/static/tests/views/calendar_tests.js
index ab65524177b..308ac98fde8 100644
--- a/addons/web/static/tests/views/calendar_tests.js
+++ b/addons/web/static/tests/views/calendar_tests.js
@@ -57,7 +57,7 @@ QUnit.module('Views', {
                     allday: {string: "allday", type: "boolean"},
                     partner_ids: {string: "attendees", type: "one2many", relation: 'partner', default: [[6, 0, [1]]]},
                     type: {string: "type", type: "integer"},
-                    event_type_id: {string: "Event_Type", type: "many2one", relation: 'event_type'},
+                    event_type_id: {string: "Event Type", type: "many2one", relation: 'event_type'},
                     color:  {string: "Color", type: "integer", related: 'event_type_id.color'},
                     is_hatched: {string: "Hatched", type: "boolean"}
                 },
@@ -2190,7 +2190,7 @@ QUnit.module('Views', {
     });
 
     QUnit.test('Add filters and specific color', async function (assert) {
-        assert.expect(5);
+        assert.expect(6);
 
         this.data.event.records.push(
             {id: 8, user_id: 4, partner_id: 1, name: "event 8", start: "2016-12-11 09:00:00", stop: "2016-12-11 10:00:00", allday: false, partner_ids: [1,2,3], event_type_id: 3, color: 4},
@@ -2219,8 +2219,9 @@ QUnit.module('Views', {
 
         assert.containsN(calendar, '.o_calendar_filter', 2, "should display 2 filters");
 
-        var $typeFilter =  calendar.$('.o_calendar_filter:has(h5:contains(Event_Type))');
+        var $typeFilter =  calendar.$('.o_calendar_filter:has(h5:contains(Event Type))');
         assert.ok($typeFilter.length, "should display 'Event Type' filter");
+        assert.containsOnce($typeFilter, '#o_cw_filter_collapse_EventType', "Id should be equals to o_cw_filter_collapse_EventType for 'Event Type'");
         assert.containsN($typeFilter, '.o_calendar_filter_item', 3, "should display 3 filter items for 'Event Type'");
 
         assert.containsOnce($typeFilter, '.o_calendar_filter_item[data-value=3].o_cw_filter_color_4', "Filter for event type 3 must have the color 4");