From 459228f0536519ab7eecad1028e8aedbe6909667 Mon Sep 17 00:00:00 2001 From: Romain Estievenart Date: Fri, 19 Oct 2018 07:05:36 +0000 Subject: [PATCH] [IMP] web: Fetch all columns in mobile kanban view MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- .../src/js/views/kanban/kanban_controller.js | 44 +++++++------------ .../src/js/views/kanban/kanban_model.js | 11 ----- .../js/views/kanban/kanban_renderer_mobile.js | 21 +++++---- .../static/src/js/views/kanban/kanban_view.js | 4 +- .../static/tests/views/kanban_mobile_tests.js | 4 +- 5 files changed, 28 insertions(+), 56 deletions(-) diff --git a/addons/web/static/src/js/views/kanban/kanban_controller.js b/addons/web/static/src/js/views/kanban/kanban_controller.js index c51c11ebe81..66d473095be 100644 --- a/addons/web/static/src/js/views/kanban/kanban_controller.js +++ b/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... diff --git a/addons/web/static/src/js/views/kanban/kanban_model.js b/addons/web/static/src/js/views/kanban/kanban_model.js index 30af177214f..2f2def8d850 100644 --- a/addons/web/static/src/js/views/kanban/kanban_model.js +++ b/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 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. * 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 dfc86042aca..377131c16ba 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 @@ -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(); }, /** diff --git a/addons/web/static/src/js/views/kanban/kanban_view.js b/addons/web/static/src/js/views/kanban/kanban_view.js index d265ca6ae6b..cc0de646d2d 100644 --- a/addons/web/static/src/js/views/kanban/kanban_view.js +++ b/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; diff --git a/addons/web/static/tests/views/kanban_mobile_tests.js b/addons/web/static/tests/views/kanban_mobile_tests.js index 184ac985e80..ecc986eb0e4 100644 --- a/addons/web/static/tests/views/kanban_mobile_tests.js +++ b/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'));