Odoo18-Base/addons/web/static/lib/hoot/ui/setup_hoot_ui.js
2025-01-06 10:57:38 +07:00

105 lines
3.0 KiB
JavaScript

/** @odoo-module */
import { mount, reactive, whenReady } from "@odoo/owl";
import { getRunner } from "../main_runner";
import { patchWindow } from "../mock/window";
import { generateStyleSheets, setColorRoot } from "./hoot_colors";
import { HootMain } from "./hoot_main";
/**
* @typedef {"failed" | "passed" | "skipped" | "todo"} StatusFilter
*
* @typedef {ReturnType<typeof makeUiState>} UiState
*/
//-----------------------------------------------------------------------------
// Global
//-----------------------------------------------------------------------------
const {
customElements,
document,
HTMLElement,
Object: { entries: $entries },
} = globalThis;
//-----------------------------------------------------------------------------
// Internal
//-----------------------------------------------------------------------------
const makeUiState = () =>
reactive({
resultsPage: 0,
resultsPerPage: 40,
/** @type {string | null} */
selectedSuiteId: null,
/** @type {"asc" | "desc" | false} */
sortResults: false,
/** @type {StatusFilter | null} */
statusFilter: null,
totalResults: 0,
});
class HootContainer extends HTMLElement {
constructor() {
super(...arguments);
this.attachShadow({ mode: "open" });
const colorStyleElement = document.createElement("style");
let colorStyleContent = "";
for (const [className, content] of $entries(generateStyleSheets())) {
const selector = className === "default" ? ":host" : `:host(.${className})`;
colorStyleContent += `${selector}{${content}}`;
}
colorStyleElement.innerText = colorStyleContent;
this.shadowRoot.appendChild(colorStyleElement);
for (const href of STYLE_SHEETS) {
const link = document.createElement("link");
link.rel = "stylesheet";
link.href = href;
this.shadowRoot.appendChild(link);
}
}
connectedCallback() {
setColorRoot(this);
}
disconnectedCallback() {
setColorRoot(null);
}
}
const STYLE_SHEETS = [
"/web/static/src/libs/fontawesome/css/font-awesome.css",
"/web/static/lib/hoot/ui/hoot_style.css",
];
customElements.define("hoot-container", HootContainer);
//-----------------------------------------------------------------------------
// Exports
//-----------------------------------------------------------------------------
export function setupHootUI() {
// - Patch window before code from other modules is executed
patchWindow();
// - Mount the main UI component
whenReady(() => {
const container = document.createElement("hoot-container");
container.style.display = "contents";
document.body.appendChild(container);
mount(HootMain, container.shadowRoot, {
env: {
runner: getRunner(),
ui: makeUiState(),
},
name: "HOOT",
});
});
}