/**
* App user list (js)
*/
'use strict';
document.addEventListener('DOMContentLoaded', function (e) {
const dataTablePermissions = document.querySelector('.datatables-permissions'),
userList = 'app-user-list.html';
let dt_permission;
// Users List datatable
if (dataTablePermissions) {
dt_permission = new DataTable(dataTablePermissions, {
ajax: assetsPath + 'json/permissions-list.json', // JSON file to add data
columns: [
// columns according to JSON
{ data: 'id' },
{ data: 'id' },
{ data: 'name' },
{ data: 'assigned_to' },
{ data: 'created_date' },
{ data: 'id' }
],
columnDefs: [
{
// For Responsive
className: 'control',
orderable: false,
searchable: false,
responsivePriority: 2,
targets: 0,
render: function (data, type, full, meta) {
return '';
}
},
{
targets: 1,
searchable: false,
visible: false
},
{
// Name
targets: 2,
render: function (data, type, full, meta) {
let name = full['name'];
return '' + name + '';
}
},
{
// User Role
targets: 3,
orderable: false,
render: function (data, type, full, meta) {
const assignedTo = full['assigned_to'];
let output = '';
const roleBadgeObj = {
Admin: `Administrator`,
Manager: `Manager`,
Users: `Users`,
Support: `Support`,
Restricted: `Restricted User`
};
assignedTo.forEach(role => {
output += roleBadgeObj[role] || '';
});
return `${output}`;
}
},
{
// remove ordering from Name
targets: 4,
orderable: false,
render: function (data, type, full, meta) {
let date = full['created_date'];
return '' + date + '';
}
},
{
// Actions
targets: -1,
searchable: false,
title: 'Actions',
orderable: false,
render: function (data, type, full, meta) {
return `
`;
}
}
],
order: [[1, 'asc']],
layout: {
topStart: {
rowClass: 'row m-3 my-0 justify-content-between',
features: [
{
pageLength: {
menu: [10, 25, 50, 100],
text: 'Show _MENU_'
}
}
]
},
topEnd: {
features: [
{
search: {
placeholder: 'Search Permissions',
text: '_INPUT_'
}
},
{
buttons: [
{
text: `Add Permission`,
className: 'add-new btn btn-primary',
attr: {
'data-bs-toggle': 'modal',
'data-bs-target': '#addPermissionModal'
}
}
]
}
]
},
bottomStart: {
rowClass: 'row mx-3 justify-content-between',
features: ['info']
},
bottomEnd: 'paging'
},
language: {
paginate: {
next: '',
previous: '',
first: '',
last: ''
}
},
responsive: {
details: {
display: DataTable.Responsive.display.modal({
header: function (row) {
const data = row.data();
return 'Details of ' + data['name'];
}
}),
type: 'column',
renderer: function (api, rowIdx, columns) {
const data = columns
.map(function (col) {
return col.title !== '' //? Do not show row in modal popup if title is blank (for check box)
? `
| ${col.title}: |
${col.data} |
`
: '';
})
.join('');
if (data) {
const div = document.createElement('div');
div.classList.add('table-responsive');
const table = document.createElement('table');
div.appendChild(table);
table.classList.add('table');
const tbody = document.createElement('tbody');
tbody.innerHTML = data;
table.appendChild(tbody);
return div;
}
return false;
}
}
}
});
}
// Delete Record
$('.datatables-permissions tbody').on('click', '.delete-record', function () {
dt_permission.row($(this).parents('tr')).remove().draw();
});
// Filter form control to default size
// ? setTimeout used for multilingual table initialization
setTimeout(() => {
const elementsToModify = [
{ selector: '.dt-buttons .btn', classToRemove: 'btn-secondary' },
{ selector: '.dt-search', classToAdd: 'me-4' },
{ selector: '.dt-search .form-control', classToRemove: 'form-control-sm' },
{ selector: '.dt-length', classToAdd: 'mb-0 mb-md-5' },
{ selector: '.dt-length .form-select', classToRemove: 'form-select-sm' },
{ selector: '.dt-buttons', classToAdd: 'mb-0 w-auto' },
{ selector: '.dt-layout-start', classToAdd: 'mt-0 px-5' },
{
selector: '.dt-layout-end',
classToRemove: 'justify-content-between',
classToAdd: 'justify-content-md-between justify-content-center d-flex flex-wrap gap-md-4 mb-sm-0 mb-6 mt-0'
},
{ selector: '.dt-layout-start', classToAdd: 'mt-0' },
{ selector: '.dt-layout-table', classToRemove: 'row mt-2' },
{ selector: '.dt-layout-full', classToRemove: 'col-md col-12', classToAdd: 'table-responsive' }
];
// Delete record
elementsToModify.forEach(({ selector, classToRemove, classToAdd }) => {
document.querySelectorAll(selector).forEach(element => {
if (classToRemove) {
classToRemove.split(' ').forEach(className => element.classList.remove(className));
}
if (classToAdd) {
classToAdd.split(' ').forEach(className => element.classList.add(className));
}
});
});
}, 100);
});