/** * 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: '<input type="checkbox" class="form-check-input">' }, render: function () { return '<input type="checkbox" class="dt-checkboxes form-check-input" >'; }, 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 = '<img src="' + assetsPath + 'img/avatars/' + $image + '" alt="Avatar" class="rounded-circle">'; } 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 = '<span class="avatar-initial rounded-circle bg-label-' + $state + '">' + $initials + '</span>'; } // Creates full output for row var $row_output = '<div class="d-flex justify-content-left align-items-center">' + '<div class="avatar-wrapper">' + '<div class="avatar avatar-sm me-4">' + $output + '</div>' + '</div>' + '<div class="d-flex flex-column">' + '<a href="' + userView + '" class="text-heading text-truncate"><span class="fw-medium">' + $name + '</span></a>' + '<small>@' + $email + '</small>' + '</div>' + '</div>'; return $row_output; } }, { // User Role targets: 3, render: function (data, type, full, meta) { var $role = full['role']; var roleBadgeObj = { Subscriber: '<i class="ti ti-crown ti-md text-primary me-2"></i>', Author: '<i class="ti ti-edit ti-md text-warning me-2"></i>', Maintainer: '<i class="ti ti-user ti-md text-success me-2"></i>', Editor: '<i class="ti ti-chart-pie ti-md text-info me-2"></i>', Admin: '<i class="ti ti-device-desktop ti-md text-danger me-2"></i>' }; return ( "<span class='text-truncate d-flex align-items-center text-heading'>" + roleBadgeObj[$role] + $role + '</span>' ); } }, { // Plans targets: 4, render: function (data, type, full, meta) { var $plan = full['current_plan']; return '<span class="text-heading">' + $plan + '</span>'; } }, { // User Status targets: 6, render: function (data, type, full, meta) { var $status = full['status']; return ( '<span class="badge ' + statusObj[$status].class + '" text-capitalized>' + statusObj[$status].title + '</span>' ); } }, { // Actions targets: -1, title: 'Actions', searchable: false, orderable: false, render: function (data, type, full, meta) { return ( '<div class="d-flex align-items-center">' + '<a href="javascript:;" class="btn btn-icon btn-text-secondary waves-effect waves-light rounded-pill delete-record"><i class="ti ti-trash ti-md"></i></a>' + '<a href="' + userView + '" class="btn btn-icon btn-text-secondary waves-effect waves-light rounded-pill"><i class="ti ti-eye ti-md"></i></a>' + '<a href="javascript:;" class="btn btn-icon btn-text-secondary waves-effect waves-light rounded-pill dropdown-toggle hide-arrow" data-bs-toggle="dropdown"><i class="ti ti-dots-vertical ti-md"></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>' + '</div>' ); } } ], order: [[2, 'desc']], dom: '<"row"' + '<"col-md-2"<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"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: '<i class="ti ti-chevron-right ti-sm"></i>', previous: '<i class="ti ti-chevron-left ti-sm"></i>' } }, buttons: [ { extend: 'collection', className: 'btn btn-label-secondary dropdown-toggle me-4 waves-effect waves-light border-left-0 border-right-0 rounded', text: '<i class="ti ti-upload ti-xs me-sm-1 align-text-bottom"></i> <span class="d-none d-sm-inline-block">Export</span>', buttons: [ { extend: 'print', text: '<i class="ti ti-printer me-1" ></i>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: '<i class="ti ti-file-text me-1" ></i>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: '<i class="ti ti-file-spreadsheet me-1"></i>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: '<i class="ti ti-file-description me-1"></i>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: '<i class="ti ti-copy me-1" ></i>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: '<i class="ti ti-plus ti-xs me-md-2"></i><span class="d-md-inline-block d-none">Add new role</span>', 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) ? '<tr data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' + '<td>' + col.title + ':' + '</td> ' + '<td>' + col.data + '</td>' + '</tr>' : ''; }).join(''); return data ? $('<table class="table"/><tbody />').append(data) : false; } } }, initComplete: function () { // Adding role filter once table initialized this.api() .columns(3) .every(function () { var column = this; var select = $( '<select id="UserRole" class="form-select text-capitalize"><option value=""> Select Role </option></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('<option value="' + d + '" class="text-capitalize">' + d + '</option>'); }); }); } }); } // 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 }; }); } })();