/** * 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 = 'Avatar'; } 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 + '
' + '
' + '
' + '' + $name + '' + '' + $email + '' + '
' + '
'; return $row_output; } }, { // User Role targets: 3, render: function (data, type, full, meta) { var $role = full['role']; var roleBadgeObj = { Subscriber: '', Author: '', Maintainer: '', Editor: '', Admin: '' }; return ( "" + roleBadgeObj[$role] + $role + '' ); } }, { // Plans targets: 4, render: function (data, type, full, meta) { var $plan = full['current_plan']; return '' + $plan + ''; } }, { // User Status targets: 6, render: function (data, type, full, meta) { var $status = full['status']; return ( '' + statusObj[$status].title + '' ); } }, { // Actions targets: -1, title: 'Actions', searchable: false, orderable: false, render: function (data, type, full, meta) { return ( '
' + '' + '' + '' + '' + '
' ); } } ], order: [[2, 'desc']], dom: '<"row"' + '<"col-md-2"<"ms-n2"l>>' + '<"col-md-10"<"dt-action-buttons text-xl-end text-lg-start text-md-end text-start d-flex align-items-center justify-content-end flex-md-row flex-column mb-6 mb-md-0 mt-n6 mt-md-0"fB>>' + '>t' + '<"row"' + '<"col-sm-12 col-md-6"i>' + '<"col-sm-12 col-md-6"p>' + '>', language: { sLengthMenu: '_MENU_', search: '', searchPlaceholder: 'Search User', paginate: { next: '', previous: '' } }, // Buttons with Dropdown buttons: [ { extend: 'collection', className: 'btn btn-label-secondary dropdown-toggle mx-4 waves-effect waves-light', text: 'Export', buttons: [ { extend: 'print', text: 'Print', className: 'dropdown-item', exportOptions: { columns: [1, 2, 3, 4, 5], // prevent avatar to be print format: { body: function (inner, coldex, rowdex) { if (inner.length <= 0) return inner; var el = $.parseHTML(inner); var result = ''; $.each(el, function (index, item) { if (item.classList !== undefined && item.classList.contains('user-name')) { result = result + item.lastChild.firstChild.textContent; } else if (item.innerText === undefined) { result = result + item.textContent; } else result = result + item.innerText; }); return result; } } }, customize: function (win) { //customize print view for dark $(win.document.body) .css('color', headingColor) .css('border-color', borderColor) .css('background-color', bodyBg); $(win.document.body) .find('table') .addClass('compact') .css('color', 'inherit') .css('border-color', 'inherit') .css('background-color', 'inherit'); } }, { extend: 'csv', text: 'Csv', className: 'dropdown-item', exportOptions: { columns: [1, 2, 3, 4, 5], // prevent avatar to be display format: { body: function (inner, coldex, rowdex) { if (inner.length <= 0) return inner; var el = $.parseHTML(inner); var result = ''; $.each(el, function (index, item) { if (item.classList !== undefined && item.classList.contains('user-name')) { result = result + item.lastChild.firstChild.textContent; } else if (item.innerText === undefined) { result = result + item.textContent; } else result = result + item.innerText; }); return result; } } } }, { extend: 'excel', text: 'Excel', className: 'dropdown-item', exportOptions: { columns: [1, 2, 3, 4, 5], // prevent avatar to be display format: { body: function (inner, coldex, rowdex) { if (inner.length <= 0) return inner; var el = $.parseHTML(inner); var result = ''; $.each(el, function (index, item) { if (item.classList !== undefined && item.classList.contains('user-name')) { result = result + item.lastChild.firstChild.textContent; } else if (item.innerText === undefined) { result = result + item.textContent; } else result = result + item.innerText; }); return result; } } } }, { extend: 'pdf', text: 'Pdf', className: 'dropdown-item', exportOptions: { columns: [1, 2, 3, 4, 5], // prevent avatar to be display format: { body: function (inner, coldex, rowdex) { if (inner.length <= 0) return inner; var el = $.parseHTML(inner); var result = ''; $.each(el, function (index, item) { if (item.classList !== undefined && item.classList.contains('user-name')) { result = result + item.lastChild.firstChild.textContent; } else if (item.innerText === undefined) { result = result + item.textContent; } else result = result + item.innerText; }); return result; } } } }, { extend: 'copy', text: 'Copy', className: 'dropdown-item', exportOptions: { columns: [1, 2, 3, 4, 5], // prevent avatar to be display format: { body: function (inner, coldex, rowdex) { if (inner.length <= 0) return inner; var el = $.parseHTML(inner); var result = ''; $.each(el, function (index, item) { if (item.classList !== undefined && item.classList.contains('user-name')) { result = result + item.lastChild.firstChild.textContent; } else if (item.innerText === undefined) { result = result + item.textContent; } else result = result + item.innerText; }); return result; } } } } ] }, { text: 'Add New User', className: 'add-new btn btn-primary waves-effect waves-light', attr: { 'data-bs-toggle': 'offcanvas', 'data-bs-target': '#offcanvasAddUser' } } ], // For responsive popup responsive: { details: { display: $.fn.dataTable.Responsive.display.modal({ header: function (row) { var data = row.data(); return 'Details of ' + data['full_name']; } }), type: 'column', renderer: function (api, rowIdx, columns) { var data = $.map(columns, function (col, i) { return col.title !== '' // ? Do not show row in modal popup if title is blank (for check box) ? '' + '' + 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() } }); })();