[FIX] web: display indicator when many attendees in calendar event

In saas-15, when an event had more than 3 attendees, it used to
show a '+' at the left of the avatars. This behavior was lost in
saas-16 where it became 'display 5 avatars max and that's it'.

This commit brings back the behavior of saas-15 and improves it
such that the '+' sign displays the number of additional attendees
whose avatars are not shown and displays it on the right.

Example for 7 attendees, '[]' representing an avatar:
saas-15:        +[][][]
saas-16 before: [][][][][]
saas-16 now:    [][][]+4

3 files changed, 17 insertions, 5 deletions

diff --git a/addons/web/static/src/less/web_calendar.less b/addons/web/static/src/less/web_calendar.less
index ed25f8f8dd0..d6aab5e0e38 100644
--- a/addons/web/static/src/less/web_calendar.less
+++ b/addons/web/static/src/less/web_calendar.less
@@ -64,9 +64,6 @@
             .o_field_type_char:first-child {
                 font-weight: bold;
             }
-            .o_field_type_many2many:last-child img {
-                float: right;
-            }
             .fc-view {
                 overflow-x: auto;
                 > table {
diff --git a/addons/web/static/src/xml/web_calendar.xml b/addons/web/static/src/xml/web_calendar.xml
index e38d98e46de..430c2d3772c 100644
--- a/addons/web/static/src/xml/web_calendar.xml
+++ b/addons/web/static/src/xml/web_calendar.xml
@@ -20,7 +20,11 @@
                 <t t-foreach="widget.displayFields" t-as="name">
                     <div t-attf-class="o_field_#{name} o_field_type_#{fields[name].type}">
                         <t t-if="widget.displayFields[name].avatar_field">
-                            <t t-esc="fields[name].string"/>: <t t-foreach="widget.getAvatars(record, name, widget.displayFields[name].avatar_field).slice(0,5)" t-as="image"><t t-raw="image"/></t>
+                            <t t-esc="fields[name].string"/>:
+                            <div class="o_calendar_avatars pull-right">
+                                 <t t-foreach="widget.getAvatars(record, name, widget.displayFields[name].avatar_field).slice(0,3)" t-as="image"><t t-raw="image"/></t>
+                                <span t-if="record[name].length - 3 > 0">+<t t-esc="record[name].length - 3"/></span>
+                            </div>
                         </t>
                         <t t-else="">
                             <t t-esc="format(record, name)"/>
diff --git a/addons/web/static/tests/views/calendar_tests.js b/addons/web/static/tests/views/calendar_tests.js
index 25676e6547d..725eb831080 100644
--- a/addons/web/static/tests/views/calendar_tests.js
+++ b/addons/web/static/tests/views/calendar_tests.js
@@ -747,9 +747,11 @@ QUnit.module('Views', {
     });
 
     QUnit.test('rendering, with many2many', function (assert) {
-        assert.expect(1);
+        assert.expect(5);
 
         this.data.event.fields.partner_ids.type = 'many2many';
+        this.data.event.records[0].partner_ids = [1,2,3,4,5];
+        this.data.partner.records.push({id: 5, display_name: "partner 5", image: 'EEE'});
 
         var calendar = createView({
             View: CalendarView,
@@ -772,6 +774,15 @@ QUnit.module('Views', {
         assert.strictEqual(calendar.$('.o_calendar_filter_items .o_cal_avatar').length, 3,
             "should have 3 avatars in the side bar");
 
+        var $event1Avatars = calendar.$('.fc-event .o_calendar_avatars').first();
+        assert.strictEqual($event1Avatars.find('img').length, 1, "should have 1 avatar");
+        assert.strictEqual($event1Avatars.find('span').length, 0,
+            "should not have a span for more attendees since there is only one");
+
+        var $event2Avatars = calendar.$('.fc-event:contains(All the day) .o_calendar_avatars');
+        assert.strictEqual($event2Avatars.find('img').length, 3, "should have 3 avatars");
+        assert.strictEqual($event2Avatars.find('span').text(), '+2',
+            "should indicate there are 2 more attendees that we don't show");
         calendar.destroy();
     });