/** * Page User List */ "use strict"; // Datatable (jquery) $(function () { // Variable declaration for table var dt_user_table = $(".datatables-users"), select2 = $(".select2"), userView = baseUrl + "app/user/view/account", offCanvasForm = $("#offcanvasAddUser"); if (select2.length) { var $this = select2; select2Focus($this); $this.wrap('
').select2({ placeholder: "Select Country", dropdownParent: $this.parent(), }); } // ajax setup $.ajaxSetup({ headers: { "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"), }, }); // Users datatable if (dt_user_table.length) { var dt_user = dt_user_table.DataTable({ processing: true, serverSide: true, ajax: { url: baseUrl + "user-list", }, columns: [ // columns according to JSON { data: "" }, { data: "id" }, { data: "name" }, { data: "email" }, { data: "email_verified_at" }, { data: "action" }, ], columnDefs: [ { // For Responsive className: "control", searchable: false, orderable: false, responsivePriority: 2, targets: 0, render: function (data, type, full, meta) { return ""; }, }, { searchable: false, orderable: false, targets: 1, render: function (data, type, full, meta) { return `${full.fake_id}`; }, }, { // User full name targets: 2, responsivePriority: 4, render: function (data, type, full, meta) { var $name = full["name"]; // For Avatar badge var stateNum = Math.floor(Math.random() * 6); var states = [ "success", "danger", "warning", "info", "dark", "primary", "secondary", ]; var $state = states[stateNum], $name = full["name"], $initials = $name.match(/\b\w/g) || [], $output; $initials = ( ($initials.shift() || "") + ($initials.pop() || "") ).toUpperCase(); $output = '' + $initials + ""; // Creates full output for row var $row_output = '
' + '
' + '
' + $output + "
" + "
" + '
' + '' + $name + "" + "
" + "
"; return $row_output; }, }, { // User email targets: 3, render: function (data, type, full, meta) { var $email = full["email"]; return '' + $email + ""; }, }, { // email verify targets: 4, className: "text-center", render: function (data, type, full, meta) { var $verified = full["email_verified_at"]; return `${ $verified ? '' : '' }`; }, }, { // Actions targets: -1, title: "Actions", searchable: false, orderable: false, render: function (data, type, full, meta) { return ( '
' + `` + `` + '' + '" + "
" ); }, }, ], order: [[2, "desc"]], dom: '<"card-header d-flex rounded-0 flex-wrap pb-md-0 pt-0"' + '<"me-5 ms-n2"f>' + '<"d-flex justify-content-start justify-content-md-end align-items-baseline"<"dt-action-buttons d-flex align-items-start align-items-md-center justify-content-sm-center gap-4"lB>>' + ">t" + '<"row mx-1"' + '<"col-sm-12 col-md-6"i>' + '<"col-sm-12 col-md-6"p>' + ">", lengthMenu: [7, 10, 20, 50, 70, 100], //for length of menu language: { sLengthMenu: "_MENU_", search: "", searchPlaceholder: "Search", info: "Displaying _START_ to _END_ of _TOTAL_ entries", paginate: { next: '', previous: '', }, }, // Buttons with Dropdown buttons: [ { extend: "collection", className: "btn btn-outline-secondary dropdown-toggle me-4 waves-effect waves-light", text: 'Export ', buttons: [ { extend: "print", title: "Users", 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", config.colors.headingColor) .css( "border-color", config.colors.borderColor, ) .css( "background-color", config.colors.body, ); $(win.document.body) .find("table") .addClass("compact") .css("color", "inherit") .css("border-color", "inherit") .css("background-color", "inherit"); }, }, { extend: "csv", title: "Users", text: 'Csv', 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; }, }, }, }, { extend: "excel", title: "Users", 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", title: "Users", 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", title: "Users", text: 'Copy', className: "dropdown-item", exportOptions: { columns: [1, 2, 3, 4, 5], // prevent avatar to be copy 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["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; }, }, }, }); } // Delete Record $(document).on("click", ".delete-record", function () { var user_id = $(this).data("id"), dtrModal = $(".dtr-bs-modal.show"); // hide responsive modal in small screen if (dtrModal.length) { dtrModal.modal("hide"); } // sweetalert for confirmation of delete Swal.fire({ title: "Are you sure?", text: "You won't be able to revert this!", icon: "warning", showCancelButton: true, confirmButtonText: "Yes, delete it!", customClass: { confirmButton: "btn btn-primary me-3", cancelButton: "btn btn-label-secondary", }, buttonsStyling: false, }).then(function (result) { if (result.value) { // delete the data $.ajax({ type: "DELETE", url: `${baseUrl}user-list/${user_id}`, success: function () { dt_user.draw(); }, error: function (error) { console.log(error); }, }); // success sweetalert Swal.fire({ icon: "success", title: "Deleted!", text: "The user has been deleted!", customClass: { confirmButton: "btn btn-success", }, }); } else if (result.dismiss === Swal.DismissReason.cancel) { Swal.fire({ title: "Cancelled", text: "The User is not deleted!", icon: "error", customClass: { confirmButton: "btn btn-success", }, }); } }); }); // edit record $(document).on("click", ".edit-record", function () { var user_id = $(this).data("id"), dtrModal = $(".dtr-bs-modal.show"); // hide responsive modal in small screen if (dtrModal.length) { dtrModal.modal("hide"); } // changing the title of offcanvas $("#offcanvasAddUserLabel").html("Edit User"); // get data $.get(`${baseUrl}user-list\/${user_id}\/edit`, function (data) { $("#user_id").val(data.id); $("#add-user-fullname").val(data.name); $("#add-user-email").val(data.email); }); }); // changing the title $(".add-new").on("click", function () { $("#user_id").val(""); //reseting input field $("#offcanvasAddUserLabel").html("Add User"); }); // validating form and updating user's data const addNewUserForm = document.getElementById("addNewUserForm"); // user form validation const fv = FormValidation.formValidation(addNewUserForm, { fields: { name: { validators: { notEmpty: { message: "Please enter fullname", }, }, }, email: { validators: { notEmpty: { message: "Please enter your email", }, emailAddress: { message: "The value is not a valid email address", }, }, }, userContact: { validators: { notEmpty: { message: "Please enter your contact", }, }, }, company: { validators: { notEmpty: { message: "Please enter your company", }, }, }, }, 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-5"; }, }), submitButton: new FormValidation.plugins.SubmitButton(), // Submit the form when all fields are valid // defaultSubmit: new FormValidation.plugins.DefaultSubmit(), autoFocus: new FormValidation.plugins.AutoFocus(), }, }).on("core.form.valid", function () { // adding or updating user when form successfully validate $.ajax({ data: $("#addNewUserForm").serialize(), url: `${baseUrl}user-list`, type: "POST", success: function (status) { dt_user.draw(); offCanvasForm.offcanvas("hide"); // sweetalert Swal.fire({ icon: "success", title: `Successfully ${status}!`, text: `User ${status} Successfully.`, customClass: { confirmButton: "btn btn-success", }, }); }, error: function (err) { offCanvasForm.offcanvas("hide"); Swal.fire({ title: "Duplicate Entry!", text: "Your email should be unique.", icon: "error", customClass: { confirmButton: "btn btn-success", }, }); }, }); }); // clearing form data when offcanvas hidden offCanvasForm.on("hidden.bs.offcanvas", function () { fv.resetForm(true); }); const phoneMaskList = document.querySelectorAll(".phone-mask"); // Phone Number if (phoneMaskList) { phoneMaskList.forEach(function (phoneMask) { new Cleave(phoneMask, { phone: true, phoneRegionCode: "US", }); }); } });