getnamingo-registry/cp/resources/views/partials/js-support.twig

<script src="/assets/js/tabulator.min.js" defer></script>
<script src="/assets/js/tabler.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.6.0/jspdf.plugin.autotable.min.js"></script>
<script>
    var table;
    document.addEventListener("DOMContentLoaded", function(){
   
    function ticketLinkFormatter(cell){
        var value = cell.getValue();
        return `<a href="/ticket/${cell.getRow().getData().id}" style="font-weight:bold;">${value}</a>`;
    }

    function actionsFormatter(cell, formatterParams, onRendered) {
        return `
            <a class="btn btn-outline-info btn-icon" href="/ticket/${cell.getRow().getData().id}" title="View Ticket"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" /><path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" /></svg></a>
        `;
    }
    
    function statusFormatter(cell) {
        var status = cell.getValue();

        // Function to create a badge with color based on status
        function createBadge(text, badgeClass) {
            return `<span class="status status-${badgeClass}">${text}</span>`;
        }

        switch (status) {
            case 'Open':
                return createBadge(status, 'success');
            case 'In Progress':
                return createBadge(status, 'warning');
            case 'Resolved':
                return createBadge(status, 'info');
            case 'Closed':
                return createBadge(status, 'cyan');
            default:
                return "";
        }
    }
    
    function priorityFormatter(cell) {
        var priority = cell.getValue();

        // Function to create an outline badge with color based on priority
        function createBadge(text, badgeClass) {
            return `<span class="status status-${badgeClass}">${text}</span>`;
        }

        switch (priority) {
            case 'Low':
                return createBadge(priority, 'teal');
            case 'Medium':
                return createBadge(priority, 'blue');
            case 'High':
                return createBadge(priority, 'orange');
            case 'Critical':
                return createBadge(priority, 'red');
            default:
                return "";
        }
    }
    
    function catFormatter(cell) {
        var category = cell.getValue();

        // Function to create an outline badge with color based on category
        function createBadge(text, badgeClass) {
            return `<span class="status status-${badgeClass}">${text}</span>`;
        }

        return createBadge(category, 'indigo');
    }

    table = new Tabulator("#supportTable", {
        ajaxURL:"/api/records/support_tickets?join=ticket_categories", // Set the URL for your JSON data
        ajaxConfig:"GET",
        pagination:"local",
        paginationSize:10,
        ajaxResponse:function(url, params, response){
            return response.records;
        },
        layout:"fitDataFill",
        responsiveLayout: "collapse",
        responsiveLayoutCollapseStartOpen:false,
        resizableColumns:false,
        initialSort:[
            {column:"status", dir:"desc"},
        ],
        columns:[
            {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
            {title:"{{ __('Subject') }}", field:"subject", width:350, minWidth:100, headerSort:true, formatter: ticketLinkFormatter, responsive:0},
            {title:"{{ __('Category') }}", field:"category_id.name", width:250, minWidth:80, formatter: catFormatter, headerSort:true, responsive:0},
            {title:"{{ __('Status') }}", field:"status", headerSort:true, width:250, minWidth:100, formatter: statusFormatter, responsive:2},
            {title:"{{ __('Priority') }}", field:"priority", headerSort:true, width:250, minWidth:100, formatter: priorityFormatter, responsive:2},
            {title: "{{ __('Actions') }}", formatter: actionsFormatter, headerSort: false, download:false, hozAlign: "center", responsive:0, cellClick:function(e, cell){ e.stopPropagation(); }},
        ],
        placeholder:function(){
            return this.getHeaderFilters().length ? "No Matching Data" : "{{ __('No Data') }}"; //set placeholder based on if there are currently any header filters
        }
    });
    var searchInput = document.getElementById("search-input");
    searchInput.addEventListener("input", function () {
        var term = searchInput.value.toLowerCase();

        if (term) { // Only apply the filter when there's a term to search for
            table.setFilter(function (data) {
                // Check if any of the fields contain the search term
                return (
                    String(data.subject).toLowerCase().includes(term) ||
                    String(data.status).toLowerCase().includes(term) ||
                    String(data.priority).toLowerCase().includes(term) ||
                    String(data.category_id.name).toLowerCase().includes(term)
                );
            });
        } else {
            table.clearFilter(); // Clear the filter when the search box is emptied
        }
    });
    });
 
    function downloadCSV() {
        table.download("csv", "data.csv");
    }

    function downloadJSON() {
        table.download("json", "data.json");
    }

    function downloadXLSX() {
        table.download("xlsx", "data.xlsx", {sheetName:"My Support Tickets"});
    }
    
    function downloadPDF() {
        table.download("pdf", "data.pdf", {
            orientation:"portrait",
            title:"My Support Tickets",
            jsPDF:{unit:"mm", format:"a4", orientation:"p"}
        });
    }
</script>