234 lines
8.1 KiB
JavaScript
234 lines
8.1 KiB
JavaScript
/**
|
|
* 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 '<span class="text-nowrap text-heading">' + name + '</span>';
|
|
}
|
|
},
|
|
{
|
|
// User Role
|
|
targets: 3,
|
|
orderable: false,
|
|
render: function (data, type, full, meta) {
|
|
const assignedTo = full['assigned_to'];
|
|
let output = '';
|
|
const roleBadgeObj = {
|
|
Admin: `<a href="${userList}"><span class="badge bg-label-primary me-4">Administrator</span></a>`,
|
|
Manager: `<a href="${userList}"><span class="badge bg-label-warning me-4">Manager</span></a>`,
|
|
Users: `<a href="${userList}"><span class="badge bg-label-success me-4">Users</span></a>`,
|
|
Support: `<a href="${userList}"><span class="badge bg-label-info me-4">Support</span></a>`,
|
|
Restricted: `<a href="${userList}"><span class="badge bg-label-danger me-4">Restricted User</span></a>`
|
|
};
|
|
|
|
assignedTo.forEach(role => {
|
|
output += roleBadgeObj[role] || '';
|
|
});
|
|
|
|
return `<span class="text-nowrap">${output}</span>`;
|
|
}
|
|
},
|
|
{
|
|
// remove ordering from Name
|
|
targets: 4,
|
|
orderable: false,
|
|
render: function (data, type, full, meta) {
|
|
let date = full['created_date'];
|
|
return '<span class="text-nowrap">' + date + '</span>';
|
|
}
|
|
},
|
|
{
|
|
// Actions
|
|
targets: -1,
|
|
searchable: false,
|
|
title: 'Actions',
|
|
orderable: false,
|
|
render: function (data, type, full, meta) {
|
|
return `
|
|
<div class="d-flex align-items-center">
|
|
<span class="text-nowrap">
|
|
<button class="btn btn-icon me-1" data-bs-target="#editPermissionModal" data-bs-toggle="modal" data-bs-dismiss="modal">
|
|
<i class="icon-base ti tabler-edit icon-22px"></i>
|
|
</button>
|
|
<a href="javascript:;" class="btn btn-icon dropdown-toggle hide-arrow" data-bs-toggle="dropdown">
|
|
<i class="icon-base ti tabler-dots-vertical icon-22px"></i>
|
|
</a>
|
|
<div class="dropdown-menu dropdown-menu-end m-0">
|
|
<a href="javascript:;" class="dropdown-item">Edit</a>
|
|
<a href="javascript:;" class="dropdown-item">Suspend</a>
|
|
</div>
|
|
</span>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
],
|
|
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: `<i class="icon-base ti tabler-plus icon-xs me-0 me-sm-2"></i><span class="d-none d-sm-inline-block">Add Permission</span>`,
|
|
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: '<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl icon-18px"></i>',
|
|
previous: '<i class="icon-base ti tabler-chevron-left scaleX-n1-rtl icon-18px"></i>',
|
|
first: '<i class="icon-base ti tabler-chevrons-left scaleX-n1-rtl icon-18px"></i>',
|
|
last: '<i class="icon-base ti tabler-chevrons-right scaleX-n1-rtl icon-18px"></i>'
|
|
}
|
|
},
|
|
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)
|
|
? `<tr data-dt-row="${col.rowIndex}" data-dt-column="${col.columnIndex}">
|
|
<td>${col.title}:</td>
|
|
<td>${col.data}</td>
|
|
</tr>`
|
|
: '';
|
|
})
|
|
.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);
|
|
});
|