odoo18/addons_extensions/tabbar/static/src/akl_action_container.js

import { ActionContainer } from '@web/webclient/actions/action_container';
import { patch } from '@web/core/utils/patch';
import { AklMultiTab } from './components/multi_tab/akl_multi_tab';

import { xml, useState } from '@odoo/owl';
import { browser } from '@web/core/browser/browser';
import { useService } from '@web/core/utils/hooks';
import {
    router as _router,
} from '@web/core/browser/router';
patch(ActionContainer.prototype, {
    setup() {

        super.setup();
        this.action_infos = [];
        this.controllerStacks = {};
        this.actionService = useService('action');

        this.env.bus.addEventListener(
            'ACTION_MANAGER:UPDATE',
            ({ detail: info }) => {
                debugger
                this.action_infos = this.get_controllers(info);
                this.controllerStacks = info.controllerStacks;
                this.render();
            }
        );
    },

    _on_close_action(action_info) {
        this.action_infos = this.action_infos.filter((info) => {
            return info.key !== action_info.key;
        });
        if (this.action_infos.length > 0) {

            delete this.controllerStacks[action_info.key];
            this.action_infos[this.action_infos.length - 1].active = true; // Set last 
            this.render();

        }
    },
    get_controllers(info) {
        const action_infos = [];
        const entries = Object.entries(info.controllerStacks);

        entries.forEach(([key, stack]) => {
            const lastController = stack[stack.length - 1];

            const action_info = {
                key: key,
                __info__: lastController,
                // Store the exact router state that was active for this tab
                routerState: lastController.state,
                Component: lastController.__info__.Component,
                active: false,
                componentProps: lastController.__info__.componentProps || {},
            }

            if (lastController.count == info.count) {
                action_info.active = true;
            }
            action_infos.push(action_info);
        })

        return action_infos;
    },

    _on_active_action(action_info) {
        debugger;
        this.action_infos.forEach((info) => {
            info.active = info.key === action_info.key;
        });

        try {
            // Use the exact router state that was saved
            if (action_info.routerState) {
                _router.pushState(action_info.routerState, { replace: true });

                // Force the action service to reload the state
                setTimeout(() => {
                    this.actionService.loadState();
                }, 10);
            }

        } catch (e) {
            console.error("Error switching controller stack:", e);
        }
        this.render();
    },
//    _on_active_action(action_info) {
//        debugger
//        this.action_infos.forEach((info) => {
//            info.active = info.key === action_info.key;
//        });
//
//        // Get the action details from the action info
//        const action = action_info.__info__.jsId ?
//            { jsId: action_info.__info__.jsId } :
//            action_info.__info__.action;
//
//        // Get the controller from the controller stack
//        const controllerStack = this.controllerStacks[action_info.key];
//        if (!controllerStack || controllerStack.length === 0) {
//            console.error("Cannot switch tabs: No controller found for tab", action_info);
//            return;
//        }
//
//        const controller = controllerStack[controllerStack.length - 1];
//
//
//        // Execute the action to switch context
//        this.actionService.loadAction(action_info.__info__.action.id).then(loadedAction => {
//                // Update the controller with the loaded action
//                controller.action = loadedAction;
//
//                // Execute the action to switch context
//                this.actionService.doAction(loadedAction, {
//                    clear_breadcrumbs: false,
//                    pushState: false,
//                    replaceState: true,  // Replace the current state instead of pushing a new one
//                });
//
//                try {
//                    const url = _router.stateToUrl(action_info.__info__.state);
//                    browser.history.pushState({}, "", url);
//                } catch (e) {
//                    console.error("Error updating URL:", e);
//                }
//                this.render();
//            });
//            return;
//
//        const url = _router.stateToUrl(action_info.__info__.state)
//        browser.history.pushState({}, "", url);
//        this.render();
//    },

    _close_other_action() {
        this.action_infos = this.action_infos.filter((info) => {
            if (info.active == false) {
                delete this.controllerStacks[info.key];
            }
            return info.active == true
        });

        this.render();
    },
    _close_current_action() {
        this.action_infos = this.action_infos.filter((info) => {
            if (info.active == true) {
                delete this.controllerStacks[info.key];
            }
            return info.active == false
        });
        this.action_infos[this.action_infos.length - 1].active = true;
        this.render();
    },
    _on_close_all_action() {
        this.action_infos.forEach((info) => {
            delete this.controllerStacks[info.key];
        });
        this.action_infos = {}
        window.location.href = "/";

    }
});
ActionContainer.components = {
    ...ActionContainer.components,
    AklMultiTab,
};

ActionContainer.template = xml`
 <t t-name="web.ActionContainer">
        <t t-set="action_infos" t-value="action_infos" />
        <div class="o_action_manager d-flex flex-colum">
       <AklMultiTab
                action_infos="action_infos"
                active_action="(action_info) => this._on_active_action(action_info)"
                close_action="(action_info) => this._on_close_action(action_info)"
                close_current_action="() => this._close_current_action()"
                close_other_action="() => this._close_other_action()"
                close_all_action="() => this._on_close_all_action()"
            />
            <div t-foreach="action_infos" t-as="action_info" t-if="action_info" t-key="action_info.key" class="akl_controller_container d-flex flex-column" t-att-class="action_info.active ? '' : 'd-none'" >
                <t t-component="action_info.Component" className="'o_action'" t-props="action_info.componentProps" />
            </div>
        </div>
    </t>
`;