From 868bad0259922902a3276b0c4cf141efaadb206b Mon Sep 17 00:00:00 2001
From: Nicolas Martinelli <nim@odoo.com>
Date: Tue, 6 Aug 2019 14:01:23 +0000
Subject: [PATCH] [FIX] web: quick create in RTL

- Set a language using RTL (e.g. Arabic)
- Activate mobile mode (through debug mode or on a mobile device)
- Go to the CRM kanban view (make sure no record exist so the no_content
message is displayed)
- Add a new record
- Fill in the name, click outside of the field

The no_content message is displayed over the form view and it is impossible
to save the record.

The root cause is the incorrect structure of the kanban view page in RTL,
leading the user to the wrong element and triggering the wrong event.

We make the structure of the view aware of the RTL configuration.

opw-2046231

closes odoo/odoo#35509

Signed-off-by: Nicolas Martinelli (nim) <nim@odoo.com>


Co-authored-by: Mohammed Shekha <msh@openerp.com>
---
 .../js/views/kanban/kanban_renderer_mobile.js | 37 +++++++++++++------
 .../static/tests/views/kanban_mobile_tests.js | 31 ++++++++++++++++
 2 files changed, 57 insertions(+), 11 deletions(-)

diff --git a/addons/web/static/src/js/views/kanban/kanban_renderer_mobile.js b/addons/web/static/src/js/views/kanban/kanban_renderer_mobile.js
index 3961805c41e..7160cca12fb 100644
--- a/addons/web/static/src/js/views/kanban/kanban_renderer_mobile.js
+++ b/addons/web/static/src/js/views/kanban/kanban_renderer_mobile.js
@@ -90,10 +90,15 @@ KanbanRenderer.include({
         var index = _.findIndex(this.widgets, {db_id: localID});
         var $column = this.widgets[index].$el;
         var left = $column.css('left');
+        var right = $column.css('right');
         var scrollTop = $column.scrollTop();
         return this._super.apply(this, arguments).then(function () {
             $column = self.widgets[index].$el;
-            $column.css({left: left});
+            if (_t.database.parameters.direction === 'rtl') {
+                $column.css({right: right});
+            } else {
+                $column.css({left: left});
+            }
             $column.scrollTop(scrollTop); // required when clicking on 'Load More'
             self._enableSwipe();
         });
@@ -149,22 +154,32 @@ KanbanRenderer.include({
                     var columnID = column.id || column.db_id;
                     var $column = self.$('.o_kanban_group[data-id="' + columnID + '"]');
                     var $tab = self.$('.o_kanban_mobile_tab[data-id="' + columnID + '"]');
+                    var colPosition, tabPosition;
                     if (index === moveToIndex - 1) {
-                        $column[updateFunc]({left: '-100%'});
-                        $tab[updateFunc]({left: '0%'});
+                        colPosition = '-100%';
+                        tabPosition = '0%';
                     } else if (index === moveToIndex + 1) {
-                        $column[updateFunc]({left: '100%'});
-                        $tab[updateFunc]({left: '100%'});
+                        colPosition = '100%';
+                        tabPosition = '100%';
                     } else if (index === moveToIndex) {
-                        $column[updateFunc]({left: '0%'});
-                        $tab[updateFunc]({left: '50%'});
+                        colPosition = '0%';
+                        tabPosition = '50%';
                         $tab.addClass('o_current');
                     } else if (index < moveToIndex) {
-                        $column.css({left: '-100%'});
-                        $tab[updateFunc]({left: '-100%'});
+                        colPosition = '-100%';
+                        tabPosition = '-100%';
                     } else if (index > moveToIndex) {
-                        $column.css({left: '100%'});
-                        $tab[updateFunc]({left: '200%'});
+                        colPosition = '100%';
+                        tabPosition = '200%';
+                    } else {
+                        return;
+                    }
+                    if (_t.database.parameters.direction === 'rtl') {
+                        $column[updateFunc]({right: colPosition});
+                        $tab[updateFunc]({right: tabPosition});
+                    } else {
+                        $column[updateFunc]({left: colPosition});
+                        $tab[updateFunc]({left: tabPosition});
                     }
                 });
                 def.resolve();
diff --git a/addons/web/static/tests/views/kanban_mobile_tests.js b/addons/web/static/tests/views/kanban_mobile_tests.js
index 0ee35c2c9c3..25d700b0d61 100644
--- a/addons/web/static/tests/views/kanban_mobile_tests.js
+++ b/addons/web/static/tests/views/kanban_mobile_tests.js
@@ -1,10 +1,12 @@
 odoo.define('web.kanban_mobile_tests', function (require) {
 "use strict";
 
+var core = require('web.core');
 var KanbanView = require('web.KanbanView');
 var testUtils = require('web.test_utils');
 
 var createView = testUtils.createView;
+var _t = core._t;
 
 QUnit.module('Views', {
     beforeEach: function () {
@@ -104,6 +106,35 @@ QUnit.module('Views', {
 
         kanban.destroy();
     });
+
+    QUnit.test('mobile grouped rendering in rtl direction', function (assert) {
+        assert.expect(2);
+
+        var direction = _t.database.parameters.direction;
+        _t.database.parameters.direction = 'rtl';
+
+        var kanban = createView({
+            View: KanbanView,
+            model: 'partner',
+            data: this.data,
+            arch: '<kanban class="o_kanban_test o_kanban_small_column" on_create="quick_create">' +
+                    '<templates><t t-name="kanban-box">' +
+                        '<div><field name="foo"/></div>' +
+                    '</t></templates>' +
+                '</kanban>',
+            domain: [['product_id', '!=', false]],
+            groupBy: ['product_id'],
+        });
+
+        assert.strictEqual(kanban.$('.o_kanban_group:first')[0].style.right, '0%',
+            "first tab should have 50% right");
+        assert.strictEqual(kanban.$('.o_kanban_group:nth(1)')[0].style.right, '100%',
+            "second tab should have 100% right");
+
+        kanban.destroy();
+        _t.database.parameters.direction = direction;
+    });
+
     QUnit.test('mobile grouped with undefined column', function (assert) {
         assert.expect(3);