[MIG] V13 properties menu

pms/static/src/js/widgets/switch_hotel_menu.js

@@ -1,61 +0,0 @@
-odoo.define('pms.SwitchPmsMenu', function(require) {
-"use strict";
-
-var config = require('web.config');
-var core = require('web.core');
-var session = require('web.session');
-var SystrayMenu = require('web.SystrayMenu');
-var Widget = require('web.Widget');
-
-var _t = core._t;
-
-var SwitchPmsMenu = Widget.extend({
-    template: 'pms.SwitchPmsMenu',
-    willStart: function() {
-        this.isMobile = config.device.isMobile;
-        if (!session.user_pms) {
-            return $.Deferred().reject();
-        }
-        return this._super();
-    },
-    start: function() {
-        var self = this;
-        this.$el.on('click', '.dropdown-menu li a[data-menu]', _.debounce(function(ev) {
-            ev.preventDefault();
-            var pms_property_id = $(ev.currentTarget).data('property-id');
-            self._rpc({
-                    model: 'res.users',
-                    method: 'write',
-                    args: [[session.uid], {'pms_property_id': pms_property_id}],
-                })
-                .then(function() {
-                    location.reload();
-                });
-        }, 1500, true));
-
-        var properties_list = '';
-        if (this.isMobile) {
-            propertiess_list = '<li class="bg-info">' + _t('Tap on the list to change property') + '</li>';
-        }
-        else {
-            self.$('.oe_topbar_name').text(session.user_properties.current_property[1]);
-        }
-        _.each(session.user_properties.allowed_propierties, function(property) {
-            var a = '';
-            if (property[0] === session.user_properties.current_property[0]) {
-                a = '<i class="fa fa-check mr8"></i>';
-            } else {
-                a = '<span class="mr24"/>';
-            }
-            properties_list += '<li><a href="#" data-menu="property" data-property-id="' + property[0] + '">' + a + property[1] + '</a></li>';
-        });
-        self.$('.dropdown-menu').html(properties_list);
-        return this._super();
-    },
-});
-
-SystrayMenu.Items.push(SwitchPmsMenu);
-
-return SwitchPmsMenu;
-
-});

pms/static/src/js/widgets/switch_property_menu.js

@@ -0,0 +1,126 @@
+odoo.define('web.SwitchPmsMenu', function(require) {
+    "use strict";
+    
+    /**
+     * When Odoo is configured in multi-property mode, users should obviously be able
+     * to switch their interface from one property to the other.  This is the purpose
+     * of this widget, by displaying a dropdown menu in the systray.
+     */
+    
+    var config = require('web.config');
+    var core = require('web.core');
+    var session = require('web.session');
+    var SystrayMenu = require('web.SystrayMenu');
+    var Widget = require('web.Widget');
+    
+    var _t = core._t;
+    
+    var SwitchPmsMenu = Widget.extend({
+        template: 'SwitchPmsMenu',
+        events: {
+            'click .dropdown-item[data-menu] div.log_into': '_onSwitchPmsPropertyClick',
+            'keydown .dropdown-item[data-menu] div.log_into': '_onSwitchPmsPropertyClick',
+            'click .dropdown-item[data-menu] div.toggle_pms_property': '_onTogglePmsPropertyClick',
+            'keydown .dropdown-item[data-menu] div.toggle_pms_property': '_onTogglePmsPropertyClick',
+        },
+        /**
+         * @override
+         */
+        init: function () {
+            this._super.apply(this, arguments);
+            this.isMobile = config.device.isMobile;
+            this._onSwitchPmsPropertyClick = _.debounce(this._onSwitchPmsPropertyClick, 1500, true);
+        },
+    
+        /**
+         * @override
+         */
+        willStart: function () {
+            var self = this;
+            this.allowed_pms_property_ids = String(session.user_context.allowed_pms_property_ids)
+                                        .split(',')
+                                        .map(function (id) {return parseInt(id);});
+            this.user_pms_properties = session.user_pms_properties.allowed_pms_properties;
+            this.current_pms_property = this.allowed_pms_property_ids[0];
+            this.current_pms_property_name = _.find(session.user_pms_properties.allowed_pms_properties, function (pms_property) {
+                return pms_property[0] === self.current_pms_property;
+            })[1];
+            return this._super.apply(this, arguments);
+        },
+    
+        //--------------------------------------------------------------------------
+        // Handlers
+        //--------------------------------------------------------------------------
+    
+        /**
+         * @private
+         * @param {MouseEvent|KeyEvent} ev
+         */
+        _onSwitchPmsPropertyClick: function (ev) {
+            if (ev.type == 'keydown' && ev.which != $.ui.keyCode.ENTER && ev.which != $.ui.keyCode.SPACE) {
+                return;
+            }
+            ev.preventDefault();
+            ev.stopPropagation();
+            var dropdownItem = $(ev.currentTarget).parent();
+            var dropdownMenu = dropdownItem.parent();
+            var pms_propertyID = dropdownItem.data('pms_property-id');
+            var allowed_pms_property_ids = this.allowed_pms_property_ids;
+            if (dropdownItem.find('.fa-square-o').length) {
+                // 1 enabled pms_property: Stay in single pms proeprty mode
+                if (this.allowed_pms_property_ids.length === 1) {
+                    if (this.isMobile) {
+                        dropdownMenu = dropdownMenu.parent();
+                    }
+                    dropdownMenu.find('.fa-check-square').removeClass('fa-check-square').addClass('fa-square-o');
+                    dropdownItem.find('.fa-square-o').removeClass('fa-square-o').addClass('fa-check-square');
+                    allowed_pms_property_ids = [pms_propertyID];
+                } else { // Multi pms proeprty mode
+                    allowed_pms_property_ids.push(pms_propertyID);
+                    dropdownItem.find('.fa-square-o').removeClass('fa-square-o').addClass('fa-check-square');
+                }
+            }
+            $(ev.currentTarget).attr('aria-pressed', 'true');
+            session.setPmsProperties(pms_propertyID, allowed_pms_property_ids);
+        },
+    
+        //--------------------------------------------------------------------------
+        // Handlers
+        //--------------------------------------------------------------------------
+    
+        /**
+         * @private
+         * @param {MouseEvent|KeyEvent} ev
+         */
+        _onTogglePmsPropertyClick: function (ev) {
+            if (ev.type == 'keydown' && ev.which != $.ui.keyCode.ENTER && ev.which != $.ui.keyCode.SPACE) {
+                return;
+            }
+            ev.preventDefault();
+            ev.stopPropagation();
+            var dropdownItem = $(ev.currentTarget).parent();
+            var pms_propertyID = dropdownItem.data('pms_property-id');
+            var allowed_pms_property_ids = this.allowed_pms_property_ids;
+            var current_pms_property_id = allowed_pms_property_ids[0];
+            if (dropdownItem.find('.fa-square-o').length) {
+                allowed_pms_property_ids.push(pms_propertyID);
+                dropdownItem.find('.fa-square-o').removeClass('fa-square-o').addClass('fa-check-square');
+                $(ev.currentTarget).attr('aria-checked', 'true');
+            } else {
+                allowed_pms_property_ids.splice(allowed_pms_property_ids.indexOf(pms_propertyID), 1);
+                dropdownItem.find('.fa-check-square').addClass('fa-square-o').removeClass('fa-check-square');
+                $(ev.currentTarget).attr('aria-checked', 'false');
+            }
+            session.setPmsProperties(current_pms_property_id, allowed_pms_property_ids);
+        },
+    
+    });
+    
+    if (session.display_switch_pms_property_menu) {
+        SystrayMenu.Items.push(SwitchPmsMenu);
+    }
+    
+    return SwitchPmsMenu;
+    
+    });
+    

pms/static/src/xml/pms_base_templates.xml

@@ -1,11 +1,42 @@
 <template>
 
-<t t-name="pms.SwitchPmsMenu">
-    <li class="o_switch_company_menu">
-        <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#">
-            <span t-attf-class="#{widget.isMobile ? 'fa fa-building-o' : 'oe_topbar_name'}"/> <span class="caret"/>
+<t t-name="SwitchPmsMenu">
+    <li class="o_switch_pms_menu">
+        <a role="button" class="dropdown-toggle" data-toggle="dropdown" data-display="static" aria-expanded="false" href="#" title="Dropdown menu">
+            <span t-attf-class="#{widget.isMobile ? 'fa fa-building-o' : 'oe_topbar_name'}">
+                <t t-if="!widget.isMobile"><t t-esc="widget.current_pms_property_name"/></t>
+            </span>
         </a>
-        <ul class="dropdown-menu" role="menu"/>
+        <div class="dropdown-menu dropdown-menu-right" role="menu">
+            <t t-foreach="widget.user_pms_properties" t-as="pms_property">
+                <div class="dropdown-item d-flex py-0 px-0" data-menu="pms_property" t-att-data-pms_property-id="pms_property[0]">
+                    <t t-set="is_allowed" t-value="widget.allowed_pms_property_ids.includes(pms_property[0])"/>
+                    <t t-set="is_current" t-value="pms_property[0] === widget.current_pms_property"/>
+                    <div role="menuitemcheckbox" t-att-aria-checked="is_allowed" t-att-aria-label="pms_property[1]" tabindex="0" class="ml-auto pl-3 pr-3 border border-top-0 border-left-0 border-bottom-0 toggle_company o_py">
+                        <span style="height: 2rem;">
+                            <t t-if="is_allowed">
+                                <i class="fa fa-fw fa-check-square pt-2"></i>
+                            </t>
+                            <t t-if="!is_allowed">
+                                <i class="fa fa-fw fa-square-o pt-2"></i>
+                            </t>
+                        </span>
+                    </div>
+                    <div role="button" t-att-aria-pressed="is_current" aria-label="Switch to this property" tabindex="0" class="d-flex flex-grow-1 align-items-center py-0 log_into pl-3 o_py" t-att-style="is_current ? 'background-color: lightgrey;' : ''">
+                        <t t-if="is_allowed">
+                            <span class='mr-3 company_label'>
+                                <t t-esc="pms_property[1]"/>
+                            </span>
+                        </t>
+                        <t t-if="!is_allowed">
+                            <span class='mr-3 company_label text-muted'>
+                                <t t-esc="pms_property[1]"/>
+                            </span>
+                        </t>
+                    </div>
+                </div>
+            </t>
+        </div>
     </li>
 </t>