[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) <aab@odoo.com>

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);
     },
 
 });

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**