[REF] mail: activities list, ‘mark as done’ sliding panel

Refactor ‘mark as done’ popup JS in order to use a sliding panel layout instead.
Sliding panels are currently needed in kanban views, where activities are listed in a dropdown that can't handle popups because of CSS overflow and lack of space.

Since this new system check for default bootstrap data-toggle attributes, it could be easily used elsewhere changing the buttons's data-toggle and providing the necessary container for the “mark as done” form.

1 files changed, 75 insertions, 26 deletions

diff --git a/addons/mail/static/src/js/activity.js b/addons/mail/static/src/js/activity.js
index cabcd469b5c..65a4f0a6f2e 100644
--- a/addons/mail/static/src/js/activity.js
+++ b/addons/mail/static/src/js/activity.js
@@ -271,39 +271,55 @@ var BasicActivity = AbstractField.extend({
         ev.stopPropagation();
         ev.preventDefault();
         var self = this;
-        var $popoverElement = $(ev.currentTarget);
-        var activityID = $popoverElement.data('activity-id');
-        var previousActivityTypeID = $popoverElement.data('previous-activity-type-id');
-        var forceNextActivity = $popoverElement.data('force-next-activity');
-        if (!$popoverElement.data('bs.popover')) {
-            $popoverElement.popover({
+        var $markDoneBtn = $(ev.currentTarget);
+        var activityID = $markDoneBtn.data('activity-id');
+        var previousActivityTypeID = $markDoneBtn.data('previous-activity-type-id');
+        var forceNextActivity = $markDoneBtn.data('force-next-activity');
+
+        if ($markDoneBtn.data('toggle') == 'collapse') {
+            var $actLi = $markDoneBtn.parents('.o_log_activity');
+            var $panel = self.$('#o_activity_form_' + activityID);
+
+            if (!$panel.data('bs.collapse')) {
+                var $form = $(QWeb.render('mail.activity_feedback_form', { previous_activity_type_id: previousActivityTypeID, force_next: forceNextActivity}));
+                $panel.append($form);
+                self._onMarkActivityDoneActions($markDoneBtn, $form, activityID);
+
+                // Close and reset any other open panels
+                _.each($panel.siblings('.o_activity_form'), function (el) {
+                    if ($(el).data('bs.collapse')) {
+                        $(el).empty().collapse('dispose').removeClass('show');
+                    }
+                });
+
+                // Scroll  to selected activity
+                $markDoneBtn.parents('.o_activity_log_container').scrollTo($actLi.position().top, 100);
+            }
+
+            // Empty and reset panel on close
+            $panel.on('hidden.bs.collapse', function () {
+                if ($panel.data('bs.collapse')) {
+                    $actLi.removeClass('o_activity_selected');
+                    $panel.collapse('dispose');
+                    $panel.empty();
+                }
+            });
+
+            this.$('.o_activity_selected').removeClass('o_activity_selected');
+            $actLi.toggleClass('o_activity_selected');
+            $panel.collapse('toggle');
+
+        } else if (!$markDoneBtn.data('bs.popover')) {
+            $markDoneBtn.popover({
                 template: $(Popover.Default.template).addClass('o_mail_activity_feedback')[0].outerHTML, // Ugly but cannot find another way
-                container: $popoverElement,
+                container: $markDoneBtn,
                 title : _t("Feedback"),
                 html: true,
                 trigger:'click',
                 placement: 'right', // FIXME: this should work, maybe a bug in the popper lib
                 content : function () {
                     var $popover = $(QWeb.render('mail.activity_feedback_form', { previous_activity_type_id: previousActivityTypeID, force_next: forceNextActivity}));
-                    $popover.find('#activity_feedback').val(self._draftFeedback[activityID]);
-                    $popover.on('click', '.o_activity_popover_done', function (ev) {
-                        ev.stopPropagation();
-                        self._markActivityDone({
-                            activityID: activityID,
-                            feedback: _.escape($popover.find('#activity_feedback').val()),
-                        });
-                    });
-                    $popover.on('click', '.o_activity_popover_done_next', function (ev) {
-                        ev.stopPropagation();
-                        self._markActivityDoneAndScheduleNext({
-                            activityID: activityID,
-                            feedback: _.escape($popover.find('#activity_feedback').val()),
-                        });
-                    });
-                    $popover.on('click', '.o_activity_popover_discard', function (ev) {
-                        ev.stopPropagation();
-                        $popoverElement.popover('hide');
-                    });
+                    self._onMarkActivityDoneActions($markDoneBtn, $popover, activityID);
                     return $popover;
                 },
             }).on('shown.bs.popover', function () {
@@ -316,6 +332,39 @@ var BasicActivity = AbstractField.extend({
         }
     },
     /**
+    * Bind all necessary actions to the 'mark as done' form
+    *
+    * @private
+    * @param {Object} $form
+    * @param {integer} activityID
+    */
+    _onMarkActivityDoneActions: function ($btn, $form, activityID) {
+        var self = this;
+        $form.find('#activity_feedback').val(self._draftFeedback[activityID]);
+        $form.on('click', '.o_activity_popover_done', function (ev) {
+            ev.stopPropagation();
+            self._markActivityDone({
+                activityID: activityID,
+                feedback: _.escape($form.find('#activity_feedback').val()),
+            });
+        });
+        $form.on('click', '.o_activity_popover_done_next', function (ev) {
+            ev.stopPropagation();
+            self._markActivityDoneAndScheduleNext({
+                activityID: activityID,
+                feedback: _.escape($form.find('#activity_feedback').val()),
+            });
+        });
+        $form.on('click', '.o_activity_popover_discard', function (ev) {
+            ev.stopPropagation();
+            if ($btn.data('bs.popover')) {
+                $btn.popover('hide');
+            } else if ($btn.data('toggle') == 'collapse') {
+                self.$('#o_activity_form_' + activityID).collapse('hide');
+            }
+        });
+    },
+    /**
      * @private
      * @param {MouseEvent} ev
      * @returns {$.Deferred}