/** * App user list */ 'use strict'; // Datatable (jquery) $(function () { var dtUserTable = $('.datatables-users'), dt_User, statusObj = { 1: { title: 'Pending', class: 'bg-label-warning' }, 2: { title: 'Active', class: 'bg-label-success' }, 3: { title: 'Inactive', class: 'bg-label-secondary' } }; var userView = baseUrl + 'app/user/view/account'; // Users List datatable if (dtUserTable.length) { var dtUser = dtUserTable.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: '' } ], columnDefs: [ { // For Responsive className: 'control', orderable: false, searchable: 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">' + '<"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"fB>>' + '>t' + '<"row"' + '<"col-sm-12 col-md-6"i>' + '<"col-sm-12 col-md-6"p>' + '>', language: { sLengthMenu: 'Show _MENU_', search: '', searchPlaceholder: 'Search User', paginate: { next: '', previous: '' } }, buttons: [ { extend: 'collection', className: 'btn btn-label-secondary dropdown-toggle me-4 waves-effect waves-light border-left-0 border-right-0 rounded', text: ' Export', buttons: [ { extend: 'print', text: 'Print', className: 'dropdown-item', exportOptions: { columns: [3, 4, 5, 6, 7], // 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; } } }, customize: function (win) { //customize print view for dark $(win.document.body) .css('color', config.colors.headingColor) .css('border-color', config.colors.borderColor) .css('background-color', config.colors.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: [3, 4, 5, 6, 7], // 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: [3, 4, 5, 6, 7], // 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: [3, 4, 5, 6, 7], // 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: [3, 4, 5, 6, 7], // 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 role', className: 'btn btn-primary waves-effect waves-light rounded border-left-0 border-right-0', attr: { 'data-bs-toggle': 'modal', 'data-bs-target': '#addRoleModal' } } ], // 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(''); }); }); } }); } // Delete Record $('.datatables-users tbody').on('click', '.delete-record', function () { dtUser.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); $('.dataTables_filter').addClass('ms-n4 me-4 mt-0 mt-md-6'); }); (function () { // On edit role click, update text var roleEditList = document.querySelectorAll('.role-edit-modal'), roleAdd = document.querySelector('.add-new-role'), roleTitle = document.querySelector('.role-title'); roleAdd.onclick = function () { roleTitle.innerHTML = 'Add New Role'; // reset text }; if (roleEditList) { roleEditList.forEach(function (roleEditEl) { roleEditEl.onclick = function () { roleTitle.innerHTML = 'Edit Role'; // reset text }; }); } })();