Server IP : 150.95.80.236 / Your IP : 18.190.253.43 Web Server : Apache System : Linux host-150-95-80-236 3.10.0-1160.105.1.el7.x86_64 #1 SMP Thu Dec 7 15:39:45 UTC 2023 x86_64 User : social-telecare ( 10000) PHP Version : 7.4.33 Disable Function : opcache_get_status MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /var/www/vhosts/pcu.in.th/uat.pcu.in.th/demo15/src/js/custom/apps/customers/list/ |
Upload File : |
"use strict"; // Class definition var KTCustomersList = function () { // Define shared variables var datatable; var filterMonth; var filterPayment; var table // Private functions var initCustomerList = function () { // Set date data order const tableRows = table.querySelectorAll('tbody tr'); tableRows.forEach(row => { const dateRow = row.querySelectorAll('td'); const realDate = moment(dateRow[5].innerHTML, "DD MMM YYYY, LT").format(); // select date from 5th column in table dateRow[5].setAttribute('data-order', realDate); }); // Init datatable --- more info on datatables: https://datatables.net/manual/ datatable = $(table).DataTable({ "info": false, 'order': [], 'columnDefs': [ { orderable: false, targets: 0 }, // Disable ordering on column 0 (checkbox) { orderable: false, targets: 6 }, // Disable ordering on column 6 (actions) ] }); // Re-init functions on every table re-draw -- more info: https://datatables.net/reference/event/draw datatable.on('draw', function () { initToggleToolbar(); handleDeleteRows(); toggleToolbars(); }); } // Search Datatable --- official docs reference: https://datatables.net/reference/api/search() var handleSearchDatatable = () => { const filterSearch = document.querySelector('[data-kt-customer-table-filter="search"]'); filterSearch.addEventListener('keyup', function (e) { datatable.search(e.target.value).draw(); }); } // Filter Datatable var handleFilterDatatable = () => { // Select filter options filterMonth = $('[data-kt-customer-table-filter="month"]'); filterPayment = document.querySelectorAll('[data-kt-customer-table-filter="payment_type"] [name="payment_type"]'); const filterButton = document.querySelector('[data-kt-customer-table-filter="filter"]'); // Filter datatable on submit filterButton.addEventListener('click', function () { // Get filter values const monthValue = filterMonth.val(); let paymentValue = ''; // Get payment value filterPayment.forEach(r => { if (r.checked) { paymentValue = r.value; } // Reset payment value if "All" is selected if (paymentValue === 'all') { paymentValue = ''; } }); // Build filter string from filter options const filterString = monthValue + ' ' + paymentValue; // Filter datatable --- official docs reference: https://datatables.net/reference/api/search() datatable.search(filterString).draw(); }); } // Delete customer var handleDeleteRows = () => { // Select all delete buttons const deleteButtons = table.querySelectorAll('[data-kt-customer-table-filter="delete_row"]'); deleteButtons.forEach(d => { // Delete button on click d.addEventListener('click', function (e) { e.preventDefault(); // Select parent row const parent = e.target.closest('tr'); // Get customer name const customerName = parent.querySelectorAll('td')[1].innerText; // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/ Swal.fire({ text: "Are you sure you want to delete " + customerName + "?", icon: "warning", showCancelButton: true, buttonsStyling: false, confirmButtonText: "Yes, delete!", cancelButtonText: "No, cancel", customClass: { confirmButton: "btn fw-bold btn-danger", cancelButton: "btn fw-bold btn-active-light-primary" } }).then(function (result) { if (result.value) { Swal.fire({ text: "You have deleted " + customerName + "!.", icon: "success", buttonsStyling: false, confirmButtonText: "Ok, got it!", customClass: { confirmButton: "btn fw-bold btn-primary", } }).then(function () { // Remove current row datatable.row($(parent)).remove().draw(); }); } else if (result.dismiss === 'cancel') { Swal.fire({ text: customerName + " was not deleted.", icon: "error", buttonsStyling: false, confirmButtonText: "Ok, got it!", customClass: { confirmButton: "btn fw-bold btn-primary", } }); } }); }) }); } // Reset Filter var handleResetForm = () => { // Select reset button const resetButton = document.querySelector('[data-kt-customer-table-filter="reset"]'); // Reset datatable resetButton.addEventListener('click', function () { // Reset month filterMonth.val(null).trigger('change'); // Reset payment type filterPayment[0].checked = true; // Reset datatable --- official docs reference: https://datatables.net/reference/api/search() datatable.search('').draw(); }); } // Init toggle toolbar var initToggleToolbar = () => { // Toggle selected action toolbar // Select all checkboxes const checkboxes = table.querySelectorAll('[type="checkbox"]'); // Select elements const deleteSelected = document.querySelector('[data-kt-customer-table-select="delete_selected"]'); // Toggle delete selected toolbar checkboxes.forEach(c => { // Checkbox on click event c.addEventListener('click', function () { setTimeout(function () { toggleToolbars(); }, 50); }); }); // Deleted selected rows deleteSelected.addEventListener('click', function () { // SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/ Swal.fire({ text: "Are you sure you want to delete selected customers?", icon: "warning", showCancelButton: true, buttonsStyling: false, confirmButtonText: "Yes, delete!", cancelButtonText: "No, cancel", customClass: { confirmButton: "btn fw-bold btn-danger", cancelButton: "btn fw-bold btn-active-light-primary" } }).then(function (result) { if (result.value) { Swal.fire({ text: "You have deleted all selected customers!.", icon: "success", buttonsStyling: false, confirmButtonText: "Ok, got it!", customClass: { confirmButton: "btn fw-bold btn-primary", } }).then(function () { // Remove all selected customers checkboxes.forEach(c => { if (c.checked) { datatable.row($(c.closest('tbody tr'))).remove().draw(); } }); // Remove header checked box const headerCheckbox = table.querySelectorAll('[type="checkbox"]')[0]; headerCheckbox.checked = false; }); } else if (result.dismiss === 'cancel') { Swal.fire({ text: "Selected customers was not deleted.", icon: "error", buttonsStyling: false, confirmButtonText: "Ok, got it!", customClass: { confirmButton: "btn fw-bold btn-primary", } }); } }); }); } // Toggle toolbars const toggleToolbars = () => { // Define variables const toolbarBase = document.querySelector('[data-kt-customer-table-toolbar="base"]'); const toolbarSelected = document.querySelector('[data-kt-customer-table-toolbar="selected"]'); const selectedCount = document.querySelector('[data-kt-customer-table-select="selected_count"]'); // Select refreshed checkbox DOM elements const allCheckboxes = table.querySelectorAll('tbody [type="checkbox"]'); // Detect checkboxes state & count let checkedState = false; let count = 0; // Count checked boxes allCheckboxes.forEach(c => { if (c.checked) { checkedState = true; count++; } }); // Toggle toolbars if (checkedState) { selectedCount.innerHTML = count; toolbarBase.classList.add('d-none'); toolbarSelected.classList.remove('d-none'); } else { toolbarBase.classList.remove('d-none'); toolbarSelected.classList.add('d-none'); } } // Public methods return { init: function () { table = document.querySelector('#kt_customers_table'); if (!table) { return; } initCustomerList(); initToggleToolbar(); handleSearchDatatable(); handleFilterDatatable(); handleDeleteRows(); handleResetForm(); } } }(); // On document ready KTUtil.onDOMContentLoaded(function () { KTCustomersList.init(); });