From e6c2dfdf2943bf00c78e1c907d63ad7ab7a38003 Mon Sep 17 00:00:00 2001 From: Mohammed Shekha Date: Thu, 13 May 2021 12:23:51 +0000 Subject: [PATCH] [IMP] web: allow user to select multiple company Before this commit: when user selects company from company switcher, page is reloaded, what if user wants to select multiple companies from dropdown, he have to wait for page reload and need to do same process again. After this commit: when user selects company from company switcher, page will not reloaded as soon as user toggles checkbox, user will given time to select another item or unselect other item from dropdown, so user can select multiple companies or unselect multiple companies. task-2467747 closes odoo/odoo#70799 Related: odoo/enterprise#18376 Signed-off-by: Aaron Bohy (aab) --- .../src/js/widgets/switch_company_menu.js | 34 ++++++++++++++--- .../tests/widgets/company_switcher_tests.js | 37 +++++++++++++++++++ 2 files changed, 65 insertions(+), 6 deletions(-) diff --git a/addons/web/static/src/js/widgets/switch_company_menu.js b/addons/web/static/src/js/widgets/switch_company_menu.js index d8eab231c63..e8c188a6497 100644 --- a/addons/web/static/src/js/widgets/switch_company_menu.js +++ b/addons/web/static/src/js/widgets/switch_company_menu.js @@ -25,6 +25,7 @@ var SwitchCompanyMenu = Widget.extend({ }, // force this item to be the first one to the left of the UserMenu in the systray sequence: 1, + TOGGLE_DELAY: 1000, /** * @override */ @@ -47,6 +48,14 @@ var SwitchCompanyMenu = Widget.extend({ return this._super.apply(this, arguments); }, + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + _getElements() { + return [...this.el.querySelectorAll(".dropdown-item")]; + }, + //-------------------------------------------------------------------------- // Handlers //-------------------------------------------------------------------------- @@ -98,19 +107,32 @@ var SwitchCompanyMenu = Widget.extend({ ev.preventDefault(); ev.stopPropagation(); var dropdownItem = $(ev.currentTarget).parent(); - var companyID = dropdownItem.data('company-id'); - var allowed_company_ids = this.allowed_company_ids; - var current_company_id = allowed_company_ids[0]; + const allowedCompanyIds = this.allowed_company_ids; + const currentCompanyId = allowedCompanyIds[0]; if (dropdownItem.find('.fa-square-o').length) { - allowed_company_ids.push(companyID); dropdownItem.find('.fa-square-o').removeClass('fa-square-o').addClass('fa-check-square'); $(ev.currentTarget).attr('aria-checked', 'true'); } else { - allowed_company_ids.splice(allowed_company_ids.indexOf(companyID), 1); dropdownItem.find('.fa-check-square').addClass('fa-square-o').removeClass('fa-check-square'); $(ev.currentTarget).attr('aria-checked', 'false'); } - session.setCompanies(current_company_id, allowed_company_ids); + const toggleCompany = () => { + [...this._getElements()].forEach((item) => { + const companyID = parseInt(item.getAttribute('data-company-id')); + if (item.querySelector('.fa-check-square')) { + if (!allowedCompanyIds.includes(companyID)) { + allowedCompanyIds.push(companyID); + } + } else if (allowedCompanyIds.includes(companyID)) { + allowedCompanyIds.splice(allowedCompanyIds.indexOf(companyID), 1); + } + }); + session.setCompanies(currentCompanyId, allowedCompanyIds); + }; + if (this.toggleTimeout) { + clearTimeout(this.toggleTimeout); + } + this.toggleTimeout = setTimeout(toggleCompany, this.TOGGLE_DELAY); }, }); diff --git a/addons/web/static/tests/widgets/company_switcher_tests.js b/addons/web/static/tests/widgets/company_switcher_tests.js index 23c32f97178..c30127e5462 100644 --- a/addons/web/static/tests/widgets/company_switcher_tests.js +++ b/addons/web/static/tests/widgets/company_switcher_tests.js @@ -89,6 +89,11 @@ QUnit.module('widgets', { allowed_company_ids: [1], }, }; + this.originalToggleDelay = SwitchCompanyMenu.prototype.TOGGLE_DELAY; + SwitchCompanyMenu.prototype.TOGGLE_DELAY = 0; + }, + afterEach: function () { + SwitchCompanyMenu.prototype.TOGGLE_DELAY = this.originalToggleDelay; }, }, function () { @@ -125,6 +130,38 @@ QUnit.module('widgets', { }); }); + QUnit.test("Toggle multiple companies at once", async function (assert) { + /** + * [x] **Company 1** [x] **Company 1** + * toggle->[ ] Company 2 ====> [x] Company 2 + * toggle->[x] Company 3 [ ] Company 3 + */ + assert.expect(2); + SwitchCompanyMenu.prototype.TOGGLE_DELAY = this.originalToggleDelay; + let resolver; + const prom = new Promise((r) => { + resolver = r; + }); + + const menu = await createSwitchCompanyMenu({ + session: { + ...this.session_mock_multi, + setCompanies: function (mainCompanyId, companyIds) { + assert.strictEqual(mainCompanyId, 1, "Main company should not have changed"); + assert.deepEqual(companyIds, [1, 2], "First and Second company should be activated"); + resolver(); + }, + }, + }); + + await testUtils.dom.click(menu.$('.dropdown-toggle')); // open company switcher dropdown + await testUtils.dom.click(menu.$(`div[data-company-id="2"] div.toggle_company`)); + await testUtils.dom.click(menu.$(`div[data-company-id="3"] div.toggle_company`)); + + await prom; + menu.destroy(); + }); + QUnit.test("Toggle active company in mutliple company mode", async function (assert) { /** * [x] **Company 1** [x] **Company 1**