[IMP] test_themes: (re)add preview to website (themes) switcher

Commit [1] moved the website switcher from the frontend to the backend
and in doing so re-factored it into an OWL component.

Initially, this refactoring broke the theme preview from the previous
widget. This commit re-introduces those previews.

[1]: https://github.com/odoo/design-themes/commit/163a8b6fae0d6709d61af81550d1ad77dfe311c9

task-2687506

closes odoo/design-themes#573

Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Co-authored-by: Younn Olivier <yol@odoo.com>
Co-authored-by: Romain Derie <rde@odoo.com>

test_themes/__manifest__.py

@@ -41,15 +41,15 @@
         'theme_yes',
         'theme_zap',
     ],
-    'data': [
-        'views/website_navbar_templates.xml',
-    ],
     'installable': True,
     'application': False,
     'post_init_hook': 'post_init_hook',
     'assets': {
-        'web.assets_frontend': [
+        'web.assets_backend': [
-            'test_themes/static/src/js/navbar.js',
+            'test_themes/static/src/js/systray_items/website_switcher.js',
+        ],
+        'web.assets_qweb': [
+            'test_themes/static/src/js/systray_items/website_switcher.xml',
         ],
     },
     'license': 'LGPL-3',

test_themes/models/__init__.py

@@ -2,5 +2,4 @@
 # Part of Odoo. See LICENSE file for full copyright and licensing details.
 
 from . import ir_http
-from . import ir_qweb
 from . import website

test_themes/models/ir_qweb.py

@@ -1,28 +0,0 @@
-# -*- coding: utf-8 -*-
-# Part of Odoo. See LICENSE file for full copyright and licensing details.
-
-from odoo import api, models
-from odoo.http import request
-
-
-class IrQWeb(models.AbstractModel):
-    _inherit = "ir.qweb"
-
-    def _prepare_frontend_environment(self, values):
-        irQweb = super()._prepare_frontend_environment(values)
-
-        if 'multi_website_websites' in values:
-            websites_themes = self.env['website'].get_test_themes_websites()
-
-            for multi_website_website in values['multi_website_websites']:
-                website_id = multi_website_website['website_id']
-                website = websites_themes.filtered(lambda website: website.id == website_id)
-                theme_img = None
-                if website:
-                    # prefetched by get_test_themes_websites
-                    image_ids = website.theme_id.sudo().image_ids
-                    if image_ids:
-                        theme_img = f"<img src='/web/image/{image_ids[0].id}' width='150'/>"
-                multi_website_website['theme_img'] = theme_img
-
-        return irQweb

test_themes/models/website.py

@@ -1,12 +1,20 @@
 # -*- coding: utf-8 -*-
 # Part of Odoo. See LICENSE file for full copyright and licensing details.
 
-from odoo import models
+from odoo import api, models
 
 
 class Website(models.Model):
     _inherit = 'website'
 
+    @api.model
+    def get_test_themes_websites_theme_preview(self):
+        websites_themes = self.env['website'].get_test_themes_websites()
+        return {
+            website.id: f"/web/image/{website.theme_id.sudo().image_ids[0].id}"
+            for website in websites_themes.filtered(lambda w: w.theme_id.sudo().image_ids)
+        }
+
     def get_test_themes_websites(self):
         website_imd_ids = self.env['ir.model.data'].sudo().search([
             ('module', '=', 'test_themes'),

test_themes/static/src/js/navbar.js

@@ -1,33 +0,0 @@
-// TODO: This will be reimplemented following the frontend UI being moved to
-// the backend
-
-// odoo.define('test_themes.website_selector', function (require) {
-// 'use strict';
-
-// const websiteNavbarData = require('website.navbar');
-// const { registry } = require("@web/core/registry");
-
-// const TestThemesWebsiteSelector = websiteNavbarData.WebsiteNavbarActionWidget.extend({
-//     /**
-//      * @override
-//      */
-//     start: function () {
-//         this.$('.js_multi_website_switch[data-toggle]').tooltip({
-//             html: true,
-//             placement: 'left',
-//             delay: {show: 100, hide: 0},
-//         });
-//         return this._super(...arguments);
-//     },
-
-// });
-
-// registry.category("website_navbar_widgets").add("TestThemesWebsiteSelector", {
-//     Widget: TestThemesWebsiteSelector,
-//     selector: '#website_switcher',
-// });
-
-// return {
-//     TestThemesWebsiteSelector: TestThemesWebsiteSelector,
-// };
-// });

test_themes/static/src/js/systray_items/website_switcher.js

@@ -0,0 +1,29 @@
+/** @odoo-module **/
+
+import { patch } from 'web.utils';
+import { useService } from '@web/core/utils/hooks';
+import { WebsiteSwitcherSystray } from '@website/systray_items/website_switcher';
+
+const { onMounted, useState } = owl;
+
+patch(WebsiteSwitcherSystray.prototype, 'test_themes_website_switcher_systray', {
+    setup() {
+        this._super();
+
+        this.orm = useService('orm');
+        this.tooltips = useState({});
+
+        onMounted(async () => {
+            const themesWebsites = await this.orm.call('website', 'get_test_themes_websites_theme_preview');
+            for (const themeId in themesWebsites) {
+                this.tooltips[themeId] = {
+                    tooltipTemplate: 'test_themes.ThemeTooltip',
+                    tooltipPosition: 'left',
+                    tooltipDelay: 100,
+                    tooltipInfo: JSON.stringify({url: themesWebsites[themeId]}),
+                };
+            }
+        });
+    },
+    template: 'test_themes.WebsiteSwitcherSystray',
+});

test_themes/static/src/js/systray_items/website_switcher.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+<t t-name="test_themes.ThemeTooltip" owl="1">
+    <img t-att-src="url" width="150"/>
+</t>
+
+<t t-name="test_themes.WebsiteSwitcherSystray" t-inherit="website.WebsiteSwitcherSystray" t-inherit-mode="extension">
+    <xpath expr="//DropdownItem" position="attributes">
+        <attribute name="dataset">this.tooltips[element.id]</attribute>
+    </xpath>
+</t>
+</templates>

test_themes/views/website_navbar_templates.xml

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<odoo>
-<!-- TODO: This will be reimplemented following the frontend UI being moved to the backend -->
-<!-- <template id="user_navbar" inherit_id="website.user_navbar" name="User Navbar Themes">
-    <xpath expr="//a[hasclass('js_multi_website_switch')]" position="attributes">
-        <attribute name="t-att-title">multi_website_website['theme_img']</attribute>
-        <attribute name="data-toggle">tooltip</attribute>
-    </xpath>
-</template> -->
-
-</odoo>