datatables/components/toolbar/ActionSet.js

export default class ActionSet {

    arrowDown = '<i class="fa fa-arrow-down" aria-hidden="true"></i>';

    constructor(actions, element = 'button', value = null) {
        this.actions = actions;
        this.element = element;
        this.value = value;
    }

    render() {
        if (this.element == 'button') {
            return this.renderButton();
        }

        if (this.element == 'span') {
            return this.renderSpan();
        }
    }

    renderButton() {
        this.actionButton = document.createElement('a');
        this.actionButton.classList.add('btn', 'btn-outline-secondary');
        this.actionButton.innerHTML = `<i class="fa fa-${this.actions[0].icon}" aria-hidden="true"></i> ${this.actions[0].label}`;
        this.actionButton.href = this.actions[0].route.replace('{{id}}', this.value);

        if (this.actions.length == 1) {
            return { 'button': this.actionButton, 'toggle': null, 'list': null };
        }

        this.actionToggle = document.createElement('button');
        this.actionToggle.classList.add('btn', 'btn-outline-secondary', 'dropdown-toggle-split');
        this.actionToggle.innerHTML = this.arrowDown;
        this.actionToggle.setAttribute('data-bs-toggle', 'dropdown');

        this.actionList = document.createElement('ul');
        this.actionList.classList.add('dropdown-menu');

        this.actions.forEach((action) => {
            const actionHolder = document.createElement('li');
            const actionLink = document.createElement('a');
            actionLink.classList.add('dropdown-item');
            actionLink.href = action.route.replace('{{id}}', this.value);
            actionLink.innerHTML = `<i class="fa fa-${action.icon}" aria-hidden="true"></i> ${action.label}`;

            actionHolder.appendChild(actionLink);
            this.actionList.appendChild(actionHolder);
        });

        return {
            'button': this.actionButton,
            'toggle': this.actionToggle,
            'list': this.actionList
        };
    }

    renderSpan() {
        this.actionButton = document.createElement('div');

        this.actionToggle = document.createElement('span');
        this.actionToggle.setAttribute('data-bs-toggle', 'dropdown');
        this.actionToggle.innerHTML = `#${this.value} ${this.arrowDown}`;

        this.actionList = document.createElement('ul');
        this.actionList.classList.add('dropdown-menu');

        this.actions.forEach((action) => {
            const actionHolder = document.createElement('li');
            if(action.type == 'divider'){
                const actionDivider = document.createElement('hr');
                actionDivider.classList.add('dropdown-divider');
                this.actionList.appendChild(actionDivider);
                return;
            }
            const actionLink = document.createElement('a');
            actionLink.classList.add('dropdown-item');
            actionLink.href = action.route.replace('{{id}}', this.value);
            actionLink.innerHTML = `<i class="fa fa-${action.icon}" aria-hidden="true"></i> ${action.label}`;

            actionHolder.appendChild(actionLink);
            this.actionList.appendChild(actionHolder);
        });

        this.actionButton.appendChild(this.actionToggle);
        this.actionButton.appendChild(this.actionList)

        return this.actionButton;
    }

    renderLabel(label, icon){
        if(icon){
            return `<i class="fa fa-${icon}" aria-hidden="true"></i> ${label}`
        }
        return label
    }

}