[IMP] rma_sale: portal ux

When the user selects an operation, the comment shows up so the customer
doesn't forget to enter his comments

rma_sale/static/src/js/rma_portal_form.js

@@ -0,0 +1,52 @@
+/* Copyright 2021 Tecnativa - David Vidal
+   License LGPL-3.0 or later (https://www.gnu.org/licenses/lgpl). */
+
+odoo.define("rma_sale.animation", function (require) {
+    "use strict";
+
+    var sAnimation = require("website.content.snippets.animation");
+
+    // In the customer portal when a RMA operation is selected show the comments
+    // selector so the user doesn't miss the chance to add his comments
+    sAnimation.registry.rma_operation_portal = sAnimation.Class.extend({
+        selector: ".rma-operation",
+        init: function (parent, editableMode) {
+            this._super.apply(this, arguments);
+            this.id = null;
+            this.$comment = null;
+            this.$comment_input = null;
+        },
+        start: function () {
+            this.id = this.el.name.replace("-operation_id", "")
+            this.$comment = $("#comment-" + this.id)
+            this.$comment_input = $("[name='" + this.id + "-description']")
+            var _this = this;
+            this.$el.on("change", function () {
+                _this._onChangeOperationId();
+            });
+        },
+        _show_comment: function(){
+            if (this.$comment) {
+                this.$comment.removeClass("show");
+                this.$comment.addClass("show");
+                if (this.$comment_input) {
+                    this.$comment_input.focus();
+                }
+            }
+        },
+        _hide_comment: function(){
+            if (this.$comment) {
+                this.$comment.removeClass("show");
+            }
+        },
+        _onChangeOperationId: function(){
+            // Toggle comment on or off if an operation is requested
+            if (this.$el && this.$el.val()) {
+                this._show_comment();
+            } else {
+                this._hide_comment();
+            }
+        },
+    });
+
+});

rma_sale/views/assets.xml

@@ -2,7 +2,9 @@
 <odoo>
     <template id="assets_frontend" inherit_id="web.assets_frontend" name="Request RMA">
         <xpath expr="//link[last()]" position="after">
+            <script type="text/javascript" src="/rma_sale/static/src/js/rma_portal_form.js"/>
             <link rel="stylesheet" type="text/scss" href="/rma_sale/static/src/scss/rma_sale.scss"/>
         </xpath>
     </template>
+
 </odoo>

rma_sale/views/sale_portal_template.xml

@@ -103,7 +103,7 @@
                                                 </td>
                                                 <td class="text-left">
                                                     <select t-attf-name="#{data_index}-operation_id"
-                                                            class="form-control">
+                                                            class="form-control rma-operation">
                                                         <option value="">---</option>
                                                         <t t-foreach="operations" t-as="operation">
                                                             <option t-att-value="operation.id">