initial commit
This commit is contained in:
@@ -0,0 +1,181 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTAppEcommerceSalesListing = function () {
|
||||
// Shared variables
|
||||
var table;
|
||||
var datatable;
|
||||
var flatpickr;
|
||||
var minDate, maxDate;
|
||||
|
||||
// Private functions
|
||||
var initDatatable = function () {
|
||||
// Init datatable --- more info on datatables: https://datatables.net/manual/
|
||||
datatable = $(table).DataTable({
|
||||
"info": false,
|
||||
'order': [],
|
||||
'pageLength': 10,
|
||||
'columnDefs': [
|
||||
{ orderable: false, targets: 0 }, // Disable ordering on column 0 (checkbox)
|
||||
{ orderable: false, targets: 7 }, // Disable ordering on column 7 (actions)
|
||||
]
|
||||
});
|
||||
|
||||
// Re-init functions on datatable re-draws
|
||||
datatable.on('draw', function () {
|
||||
handleDeleteRows();
|
||||
});
|
||||
}
|
||||
|
||||
// Init flatpickr --- more info :https://flatpickr.js.org/getting-started/
|
||||
var initFlatpickr = () => {
|
||||
const element = document.querySelector('#kt_ecommerce_sales_flatpickr');
|
||||
flatpickr = $(element).flatpickr({
|
||||
altInput: true,
|
||||
altFormat: "d/m/Y",
|
||||
dateFormat: "Y-m-d",
|
||||
mode: "range",
|
||||
onChange: function (selectedDates, dateStr, instance) {
|
||||
handleFlatpickr(selectedDates, dateStr, instance);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
|
||||
var handleSearchDatatable = () => {
|
||||
const filterSearch = document.querySelector('[data-kt-ecommerce-order-filter="search"]');
|
||||
filterSearch.addEventListener('keyup', function (e) {
|
||||
datatable.search(e.target.value).draw();
|
||||
});
|
||||
}
|
||||
|
||||
// Handle status filter dropdown
|
||||
var handleStatusFilter = () => {
|
||||
const filterStatus = document.querySelector('[data-kt-ecommerce-order-filter="status"]');
|
||||
$(filterStatus).on('change', e => {
|
||||
let value = e.target.value;
|
||||
if (value === 'all') {
|
||||
value = '';
|
||||
}
|
||||
datatable.column(3).search(value).draw();
|
||||
});
|
||||
}
|
||||
|
||||
// Handle flatpickr --- more info: https://flatpickr.js.org/events/
|
||||
var handleFlatpickr = (selectedDates, dateStr, instance) => {
|
||||
minDate = selectedDates[0] ? new Date(selectedDates[0]) : null;
|
||||
maxDate = selectedDates[1] ? new Date(selectedDates[1]) : null;
|
||||
|
||||
// Datatable date filter --- more info: https://datatables.net/extensions/datetime/examples/integration/datatables.html
|
||||
// Custom filtering function which will search data in column four between two values
|
||||
$.fn.dataTable.ext.search.push(
|
||||
function (settings, data, dataIndex) {
|
||||
var min = minDate;
|
||||
var max = maxDate;
|
||||
var dateAdded = new Date(moment($(data[5]).text(), 'DD/MM/YYYY'));
|
||||
var dateModified = new Date(moment($(data[6]).text(), 'DD/MM/YYYY'));
|
||||
|
||||
if (
|
||||
(min === null && max === null) ||
|
||||
(min === null && max >= dateModified) ||
|
||||
(min <= dateAdded && max === null) ||
|
||||
(min <= dateAdded && max >= dateModified)
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
);
|
||||
datatable.draw();
|
||||
}
|
||||
|
||||
// Handle clear flatpickr
|
||||
var handleClearFlatpickr = () => {
|
||||
const clearButton = document.querySelector('#kt_ecommerce_sales_flatpickr_clear');
|
||||
clearButton.addEventListener('click', e => {
|
||||
flatpickr.clear();
|
||||
});
|
||||
}
|
||||
|
||||
// Delete cateogry
|
||||
var handleDeleteRows = () => {
|
||||
// Select all delete buttons
|
||||
const deleteButtons = table.querySelectorAll('[data-kt-ecommerce-order-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 category name
|
||||
const orderID = parent.querySelector('[data-kt-ecommerce-order-filter="order_id"]').innerText;
|
||||
|
||||
// SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
|
||||
Swal.fire({
|
||||
text: "Are you sure you want to delete order: " + orderID + "?",
|
||||
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 " + orderID + "!.",
|
||||
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: orderID + " was not deleted.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn fw-bold btn-primary",
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Public methods
|
||||
return {
|
||||
init: function () {
|
||||
table = document.querySelector('#kt_ecommerce_sales_table');
|
||||
|
||||
if (!table) {
|
||||
return;
|
||||
}
|
||||
|
||||
initDatatable();
|
||||
initFlatpickr();
|
||||
handleSearchDatatable();
|
||||
handleStatusFilter();
|
||||
handleDeleteRows();
|
||||
handleClearFlatpickr();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTAppEcommerceSalesListing.init();
|
||||
});
|
||||
@@ -0,0 +1,338 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTAppEcommerceSalesSaveOrder = function () {
|
||||
// Shared variables
|
||||
var table;
|
||||
var datatable;
|
||||
|
||||
// Private functions
|
||||
const initSaveOrder = () => {
|
||||
// Init flatpickr
|
||||
$('#kt_ecommerce_edit_order_date').flatpickr({
|
||||
altInput: true,
|
||||
altFormat: "d F, Y",
|
||||
dateFormat: "Y-m-d",
|
||||
});
|
||||
|
||||
// Init select2 country options
|
||||
// Format options
|
||||
const optionFormat = (item) => {
|
||||
if ( !item.id ) {
|
||||
return item.text;
|
||||
}
|
||||
|
||||
var span = document.createElement('span');
|
||||
var template = '';
|
||||
|
||||
template += '<img src="' + item.element.getAttribute('data-kt-select2-country') + '" class="rounded-circle h-20px me-2" alt="image"/>';
|
||||
template += item.text;
|
||||
|
||||
span.innerHTML = template;
|
||||
|
||||
return $(span);
|
||||
}
|
||||
|
||||
// Init Select2 --- more info: https://select2.org/
|
||||
$('#kt_ecommerce_edit_order_billing_country').select2({
|
||||
placeholder: "Select a country",
|
||||
minimumResultsForSearch: Infinity,
|
||||
templateSelection: optionFormat,
|
||||
templateResult: optionFormat
|
||||
});
|
||||
|
||||
$('#kt_ecommerce_edit_order_shipping_country').select2({
|
||||
placeholder: "Select a country",
|
||||
minimumResultsForSearch: Infinity,
|
||||
templateSelection: optionFormat,
|
||||
templateResult: optionFormat
|
||||
});
|
||||
|
||||
// Init datatable --- more info on datatables: https://datatables.net/manual/
|
||||
table = document.querySelector('#kt_ecommerce_edit_order_product_table');
|
||||
datatable = $(table).DataTable({
|
||||
'order': [],
|
||||
"scrollY": "400px",
|
||||
"scrollCollapse": true,
|
||||
"paging": false,
|
||||
"info": false,
|
||||
'columnDefs': [
|
||||
{ orderable: false, targets: 0 }, // Disable ordering on column 0 (checkbox)
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
// Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
|
||||
var handleSearchDatatable = () => {
|
||||
const filterSearch = document.querySelector('[data-kt-ecommerce-edit-order-filter="search"]');
|
||||
filterSearch.addEventListener('keyup', function (e) {
|
||||
datatable.search(e.target.value).draw();
|
||||
});
|
||||
}
|
||||
|
||||
// Handle shipping form
|
||||
const handleShippingForm = () => {
|
||||
// Select elements
|
||||
const element = document.getElementById('kt_ecommerce_edit_order_shipping_form');
|
||||
const checkbox = document.getElementById('same_as_billing');
|
||||
|
||||
// Show/hide shipping form
|
||||
checkbox.addEventListener('change', e => {
|
||||
if (e.target.checked) {
|
||||
element.classList.add('d-none');
|
||||
} else {
|
||||
element.classList.remove('d-none');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Handle product select
|
||||
const handleProductSelect = () => {
|
||||
// Define variables
|
||||
const checkboxes = table.querySelectorAll('[type="checkbox"]');
|
||||
const target = document.getElementById('kt_ecommerce_edit_order_selected_products');
|
||||
const totalPrice = document.getElementById('kt_ecommerce_edit_order_total_price');
|
||||
|
||||
// Loop through all checked products
|
||||
checkboxes.forEach(checkbox => {
|
||||
checkbox.addEventListener('change', e => {
|
||||
// Select parent row element
|
||||
const parent = checkbox.closest('tr');
|
||||
|
||||
// Clone parent element as variable
|
||||
const product = parent.querySelector('[data-kt-ecommerce-edit-order-filter="product"]').cloneNode(true);
|
||||
|
||||
// Create inner wrapper
|
||||
const innerWrapper = document.createElement('div');
|
||||
|
||||
// Store inner content
|
||||
const innerContent = product.innerHTML;
|
||||
|
||||
// Add & remove classes on parent wrapper
|
||||
const wrapperClassesAdd = ['col', 'my-2'];
|
||||
const wrapperClassesRemove = ['d-flex', 'align-items-center'];
|
||||
|
||||
// Define additional classes
|
||||
const additionalClasses = ['border', 'border-dashed', 'rounded', 'p-3', 'bg-body'];
|
||||
|
||||
// Update parent wrapper classes
|
||||
product.classList.remove(...wrapperClassesRemove);
|
||||
product.classList.add(...wrapperClassesAdd);
|
||||
|
||||
// Remove parent default content
|
||||
product.innerHTML = '';
|
||||
|
||||
// Update inner wrapper classes
|
||||
innerWrapper.classList.add(...wrapperClassesRemove);
|
||||
innerWrapper.classList.add(...additionalClasses);
|
||||
|
||||
// Apply stored inner content into new inner wrapper
|
||||
innerWrapper.innerHTML = innerContent;
|
||||
|
||||
// Append new inner wrapper to parent wrapper
|
||||
product.appendChild(innerWrapper);
|
||||
|
||||
// Get product id
|
||||
const productId = product.getAttribute('data-kt-ecommerce-edit-order-id');
|
||||
|
||||
if (e.target.checked) {
|
||||
// Add product to selected product wrapper
|
||||
target.appendChild(product);
|
||||
} else {
|
||||
// Remove product from selected product wrapper
|
||||
const selectedProduct = target.querySelector('[data-kt-ecommerce-edit-order-id="' + productId + '"]');
|
||||
if (selectedProduct) {
|
||||
target.removeChild(selectedProduct);
|
||||
}
|
||||
}
|
||||
|
||||
// Trigger empty message logic
|
||||
detectEmpty();
|
||||
});
|
||||
});
|
||||
|
||||
// Handle empty list message
|
||||
const detectEmpty = () => {
|
||||
// Select elements
|
||||
const message = target.querySelector('span');
|
||||
const products = target.querySelectorAll('[data-kt-ecommerce-edit-order-filter="product"]');
|
||||
|
||||
// Detect if element is empty
|
||||
if (products.length < 1) {
|
||||
// Show message
|
||||
message.classList.remove('d-none');
|
||||
|
||||
// Reset price
|
||||
totalPrice.innerText = '0.00';
|
||||
} else {
|
||||
// Hide message
|
||||
message.classList.add('d-none');
|
||||
|
||||
// Calculate price
|
||||
calculateTotal(products);
|
||||
}
|
||||
}
|
||||
|
||||
// Calculate total cost
|
||||
const calculateTotal = (products) => {
|
||||
let countPrice = 0;
|
||||
|
||||
// Loop through all selected prodcucts
|
||||
products.forEach(product => {
|
||||
// Get product price
|
||||
const price = parseFloat(product.querySelector('[data-kt-ecommerce-edit-order-filter="price"]').innerText);
|
||||
|
||||
// Add to total
|
||||
countPrice = parseFloat(countPrice + price);
|
||||
});
|
||||
|
||||
// Update total price
|
||||
totalPrice.innerText = countPrice.toFixed(2);
|
||||
}
|
||||
}
|
||||
|
||||
// Submit form handler
|
||||
const handleSubmit = () => {
|
||||
// Define variables
|
||||
let validator;
|
||||
|
||||
// Get elements
|
||||
const form = document.getElementById('kt_ecommerce_edit_order_form');
|
||||
const submitButton = document.getElementById('kt_ecommerce_edit_order_submit');
|
||||
|
||||
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||
validator = FormValidation.formValidation(
|
||||
form,
|
||||
{
|
||||
fields: {
|
||||
'payment_method': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Payment method is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'shipping_method': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Shipping method is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'order_date': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Order date is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'billing_order_address_1': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Address line 1 is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'billing_order_postcode': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Postcode is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'billing_order_state': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'State is required'
|
||||
}
|
||||
}
|
||||
},
|
||||
'billing_order_country': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Country is required'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
trigger: new FormValidation.plugins.Trigger(),
|
||||
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||
rowSelector: '.fv-row',
|
||||
eleInvalidClass: '',
|
||||
eleValidClass: ''
|
||||
})
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Handle submit button
|
||||
submitButton.addEventListener('click', 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) {
|
||||
// Enable submit button after loading
|
||||
submitButton.disabled = false;
|
||||
|
||||
// Redirect to customers list page
|
||||
window.location = form.getAttribute("data-kt-redirect");
|
||||
}
|
||||
});
|
||||
}, 2000);
|
||||
} else {
|
||||
Swal.fire({
|
||||
html: "Sorry, looks like there are some errors detected, please try again.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary"
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// Public methods
|
||||
return {
|
||||
init: function () {
|
||||
|
||||
initSaveOrder();
|
||||
handleSearchDatatable();
|
||||
handleShippingForm();
|
||||
handleProductSelect();
|
||||
handleSubmit();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTAppEcommerceSalesSaveOrder.init();
|
||||
});
|
||||
Reference in New Issue
Block a user