[FIX] website_forum: restore the possibility to change accepted answer

The design for accepted answers changed a lot and with it, the
possibility to remove or change accepted answers was gone. This commit
tries to reintroduce the possibility without breaking the design and
by making an unique attribute addition to the XML (stable change).

task-2034497

closes odoo/odoo#35445

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

3 files changed, 48 insertions, 11 deletions

diff --git a/addons/website_forum/static/src/js/website_forum.js b/addons/website_forum/static/src/js/website_forum.js
index 900f6d9ccd0..e8e7cd70558 100644
--- a/addons/website_forum/static/src/js/website_forum.js
+++ b/addons/website_forum/static/src/js/website_forum.js
@@ -24,6 +24,9 @@ sAnimations.registry.websiteForum = sAnimations.Class.extend({
         'click .vote_up:not(.karma_required), .vote_down:not(.karma_required)': '_onVotePostClick',
         'click .o_js_validation_queue a[href*="/validate"]': '_onValidationQueueClick',
         'click .accept_answer:not(.karma_required)': '_onAcceptAnswerClick',
+        'click .validate_answer [data-href]': '_onAcceptAnswerClick',
+        'mouseenter .validate_answer [data-href]': '_onRemoveValidAnswerMouse',
+        'mouseleave .validate_answer [data-href]': '_onRemoveValidAnswerMouse',
         'click .favourite_question': '_onFavoriteQuestionClick',
         'click .comment_delete': '_onDeleteCommentClick',
         'click .notification_close': '_onCloseNotificationClick',
@@ -350,6 +353,8 @@ sAnimations.registry.websiteForum = sAnimations.Class.extend({
      */
     _onAcceptAnswerClick: function (ev) {
         ev.preventDefault();
+        var self = this;
+        var $acceptAnswerLinks = this.$('.accept_answer');
         var $link = $(ev.currentTarget);
         this._rpc({
             route: $link.data('href'),
@@ -368,19 +373,41 @@ sAnimations.registry.websiteForum = sAnimations.Class.extend({
                     $link.parent().append($warning);
                 }
             } else {
+                $acceptAnswerLinks.removeClass('oe_answer_true')
+                                  .addClass('oe_answer_false');
                 $link.toggleClass('oe_answer_true', !!data)
                      .toggleClass('oe_answer_false', !data);
+
+                // TODO in master, review the utility of this function...
+                self._onCheckAnswerStatus(ev);
+
+                // If we are removing an accepted answer, reload the page as the
+                // design is quite different with or without an accepted answer.
+                if ($link.closest('.validate_answer').length) {
+                    window.location.reload();
+                }
             }
         });
-        this._onCheckAnswerStatus(ev);
+    },
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onRemoveValidAnswerMouse: function (ev) {
+        var hover = (ev.type === 'mouseenter');
+        $(ev.currentTarget).find('.fa')
+            .toggleClass('fa-times-circle text-danger', hover)
+            .toggleClass('fa-check-circle text-success', !hover);
     },
     /**
      * @private
      * @param {Event} ev
      */
     _onCheckAnswerStatus: function (ev) {
-        var $link = $(ev.currentTarget);
-        $link.toggleClass('text-success', !$link.hasClass('oe_answer_true'));
+        _.each(this.$('.accept_answer'), function (link) {
+            var $link = $(link);
+            $link.toggleClass('text-success', $link.hasClass('oe_answer_true'));
+        });
     },
     /**
      * @private
diff --git a/addons/website_forum/static/src/scss/website_forum.scss b/addons/website_forum/static/src/scss/website_forum.scss
index 477d1fd6ef6..59ed45536ef 100644
--- a/addons/website_forum/static/src/scss/website_forum.scss
+++ b/addons/website_forum/static/src/scss/website_forum.scss
@@ -47,16 +47,23 @@ $bronze: #eea91e;
     }
 
     .validate_answer {
-        @include o-position-absolute(0,0,0,0);
+        @include o-position-absolute(0, auto, 0, 0);
+        width: 4px;
         height: 100%;
-        .bg-success {
-            @include o-position-absolute(0,0,0,0);
-            height: 100%;
-            width: 4px;
+        z-index: 1; // On top of card content if an alert is displayed inside
+
+        > .bg-success {
+            @include o-position-absolute(0, 0, 0, 0);
         }
-        span {
-            @include o-position-absolute(10px,0,0,-9px);
+        > span {
+            @include o-position-absolute(10px, 50%);
+            transform: translateX(50%);
             font-size: 20px;
+
+            &[data-href] {
+                cursor: pointer;
+            }
+
             i {
                 padding: 2px 3px;
                 border-radius: 100%;
diff --git a/addons/website_forum/views/website_forum.xml b/addons/website_forum/views/website_forum.xml
index 1509dd71a81..7b20b01edb1 100644
--- a/addons/website_forum/views/website_forum.xml
+++ b/addons/website_forum/views/website_forum.xml
@@ -800,7 +800,10 @@
         <div class="card-body">
             <div t-if="answer.is_correct" class="validate_answer">
                 <div class="bg-success"></div>
-                <span title="Question has accepted answer" role="img" aria-label="Question has accepted answer"><i class="fa fa-check-circle text-success bg-white"/></span>
+                <span title="Question has accepted answer" role="img" aria-label="Question has accepted answer"
+                      t-attf-data-href="/forum/#{slug(question.forum_id)}/post/#{slug(answer)}/toggle_correct">
+                    <i class="fa fa-check-circle text-success bg-white"/>
+                </span>
             </div>
             <div class="row">
                 <div class="col-1">