/**
* App Invoice List (jquery)
*/
'use strict';
$(function () {
// Variable declaration for table
var dt_invoice_table = $('.invoice-list-table');
// Invoice datatable
if (dt_invoice_table.length) {
var dt_invoice = dt_invoice_table.DataTable({
ajax: assetsPath + 'json/invoice-list.json', // JSON file to add data
columns: [
// columns according to JSON
{ data: 'invoice_id' },
{ data: 'invoice_id' },
{ data: 'invoice_id' },
{ data: 'invoice_status' },
{ data: 'issued_date' },
{ data: 'client_name' },
{ data: 'total' },
{ data: 'balance' },
{ data: 'invoice_status' },
{ data: 'action' }
],
columnDefs: [
{
// For Responsive
className: 'control',
responsivePriority: 2,
searchable: false,
targets: 0,
render: function (data, type, full, meta) {
return '';
}
},
{
// For Checkboxes
targets: 1,
orderable: false,
checkboxes: {
selectAllRender: ''
},
render: function () {
return '';
},
searchable: false
},
{
// Invoice ID
targets: 2,
render: function (data, type, full, meta) {
var $invoice_id = full['invoice_id'];
// Creates full output for row
var $row_output = '#' + $invoice_id + '';
return $row_output;
}
},
{
// Invoice status
targets: 3,
render: function (data, type, full, meta) {
var $invoice_status = full['invoice_status'],
$due_date = full['due_date'],
$balance = full['balance'];
var roleBadgeObj = {
Sent: ' ',
Draft:
' ',
'Past Due':
' ',
'Partial Payment':
' ',
Paid: ' ',
Downloaded:
' '
};
return (
" Balance: ' +
$balance +
'
Due Date: ' +
$due_date +
"'>" +
roleBadgeObj[$invoice_status] +
'
'
);
}
},
{
// Client name and Service
targets: 4,
responsivePriority: 4,
render: function (data, type, full, meta) {
var $name = full['client_name'],
$service = full['service'],
$image = full['avatar_image'],
$rand_num = Math.floor(Math.random() * 11) + 1,
$user_img = $rand_num + '.png';
if ($image === true) {
// For Avatar image
var $output =
'
';
} else {
// For Avatar badge
var stateNum = Math.floor(Math.random() * 6),
states = ['success', 'danger', 'warning', 'info', 'dark', 'primary', 'secondary'],
$state = states[stateNum],
$name = full['client_name'],
$initials = $name.match(/\b\w/g) || [];
$initials = (($initials.shift() || '') + ($initials.pop() || '')).toUpperCase();
$output = '' + $initials + '';
}
// Creates full output for row
var $row_output =
'' +
'
' +
'
' +
$output +
'
' +
'
' +
'
' +
'
' +
'| ' +
col.title +
':' +
' | ' +
'' +
col.data +
' | ' +
'
'
: '';
}).join('');
return data ? $('').append(data) : false;
}
}
},
initComplete: function () {
// Adding role filter once table initialized
this.api()
.columns(8)
.every(function () {
var column = this;
var select = $(
''
)
.appendTo('.invoice_status')
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex($(this).val());
column.search(val ? '^' + val + '$' : '', true, false).draw();
});
column
.data()
.unique()
.sort()
.each(function (d, j) {
select.append('');
});
});
}
});
}
// On each datatable draw, initialize tooltip
dt_invoice_table.on('draw.dt', function () {
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl, {
boundary: document.body
});
});
});
// Delete Record
$('.invoice-list-table tbody').on('click', '.delete-record', function () {
// To hide tooltip on clicking delete icon
$(this).closest($('[data-bs-toggle="tooltip"]').tooltip('hide'));
// To delete the whole row
dt_invoice.row($(this).parents('tr')).remove().draw();
});
// Filter form control to default size
// ? setTimeout used for multilingual table initialization
setTimeout(() => {
$('.invoice_status .form-select').addClass('form-select-sm');
}, 300);
});