mirror of
https://github.com/getnamingo/registry.git
synced 2025-07-02 17:13:20 +02:00
94 lines
No EOL
4.4 KiB
Twig
94 lines
No EOL
4.4 KiB
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 invoiceLinkFormatter(cell){
|
|
var value = cell.getValue();
|
|
return `<a href="/invoice/${cell.getRow().getData().invoice_number}" style="font-weight:bold;">${value}</a>`;
|
|
}
|
|
|
|
function actionsFormatter(cell, formatterParams, onRendered) {
|
|
return `
|
|
<a class="btn btn-outline-info btn-icon" href="/invoice/${cell.getRow().getData().invoice_number}" title="View Invoice"><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>
|
|
`;
|
|
}
|
|
|
|
currency = "{{ currency }} ";
|
|
|
|
table = new Tabulator("#invoicesTable", {
|
|
ajaxURL:"/api/records/invoices?join=registrar", // 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:"invoice_number", dir:"desc"},
|
|
],
|
|
columns:[
|
|
{formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
|
|
{title:"{{ __('Number') }}", field:"invoice_number", width:200, headerSort:true, formatter: invoiceLinkFormatter, responsive:0},
|
|
{title:"{{ __('Registrar') }}", field:"registrar_id.name", width:300, headerSort:true, responsive:0},
|
|
{title:"{{ __('Date') }}", field:"issue_date", width:300, headerSort:true, responsive:0},
|
|
{title:"{{ __('Amount') }}", field:"total_amount", width:200, headerSort:true, responsive:0, formatter:"money", formatterParams:{
|
|
decimal:".",
|
|
thousand:" ",
|
|
symbol:currency,
|
|
negativeSign:true,
|
|
}},
|
|
{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.invoice_number).toLowerCase().includes(term) ||
|
|
String(data.registrar_id.name).toLowerCase().includes(term) ||
|
|
String(data.issue_date).toLowerCase().includes(term) ||
|
|
String(data.total_amount).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 Invoices"});
|
|
}
|
|
|
|
function downloadPDF() {
|
|
table.download("pdf", "data.pdf", {
|
|
orientation:"portrait",
|
|
title:"My Invoices",
|
|
jsPDF:{unit:"mm", format:"a4", orientation:"p"}
|
|
});
|
|
}
|
|
</script> |