[FIX] web: kanban column id may be based on value

A kanban column has two identifiers:

- db_id: framework unique identifier for the column

- id: either the record res_id (grouped on x2o) or the value

The issue is that sometimes the value may be a any string which
would be source of issue unexpected for an ID (and there was one
issue in mobile renderer).

This code change this so "id" is either the record res_id or
`undefined` value, and when used in XML we use id or fallback on db_id
when we need an identifier.

So in the XML data-id on a colum is always either the ID of the record
the group is based on, or the db_id in the form.

opw-782433
closes #21199

addons/web/static/src/js/views/kanban/kanban_column.js

@@ -41,7 +41,7 @@ var KanbanColumn = Widget.extend({
         this.data = data;
 
         var value = data.value;
-        this.id = data.res_id || value;
+        this.id = data.res_id;
         this.folded = !data.isOpen;
         this.has_active_field = 'active' in data.fields;
         this.fields = data.fields;

addons/web/static/src/js/views/kanban/kanban_renderer_mobile.js

@@ -107,8 +107,9 @@ KanbanRenderer.include({
                 var updateFunc = animate ? 'animate' : 'css';
                 self.$('.o_kanban_mobile_tab').removeClass('o_current');
                 _.each(self.widgets, function (column, index) {
-                    var $column = self.$('.o_kanban_group[data-id=' + column.id + ']');
-                    var $tab = self.$('.o_kanban_mobile_tab[data-id=' + column.id + ']');
+                    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 + '"]');
                     if (index === moveToIndex - 1) {
                         $column[updateFunc]({left: '-100%'});
                         $tab[updateFunc]({left: '0%'});

addons/web/static/src/xml/kanban.xml

@@ -9,7 +9,7 @@
 </t>
 
 <t t-name="KanbanView.Group">
-    <div t-attf-class="o_kanban_group#{widget.data_records.length == 0 ? ' o_kanban_no_records' : ''}" t-att-data-id="widget.id">
+    <div t-attf-class="o_kanban_group#{widget.data_records.length == 0 ? ' o_kanban_no_records' : ''}" t-att-data-id="widget.id or widget.db_id">
         <div class="o_kanban_header">
             <div class="o_kanban_header_title" t-att-title="widget.data_records.length + ' records'" data-delay="500">
                 <span class="o_column_title"><t t-esc="widget.title"/></span>
@@ -112,7 +112,7 @@
 <t t-name="KanbanView.MobileTabs">
     <div class="o_kanban_mobile_tabs">
         <t t-foreach="data" t-as="group">
-            <div class="o_kanban_mobile_tab" t-att-data-id="group.res_id">
+            <div class="o_kanban_mobile_tab" t-att-data-id="group.res_id or group.id">
                 <span class="o_column_title"><t t-esc="group.value"/></span>
             </div>
         </t>

addons/web/static/tests/views/kanban_mobile_tests.js

@@ -26,6 +26,7 @@ QUnit.module('Views', {
                     {id: 2, bar: true, foo: "blip", int_field: 9, qux: 13, product_id: 5, state: "def", category_ids: [6]},
                     {id: 3, bar: true, foo: "gnap", int_field: 17, qux: -3, product_id: 3, state: "ghi", category_ids: [7]},
                     {id: 4, bar: false, foo: "blip", int_field: -4, qux: 9, product_id: 5, state: "ghi", category_ids: []},
+                    {id: 5, bar: false, foo: "Hello \"World\"! #peace_n'_love", int_field: -9, qux: 10, state: "jkl", category_ids: []},
                 ]
             },
             product: {
@@ -66,6 +67,7 @@ QUnit.module('Views', {
                         '<div><field name="foo"/></div>' +
                     '</t></templates>' +
                 '</kanban>',
+            domain: [['product_id', '!=', false]],
             groupBy: ['product_id'],
         });
 
@@ -95,6 +97,33 @@ QUnit.module('Views', {
         assert.ok(kanban.$('.o_kanban_group:nth(1) >  div:nth(1)').hasClass('o_kanban_quick_create'),
             "clicking on create should open the quick_create in the second column");
 
+        kanban.destroy();
+    });
+    QUnit.test('mobile grouped on many2one rendering', function (assert) {
+        assert.expect(3);
+
+        var kanban = createView({
+            View: KanbanView,
+            model: 'partner',
+            data: this.data,
+            arch: '<kanban class="o_kanban_test o_kanban_small_column">' +
+                    '<templates><t t-name="kanban-box">' +
+                        '<div><field name="foo"/></div>' +
+                    '</t></templates>' +
+                '</kanban>',
+            groupBy: ['foo'],
+        });
+
+        // basic rendering tests
+        assert.strictEqual(kanban.$('.o_kanban_group').length, 4, "should have 4 columns" );
+        assert.strictEqual(kanban.$('.o_kanban_group[data-id^="partner_"]').length, 4,
+            "all column should have framework unique identifiers");
+
+        // kanban column should match kanban mobile tabs
+        var column_ids = kanban.$('.o_kanban_group').map(function(){ return $(this).data('id') }).get();
+        var tab_ids = kanban.$('.o_kanban_mobile_tab').map(function(){ return $(this).data('id') }).get();
+        assert.deepEqual(column_ids, tab_ids, "all columns data-id should match mobile tabs data-id");
+
         kanban.destroy();
     });
 });

addons/web/static/tests/views/kanban_tests.js

@@ -1071,7 +1071,7 @@ QUnit.module('Views', {
         assert.strictEqual(kanban.$('.o_kanban_group:last').data('id'), 3,
             'last column should now be [3, "hello"]');
         assert.strictEqual(kanban.$('.o_kanban_group').length, 2, "should still have two columns");
-        assert.ok(!kanban.$('.o_kanban_group:first').data('id'),
+        assert.ok(!_.isNumber(kanban.$('.o_kanban_group:first').data('id')),
             'first column should have no id (Undefined column)');
         // check available actions on 'Undefined' column
         assert.ok(kanban.$('.o_kanban_group:first .o_kanban_toggle_fold').length,