initial commit
This commit is contained in:
@@ -0,0 +1,126 @@
|
||||
"use strict";
|
||||
|
||||
var KTSubscriptionsAdvanced = function () {
|
||||
// Shared variables
|
||||
var table;
|
||||
var datatable;
|
||||
|
||||
var initCustomFieldsDatatable = function () {
|
||||
// Define variables
|
||||
const addButton = document.getElementById('kt_create_new_custom_fields_add');
|
||||
|
||||
// Duplicate input fields
|
||||
const fieldName = table.querySelector('tbody tr td:first-child').innerHTML;
|
||||
const fieldValue = table.querySelector('tbody tr td:nth-child(2)').innerHTML;
|
||||
const deleteButton = table.querySelector('tbody tr td:last-child').innerHTML;
|
||||
|
||||
// Init datatable --- more info on datatables: https://datatables.net/manual/
|
||||
datatable = $(table).DataTable({
|
||||
"info": false,
|
||||
'order': [],
|
||||
'ordering': false,
|
||||
'paging': false,
|
||||
"lengthChange": false
|
||||
});
|
||||
|
||||
// Define datatable row node
|
||||
var rowNode;
|
||||
|
||||
// Handle add button
|
||||
addButton.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
rowNode = datatable.row.add([
|
||||
fieldName,
|
||||
fieldValue,
|
||||
deleteButton
|
||||
]).draw().node();
|
||||
|
||||
// Add custom class to last column -- more info: https://datatables.net/forums/discussion/22341/row-add-cell-class
|
||||
$(rowNode).find('td').eq(2).addClass('text-end');
|
||||
|
||||
// Re-calculate index
|
||||
initCustomFieldRowIndex();
|
||||
});
|
||||
}
|
||||
|
||||
// Handle row index count
|
||||
var initCustomFieldRowIndex = function() {
|
||||
const tableRows = table.querySelectorAll('tbody tr');
|
||||
|
||||
tableRows.forEach((tr, index) => {
|
||||
// add index number to input names & id
|
||||
const fieldNameInput = tr.querySelector('td:first-child input');
|
||||
const fieldValueInput = tr.querySelector('td:nth-child(2) input');
|
||||
const fieldNameLabel = fieldNameInput.getAttribute('id');
|
||||
const fieldValueLabel = fieldValueInput.getAttribute('id');
|
||||
|
||||
fieldNameInput.setAttribute('name', fieldNameLabel + '-' + index);
|
||||
fieldValueInput.setAttribute('name', fieldValueLabel + '-' + index);
|
||||
});
|
||||
}
|
||||
|
||||
// Delete product
|
||||
var deleteCustomField = function() {
|
||||
KTUtil.on(table, '[data-kt-action="field_remove"]', 'click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Select parent row
|
||||
const parent = e.target.closest('tr');
|
||||
|
||||
// SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
|
||||
Swal.fire({
|
||||
text: "Are you sure you want to delete this field ?",
|
||||
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 it!.",
|
||||
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: "It was not deleted.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn fw-bold btn-primary",
|
||||
}
|
||||
})
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
init: function () {
|
||||
table = document.getElementById('kt_create_new_custom_fields');
|
||||
|
||||
initCustomFieldsDatatable();
|
||||
initCustomFieldRowIndex();
|
||||
deleteCustomField();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTSubscriptionsAdvanced.init();
|
||||
});
|
||||
@@ -0,0 +1,85 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTModalCustomerSelect = function() {
|
||||
// Private variables
|
||||
var element;
|
||||
var suggestionsElement;
|
||||
var resultsElement;
|
||||
var wrapperElement;
|
||||
var emptyElement;
|
||||
var searchObject;
|
||||
|
||||
var modal;
|
||||
|
||||
// Private functions
|
||||
var processs = function(search) {
|
||||
var timeout = setTimeout(function() {
|
||||
var number = KTUtil.getRandomInt(1, 6);
|
||||
|
||||
// Hide recently viewed
|
||||
suggestionsElement.classList.add('d-none');
|
||||
|
||||
if (number === 3) {
|
||||
// Hide results
|
||||
resultsElement.classList.add('d-none');
|
||||
// Show empty message
|
||||
emptyElement.classList.remove('d-none');
|
||||
} else {
|
||||
// Show results
|
||||
resultsElement.classList.remove('d-none');
|
||||
// Hide empty message
|
||||
emptyElement.classList.add('d-none');
|
||||
}
|
||||
|
||||
// Complete search
|
||||
search.complete();
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
var clear = function(search) {
|
||||
// Show recently viewed
|
||||
suggestionsElement.classList.remove('d-none');
|
||||
// Hide results
|
||||
resultsElement.classList.add('d-none');
|
||||
// Hide empty message
|
||||
emptyElement.classList.add('d-none');
|
||||
}
|
||||
|
||||
// Public methods
|
||||
return {
|
||||
init: function() {
|
||||
// Elements
|
||||
element = document.querySelector('#kt_modal_customer_search_handler');
|
||||
modal = new bootstrap.Modal(document.querySelector('#kt_modal_customer_search'));
|
||||
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
|
||||
wrapperElement = element.querySelector('[data-kt-search-element="wrapper"]');
|
||||
suggestionsElement = element.querySelector('[data-kt-search-element="suggestions"]');
|
||||
resultsElement = element.querySelector('[data-kt-search-element="results"]');
|
||||
emptyElement = element.querySelector('[data-kt-search-element="empty"]');
|
||||
|
||||
// Initialize search handler
|
||||
searchObject = new KTSearch(element);
|
||||
|
||||
// Search handler
|
||||
searchObject.on('kt.search.process', processs);
|
||||
|
||||
// Clear handler
|
||||
searchObject.on('kt.search.clear', clear);
|
||||
|
||||
// Handle select
|
||||
KTUtil.on(element, '[data-kt-search-element="customer"]', 'click', function() {
|
||||
modal.hide();
|
||||
});
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTModalCustomerSelect.init();
|
||||
});
|
||||
@@ -0,0 +1,157 @@
|
||||
"use strict";
|
||||
|
||||
var KTSubscriptionsProducts = function () {
|
||||
// Shared variables
|
||||
var table;
|
||||
var datatable;
|
||||
var modalEl;
|
||||
var modal;
|
||||
|
||||
var initDatatable = function() {
|
||||
// Init datatable --- more info on datatables: https://datatables.net/manual/
|
||||
datatable = $(table).DataTable({
|
||||
"info": false,
|
||||
'order': [],
|
||||
'ordering': false,
|
||||
'paging': false,
|
||||
"lengthChange": false
|
||||
});
|
||||
}
|
||||
|
||||
// Delete product
|
||||
var deleteProduct = function() {
|
||||
KTUtil.on(table, '[data-kt-action="product_remove"]', 'click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Select parent row
|
||||
const parent = e.target.closest('tr');
|
||||
|
||||
// Get customer name
|
||||
const productName = 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 " + productName + "?",
|
||||
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 " + productName + "!.",
|
||||
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",
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Modal handlers
|
||||
var addProduct = function() {
|
||||
// Select modal buttons
|
||||
const closeButton = modalEl.querySelector('#kt_modal_add_product_close');
|
||||
const cancelButton = modalEl.querySelector('#kt_modal_add_product_cancel');
|
||||
const submitButton = modalEl.querySelector('#kt_modal_add_product_submit');
|
||||
|
||||
// Cancel button action
|
||||
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) {
|
||||
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",
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Add customer button handler
|
||||
submitButton.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Check all radio buttons
|
||||
var radio = modalEl.querySelector('input[type="radio"]:checked');
|
||||
|
||||
// Define datatable row node
|
||||
var rowNode;
|
||||
|
||||
if (radio && radio.checked === true) {
|
||||
rowNode = datatable.row.add( [
|
||||
radio.getAttribute('data-kt-product-name'),
|
||||
'1',
|
||||
radio.getAttribute('data-kt-product-price') + ' / ' + radio.getAttribute('data-kt-product-frequency'),
|
||||
table.querySelector('tbody tr td:last-child').innerHTML
|
||||
]).draw().node();
|
||||
|
||||
// Add custom class to last column -- more info: https://datatables.net/forums/discussion/22341/row-add-cell-class
|
||||
$( rowNode ).find('td').eq(3).addClass('text-end');
|
||||
}
|
||||
|
||||
modal.hide(); // Remove modal
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
init: function () {
|
||||
modalEl = document.getElementById('kt_modal_add_product');
|
||||
|
||||
// Select modal -- more info on Bootstrap modal: https://getbootstrap.com/docs/5.0/components/modal/
|
||||
modal = new bootstrap.Modal(modalEl);
|
||||
|
||||
table = document.querySelector('#kt_subscription_products_table');
|
||||
|
||||
initDatatable();
|
||||
deleteProduct();
|
||||
addProduct();
|
||||
}
|
||||
}
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTSubscriptionsProducts.init();
|
||||
});
|
||||
Reference in New Issue
Block a user