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

<script src="/assets/js/tabulator.min.js" defer></script>
<script src="/assets/js/tabler.min.js" defer></script>
<script src="/assets/js/xlsx.full.min.js" defer></script>
<script src="/assets/js/jspdf.umd.min.js" defer></script>
<script src="/assets/js/jspdf.plugin.autotable.min.js" defer></script>
<script>
    function fetchAndCacheRegistrars() {
        fetch('/api/records/registrar')
            .then(response => response.json())
            .then(data => {
            console.log(data); 
                // Assuming 'data.records' contains the array of registrars
                const registrars = data.records.reduce((acc, current) => {
                    acc[current.id] = current.name;
                    return acc;
                }, {});
                // Cache the mapping of registrar IDs to names
                localStorage.setItem('registrarsCache', JSON.stringify(registrars));
            })
            .catch(error => console.error("Failed to fetch registrar records:", error));
    }
    
    function getRegistrarNameById(id) {
        const registrarsCache = JSON.parse(localStorage.getItem('registrarsCache') || '{}');
        return registrarsCache[id] || 'Unknown';
    }

    // Function to format XML properly and force a new line before xsi:schemaLocation
    function formatXmlWithLineBreaks(xml) {
        if (!xml) return ""; // Handle empty values safely

        // Ensure `xsi:schemaLocation` always starts on a new line
        xml = xml.replace(/(xsi:schemaLocation="[^"]*")/g, "\n$1");

        return `<pre class="xml-cell">${escapeHtml(xml)}</pre>`;
    }

    // Function to escape special characters to prevent HTML interpretation
    function escapeHtml(unsafe) {
        return unsafe.replace(/&/g, "&amp;")
                     .replace(/</g, "&lt;")
                     .replace(/>/g, "&gt;")
                     .replace(/"/g, "&quot;")
                     .replace(/'/g, "&#039;");
    }

    var table;

    document.addEventListener("DOMContentLoaded", function(){
    fetchAndCacheRegistrars();
    
    var searchTerm = ""; // global variable to hold the search term

    function updateSearchTerm(term) {
        searchTerm = term;
        table.replaceData();
    }

    table = new Tabulator("#logTable", {
        pagination: true,
        paginationMode: "remote",
        paginationSize: 10,
        paginationSizeSelector:[10, 25, 50, 100],
        clipboard:true,
        clipboardPasteAction:"replace",
        ajaxURL: "/log-api/records/transaction_identifier",
        ajaxURLGenerator: function(url, config, params) {
            var queryParts = [];

            // Handle search term
            if (searchTerm) {
                queryParts.push("filter1=cldate,cs," + encodeURIComponent(searchTerm));
                queryParts.push("filter2=cmd,cs," + encodeURIComponent(searchTerm));
                queryParts.push("filter3=obj_id,cs," + encodeURIComponent(searchTerm));
                queryParts.push("filter4=obj_type,cs," + encodeURIComponent(searchTerm));
                queryParts.push("filter5=code,cs," + encodeURIComponent(searchTerm));
            }

            queryParts.push("order=cldate,desc");

            // Include pagination parameters
            if (params.page) {
                queryParts.push("page=" + params.page + "," + params.size);
            }

            return url + "?" + queryParts.join("&");
        },
        ajaxResponse: function(url, params, response) {
            if (response && Array.isArray(response.records) && typeof response.results === 'number') {
                var pageSize = params.size || this.options.paginationSize;
                var lastPage = Math.ceil(response.results / pageSize);
                return {
                    last_page: lastPage,
                    data: response.records,
                };
            } else {
                console.error('Unexpected response format', response);
                return { last_page: 1, data: [] };
            }
        },
        dataReceiveParams: {
            "last_page": "results", // Mapping 'results' to 'last_page'
        },
        layout:"fitColumns",
        responsiveLayout: "collapse",
        responsiveLayoutCollapseStartOpen:false,
        resizableColumns:false,
        placeholder: "{{ __('No Data') }}",
        columns:[
            {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
            {
                title: "{{ __('Registrar') }}", 
                field: "registrar_id",
                resizable:false,
                headerSort: false, 
                responsive: 0,
                minWidth:120,
                formatter: function(cell, formatterParams, onRendered) {
                    const registrarId = cell.getValue();
                    const name = getRegistrarNameById(registrarId);
                    return name; // Return the name directly, as it is synchronously obtained from cache
                }
            },
            {title:"{{ __('Command') }}", field:"cmd", width:100, resizable:false, headerSort:false, responsive:0},
            {title:"{{ __('Object Type') }}", field:"obj_type", width:150, resizable:false, headerSort:false, responsive:0},
            {title:"{{ __('Object') }}", field:"obj_id", resizable:false, minWidth:200, headerSort:false, responsive:0},
            {title:"{{ __('Result') }}", field:"code", resizable:false, width:100, headerSort:false, responsive:0},
            {title:"{{ __('Message') }}", field:"msg", resizable:false, minWidth:350, headerSort:false, responsive:0},        
            {title:"{{ __('clTRID') }}", field:"clTRID", resizable:false, headerSort:false, responsive:2},
            { 
                title: "{{ __('clTRIDframe') }}", 
                field: "clTRIDframe", 
                resizable: false, 
                headerSort: false, 
                responsive: 2, 
                formatter: function(cell) {
                    return formatXmlWithLineBreaks(cell.getValue());
                }
            },
            {title:"{{ __('Request Date') }}", field:"cldate", minWidth:220, resizable:false, headerSort:false, responsive:0},
            {title:"{{ __('svTRID') }}", field:"svTRID", resizable:false, headerSort:false, responsive:2},
            { 
                title: "{{ __('svTRIDframe') }}", 
                field: "svTRIDframe", 
                resizable: false, 
                headerSort: false, 
                responsive: 2, 
                formatter: function(cell) {
                    return formatXmlWithLineBreaks(cell.getValue());
                }
            },
            {title:"{{ __('Response Date') }}", field:"svdate", resizable:false, headerSort:false, responsive:2},
        ]
    });
    var searchInput = document.getElementById("search-input");
    searchInput.addEventListener("input", function () {
        updateSearchTerm(searchInput.value);
    });
    });
   
    function downloadCSV() {
        table.download("csv", "logs.csv");
    }

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

    function downloadXLSX() {
        table.download("xlsx", "logs.xlsx", {sheetName:"My EPP Log"});
    }
    
    function downloadPDF() {
        table.download("pdf", "logs.pdf", {
            orientation:"portrait",
            title:"My EPP Log"
        });
    }
</script>