Movable Button for Column Selector in AG Grid

Add a button to toggle specific columns in AG Grid. Only visible on a specific page, located within the sidebar buttons container if present, with color change when toggled.
Per 16-11-2024. Zie de nieuwste versie.
Installeren als gebruikersscript ?
Stel een vraag, plaats een beoordeling of rapporteer dit script.
Regels afbreken
// ==UserScript==
// @name         Movable Button for Column Selector in AG Grid
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Add a button to toggle specific columns in AG Grid. Only visible on a specific page, located within the sidebar buttons container if present, with color change when toggled.
// @match        *://his.kaauh.org/lab/*
// @author       Hamad AlShegifi
// @grant        none
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const columnsToToggle = [
        'Lab Order No', 'Hospital MRN', 'DOB', 'Test ID', 'National/Iqama Id',
        'Department', 'Clinic', 'Doctor', 'Analyzer', 'Reference Lab',
        'Accession No', 'Sequence No'
    ];
    let isToggledOn = false;  // Track toggle state

    // Check if the user is on the specific page
    function isSpecificPage() {
        return window.location.href.includes('/lab-test-analyzer');
    }

    // Add the toggle button to the sidebar
    function addToggleButton() {
        const sideBarButtons = document.querySelector('.ag-side-buttons[ref="sideBarButtons"]');
        if (!sideBarButtons || document.getElementById('toggleColumnsButtonContainer')) return;

        // Create the button container
        let buttonContainer = document.createElement("div");
        buttonContainer.id = "toggleColumnsButtonContainer";
        buttonContainer.style.marginTop = "10px";
        buttonContainer.style.display = "flex";
        buttonContainer.style.alignItems = "center";
        buttonContainer.style.justifyContent = "center";
        buttonContainer.style.flexDirection = "column";

        // Create the toggle button
        const toggleButton = document.createElement("button");
        toggleButton.textContent = "Toggle Columns";
        toggleButton.style.writingMode = "vertical-rl";  // Make text vertical
        toggleButton.style.textAlign = "center";
        toggleButton.style.color = "#666";
        toggleButton.style.backgroundColor = "#fff";
        toggleButton.style.border = "none";
        toggleButton.style.cursor = "pointer";
        toggleButton.style.fontSize = "12px";
        toggleButton.style.fontWeight = "bold";

        // Add click event to toggle columns and change button color
        toggleButton.addEventListener('click', function() {
            isToggledOn = !isToggledOn;
            toggleButton.style.backgroundColor = isToggledOn ? "#add8e6" : "#fff"; // Light blue when toggled, white when untoggled

            if (isToggledOn) {
                toggleColumns();
            } else {
                resetColumns();
            }
        });

        // Append the button to the container and the sidebar buttons container
        buttonContainer.appendChild(toggleButton);
        sideBarButtons.appendChild(buttonContainer);
    }

    // Remove the toggle button
    function removeToggleButton() {
        const buttonContainer = document.getElementById('toggleColumnsButtonContainer');
        if (buttonContainer) {
            buttonContainer.remove();
        }
    }

    // Function to toggle specified columns
    function toggleColumns() {
        console.log("Toggling columns...");
        const toggleButton = document.querySelector('.ag-side-button button[ref="eToggleButton"]');
        if (toggleButton) {
            toggleButton.click();

            setTimeout(() => {
                columnsToToggle.forEach(column => clickColumnLabel(column));
            }, 300);
        } else {
            console.error('Toggle button not found.');
        }
    }

    // Reset the columns back to their original state
    function resetColumns() {
        console.log("Resetting columns...");
        columnsToToggle.forEach(column => clickColumnLabel(column));
    }

    // Function to click a column label
    function clickColumnLabel(labelText) {
        const labels = document.querySelectorAll('.ag-column-tool-panel-column-label');
        labels.forEach((label) => {
            if (label.textContent.trim() === labelText) {
                label.click();
            }
        });
    }

    // Monitor URL changes to detect SPA navigation
    const observer = new MutationObserver(() => {
        if (isSpecificPage()) {
            addToggleButton();
        } else {
            removeToggleButton();
        }
    });

    observer.observe(document.body, { childList: true, subtree: true });

    // Initial check on page load
    if (isSpecificPage()) {
        addToggleButton();
    }

})();