[IMP] web: Fetch all columns in mobile kanban view

In this commit, we remove the lazy loading currently used by the mobile
kanban view to avoid the poor user experience. We had to wait each time
we swiped between kanban columns.

Now all data are fetched like in desktop. Note that it might still have
loading during the swipe for folded columns.

Task ID: 1896614

closes odoo/odoo#28142

Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>

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

@@ -31,7 +31,6 @@ var KanbanController = BasicController.extend({
         kanban_column_add_record: '_onAddRecordToColumn',
         kanban_column_resequence: '_onColumnResequence',
         kanban_load_more: '_onLoadMore',
-        kanban_load_records: '_onLoadColumnRecords',
         column_toggle_fold: '_onToggleColumn',
         kanban_column_records_toggle_active: '_onToggleActiveRecords',
     }),
@@ -379,25 +378,6 @@ var KanbanController = BasicController.extend({
                 self.update({}, {reload: !column.isEmpty()});
             });
     },
-    /**
-     * Loads the record of a given column (used in mobile, as the columns are
-     * lazy loaded)
-     *
-     * @private
-     * @param {OdooEvent} ev
-     */
-    _onLoadColumnRecords: function (ev) {
-        var self = this;
-        this.model.loadColumnRecords(ev.data.columnID).then(function (dbID) {
-            var data = self.model.get(dbID);
-            return self.renderer.updateColumn(dbID, data).then(function() {
-                self._updateEnv();
-                if (ev.data.onSuccess) {
-                    ev.data.onSuccess();
-                }
-            });
-        });
-    },
     /**
      * @private
      * @param {OdooEvent} ev
@@ -490,15 +470,21 @@ var KanbanController = BasicController.extend({
      */
     _onToggleColumn: function (ev) {
         var self = this;
-        var column = ev.target;
-        this.model.toggleGroup(column.db_id).then(function (db_id) {
-            var data = self.model.get(db_id);
-            var options = {
-                openQuickCreate: !!ev.data.openQuickCreate,
-            };
-            self.renderer.updateColumn(db_id, data, options);
-            self._updateEnv();
-        });
+        const columnID = ev.target.db_id || ev.data.db_id;
+        this.model.toggleGroup(columnID)
+            .then(function (db_id) {
+                var data = self.model.get(db_id);
+                var options = {
+                    openQuickCreate: !!ev.data.openQuickCreate,
+                };
+                return self.renderer.updateColumn(db_id, data, options);
+            })
+            .then(function () {
+                self._updateEnv();
+                if (ev.data.onSuccess) {
+                    ev.data.onSuccess();
+                }
+            });
     },
     /**
      * @todo should simply use field_changed event...

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

@@ -183,17 +183,6 @@ var KanbanModel = BasicModel.extend({
         params.groupedBy = (params.groupedBy && params.groupedBy.length) ? params.groupedBy : this.defaultGroupedBy;
         return this._super(params);
     },
-    /**
-     * Opens a given group and loads its <limit> first records
-     *
-     * @param {string} groupID
-     * @returns {Promise}
-     */
-    loadColumnRecords: function (groupID) {
-        var dataPoint = this.localData[groupID];
-        dataPoint.isOpen = true;
-        return this.reload(groupID);
-    },
     /**
      * Load more records in a group.
      *

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

@@ -5,7 +5,6 @@ odoo.define('web.KanbanRendererMobile', function (require) {
  * The purpose of this file is to improve the UX of grouped kanban views in
  * mobile. It includes the KanbanRenderer (in mobile only) to only display one
  * column full width, and enables the swipe to browse to the other columns.
- * Moreover, records in columns are lazy-loaded.
  */
 
 var config = require('web.config');
@@ -101,7 +100,6 @@ KanbanRenderer.include({
                 $column.css({left: left});
             }
             $column.scrollTop(scrollTop); // required when clicking on 'Load More'
-            self._enableSwipe();
         });
     },
 
@@ -292,22 +290,23 @@ KanbanRenderer.include({
      *   and displayed
      */
     _moveToGroup: function (moveToIndex, animate) {
-        var self = this;
         if (moveToIndex < 0 || moveToIndex >= this.widgets.length) {
             this._layoutUpdate(animate);
             return Promise.resolve();
         }
         this.activeColumnIndex = moveToIndex;
         var column = this.widgets[this.activeColumnIndex];
-        return new Promise(function (resolve) {
-            self.trigger_up('kanban_load_records', {
-                columnID: column.db_id,
-                onSuccess: function () {
-                    self._layoutUpdate(animate);
-                    resolve();
-                },
+        if (column.data.isOpen) {
+            this._layoutUpdate(animate);
+        } else {
+            // Unfold column and fetch records
+            this.trigger_up('column_toggle_fold', {
+                db_id: column.db_id,
+                onSuccess: () => this._layoutUpdate(animate)
             });
-        });
+        }
+        this._enableSwipe();
+        return Promise.resolve();
     },
 
     /**

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

@@ -32,9 +32,7 @@ var KanbanView = BasicView.extend({
         this._super.apply(this, arguments);
 
         this.loadParams.limit = this.loadParams.limit || 40;
-        // in mobile, columns are lazy-loaded, so set 'openGroupByDefault' to
-        // false so that they will won't be loaded by the initial load
-        this.loadParams.openGroupByDefault = config.device.isMobile ? false : true;
+        this.loadParams.openGroupByDefault = true;
         this.loadParams.type = 'list';
         this.noDefaultGroupby = params.noDefaultGroupby;
         var progressBar;

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

@@ -81,8 +81,8 @@ QUnit.module('Views', {
             "first column is the active column with class 'o_current'");
         assert.containsN(kanban, '.o_kanban_group:first > div.o_kanban_record', 2,
             "there are 2 records in active tab");
-        assert.strictEqual(kanban.$('.o_kanban_group:nth(1) > div.o_kanban_record').length, 0,
-            "there is no records in next tab. Records will be loaded when it will be opened");
+        assert.strictEqual(kanban.$('.o_kanban_group:nth(1) > div.o_kanban_record').length, 2,
+            "there are 2 records in next tab. Records will be loaded when the kanban is opened");
 
         // quick create in first column
         await testUtils.dom.click(kanban.$buttons.find('.o-kanban-button-new'));