New Content systray

addons/html_builder/static/src/website_preview/install_module_dialog.js

@@ -0,0 +1,23 @@
+import { Component } from "@odoo/owl";
+import { _t } from "@web/core/l10n/translation";
+import { WebsiteDialog } from "@website/components/dialog/dialog";
+
+export class InstallModuleDialog extends Component {
+    static components = { WebsiteDialog };
+    static template = "html_builder.InstallModuleDialog";
+    static props = {
+        title: String,
+        installationText: String,
+        installModule: Function,
+        close: Function,
+    };
+
+    setup() {
+        this.installButtonTitle = _t("Install");
+    }
+
+    onClickInstall() {
+        this.props.close();
+        this.props.installModule();
+    }
+}

addons/html_builder/static/src/website_preview/install_module_dialog.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+<t t-name="html_builder.InstallModuleDialog">
+    <WebsiteDialog close="props.close"
+        title="props.title"
+        primaryTitle="installButtonTitle"
+        primaryClick="() => this.onClickInstall()">
+        <t t-esc="props.installationText"/>
+    </WebsiteDialog>
+</t>
+
+</templates>

addons/html_builder/static/src/website_preview/new_content_element.js

@@ -0,0 +1,31 @@
+import { Component } from "@odoo/owl";
+
+export const MODULE_STATUS = {
+    NOT_INSTALLED: "NOT_INSTALLED",
+    INSTALLING: "INSTALLING",
+    FAILED_TO_INSTALL: "FAILED_TO_INSTALL",
+    INSTALLED: "INSTALLED",
+};
+
+export class NewContentElement extends Component {
+    static template = "html_builder.NewContentElement";
+    static props = {
+        name: { type: String, optional: true },
+        title: String,
+        onClick: Function,
+        status: { type: String, optional: true },
+        moduleXmlId: { type: String, optional: true },
+        slots: Object,
+    };
+    static defaultProps = {
+        status: MODULE_STATUS.INSTALLED,
+    };
+
+    setup() {
+        this.MODULE_STATUS = MODULE_STATUS;
+    }
+
+    onClick(ev) {
+        this.props.onClick();
+    }
+}

addons/html_builder/static/src/website_preview/new_content_element.xml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+<t t-name="html_builder.NewContentElement">
+    <div class="o_new_content_element col-md-4 mb8" t-att-name="props.name">
+        <button
+                t-on-click.prevent.stop="onClick"
+                class="btn w-100"
+                t-att-class="props.status === MODULE_STATUS.NOT_INSTALLED ? 'o_uninstalled_module' : ''"
+                t-att-title="props.title"
+                t-att-aria-label="props.title"
+                t-att-data-module-xml-id="props.moduleXmlId">
+            <t t-slot="default"/>
+        </button>
+    </div>
+</t>
+
+</templates>

addons/html_builder/static/src/website_preview/new_content_modal.js

@@ -0,0 +1,238 @@
+import { InstallModuleDialog } from "@html_builder/website_preview/install_module_dialog";
+import {
+    MODULE_STATUS,
+    NewContentElement,
+} from "@html_builder/website_preview/new_content_element";
+import { Component, onWillStart, useState, xml } from "@odoo/owl";
+import { useHotkey } from "@web/core/hotkeys/hotkey_hook";
+import { _t } from "@web/core/l10n/translation";
+import { rpc } from "@web/core/network/rpc";
+import { useActiveElement } from "@web/core/ui/ui_service";
+import { user } from "@web/core/user";
+import { useService } from "@web/core/utils/hooks";
+import { sprintf } from "@web/core/utils/strings";
+import { redirect } from "@web/core/utils/urls";
+
+export class NewContentModal extends Component {
+    static template = "html_builder.NewContentModal";
+    static components = { NewContentElement };
+    static props = {
+        onNewPage: Function,
+    };
+
+    setup() {
+        this.orm = useService("orm");
+        this.dialogs = useService("dialog");
+        this.website = useService("website");
+        this.action = useService("action");
+        this.isSystem = user.isSystem;
+        useActiveElement("modalRef");
+
+        this.newContentText = {
+            failed: _t('Failed to install "%s"'),
+            installInProgress: _t("The installation of an App is already in progress."),
+            installNeeded: _t('Do you want to install the "%s" App?'),
+            installPleaseWait: _t('Installing "%s"'),
+        };
+
+        this.state = useState({
+            newContentElements: [
+                {
+                    moduleName: "website_blog",
+                    moduleXmlId: "base.module_website_blog",
+                    status: MODULE_STATUS.NOT_INSTALLED,
+                    icon: xml`<i class="fa fa-newspaper-o"/>`,
+                    title: _t("Blog Post"),
+                },
+                {
+                    moduleName: "website_event",
+                    moduleXmlId: "base.module_website_event",
+                    status: MODULE_STATUS.NOT_INSTALLED,
+                    icon: xml`<i class="fa fa-ticket"/>`,
+                    title: _t("Event"),
+                },
+                {
+                    moduleName: "website_forum",
+                    moduleXmlId: "base.module_website_forum",
+                    status: MODULE_STATUS.NOT_INSTALLED,
+                    icon: xml`<i class="fa fa-comment"/>`,
+                    redirectUrl: "/forum",
+                    title: _t("Forum"),
+                },
+                {
+                    moduleName: "website_hr_recruitment",
+                    moduleXmlId: "base.module_website_hr_recruitment",
+                    status: MODULE_STATUS.NOT_INSTALLED,
+                    icon: xml`<i class="fa fa-briefcase"/>`,
+                    title: _t("Job Position"),
+                },
+                {
+                    moduleName: "website_sale",
+                    moduleXmlId: "base.module_website_sale",
+                    status: MODULE_STATUS.NOT_INSTALLED,
+                    icon: xml`<i class="fa fa-shopping-cart"/>`,
+                    title: _t("Product"),
+                },
+                {
+                    moduleName: "website_slides",
+                    moduleXmlId: "base.module_website_slides",
+                    status: MODULE_STATUS.NOT_INSTALLED,
+                    icon: xml`<i class="fa module_icon" style="background-image: url('/website/static/src/img/apps_thumbs/website_slide.svg');background-repeat: no-repeat; background-position: center;"/>`,
+                    title: _t("Course"),
+                },
+                {
+                    moduleName: "website_livechat",
+                    moduleXmlId: "base.module_website_livechat",
+                    status: MODULE_STATUS.NOT_INSTALLED,
+                    icon: xml`<i class="fa fa-comments"/>`,
+                    title: _t("Livechat Widget"),
+                    redirectUrl: "/livechat",
+                },
+            ],
+        });
+
+        this.websiteContext = useState(this.website.context);
+        useHotkey("escape", () => {
+            if (this.websiteContext.showNewContentModal) {
+                this.websiteContext.showNewContentModal = false;
+            }
+        });
+
+        onWillStart(this.onWillStart.bind(this));
+    }
+
+    async onWillStart() {
+        this.isDesigner = await user.hasGroup("website.group_website_designer");
+        this.canInstall = await user.isAdmin;
+        if (this.canInstall) {
+            const moduleNames = this.state.newContentElements
+                .filter(({ status }) => status === MODULE_STATUS.NOT_INSTALLED)
+                .map(({ moduleName }) => moduleName);
+            this.modulesInfo = {};
+            for (const record of await this.orm.searchRead(
+                "ir.module.module",
+                [["name", "in", moduleNames]],
+                ["id", "name", "shortdesc"]
+            )) {
+                this.modulesInfo[record.name] = { id: record.id, name: record.shortdesc };
+            }
+        }
+        const modelsToCheck = [];
+        const elementsToUpdate = {};
+        for (const element of this.state.newContentElements) {
+            if (element.model) {
+                modelsToCheck.push(element.model);
+                elementsToUpdate[element.model] = element;
+            }
+        }
+        const accesses = await rpc("/website/check_new_content_access_rights", {
+            models: modelsToCheck,
+        });
+        for (const [model, access] of Object.entries(accesses)) {
+            elementsToUpdate[model].isDisplayed = access;
+        }
+    }
+
+    get sortedNewContentElements() {
+        return this.state.newContentElements
+            .filter(({ status }) => status !== MODULE_STATUS.NOT_INSTALLED)
+            .concat(
+                this.state.newContentElements.filter(
+                    ({ status }) => status === MODULE_STATUS.NOT_INSTALLED
+                )
+            );
+    }
+
+    async installModule(id, redirectUrl) {
+        await this.orm.silent.call("ir.module.module", "button_immediate_install", [id]);
+        if (redirectUrl) {
+            this.website.prepareOutLoader();
+            window.location.replace(redirectUrl);
+        } else {
+            const {
+                id,
+                metadata: { path, viewXmlid },
+            } = this.website.currentWebsite;
+            const url = new URL(path);
+            if (viewXmlid === "website.page_404") {
+                url.pathname = "";
+            }
+            // A reload is needed after installing a new module, to instantiate
+            // a NewContentModal with patches from the installed module.
+            this.website.prepareOutLoader();
+            redirect(
+                `/odoo/action-website.website_preview?website_id=${id}&path=${encodeURIComponent(
+                    url.toString()
+                )}&display_new_content=true`
+            );
+        }
+    }
+
+    onClickNewContent(element) {
+        if (element.createNewContent) {
+            return element.createNewContent();
+        }
+
+        const { id, name } = this.modulesInfo[element.moduleName];
+        const dialogProps = {
+            title: element.title,
+            installationText: sprintf(this.newContentText.installNeeded, name),
+            installModule: async () => {
+                // Update the NewContentElement with installing icon and text.
+                this.state.newContentElements = this.state.newContentElements.map((el) => {
+                    if (el.moduleXmlId === element.moduleXmlId) {
+                        el.status = MODULE_STATUS.INSTALLING;
+                        el.icon = xml`<i class="fa fa-spin fa-circle-o-notch"/>`;
+                        el.title = sprintf(this.newContentText.installPleaseWait, name);
+                    }
+                    return el;
+                });
+                this.website.showLoader({ title: _t("Building your %s", name) });
+                try {
+                    await this.installModule(id, element.redirectUrl);
+                } catch (error) {
+                    this.website.hideLoader();
+                    // Update the NewContentElement with failure icon and text.
+                    this.state.newContentElements = this.state.newContentElements.map((el) => {
+                        if (el.moduleXmlId === element.moduleXmlId) {
+                            el.status = MODULE_STATUS.FAILED_TO_INSTALL;
+                            el.icon = xml`<i class="fa fa-exclamation-triangle"/>`;
+                            el.title = sprintf(this.newContentText.failed, name);
+                        }
+                        return el;
+                    });
+                    console.error(error);
+                }
+            },
+        };
+        this.dialogs.add(InstallModuleDialog, dialogProps);
+    }
+
+    /**
+     * This method registers the action to perform when a new content is
+     * saved. The path must be computed once the record is saved, to
+     * perform the 'ir.act_window_close' action, which will be used when
+     * the dialog is closed to go to the correct website page.
+     */
+    async onAddContent(action, edition = false, context = null) {
+        this.action.doAction(action, {
+            additionalContext: context ? context : {},
+            onClose: (infos) => {
+                if (infos) {
+                    this.website.goToWebsite({ path: infos.path, edition: edition });
+                }
+            },
+            props: {
+                onSave: (record, params) => {
+                    if (record.resId) {
+                        const path = params.computePath();
+                        this.action.doAction({
+                            type: "ir.actions.act_window_close",
+                            infos: { path },
+                        });
+                    }
+                },
+            },
+        });
+    }
+}

addons/html_builder/static/src/website_preview/new_content_modal.xml

@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+<t t-name="html_builder.NewContentModal">
+    <div id="o_new_content_menu_choices" t-ref="modalRef" role="dialog" aria-modal="true" aria-label="New Content" tabindex="-1">
+        <div class="container pt32 pb32">
+            <div class="row">
+                <NewContentElement t-if="isDesigner"
+                        name.translate="New Page"
+                        onClick="() => props.onNewPage()"
+                        title.translate="New Page">
+                    <i class="fa fa-file-o"/>
+                    <p>Page</p>
+                </NewContentElement>
+
+                <t t-foreach="sortedNewContentElements" t-as="element" t-key="element.moduleXmlId" t-if="'isDisplayed' in element ? element.isDisplayed : isSystem ">
+                    <NewContentElement onClick="() => this.onClickNewContent(element)"
+                        status="element.status"
+                        title="element.title"
+                        moduleXmlId="element.moduleXmlId">
+                        <t t-call="{{ element.icon }}"/>
+                        <p><t t-esc="element.title"/></p>
+                    </NewContentElement>
+                </t>
+            </div>
+        </div>
+    </div>
+</t>
+
+</templates>

addons/html_builder/static/src/website_preview/new_content_systray_item.js

@@ -0,0 +1,20 @@
+import { NewContentModal } from "@html_builder/website_preview/new_content_modal";
+import { Component, useState } from "@odoo/owl";
+import { useService } from "@web/core/utils/hooks";
+
+export class NewContentSystrayItem extends Component {
+    static template = "html_builder.NewContentSystrayItem";
+    static components = { NewContentModal };
+    static props = {
+        onNewPage: Function,
+    };
+
+    setup() {
+        this.website = useService("website");
+        this.websiteContext = useState(this.website.context);
+    }
+
+    onClick() {
+        this.websiteContext.showNewContentModal = !this.websiteContext.showNewContentModal;
+    }
+}

addons/html_builder/static/src/website_preview/new_content_systray_item.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+<t t-name="html_builder.NewContentSystrayItem">
+    <div class="o_menu_systray_item o_new_content_container d-none d-md-flex" t-on-click="onClick">
+        <button accesskey="c" class="o-website-btn-custo-secondary btn d-flex align-items-center rounded-0 border-0 px-3">New</button>
+        <NewContentModal t-if="websiteContext.showNewContentModal" onNewPage="props.onNewPage"/>
+    </div>
+</t>
+
+</templates>