From 47b0c0d2d4ade8f0aeb3274327c9aecd99675c9a Mon Sep 17 00:00:00 2001
From: Mohammed Shekha <msh@odoo.com>
Date: Tue, 25 Feb 2020 12:58:11 +0000
Subject: [PATCH] [IMP] web,calendar: display attendance status widget in
 calendar popover

before this commit, widgets which has specialData attribute
e.g.many2manyattendee were not supported in calendar popover, as widgets with
specialData attribute are meant to be supported in form view.

after this commit, widgets with specialData attribute can be added in calendar
popover, specialData method is called explicitly from calendar_popover to fetch
special data required to render such widgets.

with this commit we also did miscellaneous improvement in many2manyattendee

- many2many_attendee status widget bullet not aligned with attendee name, with
this commit bullet is aligned with attendee name.

- if many2many_attendee does not have status value then do not display status
else blank space is displayed before attendee name.

- in community tentative status color in many2many attendee tags widget has
o-brand-secondary color which is almost light grey, so due to badge light grey
color and tentative status light grey color status is not displayed. To fix
this issue, set tentative status color to simple grey which is bit dark then
badge background color.

task-2058767

closes odoo/odoo#46396

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
---
 .../calendar/static/src/js/base_calendar.js   |  4 +-
 addons/calendar/static/src/scss/calendar.scss |  5 +-
 .../calendar/static/src/xml/base_calendar.xml |  5 +-
 .../calendar/static/tests/calendar_tests.js   | 14 ++++--
 addons/calendar/views/calendar_views.xml      |  2 +-
 .../src/js/views/calendar/calendar_popover.js | 30 +++++++++++-
 .../web/static/tests/views/calendar_tests.js  | 46 +++++++++++++++++++
 7 files changed, 95 insertions(+), 11 deletions(-)

diff --git a/addons/calendar/static/src/js/base_calendar.js b/addons/calendar/static/src/js/base_calendar.js
index f2c1e56b298..46362327e17 100644
--- a/addons/calendar/static/src/js/base_calendar.js
+++ b/addons/calendar/static/src/js/base_calendar.js
@@ -8,7 +8,7 @@ var relationalFields = require('web.relational_fields');
 var session = require('web.session');
 var WebClient = require('web.WebClient');
 
-var FieldMany2ManyTags = relationalFields.FieldMany2ManyTags;
+const FieldMany2ManyTagsAvatar = relationalFields.FieldMany2ManyTagsAvatar;
 
 var CalendarNotification = Notification.extend({
     template: "CalendarNotification",
@@ -137,7 +137,7 @@ BasicModel.include({
     },
 });
 
-var Many2ManyAttendee = FieldMany2ManyTags.extend({
+const Many2ManyAttendee = FieldMany2ManyTagsAvatar.extend({
     // as this widget is model dependant (rpc on res.partner), use it in another
     // context probably won't work
     // supportedFieldTypes: ['many2many'],
diff --git a/addons/calendar/static/src/scss/calendar.scss b/addons/calendar/static/src/scss/calendar.scss
index 7e98c95d0ae..4260c9bad73 100644
--- a/addons/calendar/static/src/scss/calendar.scss
+++ b/addons/calendar/static/src/scss/calendar.scss
@@ -3,13 +3,14 @@
     width: 10px;
     height: 10px;
     border-radius: 5px;
+    vertical-align: middle;
 
     &.accepted {
         background-color: theme-color('success');
     }
 
-    &.needsAction {
-        background-color: $o-brand-secondary;
+    &.tentative {
+        background-color: $o-main-color-muted;
     }
 
     &.declined {
diff --git a/addons/calendar/static/src/xml/base_calendar.xml b/addons/calendar/static/src/xml/base_calendar.xml
index 8ecdd17b5fd..f2f30f361f6 100644
--- a/addons/calendar/static/src/xml/base_calendar.xml
+++ b/addons/calendar/static/src/xml/base_calendar.xml
@@ -1,8 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <template>
-    <t t-name="Many2ManyAttendeeTag" t-extend="FieldMany2ManyTag">
+    <t t-name="Many2ManyAttendeeTag" t-extend="FieldMany2ManyTagAvatar">
         <t t-jquery="span:first" t-operation="prepend">
-            <span t-if="attendeesData[el_index]" t-attf-class="o_calendar_invitation #{attendeesData[el_index].status}"/>
+            <span t-if="attendeesData[el_index] and attendeesData[el_index].status and attendeesData[el_index].status !== 'needsAction'"
+                t-attf-class="o_calendar_invitation #{attendeesData[el_index].status}"/>
         </t>
     </t>
 
diff --git a/addons/calendar/static/tests/calendar_tests.js b/addons/calendar/static/tests/calendar_tests.js
index 3eea3dff08b..d2626b0ab51 100644
--- a/addons/calendar/static/tests/calendar_tests.js
+++ b/addons/calendar/static/tests/calendar_tests.js
@@ -34,7 +34,7 @@ QUnit.module('calendar', {
     },
 }, function () {
     QUnit.test("many2manyattendee widget: basic rendering", async function (assert) {
-        assert.expect(9);
+        assert.expect(12);
 
         var form = await createView({
             View: FormView,
@@ -55,7 +55,7 @@ QUnit.module('calendar', {
                         "the event id should be passed as argument");
                     return Promise.resolve([
                         [1, "Jesus", "accepted", 0],
-                        [2, "Mahomet", "needsAction", 0],
+                        [2, "Mahomet", "tentative", 0],
                     ]);
                 }
                 return this._super.apply(this, arguments);
@@ -71,8 +71,16 @@ QUnit.module('calendar', {
             "Jesus should attend the meeting");
         assert.strictEqual(form.$('.o_field_widget[name="partner_ids"] .badge[data-id="2"]').text().trim(), "Mahomet",
             "the tag should be correctly named");
-        assert.hasClass(form.$('.o_field_widget[name="partner_ids"] .badge[data-id="2"] .o_calendar_invitation'),'needsAction',
+        assert.hasClass(form.el.querySelector('.o_field_widget[name="partner_ids"] .badge[data-id="2"] .o_calendar_invitation'), 'tentative',
             "Mohamet should still confirm his attendance to the meeting");
+        assert.hasClass(form.el.querySelector('.o_field_many2manytags'), 'avatar',
+            "should have avatar class");
+        assert.containsOnce(form, '.o_field_many2manytags.avatar.o_field_widget .badge:first img',
+            "should have img tag");
+        assert.hasAttrValue(form.$('.o_field_many2manytags.avatar.o_field_widget .badge:first img'),
+            'data-src',
+            '/web/image/partner/1/image_128',
+            "should have correct avatar image");
 
         form.destroy();
     });
diff --git a/addons/calendar/views/calendar_views.xml b/addons/calendar/views/calendar_views.xml
index 2bef5742a86..0126c6fc74c 100644
--- a/addons/calendar/views/calendar_views.xml
+++ b/addons/calendar/views/calendar_views.xml
@@ -257,7 +257,7 @@
                 color="user_id">
                 <field name="attendee_status"/>
                 <field name="user_id" string="Responsible" filters="1" widget="many2one_avatar_user"/>
-                <field name="partner_ids" widget="many2many_tags_avatar" write_model="calendar.contacts" write_field="partner_id" avatar_field="image_128"/>
+                <field name="partner_ids" widget="many2manyattendee" write_model="calendar.contacts" write_field="partner_id" avatar_field="image_128"/>
                 <field name="is_highlighted" invisible="1"/>
                 <field name="description"/>
                 <field name="privacy"/>
diff --git a/addons/web/static/src/js/views/calendar/calendar_popover.js b/addons/web/static/src/js/views/calendar/calendar_popover.js
index 8bfadbc7c4d..3e6c7b8a8ed 100644
--- a/addons/web/static/src/js/views/calendar/calendar_popover.js
+++ b/addons/web/static/src/js/views/calendar/calendar_popover.js
@@ -95,6 +95,27 @@ var CalendarPopover = Widget.extend(WidgetAdapterMixin, StandaloneFieldManagerMi
     // Private
     //--------------------------------------------------------------------------
 
+    /**
+     * Returns the AbstractField specialization that should be used for the
+     * given field informations. If there is no mentioned specific widget to
+     * use, determines one according the field type.
+     *
+     * @private
+     * @param {Object} field
+     * @param {Object} attrs
+     * @returns {function|null} AbstractField specialization Class
+     */
+    _getFieldWidgetClass(field, attrs) {
+        let FieldWidget;
+        if (attrs.widget) {
+            FieldWidget = fieldRegistry.getAny(['form' + "." + attrs.widget, attrs.widget]);
+            if (!FieldWidget) {
+                console.warn("Missing widget: ", attrs.widget, " for field", attrs.name, "of type", field.type);
+            }
+        }
+        return FieldWidget || fieldRegistry.getAny(['form' + "." + field.type, field.type, "abstract"]);
+    },
+
     /**
      * Generate fields to render into popover
      *
@@ -104,11 +125,15 @@ var CalendarPopover = Widget.extend(WidgetAdapterMixin, StandaloneFieldManagerMi
     _processFields: function () {
         var self = this;
         var fieldsToGenerate = [];
+        const fieldInformation = {};
         var fields = _.keys(this.displayFields);
         for (var i=0; i<fields.length; i++) {
             var fieldName = fields[i];
             var displayFieldInfo = self.displayFields[fieldName] || {attrs: {invisible: 1}};
             var fieldInfo = self.fields[fieldName];
+            fieldInformation[fieldName] = {
+                Widget: self._getFieldWidgetClass(fieldInfo, displayFieldInfo.attrs),
+            };
             var field = {
                 name: fieldName,
                 string: displayFieldInfo.attrs.string || fieldInfo.string,
@@ -145,9 +170,12 @@ var CalendarPopover = Widget.extend(WidgetAdapterMixin, StandaloneFieldManagerMi
         };
 
         this.$fieldsList = [];
-        return this.model.makeRecord(this.modelName, fieldsToGenerate).then(function (recordID) {
+        return this.model.makeRecord(this.modelName, fieldsToGenerate, fieldInformation).then(async function (recordID) {
             var defs = [];
 
+            const recordDataPoint = self.model.localData[recordID];
+            recordDataPoint.res_id = self.event.extendedProps.record.id;
+            await self.model._fetchSpecialData(recordDataPoint);
             var record = self.model.get(recordID);
             _.each(fieldsToGenerate, function (field) {
                 if (field.invisible) return;
diff --git a/addons/web/static/tests/views/calendar_tests.js b/addons/web/static/tests/views/calendar_tests.js
index 81475b4e7ed..725fcc9cb53 100644
--- a/addons/web/static/tests/views/calendar_tests.js
+++ b/addons/web/static/tests/views/calendar_tests.js
@@ -2,15 +2,18 @@ odoo.define('web.calendar_tests', function (require) {
 "use strict";
 
 var AbstractStorageService = require('web.AbstractStorageService');
+const BasicModel = require('web.BasicModel');
 var CalendarView = require('web.CalendarView');
 var CalendarRenderer = require('web.CalendarRenderer');
 var Dialog = require('web.Dialog');
+const fieldRegistry = require('web.field_registry');
 var ViewDialogs = require('web.view_dialogs');
 var fieldUtils = require('web.field_utils');
 var mixins = require('web.mixins');
 var RamStorage = require('web.RamStorage');
 var testUtils = require('web.test_utils');
 var session = require('web.session');
+const Widget = require('web.Widget');
 
 var createActionManager = testUtils.createActionManager;
 
@@ -912,6 +915,49 @@ QUnit.module('Views', {
         calendar.destroy();
     });
 
+    QUnit.test('render popover with widget which has specialData attribute', async function (assert) {
+        assert.expect(3);
+
+        await testUtils.mock.patch(BasicModel, {
+            _fetchSpecialDataForMyWidget() {
+                assert.step("_fetchSpecialDataForMyWidget");
+                return Promise.resolve();
+            },
+        });
+
+        const MyWidget = Widget.extend({
+            specialData: "_fetchSpecialDataForMyWidget",
+        });
+
+        fieldRegistry.add('specialWidget', MyWidget);
+
+        const calendar = await createCalendarView({
+            View: CalendarView,
+            model: 'event',
+            data: this.data,
+            arch: `<calendar class="o_calendar_test"
+                    date_start="start"
+                    date_stop="stop"
+                    all_day="allday"
+                    mode="week">
+                        <field name="name" string="Custom Name" widget="specialWidget"/>
+                        <field name="partner_id"/>
+                </calendar>`,
+            archs,
+            viewOptions: {
+                initialDate,
+            },
+        });
+
+        const event4 = document.querySelectorAll(".fc-event")[0];
+        await testUtils.dom.click(event4);
+        assert.containsOnce(calendar, '.o_cw_popover', "should open a popover clicking on event");
+        assert.verifySteps(["_fetchSpecialDataForMyWidget"]);
+
+        calendar.destroy();
+        await testUtils.mock.unpatch(BasicModel);
+    });
+
     QUnit.test('attributes hide_date and hide_time', async function (assert) {
         assert.expect(1);