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

<script src="/assets/js/tabulator.min.js" defer></script>
<script src="/assets/js/sweetalert2.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>
    var table;
  
    document.addEventListener("DOMContentLoaded", function(){
    function domainLinkFormatter(cell){
        var value = cell.getValue();
        return `<a href="/domain/view/${value}" style="font-weight:bold;">${value}</a>`;
    }

    function actionsFormatter(cell, formatterParams, onRendered) {
        var rowData = cell.getRow().getData();
        var actionButtons = '';

        var hasPendingStatus = rowData.trstatus && rowData.trstatus.includes('pending');
        const tableResponsive = document.querySelector('.table-responsive');
        const clidValue = atob(tableResponsive.dataset.ref);

        if (hasPendingStatus && clidValue == '0') {
            actionButtons += `<a class="btn btn-outline-success btn-icon approve-btn" id="approve-btn" href="javascript:void(0);" data-approve-url="transfer/approve/${cell.getRow().getData().name}" title="{{ __('Approve Transfer') }}"><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="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg></a> `;
            actionButtons += `<a class="btn btn-outline-dark btn-icon cancel-btn" id="cancel-btn" href="javascript:void(0);" data-cancel-url="transfer/cancel/${cell.getRow().getData().name}" title="{{ __('Cancel Transfer') }}"><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="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M10 10l4 4m0 -4l-4 4" /></svg></a> `;
            actionButtons += `<a class="btn btn-outline-danger btn-icon reject-btn" id="reject-btn" href="javascript:void(0);" data-reject-url="transfer/reject/${cell.getRow().getData().name}" title="{{ __('Reject Transfer') }}"><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="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M5.7 5.7l12.6 12.6" /></svg></a>`;
        } else if (hasPendingStatus && clidValue == rowData.reid) {
            actionButtons += `<a class="btn btn-outline-dark btn-icon cancel-btn" id="cancel-btn" href="javascript:void(0);" data-cancel-url="transfer/cancel/${cell.getRow().getData().name}" title="{{ __('Cancel Transfer') }}"><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="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M10 10l4 4m0 -4l-4 4" /></svg></a> `;
        } else if (hasPendingStatus && clidValue == rowData.acid) {
            actionButtons += `<a class="btn btn-outline-success btn-icon approve-btn" id="approve-btn" href="javascript:void(0);" data-approve-url="transfer/approve/${cell.getRow().getData().name}" title="{{ __('Approve Transfer') }}"><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="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg></a> `;
            actionButtons += `<a class="btn btn-outline-danger btn-icon reject-btn" id="reject-btn" href="javascript:void(0);" data-reject-url="transfer/reject/${cell.getRow().getData().name}" title="{{ __('Reject Transfer') }}"><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="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M5.7 5.7l12.6 12.6" /></svg></a>`;
        } else {
            actionButtons += `<strong class="text-success"><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="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M9 12l2 2l4 -4" /></svg> {{ __('Completed') }}</strong>`;
        }
        
        return actionButtons;
    }
    
    function statusFormatter(cell) {
        var status = cell.getValue(); // Get the status value as a string

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

        // Check if status is not null or undefined and assign colors
        if (status) {
            let badgeClass = 'secondary'; // Default color class

            if (status.includes('pending')) {
                badgeClass = 'warning'; // Bootstrap warning color for pending
            } else if (status.includes('Approved')) {
                badgeClass = 'success'; // Bootstrap success color for Approved
            } else if (status.includes('Rejected')) {
                badgeClass = 'danger'; // Bootstrap danger color for Rejected
            } else if (status.includes('Cancelled')) {
                badgeClass = 'info'; // Bootstrap info color for Cancelled
            }

            return createBadge(status, badgeClass);
        }

        return ''; // Return an empty string if status is null or undefined
    }

    table = new Tabulator("#transferTable", {
        ajaxURL:"/api/records/domain?filter=trstatus,nis", // Set the URL for your JSON data
        ajaxConfig:"GET",
        pagination:"local",
        paginationSize: 10,
        paginationSizeSelector:[10, 25, 50, 100],
        clipboard:true,
        clipboardPasteAction:"replace",
        ajaxResponse:function(url, params, response){
            return response.records;
        },
        layout:"fitColumns",
        responsiveLayout: "collapse",
        responsiveLayoutCollapseStartOpen:false,
        resizableColumns:false,
        initialSort:[
            {column:"redate", dir:"desc"},
        ],
        placeholder: "{{ __('No Data') }}",
        columns:[
            {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
            {title:"{{ __('Name') }}", field:"name", width:200, minWidth:50, formatter: domainLinkFormatter, resizable:false, headerSort:true, responsive:0},
            {title:"{{ __('Initiated Date') }}", field:"redate", width:250, minWidth:150, resizable:false, headerSort:true, responsive:2},
            {title:"{{ __('Expiry Date') }}", field:"acdate", width:250, minWidth:150, resizable:false, headerSort:true, responsive:2},
            {title:"{{ __('Status') }}", field:"trstatus", width:200, minWidth:150, resizable:false, headerSort:false, download:false, formatter: statusFormatter, responsive:2},
            {title: "{{ __('Actions') }}", formatter: actionsFormatter, minWidth:100, resizable:false, headerSort: false, download:false, hozAlign: "center", responsive:0, cellClick: function(e, cell){
                if (e.target.closest('.approve-btn')) {
                    e.preventDefault(); // Prevent the default link behavior
                    Swal.fire({
                      title: "{{ __('Are you sure you want to approve this transfer?') }}",
                      showCancelButton: true,
                      confirmButtonText: "{{ __('Confirm') }}"
                    }).then((result) => {
                      if (result.isConfirmed) {
                        let approveUrl = e.target.closest('.approve-btn').getAttribute('data-approve-url');
                        window.location.href = approveUrl;
                      }
                    });
                } else if (e.target.closest('.cancel-btn')) {
                    e.preventDefault(); // Prevent the default link behavior
                    Swal.fire({
                      title: "{{ __('Are you sure you want to cancel this transfer?') }}",
                      showCancelButton: true,
                      confirmButtonText: "{{ __('Confirm') }}"
                    }).then((result) => {
                      if (result.isConfirmed) {
                        let cancelUrl = e.target.closest('.cancel-btn').getAttribute('data-cancel-url');
                        window.location.href = cancelUrl;
                      }
                    });
                } else if (e.target.closest('.reject-btn')) {
                    e.preventDefault(); // Prevent the default link behavior
                    Swal.fire({
                      title: "{{ __('Are you sure you want to reject this transfer?') }}",
                      showCancelButton: true,
                      confirmButtonText: "{{ __('Confirm') }}"
                    }).then((result) => {
                      if (result.isConfirmed) {
                        let rejectUrl = e.target.closest('.reject-btn').getAttribute('data-reject-url');
                        window.location.href = rejectUrl;
                      }
                    });
                }
            }},
        ]
    });
    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.name).toLowerCase().includes(term) ||
                    String(data.redate).toLowerCase().includes(term) ||
                    String(data.acdate).toLowerCase().includes(term) ||
                    String(data.trstatus).toLowerCase().includes(term)
                );
            });
        } else {
            table.clearFilter(); // Clear the filter when the search box is emptied
        }
    });
    });
 
    function downloadCSV() {
        table.download("csv", "transfers.csv");
    }

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

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