initial commit
This commit is contained in:
@@ -0,0 +1,238 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTModalCustomersAdd = function () {
|
||||
var submitButton;
|
||||
var cancelButton;
|
||||
var closeButton;
|
||||
var validator;
|
||||
var form;
|
||||
var modal;
|
||||
|
||||
// Init form inputs
|
||||
var handleForm = function () {
|
||||
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||
validator = FormValidation.formValidation(
|
||||
form,
|
||||
{
|
||||
fields: {
|
||||
'name': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Customer name is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'email': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Customer email is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'first-name': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'First name is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'last-name': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Last name is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'country': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Country is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'address1': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Address 1 is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'city': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'City is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'state': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'State is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'postcode': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Postcode is required'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||
rowSelector: '.fv-row',
|
||||
eleInvalidClass: '',
|
||||
eleValidClass: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Revalidate country field. For more info, plase visit the official plugin site: https://select2.org/
|
||||
$(form.querySelector('[name="country"]')).on('change', function() {
|
||||
// Revalidate the field when an option is chosen
|
||||
validator.revalidateField('country');
|
||||
});
|
||||
|
||||
// Action buttons
|
||||
submitButton.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Validate form before submit
|
||||
if (validator) {
|
||||
validator.validate().then(function (status) {
|
||||
console.log('validated!');
|
||||
|
||||
if (status == 'Valid') {
|
||||
submitButton.setAttribute('data-kt-indicator', 'on');
|
||||
|
||||
// Disable submit button whilst loading
|
||||
submitButton.disabled = true;
|
||||
|
||||
setTimeout(function() {
|
||||
submitButton.removeAttribute('data-kt-indicator');
|
||||
|
||||
Swal.fire({
|
||||
text: "Form has been successfully submitted!",
|
||||
icon: "success",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.isConfirmed) {
|
||||
// Hide modal
|
||||
modal.hide();
|
||||
|
||||
// Enable submit button after loading
|
||||
submitButton.disabled = false;
|
||||
|
||||
// Redirect to customers list page
|
||||
window.location = form.getAttribute("data-kt-redirect");
|
||||
}
|
||||
});
|
||||
}, 2000);
|
||||
} else {
|
||||
Swal.fire({
|
||||
text: "Sorry, looks like there are some errors detected, please try again.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary"
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
cancelButton.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
Swal.fire({
|
||||
text: "Are you sure you would like to cancel?",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Yes, cancel it!",
|
||||
cancelButtonText: "No, return",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
cancelButton: "btn btn-active-light"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
form.reset(); // Reset form
|
||||
modal.hide(); // Hide modal
|
||||
} else if (result.dismiss === 'cancel') {
|
||||
Swal.fire({
|
||||
text: "Your form has not been cancelled!.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
closeButton.addEventListener('click', function(e){
|
||||
e.preventDefault();
|
||||
|
||||
Swal.fire({
|
||||
text: "Are you sure you would like to cancel?",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Yes, cancel it!",
|
||||
cancelButtonText: "No, return",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
cancelButton: "btn btn-active-light"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
form.reset(); // Reset form
|
||||
modal.hide(); // Hide modal
|
||||
} else if (result.dismiss === 'cancel') {
|
||||
Swal.fire({
|
||||
text: "Your form has not been cancelled!.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
// Public functions
|
||||
init: function () {
|
||||
// Elements
|
||||
modal = new bootstrap.Modal(document.querySelector('#kt_modal_add_customer'));
|
||||
|
||||
form = document.querySelector('#kt_modal_add_customer_form');
|
||||
submitButton = form.querySelector('#kt_modal_add_customer_submit');
|
||||
cancelButton = form.querySelector('#kt_modal_add_customer_cancel');
|
||||
closeButton = form.querySelector('#kt_modal_add_customer_close');
|
||||
|
||||
handleForm();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTModalCustomersAdd.init();
|
||||
});
|
||||
@@ -0,0 +1,189 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTCustomersExport = function () {
|
||||
var element;
|
||||
var submitButton;
|
||||
var cancelButton;
|
||||
var closeButton;
|
||||
var validator;
|
||||
var form;
|
||||
var modal;
|
||||
|
||||
// Init form inputs
|
||||
var handleForm = function () {
|
||||
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||
validator = FormValidation.formValidation(
|
||||
form,
|
||||
{
|
||||
fields: {
|
||||
'date': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Date range is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||
rowSelector: '.fv-row',
|
||||
eleInvalidClass: '',
|
||||
eleValidClass: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Action buttons
|
||||
submitButton.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Validate form before submit
|
||||
if (validator) {
|
||||
validator.validate().then(function (status) {
|
||||
console.log('validated!');
|
||||
|
||||
if (status == 'Valid') {
|
||||
submitButton.setAttribute('data-kt-indicator', 'on');
|
||||
|
||||
// Disable submit button whilst loading
|
||||
submitButton.disabled = true;
|
||||
|
||||
setTimeout(function() {
|
||||
submitButton.removeAttribute('data-kt-indicator');
|
||||
|
||||
Swal.fire({
|
||||
text: "Customer list has been successfully exported!",
|
||||
icon: "success",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.isConfirmed) {
|
||||
modal.hide();
|
||||
|
||||
// Enable submit button after loading
|
||||
submitButton.disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
//form.submit(); // Submit form
|
||||
}, 2000);
|
||||
} else {
|
||||
Swal.fire({
|
||||
text: "Sorry, looks like there are some errors detected, please try again.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary"
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
cancelButton.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
Swal.fire({
|
||||
text: "Are you sure you would like to cancel?",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Yes, cancel it!",
|
||||
cancelButtonText: "No, return",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
cancelButton: "btn btn-active-light"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
form.reset(); // Reset form
|
||||
modal.hide(); // Hide modal
|
||||
} else if (result.dismiss === 'cancel') {
|
||||
Swal.fire({
|
||||
text: "Your form has not been cancelled!.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
closeButton.addEventListener('click', function(e){
|
||||
e.preventDefault();
|
||||
|
||||
Swal.fire({
|
||||
text: "Are you sure you would like to cancel?",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Yes, cancel it!",
|
||||
cancelButtonText: "No, return",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
cancelButton: "btn btn-active-light"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
form.reset(); // Reset form
|
||||
modal.hide(); // Hide modal
|
||||
} else if (result.dismiss === 'cancel') {
|
||||
Swal.fire({
|
||||
text: "Your form has not been cancelled!.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
var initForm = function () {
|
||||
const datepicker = form.querySelector("[name=date]");
|
||||
|
||||
// Handle datepicker range -- For more info on flatpickr plugin, please visit: https://flatpickr.js.org/
|
||||
$(datepicker).flatpickr({
|
||||
altInput: true,
|
||||
altFormat: "F j, Y",
|
||||
dateFormat: "Y-m-d",
|
||||
mode: "range"
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
// Public functions
|
||||
init: function () {
|
||||
// Elements
|
||||
element = document.querySelector('#kt_customers_export_modal');
|
||||
modal = new bootstrap.Modal(element);
|
||||
|
||||
form = document.querySelector('#kt_customers_export_form');
|
||||
submitButton = form.querySelector('#kt_customers_export_submit');
|
||||
cancelButton = form.querySelector('#kt_customers_export_cancel');
|
||||
closeButton = element.querySelector('#kt_customers_export_close');
|
||||
|
||||
handleForm();
|
||||
initForm();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTCustomersExport.init();
|
||||
});
|
||||
@@ -0,0 +1,282 @@
|
||||
"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();
|
||||
});
|
||||
@@ -0,0 +1,131 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTModalUpdateCustomer = function () {
|
||||
var element;
|
||||
var submitButton;
|
||||
var cancelButton;
|
||||
var closeButton;
|
||||
var form;
|
||||
var modal;
|
||||
|
||||
// Init form inputs
|
||||
var initForm = function () {
|
||||
// Action buttons
|
||||
submitButton.addEventListener('click', function (e) {
|
||||
// Prevent default button action
|
||||
e.preventDefault();
|
||||
|
||||
// Show loading indication
|
||||
submitButton.setAttribute('data-kt-indicator', 'on');
|
||||
|
||||
// Simulate form submission
|
||||
setTimeout(function () {
|
||||
// Simulate form submission
|
||||
submitButton.removeAttribute('data-kt-indicator');
|
||||
|
||||
// Show popup confirmation
|
||||
Swal.fire({
|
||||
text: "Form has been successfully submitted!",
|
||||
icon: "success",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.isConfirmed) {
|
||||
modal.hide();
|
||||
}
|
||||
});
|
||||
|
||||
//form.submit(); // Submit form
|
||||
}, 2000);
|
||||
});
|
||||
|
||||
cancelButton.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
Swal.fire({
|
||||
text: "Are you sure you would like to cancel?",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Yes, cancel it!",
|
||||
cancelButtonText: "No, return",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
cancelButton: "btn btn-active-light"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
form.reset(); // Reset form
|
||||
modal.hide(); // Hide modal
|
||||
} else if (result.dismiss === 'cancel') {
|
||||
Swal.fire({
|
||||
text: "Your form has not been cancelled!.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
closeButton.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
Swal.fire({
|
||||
text: "Are you sure you would like to cancel?",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Yes, cancel it!",
|
||||
cancelButtonText: "No, return",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
cancelButton: "btn btn-active-light"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
form.reset(); // Reset form
|
||||
modal.hide(); // Hide modal
|
||||
} else if (result.dismiss === 'cancel') {
|
||||
Swal.fire({
|
||||
text: "Your form has not been cancelled!.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
// Public functions
|
||||
init: function () {
|
||||
// Elements
|
||||
element = document.querySelector('#kt_modal_update_customer');
|
||||
modal = new bootstrap.Modal(element);
|
||||
|
||||
form = element.querySelector('#kt_modal_update_customer_form');
|
||||
submitButton = form.querySelector('#kt_modal_update_customer_submit');
|
||||
cancelButton = form.querySelector('#kt_modal_update_customer_cancel');
|
||||
closeButton = element.querySelector('#kt_modal_update_customer_close');
|
||||
|
||||
initForm();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTModalUpdateCustomer.init();
|
||||
});
|
||||
@@ -0,0 +1,207 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTModalAddPayment = function () {
|
||||
var element;
|
||||
var submitButton;
|
||||
var cancelButton;
|
||||
var closeButton;
|
||||
var validator;
|
||||
var newBalance;
|
||||
var form;
|
||||
var modal;
|
||||
|
||||
// Init form inputs
|
||||
var initForm = function () {
|
||||
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||
validator = FormValidation.formValidation(
|
||||
form,
|
||||
{
|
||||
fields: {
|
||||
'invoice': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Invoice number is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'status': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Invoice status is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'amount': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Invoice amount is required'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||
rowSelector: '.fv-row',
|
||||
eleInvalidClass: '',
|
||||
eleValidClass: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Revalidate country field. For more info, plase visit the official plugin site: https://select2.org/
|
||||
$(form.querySelector('[name="status"]')).on('change', function () {
|
||||
// Revalidate the field when an option is chosen
|
||||
validator.revalidateField('status');
|
||||
});
|
||||
|
||||
// Action buttons
|
||||
submitButton.addEventListener('click', function (e) {
|
||||
// Prevent default button action
|
||||
e.preventDefault();
|
||||
|
||||
// Validate form before submit
|
||||
if (validator) {
|
||||
validator.validate().then(function (status) {
|
||||
console.log('validated!');
|
||||
|
||||
if (status == 'Valid') {
|
||||
// Show loading indication
|
||||
submitButton.setAttribute('data-kt-indicator', 'on');
|
||||
|
||||
// Disable submit button whilst loading
|
||||
submitButton.disabled = true;
|
||||
|
||||
// Simulate form submission
|
||||
setTimeout(function () {
|
||||
// Simulate form submission
|
||||
submitButton.removeAttribute('data-kt-indicator');
|
||||
|
||||
// Show popup confirmation
|
||||
Swal.fire({
|
||||
text: "Form has been successfully submitted!",
|
||||
icon: "success",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.isConfirmed) {
|
||||
modal.hide();
|
||||
|
||||
// Enable submit button after loading
|
||||
submitButton.disabled = false;
|
||||
|
||||
// Reset form for demo purposes only
|
||||
form.reset();
|
||||
}
|
||||
});
|
||||
|
||||
//form.submit(); // Submit form
|
||||
}, 2000);
|
||||
} else {
|
||||
// Show popup warning
|
||||
Swal.fire({
|
||||
text: "Sorry, looks like there are some errors detected, please try again.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary"
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
cancelButton.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
Swal.fire({
|
||||
text: "Are you sure you would like to cancel?",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Yes, cancel it!",
|
||||
cancelButtonText: "No, return",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
cancelButton: "btn btn-active-light"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
form.reset(); // Reset form
|
||||
modal.hide(); // Hide modal
|
||||
} else if (result.dismiss === 'cancel') {
|
||||
Swal.fire({
|
||||
text: "Your form has not been cancelled!.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
closeButton.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
Swal.fire({
|
||||
text: "Are you sure you would like to cancel?",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Yes, cancel it!",
|
||||
cancelButtonText: "No, return",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
cancelButton: "btn btn-active-light"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
form.reset(); // Reset form
|
||||
modal.hide(); // Hide modal
|
||||
} else if (result.dismiss === 'cancel') {
|
||||
Swal.fire({
|
||||
text: "Your form has not been cancelled!.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
// Public functions
|
||||
init: function () {
|
||||
// Elements
|
||||
element = document.querySelector('#kt_modal_add_payment');
|
||||
modal = new bootstrap.Modal(element);
|
||||
|
||||
form = element.querySelector('#kt_modal_add_payment_form');
|
||||
submitButton = form.querySelector('#kt_modal_add_payment_submit');
|
||||
cancelButton = form.querySelector('#kt_modal_add_payment_cancel');
|
||||
closeButton = element.querySelector('#kt_modal_add_payment_close');
|
||||
|
||||
initForm();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTModalAddPayment.init();
|
||||
});
|
||||
@@ -0,0 +1,241 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTModalAdjustBalance = function () {
|
||||
var element;
|
||||
var submitButton;
|
||||
var cancelButton;
|
||||
var closeButton;
|
||||
var validator;
|
||||
var maskInput;
|
||||
var newBalance;
|
||||
var form;
|
||||
var modal;
|
||||
|
||||
// Init form inputs
|
||||
var initForm = function () {
|
||||
// Init inputmask plugin --- For more info please refer to the official documentation here: https://github.com/RobinHerbots/Inputmask
|
||||
Inputmask("US$ 9,999,999.99", {
|
||||
"numericInput": true
|
||||
}).mask("#kt_modal_inputmask");
|
||||
}
|
||||
|
||||
var handleBalanceCalculator = function () {
|
||||
// Select elements
|
||||
const currentBalance = element.querySelector('[kt-modal-adjust-balance="current_balance"]');
|
||||
newBalance = element.querySelector('[kt-modal-adjust-balance="new_balance"]');
|
||||
maskInput = document.getElementById('kt_modal_inputmask');
|
||||
|
||||
// Get current balance value
|
||||
const isNegative = currentBalance.innerHTML.includes('-');
|
||||
let currentValue = parseFloat(currentBalance.innerHTML.replace(/[^0-9.]/g, '').replace(',', ''));
|
||||
currentValue = isNegative ? currentValue * -1 : currentValue;
|
||||
|
||||
// On change event for inputmask
|
||||
let maskValue;
|
||||
maskInput.addEventListener('focusout', function (e) {
|
||||
// Get inputmask value on change
|
||||
maskValue = parseFloat(e.target.value.replace(/[^0-9.]/g, '').replace(',', ''));
|
||||
|
||||
// Set mask value as 0 when NaN detected
|
||||
if(isNaN(maskValue)){
|
||||
maskValue = 0;
|
||||
}
|
||||
|
||||
// Calculate & set new balance value
|
||||
newBalance.innerHTML = 'US$ ' + (maskValue + currentValue).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
|
||||
});
|
||||
}
|
||||
|
||||
// Handle form validation and submittion
|
||||
var handleForm = function () {
|
||||
// Stepper custom navigation
|
||||
|
||||
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||
validator = FormValidation.formValidation(
|
||||
form,
|
||||
{
|
||||
fields: {
|
||||
'adjustment': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Adjustment type is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'amount': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Amount is required'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||
rowSelector: '.fv-row',
|
||||
eleInvalidClass: '',
|
||||
eleValidClass: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Revalidate country field. For more info, plase visit the official plugin site: https://select2.org/
|
||||
$(form.querySelector('[name="adjustment"]')).on('change', function () {
|
||||
// Revalidate the field when an option is chosen
|
||||
validator.revalidateField('adjustment');
|
||||
});
|
||||
|
||||
// Action buttons
|
||||
submitButton.addEventListener('click', function (e) {
|
||||
// Prevent default button action
|
||||
e.preventDefault();
|
||||
|
||||
// Validate form before submit
|
||||
if (validator) {
|
||||
validator.validate().then(function (status) {
|
||||
console.log('validated!');
|
||||
|
||||
if (status == 'Valid') {
|
||||
// Show loading indication
|
||||
submitButton.setAttribute('data-kt-indicator', 'on');
|
||||
|
||||
// Disable submit button whilst loading
|
||||
submitButton.disabled = true;
|
||||
|
||||
// Simulate form submission
|
||||
setTimeout(function () {
|
||||
// Simulate form submission
|
||||
submitButton.removeAttribute('data-kt-indicator');
|
||||
|
||||
// Show popup confirmation
|
||||
Swal.fire({
|
||||
text: "Form has been successfully submitted!",
|
||||
icon: "success",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.isConfirmed) {
|
||||
modal.hide();
|
||||
|
||||
// Enable submit button after loading
|
||||
submitButton.disabled = false;
|
||||
|
||||
// Reset form for demo purposes only
|
||||
form.reset();
|
||||
newBalance.innerHTML = "--";
|
||||
}
|
||||
});
|
||||
|
||||
//form.submit(); // Submit form
|
||||
}, 2000);
|
||||
} else {
|
||||
// Show popup warning
|
||||
Swal.fire({
|
||||
text: "Sorry, looks like there are some errors detected, please try again.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary"
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
cancelButton.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
Swal.fire({
|
||||
text: "Are you sure you would like to cancel?",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Yes, cancel it!",
|
||||
cancelButtonText: "No, return",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
cancelButton: "btn btn-active-light"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
form.reset(); // Reset form
|
||||
modal.hide(); // Hide modal
|
||||
} else if (result.dismiss === 'cancel') {
|
||||
Swal.fire({
|
||||
text: "Your form has not been cancelled!.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
closeButton.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
Swal.fire({
|
||||
text: "Are you sure you would like to cancel?",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Yes, cancel it!",
|
||||
cancelButtonText: "No, return",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
cancelButton: "btn btn-active-light"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
form.reset(); // Reset form
|
||||
modal.hide(); // Hide modal
|
||||
} else if (result.dismiss === 'cancel') {
|
||||
Swal.fire({
|
||||
text: "Your form has not been cancelled!.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
// Public functions
|
||||
init: function () {
|
||||
// Elements
|
||||
element = document.querySelector('#kt_modal_adjust_balance');
|
||||
modal = new bootstrap.Modal(element);
|
||||
|
||||
form = element.querySelector('#kt_modal_adjust_balance_form');
|
||||
submitButton = form.querySelector('#kt_modal_adjust_balance_submit');
|
||||
cancelButton = form.querySelector('#kt_modal_adjust_balance_cancel');
|
||||
closeButton = element.querySelector('#kt_modal_adjust_balance_close');
|
||||
|
||||
initForm();
|
||||
handleBalanceCalculator();
|
||||
handleForm();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTModalAdjustBalance.init();
|
||||
});
|
||||
@@ -0,0 +1,129 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTCustomerViewInvoices = function () {
|
||||
|
||||
// Private functions
|
||||
// Init current year datatable
|
||||
var initInvoiceYearCurrent = function () {
|
||||
// Define table element
|
||||
const id = '#kt_customer_details_invoices_table_1';
|
||||
var table = document.querySelector(id);
|
||||
|
||||
// Set date data order
|
||||
const tableRows = table.querySelectorAll('tbody tr');
|
||||
|
||||
tableRows.forEach(row => {
|
||||
const dateRow = row.querySelectorAll('td');
|
||||
const realDate = moment(dateRow[0].innerHTML, "DD MMM YYYY, LT").format(); // select date from 1st column in table
|
||||
dateRow[0].setAttribute('data-order', realDate);
|
||||
});
|
||||
|
||||
// Init datatable --- more info on datatables: https://datatables.net/manual/
|
||||
var datatable = $(id).DataTable({
|
||||
"info": false,
|
||||
'order': [],
|
||||
"pageLength": 5,
|
||||
"lengthChange": false,
|
||||
'columnDefs': [
|
||||
{ orderable: false, targets: 4 }, // Disable ordering on column 0 (download)
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
// Init year 2020 datatable
|
||||
var initInvoiceYear2020 = function () {
|
||||
// Define table element
|
||||
const id = '#kt_customer_details_invoices_table_2';
|
||||
var table = document.querySelector(id);
|
||||
|
||||
// Set date data order
|
||||
const tableRows = table.querySelectorAll('tbody tr');
|
||||
|
||||
tableRows.forEach(row => {
|
||||
const dateRow = row.querySelectorAll('td');
|
||||
const realDate = moment(dateRow[0].innerHTML, "DD MMM YYYY, LT").format(); // select date from 1st column in table
|
||||
dateRow[0].setAttribute('data-order', realDate);
|
||||
});
|
||||
|
||||
// Init datatable --- more info on datatables: https://datatables.net/manual/
|
||||
var datatable = $(id).DataTable({
|
||||
"info": false,
|
||||
'order': [],
|
||||
"pageLength": 5,
|
||||
"lengthChange": false,
|
||||
'columnDefs': [
|
||||
{ orderable: false, targets: 4 }, // Disable ordering on column 0 (download)
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
// Init year 2019 datatable
|
||||
var initInvoiceYear2019 = function () {
|
||||
// Define table element
|
||||
const id = '#kt_customer_details_invoices_table_3';
|
||||
var table = document.querySelector(id);
|
||||
|
||||
// Set date data order
|
||||
const tableRows = table.querySelectorAll('tbody tr');
|
||||
|
||||
tableRows.forEach(row => {
|
||||
const dateRow = row.querySelectorAll('td');
|
||||
const realDate = moment(dateRow[0].innerHTML, "DD MMM YYYY, LT").format(); // select date from 1st column in table
|
||||
dateRow[0].setAttribute('data-order', realDate);
|
||||
});
|
||||
|
||||
// Init datatable --- more info on datatables: https://datatables.net/manual/
|
||||
var datatable = $(id).DataTable({
|
||||
"info": false,
|
||||
'order': [],
|
||||
"pageLength": 5,
|
||||
"lengthChange": false,
|
||||
'columnDefs': [
|
||||
{ orderable: false, targets: 4 }, // Disable ordering on column 0 (download)
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
// Init year 2018 datatable
|
||||
var initInvoiceYear2018 = function () {
|
||||
// Define table element
|
||||
const id = '#kt_customer_details_invoices_table_4';
|
||||
var table = document.querySelector(id);
|
||||
|
||||
// Set date data order
|
||||
const tableRows = table.querySelectorAll('tbody tr');
|
||||
|
||||
tableRows.forEach(row => {
|
||||
const dateRow = row.querySelectorAll('td');
|
||||
const realDate = moment(dateRow[0].innerHTML, "DD MMM YYYY, LT").format(); // select date from 1st column in table
|
||||
dateRow[0].setAttribute('data-order', realDate);
|
||||
});
|
||||
|
||||
// Init datatable --- more info on datatables: https://datatables.net/manual/
|
||||
var datatable = $(id).DataTable({
|
||||
"info": false,
|
||||
'order': [],
|
||||
"pageLength": 5,
|
||||
"lengthChange": false,
|
||||
'columnDefs': [
|
||||
{ orderable: false, targets: 4 }, // Disable ordering on column 0 (download)
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
// Public methods
|
||||
return {
|
||||
init: function () {
|
||||
initInvoiceYearCurrent();
|
||||
initInvoiceYear2020();
|
||||
initInvoiceYear2019();
|
||||
initInvoiceYear2018();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTCustomerViewInvoices.init();
|
||||
});
|
||||
@@ -0,0 +1,110 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTCustomerViewPaymentMethod = function () {
|
||||
|
||||
// Private functions
|
||||
var initPaymentMethod = function () {
|
||||
// Define variables
|
||||
const table = document.getElementById('kt_customer_view_payment_method');
|
||||
const tableRows = table.querySelectorAll('[ data-kt-customer-payment-method="row"]');
|
||||
|
||||
tableRows.forEach(row => {
|
||||
// Select delete button
|
||||
const deleteButton = row.querySelector('[data-kt-customer-payment-method="delete"]');
|
||||
|
||||
// Delete button action
|
||||
deleteButton.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
|
||||
// Popup confirmation
|
||||
Swal.fire({
|
||||
text: "Are you sure you would like to delete this card?",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Yes, delete it!",
|
||||
cancelButtonText: "No, return",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
cancelButton: "btn btn-active-light"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
row.remove();
|
||||
modal.hide(); // Hide modal
|
||||
} else if (result.dismiss === 'cancel') {
|
||||
Swal.fire({
|
||||
text: "Your card was not deleted!.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Handle set as primary button
|
||||
const handlePrimaryButton = () => {
|
||||
// Define variable
|
||||
const button = document.querySelector('[data-kt-payment-mehtod-action="set_as_primary"]');
|
||||
|
||||
button.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
|
||||
// Popup confirmation
|
||||
Swal.fire({
|
||||
text: "Are you sure you would like to set this card as primary?",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Yes, set it!",
|
||||
cancelButtonText: "No, return",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
cancelButton: "btn btn-active-light"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
Swal.fire({
|
||||
text: "Your card was set to primary!.",
|
||||
icon: "success",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
}
|
||||
});
|
||||
} else if (result.dismiss === 'cancel') {
|
||||
Swal.fire({
|
||||
text: "Your card was not set to primary!.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// Public methods
|
||||
return {
|
||||
init: function () {
|
||||
initPaymentMethod();
|
||||
handlePrimaryButton();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTCustomerViewPaymentMethod.init();
|
||||
});
|
||||
@@ -0,0 +1,110 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTCustomerViewPaymentTable = function () {
|
||||
|
||||
// Define shared variables
|
||||
var datatable;
|
||||
var table = document.querySelector('#kt_table_customers_payment');
|
||||
|
||||
// Private functions
|
||||
var initCustomerView = function () {
|
||||
// Set date data order
|
||||
const tableRows = table.querySelectorAll('tbody tr');
|
||||
|
||||
tableRows.forEach(row => {
|
||||
const dateRow = row.querySelectorAll('td');
|
||||
const realDate = moment(dateRow[3].innerHTML, "DD MMM YYYY, LT").format(); // select date from 4th column in table
|
||||
dateRow[3].setAttribute('data-order', realDate);
|
||||
});
|
||||
|
||||
// Init datatable --- more info on datatables: https://datatables.net/manual/
|
||||
datatable = $(table).DataTable({
|
||||
"info": false,
|
||||
'order': [],
|
||||
"pageLength": 5,
|
||||
"lengthChange": false,
|
||||
'columnDefs': [
|
||||
{ orderable: false, targets: 4 }, // Disable ordering on column 5 (actions)
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
// Delete customer
|
||||
var deleteRows = () => {
|
||||
// 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 invoiceNumber = parent.querySelectorAll('td')[0].innerText;
|
||||
|
||||
// SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
|
||||
Swal.fire({
|
||||
text: "Are you sure you want to delete " + invoiceNumber + "?",
|
||||
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 " + invoiceNumber + "!.",
|
||||
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();
|
||||
}).then(function () {
|
||||
// Detect checked checkboxes
|
||||
toggleToolbars();
|
||||
});
|
||||
} 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",
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
// Public methods
|
||||
return {
|
||||
init: function () {
|
||||
if (!table) {
|
||||
return;
|
||||
}
|
||||
|
||||
initCustomerView();
|
||||
deleteRows();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTCustomerViewPaymentTable.init();
|
||||
});
|
||||
@@ -0,0 +1,129 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTCustomerViewStatements = function () {
|
||||
|
||||
// Private functions
|
||||
// Init current year datatable
|
||||
var initStatementYearCurrent = function () {
|
||||
// Define table element
|
||||
const id = '#kt_customer_view_statement_table_1';
|
||||
var table = document.querySelector(id);
|
||||
|
||||
// Set date data order
|
||||
const tableRows = table.querySelectorAll('tbody tr');
|
||||
|
||||
tableRows.forEach(row => {
|
||||
const dateRow = row.querySelectorAll('td');
|
||||
const realDate = moment(dateRow[0].innerHTML, "DD MMM YYYY, LT").format(); // select date from 1st column in table
|
||||
dateRow[0].setAttribute('data-order', realDate);
|
||||
});
|
||||
|
||||
// Init datatable --- more info on datatables: https://datatables.net/manual/
|
||||
var datatable = $(id).DataTable({
|
||||
"info": false,
|
||||
'order': [],
|
||||
"pageLength": 10,
|
||||
"lengthChange": false,
|
||||
'columnDefs': [
|
||||
{ orderable: false, targets: 4 }, // Disable ordering on column 0 (download)
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
// Init year 2020 datatable
|
||||
var initStatementYear2020 = function () {
|
||||
// Define table element
|
||||
const id = '#kt_customer_view_statement_table_2';
|
||||
var table = document.querySelector(id);
|
||||
|
||||
// Set date data order
|
||||
const tableRows = table.querySelectorAll('tbody tr');
|
||||
|
||||
tableRows.forEach(row => {
|
||||
const dateRow = row.querySelectorAll('td');
|
||||
const realDate = moment(dateRow[0].innerHTML, "DD MMM YYYY, LT").format(); // select date from 1st column in table
|
||||
dateRow[0].setAttribute('data-order', realDate);
|
||||
});
|
||||
|
||||
// Init datatable --- more info on datatables: https://datatables.net/manual/
|
||||
var datatable = $(id).DataTable({
|
||||
"info": false,
|
||||
'order': [],
|
||||
"pageLength": 10,
|
||||
"lengthChange": false,
|
||||
'columnDefs': [
|
||||
{ orderable: false, targets: 4 }, // Disable ordering on column 0 (download)
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
// Init year 2019 datatable
|
||||
var initStatementYear2019 = function () {
|
||||
// Define table element
|
||||
const id = '#kt_customer_view_statement_table_3';
|
||||
var table = document.querySelector(id);
|
||||
|
||||
// Set date data order
|
||||
const tableRows = table.querySelectorAll('tbody tr');
|
||||
|
||||
tableRows.forEach(row => {
|
||||
const dateRow = row.querySelectorAll('td');
|
||||
const realDate = moment(dateRow[0].innerHTML, "DD MMM YYYY, LT").format(); // select date from 1st column in table
|
||||
dateRow[0].setAttribute('data-order', realDate);
|
||||
});
|
||||
|
||||
// Init datatable --- more info on datatables: https://datatables.net/manual/
|
||||
var datatable = $(id).DataTable({
|
||||
"info": false,
|
||||
'order': [],
|
||||
"pageLength": 10,
|
||||
"lengthChange": false,
|
||||
'columnDefs': [
|
||||
{ orderable: false, targets: 4 }, // Disable ordering on column 0 (download)
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
// Init year 2018 datatable
|
||||
var initStatementYear2018 = function () {
|
||||
// Define table element
|
||||
const id = '#kt_customer_view_statement_table_4';
|
||||
var table = document.querySelector(id);
|
||||
|
||||
// Set date data order
|
||||
const tableRows = table.querySelectorAll('tbody tr');
|
||||
|
||||
tableRows.forEach(row => {
|
||||
const dateRow = row.querySelectorAll('td');
|
||||
const realDate = moment(dateRow[0].innerHTML, "DD MMM YYYY, LT").format(); // select date from 1st column in table
|
||||
dateRow[0].setAttribute('data-order', realDate);
|
||||
});
|
||||
|
||||
// Init datatable --- more info on datatables: https://datatables.net/manual/
|
||||
var datatable = $(id).DataTable({
|
||||
"info": false,
|
||||
'order': [],
|
||||
"pageLength": 10,
|
||||
"lengthChange": false,
|
||||
'columnDefs': [
|
||||
{ orderable: false, targets: 4 }, // Disable ordering on column 0 (download)
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
// Public methods
|
||||
return {
|
||||
init: function () {
|
||||
initStatementYearCurrent();
|
||||
initStatementYear2020();
|
||||
initStatementYear2019();
|
||||
initStatementYear2018();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTCustomerViewStatements.init();
|
||||
});
|
||||
Reference in New Issue
Block a user