/**
* Page User List
*/
'use strict';
// Datatable (jquery)
$(function () {
let borderColor, bodyBg, headingColor;
if (isDarkStyle) {
borderColor = config.colors_dark.borderColor;
bodyBg = config.colors_dark.bodyBg;
headingColor = config.colors_dark.headingColor;
} else {
borderColor = config.colors.borderColor;
bodyBg = config.colors.bodyBg;
headingColor = config.colors.headingColor;
}
// Variable declaration for table
var dt_user_table = $('.datatables-users'),
select2 = $('.select2'),
userView = baseUrl + 'app/user/view/account',
statusObj = {
1: { title: 'Pending', class: 'bg-label-warning' },
2: { title: 'Active', class: 'bg-label-success' },
3: { title: 'Inactive', class: 'bg-label-secondary' }
};
if (select2.length) {
var $this = select2;
$this.wrap('').select2({
placeholder: 'Select Country',
dropdownParent: $this.parent()
});
}
// Users datatable
if (dt_user_table.length) {
var dt_user = dt_user_table.DataTable({
ajax: assetsPath + 'json/user-list.json', // JSON file to add data
columns: [
// columns according to JSON
{ data: 'id' },
{ data: 'id' },
{ data: 'full_name' },
{ data: 'role' },
{ data: 'current_plan' },
{ data: 'billing' },
{ data: 'status' },
{ data: 'action' }
],
columnDefs: [
{
// For Responsive
className: 'control',
searchable: false,
orderable: false,
responsivePriority: 2,
targets: 0,
render: function (data, type, full, meta) {
return '';
}
},
{
// For Checkboxes
targets: 1,
orderable: false,
checkboxes: {
selectAllRender: ''
},
render: function () {
return '';
},
searchable: false
},
{
// User full name and email
targets: 2,
responsivePriority: 4,
render: function (data, type, full, meta) {
var $name = full['full_name'],
$email = full['email'],
$image = full['avatar'];
if ($image) {
// For Avatar image
var $output =
'
';
} else {
// For Avatar badge
var stateNum = Math.floor(Math.random() * 6);
var states = ['success', 'danger', 'warning', 'info', 'primary', 'secondary'];
var $state = states[stateNum],
$name = full['full_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(3)
.every(function () {
var column = this;
var select = $(
''
)
.appendTo('.user_role')
.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('');
});
});
// Adding plan filter once table initialized
this.api()
.columns(4)
.every(function () {
var column = this;
var select = $(
''
)
.appendTo('.user_plan')
.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('');
});
});
// Adding status filter once table initialized
this.api()
.columns(6)
.every(function () {
var column = this;
var select = $(
''
)
.appendTo('.user_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(
''
);
});
});
}
});
}
// Delete Record
$('.datatables-users tbody').on('click', '.delete-record', function () {
dt_user.row($(this).parents('tr')).remove().draw();
});
// Filter form control to default size
// ? setTimeout used for multilingual table initialization
setTimeout(() => {
$('.dataTables_filter .form-control').removeClass('form-control-sm');
$('.dataTables_length .form-select').removeClass('form-select-sm');
}, 300);
});
// Validation & Phone mask
(function () {
const phoneMaskList = document.querySelectorAll('.phone-mask'),
addNewUserForm = document.getElementById('addNewUserForm');
// Phone Number
if (phoneMaskList) {
phoneMaskList.forEach(function (phoneMask) {
new Cleave(phoneMask, {
phone: true,
phoneRegionCode: 'US'
});
});
}
// Add New User Form Validation
const fv = FormValidation.formValidation(addNewUserForm, {
fields: {
userFullname: {
validators: {
notEmpty: {
message: 'Please enter fullname '
}
}
},
userEmail: {
validators: {
notEmpty: {
message: 'Please enter your email'
},
emailAddress: {
message: 'The value is not a valid email address'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap5: new FormValidation.plugins.Bootstrap5({
// Use this for enabling/changing valid/invalid class
eleValidClass: '',
rowSelector: function (field, ele) {
// field is the field name & ele is the field element
return '.mb-6';
}
}),
submitButton: new FormValidation.plugins.SubmitButton(),
// Submit the form when all fields are valid
// defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
autoFocus: new FormValidation.plugins.AutoFocus()
}
});
})();