first commit
commit
e6e5c787ae
|
|
@ -0,0 +1,39 @@
|
||||||
|
# Node.js
|
||||||
|
node_modules/
|
||||||
|
|
||||||
|
# User-specific files
|
||||||
|
.vscode/
|
||||||
|
.history/
|
||||||
|
|
||||||
|
# Compiled files
|
||||||
|
dist/
|
||||||
|
build/
|
||||||
|
out/
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
|
# Environment files
|
||||||
|
.env
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
.jest/
|
||||||
|
.pnpm/
|
||||||
|
.yarn/
|
||||||
|
|
||||||
|
# Optional: ESLint cache
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Optional: Windows image file caches
|
||||||
|
Thumbs.db
|
||||||
|
ehthumbs.db
|
||||||
|
|
||||||
|
# Optional: Folder config file
|
||||||
|
Desktop.ini
|
||||||
|
|
||||||
|
# Optional: Recycle Bin used on file shares
|
||||||
|
$RECYCLE.BIN/
|
||||||
|
|
||||||
|
# Optional: VS Code directories
|
||||||
|
.vscode-test/
|
||||||
|
.history/
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
//
|
||||||
|
// Global init of core components
|
||||||
|
//
|
||||||
|
|
||||||
|
// Init components
|
||||||
|
var KTComponents = function () {
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function () {
|
||||||
|
KTApp.init();
|
||||||
|
KTDrawer.init();
|
||||||
|
KTMenu.init();
|
||||||
|
KTScroll.init();
|
||||||
|
KTSticky.init();
|
||||||
|
KTSwapper.init();
|
||||||
|
KTToggle.init();
|
||||||
|
KTScrolltop.init();
|
||||||
|
KTDialer.init();
|
||||||
|
KTImageInput.init();
|
||||||
|
KTPasswordMeter.init();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
if (document.readyState === "loading") {
|
||||||
|
document.addEventListener("DOMContentLoaded", function() {
|
||||||
|
KTComponents.init();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
KTComponents.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init page loader
|
||||||
|
window.addEventListener("load", function() {
|
||||||
|
KTApp.hidePageLoading();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Declare KTApp for Webpack support
|
||||||
|
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
|
||||||
|
window.KTComponents = module.exports = KTComponents;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,692 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTApp = function () {
|
||||||
|
var initialized = false;
|
||||||
|
var select2FocusFixInitialized = false;
|
||||||
|
var countUpInitialized = false;
|
||||||
|
|
||||||
|
var createBootstrapTooltip = function (el, options) {
|
||||||
|
if (el.getAttribute("data-kt-initialized") === "1") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var delay = {};
|
||||||
|
|
||||||
|
// Handle delay options
|
||||||
|
if (el.hasAttribute('data-bs-delay-hide')) {
|
||||||
|
delay['hide'] = el.getAttribute('data-bs-delay-hide');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (el.hasAttribute('data-bs-delay-show')) {
|
||||||
|
delay['show'] = el.getAttribute('data-bs-delay-show');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (delay) {
|
||||||
|
options['delay'] = delay;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check dismiss options
|
||||||
|
if (el.hasAttribute('data-bs-dismiss') && el.getAttribute('data-bs-dismiss') == 'click') {
|
||||||
|
options['dismiss'] = 'click';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize popover
|
||||||
|
var tp = new bootstrap.Tooltip(el, options);
|
||||||
|
|
||||||
|
// Handle dismiss
|
||||||
|
if (options['dismiss'] && options['dismiss'] === 'click') {
|
||||||
|
// Hide popover on element click
|
||||||
|
el.addEventListener("click", function (e) {
|
||||||
|
tp.hide();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
el.setAttribute("data-kt-initialized", "1");
|
||||||
|
|
||||||
|
return tp;
|
||||||
|
}
|
||||||
|
|
||||||
|
var createBootstrapTooltips = function () {
|
||||||
|
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
||||||
|
|
||||||
|
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||||
|
createBootstrapTooltip(tooltipTriggerEl, {});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var createBootstrapPopover = function (el, options) {
|
||||||
|
if (el.getAttribute("data-kt-initialized") === "1") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var delay = {};
|
||||||
|
|
||||||
|
// Handle delay options
|
||||||
|
if (el.hasAttribute('data-bs-delay-hide')) {
|
||||||
|
delay['hide'] = el.getAttribute('data-bs-delay-hide');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (el.hasAttribute('data-bs-delay-show')) {
|
||||||
|
delay['show'] = el.getAttribute('data-bs-delay-show');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (delay) {
|
||||||
|
options['delay'] = delay;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle dismiss option
|
||||||
|
if (el.getAttribute('data-bs-dismiss') == 'true') {
|
||||||
|
options['dismiss'] = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (options['dismiss'] === true) {
|
||||||
|
options['template'] = '<div class="popover" role="tooltip"><div class="popover-arrow"></div><span class="popover-dismiss btn btn-icon"></span><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize popover
|
||||||
|
var popover = new bootstrap.Popover(el, options);
|
||||||
|
|
||||||
|
// Handle dismiss click
|
||||||
|
if (options['dismiss'] === true) {
|
||||||
|
var dismissHandler = function (e) {
|
||||||
|
popover.hide();
|
||||||
|
}
|
||||||
|
|
||||||
|
el.addEventListener('shown.bs.popover', function () {
|
||||||
|
var dismissEl = document.getElementById(el.getAttribute('aria-describedby'));
|
||||||
|
dismissEl.addEventListener('click', dismissHandler);
|
||||||
|
});
|
||||||
|
|
||||||
|
el.addEventListener('hide.bs.popover', function () {
|
||||||
|
var dismissEl = document.getElementById(el.getAttribute('aria-describedby'));
|
||||||
|
dismissEl.removeEventListener('click', dismissHandler);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
el.setAttribute("data-kt-initialized", "1");
|
||||||
|
|
||||||
|
return popover;
|
||||||
|
}
|
||||||
|
|
||||||
|
var createBootstrapPopovers = function () {
|
||||||
|
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
|
||||||
|
|
||||||
|
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
|
||||||
|
createBootstrapPopover(popoverTriggerEl, {});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var createBootstrapToasts = function () {
|
||||||
|
var toastElList = [].slice.call(document.querySelectorAll('.toast'));
|
||||||
|
var toastList = toastElList.map(function (toastEl) {
|
||||||
|
if (toastEl.getAttribute("data-kt-initialized") === "1") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
toastEl.setAttribute("data-kt-initialized", "1");
|
||||||
|
|
||||||
|
return new bootstrap.Toast(toastEl, {})
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var createButtons = function () {
|
||||||
|
var buttonsGroup = [].slice.call(document.querySelectorAll('[data-kt-buttons="true"]'));
|
||||||
|
|
||||||
|
buttonsGroup.map(function (group) {
|
||||||
|
if (group.getAttribute("data-kt-initialized") === "1") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var selector = group.hasAttribute('data-kt-buttons-target') ? group.getAttribute('data-kt-buttons-target') : '.btn';
|
||||||
|
var activeButtons = [].slice.call(group.querySelectorAll(selector));
|
||||||
|
|
||||||
|
// Toggle Handler
|
||||||
|
KTUtil.on(group, selector, 'click', function (e) {
|
||||||
|
activeButtons.map(function (button) {
|
||||||
|
button.classList.remove('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
this.classList.add('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
group.setAttribute("data-kt-initialized", "1");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var createDateRangePickers = function() {
|
||||||
|
// Check if jQuery included
|
||||||
|
if (typeof jQuery == 'undefined') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if daterangepicker included
|
||||||
|
if (typeof $.fn.daterangepicker === 'undefined') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var elements = [].slice.call(document.querySelectorAll('[data-kt-daterangepicker="true"]'));
|
||||||
|
var start = moment().subtract(29, 'days');
|
||||||
|
var end = moment();
|
||||||
|
|
||||||
|
elements.map(function (element) {
|
||||||
|
if (element.getAttribute("data-kt-initialized") === "1") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var display = element.querySelector('div');
|
||||||
|
var attrOpens = element.hasAttribute('data-kt-daterangepicker-opens') ? element.getAttribute('data-kt-daterangepicker-opens') : 'left';
|
||||||
|
var range = element.getAttribute('data-kt-daterangepicker-range');
|
||||||
|
|
||||||
|
var cb = function(start, end) {
|
||||||
|
var current = moment();
|
||||||
|
|
||||||
|
if (display) {
|
||||||
|
if ( current.isSame(start, "day") && current.isSame(end, "day") ) {
|
||||||
|
display.innerHTML = start.format('D MMM YYYY');
|
||||||
|
} else {
|
||||||
|
display.innerHTML = start.format('D MMM YYYY') + ' - ' + end.format('D MMM YYYY');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( range === "today" ) {
|
||||||
|
start = moment();
|
||||||
|
end = moment();
|
||||||
|
}
|
||||||
|
|
||||||
|
$(element).daterangepicker({
|
||||||
|
startDate: start,
|
||||||
|
endDate: end,
|
||||||
|
opens: attrOpens,
|
||||||
|
ranges: {
|
||||||
|
'Today': [moment(), moment()],
|
||||||
|
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
|
||||||
|
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
|
||||||
|
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
|
||||||
|
'This Month': [moment().startOf('month'), moment().endOf('month')],
|
||||||
|
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
|
||||||
|
}
|
||||||
|
}, cb);
|
||||||
|
|
||||||
|
cb(start, end);
|
||||||
|
|
||||||
|
element.setAttribute("data-kt-initialized", "1");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var createSelect2 = function () {
|
||||||
|
// Check if jQuery included
|
||||||
|
if (typeof jQuery == 'undefined') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if select2 included
|
||||||
|
if (typeof $.fn.select2 === 'undefined') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var elements = [].slice.call(document.querySelectorAll('[data-control="select2"], [data-kt-select2="true"]'));
|
||||||
|
|
||||||
|
elements.map(function (element) {
|
||||||
|
if (element.getAttribute("data-kt-initialized") === "1") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var options = {
|
||||||
|
dir: document.body.getAttribute('direction')
|
||||||
|
};
|
||||||
|
|
||||||
|
if (element.getAttribute('data-hide-search') == 'true') {
|
||||||
|
options.minimumResultsForSearch = Infinity;
|
||||||
|
}
|
||||||
|
|
||||||
|
$(element).select2(options);
|
||||||
|
|
||||||
|
// Handle Select2's KTMenu parent case
|
||||||
|
if (element.hasAttribute('data-dropdown-parent') && element.hasAttribute('multiple')) {
|
||||||
|
var parentEl = document.querySelector(element.getAttribute('data-dropdown-parent'));
|
||||||
|
|
||||||
|
if (parentEl && parentEl.hasAttribute("data-kt-menu")) {
|
||||||
|
var menu = KTMenu.getInstance(parentEl);
|
||||||
|
|
||||||
|
if (!menu) {
|
||||||
|
menu = new KTMenu(parentEl);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (menu) {
|
||||||
|
$(element).on('select2:unselect', function (e) {
|
||||||
|
element.setAttribute("data-multiple-unselect", "1");
|
||||||
|
});
|
||||||
|
|
||||||
|
menu.on("kt.menu.dropdown.hide", function(item) {
|
||||||
|
if (element.getAttribute("data-multiple-unselect") === "1") {
|
||||||
|
element.removeAttribute("data-multiple-unselect");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
element.setAttribute("data-kt-initialized", "1");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var createAutosize = function () {
|
||||||
|
if (typeof autosize === 'undefined') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var inputs = [].slice.call(document.querySelectorAll('[data-kt-autosize="true"]'));
|
||||||
|
|
||||||
|
inputs.map(function (input) {
|
||||||
|
if (input.getAttribute("data-kt-initialized") === "1") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
autosize(input);
|
||||||
|
|
||||||
|
input.setAttribute("data-kt-initialized", "1");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var createCountUp = function () {
|
||||||
|
if (typeof countUp === 'undefined') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var elements = [].slice.call(document.querySelectorAll('[data-kt-countup="true"]:not(.counted)'));
|
||||||
|
|
||||||
|
elements.map(function (element) {
|
||||||
|
if (KTUtil.isInViewport(element) && KTUtil.visible(element)) {
|
||||||
|
if (element.getAttribute("data-kt-initialized") === "1") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var options = {};
|
||||||
|
|
||||||
|
var value = element.getAttribute('data-kt-countup-value');
|
||||||
|
value = parseFloat(value.replace(/,/g, ""));
|
||||||
|
|
||||||
|
if (element.hasAttribute('data-kt-countup-start-val')) {
|
||||||
|
options.startVal = parseFloat(element.getAttribute('data-kt-countup-start-val'));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (element.hasAttribute('data-kt-countup-duration')) {
|
||||||
|
options.duration = parseInt(element.getAttribute('data-kt-countup-duration'));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (element.hasAttribute('data-kt-countup-decimal-places')) {
|
||||||
|
options.decimalPlaces = parseInt(element.getAttribute('data-kt-countup-decimal-places'));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (element.hasAttribute('data-kt-countup-prefix')) {
|
||||||
|
options.prefix = element.getAttribute('data-kt-countup-prefix');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (element.hasAttribute('data-kt-countup-separator')) {
|
||||||
|
options.separator = element.getAttribute('data-kt-countup-separator');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (element.hasAttribute('data-kt-countup-suffix')) {
|
||||||
|
options.suffix = element.getAttribute('data-kt-countup-suffix');
|
||||||
|
}
|
||||||
|
|
||||||
|
var count = new countUp.CountUp(element, value, options);
|
||||||
|
|
||||||
|
count.start();
|
||||||
|
|
||||||
|
element.classList.add('counted');
|
||||||
|
|
||||||
|
element.setAttribute("data-kt-initialized", "1");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var createCountUpTabs = function () {
|
||||||
|
if (typeof countUp === 'undefined') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (countUpInitialized === false) {
|
||||||
|
// Initial call
|
||||||
|
createCountUp();
|
||||||
|
|
||||||
|
// Window scroll event handler
|
||||||
|
window.addEventListener('scroll', createCountUp);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Tabs shown event handler
|
||||||
|
var tabs = [].slice.call(document.querySelectorAll('[data-kt-countup-tabs="true"][data-bs-toggle="tab"]'));
|
||||||
|
tabs.map(function (tab) {
|
||||||
|
if (tab.getAttribute("data-kt-initialized") === "1") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
tab.addEventListener('shown.bs.tab', createCountUp);
|
||||||
|
|
||||||
|
tab.setAttribute("data-kt-initialized", "1");
|
||||||
|
});
|
||||||
|
|
||||||
|
countUpInitialized = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
var createTinySliders = function () {
|
||||||
|
if (typeof tns === 'undefined') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sliders
|
||||||
|
const elements = Array.prototype.slice.call(document.querySelectorAll('[data-tns="true"]'), 0);
|
||||||
|
|
||||||
|
if (!elements && elements.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
elements.forEach(function (el) {
|
||||||
|
if (el.getAttribute("data-kt-initialized") === "1") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const obj = initTinySlider(el);
|
||||||
|
KTUtil.data(el).set('tns', tns);
|
||||||
|
|
||||||
|
el.setAttribute("data-kt-initialized", "1");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var initTinySlider = function (el) {
|
||||||
|
if (!el) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const tnsOptions = {};
|
||||||
|
|
||||||
|
// Convert string boolean
|
||||||
|
const checkBool = function (val) {
|
||||||
|
if (val === 'true') {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
if (val === 'false') {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return val;
|
||||||
|
};
|
||||||
|
|
||||||
|
// get extra options via data attributes
|
||||||
|
el.getAttributeNames().forEach(function (attrName) {
|
||||||
|
// more options; https://github.com/ganlanyuan/tiny-slider#options
|
||||||
|
if ((/^data-tns-.*/g).test(attrName)) {
|
||||||
|
let optionName = attrName.replace('data-tns-', '').toLowerCase().replace(/(?:[\s-])\w/g, function (match) {
|
||||||
|
return match.replace('-', '').toUpperCase();
|
||||||
|
});
|
||||||
|
|
||||||
|
if (attrName === 'data-tns-responsive') {
|
||||||
|
// fix string with a valid json
|
||||||
|
const jsonStr = el.getAttribute(attrName).replace(/(\w+:)|(\w+ :)/g, function (matched) {
|
||||||
|
return '"' + matched.substring(0, matched.length - 1) + '":';
|
||||||
|
});
|
||||||
|
try {
|
||||||
|
// convert json string to object
|
||||||
|
tnsOptions[optionName] = JSON.parse(jsonStr);
|
||||||
|
}
|
||||||
|
catch (e) {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
tnsOptions[optionName] = checkBool(el.getAttribute(attrName));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const opt = Object.assign({}, {
|
||||||
|
container: el,
|
||||||
|
slideBy: 'page',
|
||||||
|
autoplay: true,
|
||||||
|
center: true,
|
||||||
|
autoplayButtonOutput: false,
|
||||||
|
}, tnsOptions);
|
||||||
|
|
||||||
|
if (el.closest('.tns')) {
|
||||||
|
KTUtil.addClass(el.closest('.tns'), 'tns-initiazlied');
|
||||||
|
}
|
||||||
|
|
||||||
|
return tns(opt);
|
||||||
|
}
|
||||||
|
|
||||||
|
var initSmoothScroll = function () {
|
||||||
|
if (initialized === true) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof SmoothScroll === 'undefined') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
new SmoothScroll('a[data-kt-scroll-toggle][href*="#"]', {
|
||||||
|
speed: 1000,
|
||||||
|
speedAsDuration: true,
|
||||||
|
offset: function (anchor, toggle) {
|
||||||
|
// Integer or Function returning an integer. How far to offset the scrolling anchor location in pixels
|
||||||
|
// This example is a function, but you could do something as simple as `offset: 25`
|
||||||
|
|
||||||
|
// An example returning different values based on whether the clicked link was in the header nav or not
|
||||||
|
if (anchor.hasAttribute('data-kt-scroll-offset')) {
|
||||||
|
var val = KTUtil.getResponsiveValue(anchor.getAttribute('data-kt-scroll-offset'));
|
||||||
|
|
||||||
|
return val;
|
||||||
|
} else {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var initCard = function() {
|
||||||
|
// Toggle Handler
|
||||||
|
KTUtil.on(document.body, '[data-kt-card-action="remove"]', 'click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const card = this.closest('.card');
|
||||||
|
|
||||||
|
if (!card) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const confirmMessage = this.getAttribute("data-kt-card-confirm-message");
|
||||||
|
const confirm = this.getAttribute("data-kt-card-confirm") === "true";
|
||||||
|
|
||||||
|
if (confirm) {
|
||||||
|
// Show message popup. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||||
|
Swal.fire({
|
||||||
|
text: confirmMessage ? confirmMessage : "Are you sure to remove ?",
|
||||||
|
icon: "warning",
|
||||||
|
buttonsStyling: false,
|
||||||
|
confirmButtonText: "Confirm",
|
||||||
|
denyButtonText: "Cancel",
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-primary",
|
||||||
|
denyButton: "btn btn-danger"
|
||||||
|
}
|
||||||
|
}).then(function (result) {
|
||||||
|
if (result.isConfirmed) {
|
||||||
|
card.remove();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
card.remove();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var initModal = function() {
|
||||||
|
var elements = Array.prototype.slice.call(document.querySelectorAll("[data-bs-stacked-modal]"));
|
||||||
|
|
||||||
|
if (elements && elements.length > 0) {
|
||||||
|
elements.forEach((element) => {
|
||||||
|
if (element.getAttribute("data-kt-initialized") === "1") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
element.setAttribute("data-kt-initialized", "1");
|
||||||
|
|
||||||
|
element.addEventListener("click", function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const modalEl = document.querySelector(this.getAttribute("data-bs-stacked-modal"));
|
||||||
|
|
||||||
|
if (modalEl) {
|
||||||
|
const modal = new bootstrap.Modal(modalEl, {backdrop: false});
|
||||||
|
modal.show();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var initCheck = function () {
|
||||||
|
if (initialized === true) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Toggle Handler
|
||||||
|
KTUtil.on(document.body, '[data-kt-check="true"]', 'change', function (e) {
|
||||||
|
var check = this;
|
||||||
|
var targets = document.querySelectorAll(check.getAttribute('data-kt-check-target'));
|
||||||
|
|
||||||
|
KTUtil.each(targets, function (target) {
|
||||||
|
if (target.type == 'checkbox') {
|
||||||
|
target.checked = check.checked;
|
||||||
|
} else {
|
||||||
|
target.classList.toggle('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var initBootstrapCollapse = function() {
|
||||||
|
if (initialized === true) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
KTUtil.on(document.body, '.collapsible[data-bs-toggle="collapse"]', 'click', function(e) {
|
||||||
|
if (this.classList.contains('collapsed')) {
|
||||||
|
this.classList.remove('active');
|
||||||
|
this.blur();
|
||||||
|
} else {
|
||||||
|
this.classList.add('active');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.hasAttribute('data-kt-toggle-text')) {
|
||||||
|
var text = this.getAttribute('data-kt-toggle-text');
|
||||||
|
var target = this.querySelector('[data-kt-toggle-text-target="true"]');
|
||||||
|
var target = target ? target : this;
|
||||||
|
|
||||||
|
this.setAttribute('data-kt-toggle-text', target.innerText);
|
||||||
|
target.innerText = text;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var initBootstrapRotate = function() {
|
||||||
|
if (initialized === true) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
KTUtil.on(document.body, '[data-kt-rotate="true"]', 'click', function(e) {
|
||||||
|
if (this.classList.contains('active')) {
|
||||||
|
this.classList.remove('active');
|
||||||
|
this.blur();
|
||||||
|
} else {
|
||||||
|
this.classList.add('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var initLozad = function() {
|
||||||
|
// Check if lozad included
|
||||||
|
if (typeof lozad === 'undefined') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const observer = lozad(); // lazy loads elements with default selector as '.lozad'
|
||||||
|
observer.observe();
|
||||||
|
}
|
||||||
|
|
||||||
|
var showPageLoading = function() {
|
||||||
|
document.body.classList.add('page-loading');
|
||||||
|
document.body.setAttribute('data-kt-app-page-loading', "on");
|
||||||
|
}
|
||||||
|
|
||||||
|
var hidePageLoading = function() {
|
||||||
|
// CSS3 Transitions only after page load(.page-loading or .app-page-loading class added to body tag and remove with JS on page load)
|
||||||
|
document.body.classList.remove('page-loading');
|
||||||
|
document.body.removeAttribute('data-kt-app-page-loading');
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
init: function () {
|
||||||
|
initLozad();
|
||||||
|
|
||||||
|
initSmoothScroll();
|
||||||
|
|
||||||
|
initCard();
|
||||||
|
|
||||||
|
initModal();
|
||||||
|
|
||||||
|
initCheck();
|
||||||
|
|
||||||
|
initBootstrapCollapse();
|
||||||
|
|
||||||
|
initBootstrapRotate();
|
||||||
|
|
||||||
|
createBootstrapTooltips();
|
||||||
|
|
||||||
|
createBootstrapPopovers();
|
||||||
|
|
||||||
|
createBootstrapToasts();
|
||||||
|
|
||||||
|
createDateRangePickers();
|
||||||
|
|
||||||
|
createButtons();
|
||||||
|
|
||||||
|
createSelect2();
|
||||||
|
|
||||||
|
createCountUp();
|
||||||
|
|
||||||
|
createCountUpTabs();
|
||||||
|
|
||||||
|
createAutosize();
|
||||||
|
|
||||||
|
createTinySliders();
|
||||||
|
|
||||||
|
initialized = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
initTinySlider: function(el) {
|
||||||
|
initTinySlider(el);
|
||||||
|
},
|
||||||
|
|
||||||
|
showPageLoading: function () {
|
||||||
|
showPageLoading();
|
||||||
|
},
|
||||||
|
|
||||||
|
hidePageLoading: function () {
|
||||||
|
hidePageLoading();
|
||||||
|
},
|
||||||
|
|
||||||
|
createBootstrapPopover: function(el, options) {
|
||||||
|
return createBootstrapPopover(el, options);
|
||||||
|
},
|
||||||
|
|
||||||
|
createBootstrapTooltip: function(el, options) {
|
||||||
|
return createBootstrapTooltip(el, options);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// Declare KTApp for Webpack support
|
||||||
|
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
|
||||||
|
module.exports = KTApp;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,177 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTBlockUI = function(element, options) {
|
||||||
|
//////////////////////////////
|
||||||
|
// ** Private variables ** //
|
||||||
|
//////////////////////////////
|
||||||
|
var the = this;
|
||||||
|
|
||||||
|
if ( typeof element === "undefined" || element === null ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Default options
|
||||||
|
var defaultOptions = {
|
||||||
|
zIndex: false,
|
||||||
|
overlayClass: '',
|
||||||
|
overflow: 'hidden',
|
||||||
|
message: '<span class="spinner-border text-primary"></span>'
|
||||||
|
};
|
||||||
|
|
||||||
|
////////////////////////////
|
||||||
|
// ** Private methods ** //
|
||||||
|
////////////////////////////
|
||||||
|
|
||||||
|
var _construct = function() {
|
||||||
|
if ( KTUtil.data(element).has('blockui') ) {
|
||||||
|
the = KTUtil.data(element).get('blockui');
|
||||||
|
} else {
|
||||||
|
_init();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _init = function() {
|
||||||
|
// Variables
|
||||||
|
the.options = KTUtil.deepExtend({}, defaultOptions, options);
|
||||||
|
the.element = element;
|
||||||
|
the.overlayElement = null;
|
||||||
|
the.blocked = false;
|
||||||
|
the.positionChanged = false;
|
||||||
|
the.overflowChanged = false;
|
||||||
|
|
||||||
|
// Bind Instance
|
||||||
|
KTUtil.data(the.element).set('blockui', the);
|
||||||
|
}
|
||||||
|
|
||||||
|
var _block = function() {
|
||||||
|
if ( KTEventHandler.trigger(the.element, 'kt.blockui.block', the) === false ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var isPage = (the.element.tagName === 'BODY');
|
||||||
|
|
||||||
|
var position = KTUtil.css(the.element, 'position');
|
||||||
|
var overflow = KTUtil.css(the.element, 'overflow');
|
||||||
|
var zIndex = isPage ? 10000 : 1;
|
||||||
|
|
||||||
|
if (the.options.zIndex > 0) {
|
||||||
|
zIndex = the.options.zIndex;
|
||||||
|
} else {
|
||||||
|
if (KTUtil.css(the.element, 'z-index') != 'auto') {
|
||||||
|
zIndex = KTUtil.css(the.element, 'z-index');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
the.element.classList.add('blockui');
|
||||||
|
|
||||||
|
if (position === "absolute" || position === "relative" || position === "fixed") {
|
||||||
|
KTUtil.css(the.element, 'position', 'relative');
|
||||||
|
the.positionChanged = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (the.options.overflow === 'hidden' && overflow === 'visible') {
|
||||||
|
KTUtil.css(the.element, 'overflow', 'hidden');
|
||||||
|
the.overflowChanged = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.overlayElement = document.createElement('DIV');
|
||||||
|
the.overlayElement.setAttribute('class', 'blockui-overlay ' + the.options.overlayClass);
|
||||||
|
|
||||||
|
the.overlayElement.innerHTML = the.options.message;
|
||||||
|
|
||||||
|
KTUtil.css(the.overlayElement, 'z-index', zIndex);
|
||||||
|
|
||||||
|
the.element.append(the.overlayElement);
|
||||||
|
the.blocked = true;
|
||||||
|
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.blockui.after.blocked', the)
|
||||||
|
}
|
||||||
|
|
||||||
|
var _release = function() {
|
||||||
|
if ( KTEventHandler.trigger(the.element, 'kt.blockui.release', the) === false ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.element.classList.add('blockui');
|
||||||
|
|
||||||
|
if (the.positionChanged) {
|
||||||
|
KTUtil.css(the.element, 'position', '');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (the.overflowChanged) {
|
||||||
|
KTUtil.css(the.element, 'overflow', '');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (the.overlayElement) {
|
||||||
|
KTUtil.remove(the.overlayElement);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.blocked = false;
|
||||||
|
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.blockui.released', the);
|
||||||
|
}
|
||||||
|
|
||||||
|
var _isBlocked = function() {
|
||||||
|
return the.blocked;
|
||||||
|
}
|
||||||
|
|
||||||
|
var _destroy = function() {
|
||||||
|
KTUtil.data(the.element).remove('blockui');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Construct class
|
||||||
|
_construct();
|
||||||
|
|
||||||
|
///////////////////////
|
||||||
|
// ** Public API ** //
|
||||||
|
///////////////////////
|
||||||
|
|
||||||
|
// Plugin API
|
||||||
|
the.block = function() {
|
||||||
|
_block();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.release = function() {
|
||||||
|
_release();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.isBlocked = function() {
|
||||||
|
return _isBlocked();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.destroy = function() {
|
||||||
|
return _destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Event API
|
||||||
|
the.on = function(name, handler) {
|
||||||
|
return KTEventHandler.on(the.element, name, handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.one = function(name, handler) {
|
||||||
|
return KTEventHandler.one(the.element, name, handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.off = function(name, handlerId) {
|
||||||
|
return KTEventHandler.off(the.element, name, handlerId);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.trigger = function(name, event) {
|
||||||
|
return KTEventHandler.trigger(the.element, name, event, the, event);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Static methods
|
||||||
|
KTBlockUI.getInstance = function(element) {
|
||||||
|
if (element !== null && KTUtil.data(element).has('blockui')) {
|
||||||
|
return KTUtil.data(element).get('blockui');
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Webpack support
|
||||||
|
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
|
||||||
|
module.exports = KTBlockUI;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
"use strict";
|
||||||
|
// DOCS: https://javascript.info/cookie
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTCookie = function() {
|
||||||
|
return {
|
||||||
|
// returns the cookie with the given name,
|
||||||
|
// or undefined if not found
|
||||||
|
get: function(name) {
|
||||||
|
var matches = document.cookie.match(new RegExp(
|
||||||
|
"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
|
||||||
|
));
|
||||||
|
|
||||||
|
return matches ? decodeURIComponent(matches[1]) : null;
|
||||||
|
},
|
||||||
|
|
||||||
|
// Please note that a cookie value is encoded,
|
||||||
|
// so getCookie uses a built-in decodeURIComponent function to decode it.
|
||||||
|
set: function(name, value, options) {
|
||||||
|
if ( typeof options === "undefined" || options === null ) {
|
||||||
|
options = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
options = Object.assign({}, {
|
||||||
|
path: '/'
|
||||||
|
}, options);
|
||||||
|
|
||||||
|
if ( options.expires instanceof Date ) {
|
||||||
|
options.expires = options.expires.toUTCString();
|
||||||
|
}
|
||||||
|
|
||||||
|
var updatedCookie = encodeURIComponent(name) + "=" + encodeURIComponent(value);
|
||||||
|
|
||||||
|
for ( var optionKey in options ) {
|
||||||
|
if ( options.hasOwnProperty(optionKey) === false ) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
updatedCookie += "; " + optionKey;
|
||||||
|
var optionValue = options[optionKey];
|
||||||
|
|
||||||
|
if ( optionValue !== true ) {
|
||||||
|
updatedCookie += "=" + optionValue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.cookie = updatedCookie;
|
||||||
|
},
|
||||||
|
|
||||||
|
// To remove a cookie, we can call it with a negative expiration date:
|
||||||
|
remove: function(name) {
|
||||||
|
this.set(name, "", {
|
||||||
|
'max-age': -1
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}();
|
||||||
|
|
||||||
|
// Webpack support
|
||||||
|
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
|
||||||
|
module.exports = KTCookie;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,300 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTDialer = function(element, options) {
|
||||||
|
////////////////////////////
|
||||||
|
// ** Private variables ** //
|
||||||
|
////////////////////////////
|
||||||
|
var the = this;
|
||||||
|
|
||||||
|
if (!element) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Default options
|
||||||
|
var defaultOptions = {
|
||||||
|
min: null,
|
||||||
|
max: null,
|
||||||
|
step: 1,
|
||||||
|
currency: false,
|
||||||
|
decimals: 0,
|
||||||
|
prefix: "",
|
||||||
|
suffix: ""
|
||||||
|
};
|
||||||
|
|
||||||
|
////////////////////////////
|
||||||
|
// ** Private methods ** //
|
||||||
|
////////////////////////////
|
||||||
|
|
||||||
|
// Constructor
|
||||||
|
var _construct = function() {
|
||||||
|
if ( KTUtil.data(element).has('dialer') === true ) {
|
||||||
|
the = KTUtil.data(element).get('dialer');
|
||||||
|
} else {
|
||||||
|
_init();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize
|
||||||
|
var _init = function() {
|
||||||
|
// Variables
|
||||||
|
the.options = KTUtil.deepExtend({}, defaultOptions, options);
|
||||||
|
|
||||||
|
// Elements
|
||||||
|
the.element = element;
|
||||||
|
the.incElement = the.element.querySelector('[data-kt-dialer-control="increase"]');
|
||||||
|
the.decElement = the.element.querySelector('[data-kt-dialer-control="decrease"]');
|
||||||
|
the.inputElement = the.element.querySelector('input[type]');
|
||||||
|
|
||||||
|
// Set Values
|
||||||
|
if (_getOption('currency') === 'true') {
|
||||||
|
the.options.currency = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (_getOption('decimals')) {
|
||||||
|
the.options.decimals = parseInt(_getOption('decimals'));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (_getOption('prefix')) {
|
||||||
|
the.options.prefix = _getOption('prefix');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (_getOption('suffix')) {
|
||||||
|
the.options.suffix = _getOption('suffix');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (_getOption('step')) {
|
||||||
|
the.options.step = parseFloat(_getOption('step'));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (_getOption('min')) {
|
||||||
|
the.options.min = parseFloat(_getOption('min'));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (_getOption('max')) {
|
||||||
|
the.options.max = parseFloat(_getOption('max'));
|
||||||
|
}
|
||||||
|
|
||||||
|
the.value = parseFloat(the.inputElement.value.replace(/[^\d.]/g, ''));
|
||||||
|
|
||||||
|
_setValue();
|
||||||
|
|
||||||
|
// Event Handlers
|
||||||
|
_handlers();
|
||||||
|
|
||||||
|
// Bind Instance
|
||||||
|
KTUtil.data(the.element).set('dialer', the);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handlers
|
||||||
|
var _handlers = function() {
|
||||||
|
KTUtil.addEvent(the.incElement, 'click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
_increase();
|
||||||
|
});
|
||||||
|
|
||||||
|
KTUtil.addEvent(the.decElement, 'click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
_decrease();
|
||||||
|
});
|
||||||
|
|
||||||
|
KTUtil.addEvent(the.inputElement, 'input', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
_setValue();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Event handlers
|
||||||
|
var _increase = function() {
|
||||||
|
// Trigger "after.dialer" event
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.dialer.increase', the);
|
||||||
|
|
||||||
|
the.inputElement.value = the.value + the.options.step;
|
||||||
|
_setValue();
|
||||||
|
|
||||||
|
// Trigger "before.dialer" event
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.dialer.increased', the);
|
||||||
|
|
||||||
|
return the;
|
||||||
|
}
|
||||||
|
|
||||||
|
var _decrease = function() {
|
||||||
|
// Trigger "after.dialer" event
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.dialer.decrease', the);
|
||||||
|
|
||||||
|
the.inputElement.value = the.value - the.options.step;
|
||||||
|
|
||||||
|
_setValue();
|
||||||
|
|
||||||
|
// Trigger "before.dialer" event
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.dialer.decreased', the);
|
||||||
|
|
||||||
|
return the;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set Input Value
|
||||||
|
var _setValue = function(value) {
|
||||||
|
// Trigger "after.dialer" event
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.dialer.change', the);
|
||||||
|
|
||||||
|
if (value !== undefined) {
|
||||||
|
the.value = value;
|
||||||
|
} else {
|
||||||
|
the.value = _parse(the.inputElement.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (the.options.min !== null && the.value < the.options.min) {
|
||||||
|
the.value = the.options.min;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (the.options.max !== null && the.value > the.options.max) {
|
||||||
|
the.value = the.options.max;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.inputElement.value = _format(the.value);
|
||||||
|
|
||||||
|
// Trigger input change event
|
||||||
|
the.inputElement.dispatchEvent(new Event('change'));
|
||||||
|
|
||||||
|
// Trigger "after.dialer" event
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.dialer.changed', the);
|
||||||
|
}
|
||||||
|
|
||||||
|
var _parse = function(val) {
|
||||||
|
val = val
|
||||||
|
.replace(/[^0-9.-]/g, '') // remove chars except number, hyphen, point.
|
||||||
|
.replace(/(\..*)\./g, '$1') // remove multiple points.
|
||||||
|
.replace(/(?!^)-/g, '') // remove middle hyphen.
|
||||||
|
.replace(/^0+(\d)/gm, '$1'); // remove multiple leading zeros. <-- I added this.
|
||||||
|
|
||||||
|
val = parseFloat(val);
|
||||||
|
|
||||||
|
if (isNaN(val)) {
|
||||||
|
val = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
return val;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Format
|
||||||
|
var _format = function(val){
|
||||||
|
val = parseFloat(val).toFixed(the.options.decimals);
|
||||||
|
|
||||||
|
if (the.options.currency) {
|
||||||
|
val = val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
||||||
|
}
|
||||||
|
|
||||||
|
return the.options.prefix + val + the.options.suffix;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get option
|
||||||
|
var _getOption = function(name) {
|
||||||
|
if ( the.element.hasAttribute('data-kt-dialer-' + name) === true ) {
|
||||||
|
var attr = the.element.getAttribute('data-kt-dialer-' + name);
|
||||||
|
var value = attr;
|
||||||
|
|
||||||
|
return value;
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _destroy = function() {
|
||||||
|
KTUtil.data(the.element).remove('dialer');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Construct class
|
||||||
|
_construct();
|
||||||
|
|
||||||
|
///////////////////////
|
||||||
|
// ** Public API ** //
|
||||||
|
///////////////////////
|
||||||
|
|
||||||
|
// Plugin API
|
||||||
|
the.setMinValue = function(value) {
|
||||||
|
the.options.min = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.setMaxValue = function(value) {
|
||||||
|
the.options.max = value;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.setValue = function(value) {
|
||||||
|
_setValue(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.getValue = function() {
|
||||||
|
return the.inputElement.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.update = function() {
|
||||||
|
_setValue();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.increase = function() {
|
||||||
|
return _increase();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.decrease = function() {
|
||||||
|
return _decrease();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.getElement = function() {
|
||||||
|
return the.element;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.destroy = function() {
|
||||||
|
return _destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Event API
|
||||||
|
the.on = function(name, handler) {
|
||||||
|
return KTEventHandler.on(the.element, name, handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.one = function(name, handler) {
|
||||||
|
return KTEventHandler.one(the.element, name, handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.off = function(name, handlerId) {
|
||||||
|
return KTEventHandler.off(the.element, name, handlerId);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.trigger = function(name, event) {
|
||||||
|
return KTEventHandler.trigger(the.element, name, event, the, event);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Static methods
|
||||||
|
KTDialer.getInstance = function(element) {
|
||||||
|
if ( element !== null && KTUtil.data(element).has('dialer') ) {
|
||||||
|
return KTUtil.data(element).get('dialer');
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create instances
|
||||||
|
KTDialer.createInstances = function(selector = '[data-kt-dialer="true"]') {
|
||||||
|
// Get instances
|
||||||
|
var elements = document.querySelectorAll(selector);
|
||||||
|
|
||||||
|
if ( elements && elements.length > 0 ) {
|
||||||
|
for (var i = 0, len = elements.length; i < len; i++) {
|
||||||
|
new KTDialer(elements[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Global initialization
|
||||||
|
KTDialer.init = function() {
|
||||||
|
KTDialer.createInstances();
|
||||||
|
};
|
||||||
|
|
||||||
|
// Webpack support
|
||||||
|
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
|
||||||
|
module.exports = KTDialer;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,507 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var KTDrawerHandlersInitialized = false;
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTDrawer = function(element, options) {
|
||||||
|
//////////////////////////////
|
||||||
|
// ** Private variables ** //
|
||||||
|
//////////////////////////////
|
||||||
|
var the = this;
|
||||||
|
|
||||||
|
if ( typeof element === "undefined" || element === null ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Default options
|
||||||
|
var defaultOptions = {
|
||||||
|
overlay: true,
|
||||||
|
direction: 'end',
|
||||||
|
baseClass: 'drawer',
|
||||||
|
overlayClass: 'drawer-overlay'
|
||||||
|
};
|
||||||
|
|
||||||
|
////////////////////////////
|
||||||
|
// ** Private methods ** //
|
||||||
|
////////////////////////////
|
||||||
|
|
||||||
|
var _construct = function() {
|
||||||
|
if ( KTUtil.data(element).has('drawer') ) {
|
||||||
|
the = KTUtil.data(element).get('drawer');
|
||||||
|
} else {
|
||||||
|
_init();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _init = function() {
|
||||||
|
// Variables
|
||||||
|
the.options = KTUtil.deepExtend({}, defaultOptions, options);
|
||||||
|
the.uid = KTUtil.getUniqueId('drawer');
|
||||||
|
the.element = element;
|
||||||
|
the.overlayElement = null;
|
||||||
|
the.name = the.element.getAttribute('data-kt-drawer-name');
|
||||||
|
the.shown = false;
|
||||||
|
the.lastWidth;
|
||||||
|
the.lastHeight;
|
||||||
|
the.toggleElement = null;
|
||||||
|
|
||||||
|
// Set initialized
|
||||||
|
the.element.setAttribute('data-kt-drawer', 'true');
|
||||||
|
|
||||||
|
// Event Handlers
|
||||||
|
_handlers();
|
||||||
|
|
||||||
|
// Update Instance
|
||||||
|
_update();
|
||||||
|
|
||||||
|
// Bind Instance
|
||||||
|
KTUtil.data(the.element).set('drawer', the);
|
||||||
|
}
|
||||||
|
|
||||||
|
var _handlers = function() {
|
||||||
|
var togglers = _getOption('toggle');
|
||||||
|
var closers = _getOption('close');
|
||||||
|
|
||||||
|
if ( togglers !== null && togglers.length > 0 ) {
|
||||||
|
KTUtil.on(document.body, togglers, 'click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
the.toggleElement = this;
|
||||||
|
_toggle();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( closers !== null && closers.length > 0 ) {
|
||||||
|
KTUtil.on(document.body, closers, 'click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
the.closeElement = this;
|
||||||
|
_hide();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _toggle = function() {
|
||||||
|
if ( KTEventHandler.trigger(the.element, 'kt.drawer.toggle', the) === false ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( the.shown === true ) {
|
||||||
|
_hide();
|
||||||
|
} else {
|
||||||
|
_show();
|
||||||
|
}
|
||||||
|
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.drawer.toggled', the);
|
||||||
|
}
|
||||||
|
|
||||||
|
var _hide = function() {
|
||||||
|
if ( KTEventHandler.trigger(the.element, 'kt.drawer.hide', the) === false ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.shown = false;
|
||||||
|
|
||||||
|
_deleteOverlay();
|
||||||
|
|
||||||
|
document.body.removeAttribute('data-kt-drawer-' + the.name, 'on');
|
||||||
|
document.body.removeAttribute('data-kt-drawer');
|
||||||
|
|
||||||
|
KTUtil.removeClass(the.element, the.options.baseClass + '-on');
|
||||||
|
|
||||||
|
if ( the.toggleElement !== null ) {
|
||||||
|
KTUtil.removeClass(the.toggleElement, 'active');
|
||||||
|
}
|
||||||
|
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.drawer.after.hidden', the) === false
|
||||||
|
}
|
||||||
|
|
||||||
|
var _show = function() {
|
||||||
|
if ( KTEventHandler.trigger(the.element, 'kt.drawer.show', the) === false ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.shown = true;
|
||||||
|
|
||||||
|
_createOverlay();
|
||||||
|
document.body.setAttribute('data-kt-drawer-' + the.name, 'on');
|
||||||
|
document.body.setAttribute('data-kt-drawer', 'on');
|
||||||
|
|
||||||
|
KTUtil.addClass(the.element, the.options.baseClass + '-on');
|
||||||
|
|
||||||
|
if ( the.toggleElement !== null ) {
|
||||||
|
KTUtil.addClass(the.toggleElement, 'active');
|
||||||
|
}
|
||||||
|
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.drawer.shown', the);
|
||||||
|
}
|
||||||
|
|
||||||
|
var _update = function() {
|
||||||
|
var width = _getWidth();
|
||||||
|
var height = _getHeight();
|
||||||
|
var direction = _getOption('direction');
|
||||||
|
|
||||||
|
var top = _getOption('top');
|
||||||
|
var bottom = _getOption('bottom');
|
||||||
|
var start = _getOption('start');
|
||||||
|
var end = _getOption('end');
|
||||||
|
|
||||||
|
// Reset state
|
||||||
|
if ( KTUtil.hasClass(the.element, the.options.baseClass + '-on') === true && String(document.body.getAttribute('data-kt-drawer-' + the.name + '-')) === 'on' ) {
|
||||||
|
the.shown = true;
|
||||||
|
} else {
|
||||||
|
the.shown = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Activate/deactivate
|
||||||
|
if ( _getOption('activate') === true ) {
|
||||||
|
KTUtil.addClass(the.element, the.options.baseClass);
|
||||||
|
KTUtil.addClass(the.element, the.options.baseClass + '-' + direction);
|
||||||
|
|
||||||
|
if (width) {
|
||||||
|
KTUtil.css(the.element, 'width', width, true);
|
||||||
|
the.lastWidth = width;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (height) {
|
||||||
|
KTUtil.css(the.element, 'height', height, true);
|
||||||
|
the.lastHeight = height;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (top) {
|
||||||
|
KTUtil.css(the.element, 'top', top);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (bottom) {
|
||||||
|
KTUtil.css(the.element, 'bottom', bottom);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (start) {
|
||||||
|
if (KTUtil.isRTL()) {
|
||||||
|
KTUtil.css(the.element, 'right', start);
|
||||||
|
} else {
|
||||||
|
KTUtil.css(the.element, 'left', start);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (end) {
|
||||||
|
if (KTUtil.isRTL()) {
|
||||||
|
KTUtil.css(the.element, 'left', end);
|
||||||
|
} else {
|
||||||
|
KTUtil.css(the.element, 'right', end);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
KTUtil.removeClass(the.element, the.options.baseClass);
|
||||||
|
KTUtil.removeClass(the.element, the.options.baseClass + '-' + direction);
|
||||||
|
|
||||||
|
KTUtil.css(the.element, 'width', '');
|
||||||
|
KTUtil.css(the.element, 'height', '');
|
||||||
|
|
||||||
|
if (top) {
|
||||||
|
KTUtil.css(the.element, 'top', '');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (bottom) {
|
||||||
|
KTUtil.css(the.element, 'bottom', '');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (start) {
|
||||||
|
if (KTUtil.isRTL()) {
|
||||||
|
KTUtil.css(the.element, 'right', '');
|
||||||
|
} else {
|
||||||
|
KTUtil.css(the.element, 'left', '');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (end) {
|
||||||
|
if (KTUtil.isRTL()) {
|
||||||
|
KTUtil.css(the.element, 'left', '');
|
||||||
|
} else {
|
||||||
|
KTUtil.css(the.element, 'right', '');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_hide();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _createOverlay = function() {
|
||||||
|
if ( _getOption('overlay') === true ) {
|
||||||
|
the.overlayElement = document.createElement('DIV');
|
||||||
|
|
||||||
|
KTUtil.css(the.overlayElement, 'z-index', KTUtil.css(the.element, 'z-index') - 1); // update
|
||||||
|
|
||||||
|
document.body.append(the.overlayElement);
|
||||||
|
|
||||||
|
KTUtil.addClass(the.overlayElement, _getOption('overlay-class'));
|
||||||
|
|
||||||
|
KTUtil.addEvent(the.overlayElement, 'click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
if ( _getOption('permanent') !== true ) {
|
||||||
|
_hide();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _deleteOverlay = function() {
|
||||||
|
if ( the.overlayElement !== null ) {
|
||||||
|
KTUtil.remove(the.overlayElement);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _getOption = function(name) {
|
||||||
|
if ( the.element.hasAttribute('data-kt-drawer-' + name) === true ) {
|
||||||
|
var attr = the.element.getAttribute('data-kt-drawer-' + name);
|
||||||
|
var value = KTUtil.getResponsiveValue(attr);
|
||||||
|
|
||||||
|
if ( value !== null && String(value) === 'true' ) {
|
||||||
|
value = true;
|
||||||
|
} else if ( value !== null && String(value) === 'false' ) {
|
||||||
|
value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return value;
|
||||||
|
} else {
|
||||||
|
var optionName = KTUtil.snakeToCamel(name);
|
||||||
|
|
||||||
|
if ( the.options[optionName] ) {
|
||||||
|
return KTUtil.getResponsiveValue(the.options[optionName]);
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _getWidth = function() {
|
||||||
|
var width = _getOption('width');
|
||||||
|
|
||||||
|
if ( width === 'auto') {
|
||||||
|
width = KTUtil.css(the.element, 'width');
|
||||||
|
}
|
||||||
|
|
||||||
|
return width;
|
||||||
|
}
|
||||||
|
|
||||||
|
var _getHeight = function() {
|
||||||
|
var height = _getOption('height');
|
||||||
|
|
||||||
|
if ( height === 'auto') {
|
||||||
|
height = KTUtil.css(the.element, 'height');
|
||||||
|
}
|
||||||
|
|
||||||
|
return height;
|
||||||
|
}
|
||||||
|
|
||||||
|
var _destroy = function() {
|
||||||
|
KTUtil.data(the.element).remove('drawer');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Construct class
|
||||||
|
_construct();
|
||||||
|
|
||||||
|
///////////////////////
|
||||||
|
// ** Public API ** //
|
||||||
|
///////////////////////
|
||||||
|
|
||||||
|
// Plugin API
|
||||||
|
the.toggle = function() {
|
||||||
|
return _toggle();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.show = function() {
|
||||||
|
return _show();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.hide = function() {
|
||||||
|
return _hide();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.isShown = function() {
|
||||||
|
return the.shown;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.update = function() {
|
||||||
|
_update();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.goElement = function() {
|
||||||
|
return the.element;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.destroy = function() {
|
||||||
|
return _destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Event API
|
||||||
|
the.on = function(name, handler) {
|
||||||
|
return KTEventHandler.on(the.element, name, handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.one = function(name, handler) {
|
||||||
|
return KTEventHandler.one(the.element, name, handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.off = function(name, handlerId) {
|
||||||
|
return KTEventHandler.off(the.element, name, handlerId);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.trigger = function(name, event) {
|
||||||
|
return KTEventHandler.trigger(the.element, name, event, the, event);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Static methods
|
||||||
|
KTDrawer.getInstance = function(element) {
|
||||||
|
if (element !== null && KTUtil.data(element).has('drawer')) {
|
||||||
|
return KTUtil.data(element).get('drawer');
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hide all drawers and skip one if provided
|
||||||
|
KTDrawer.hideAll = function(skip = null, selector = '[data-kt-drawer="true"]') {
|
||||||
|
var items = document.querySelectorAll(selector);
|
||||||
|
|
||||||
|
if (items && items.length > 0) {
|
||||||
|
for (var i = 0, len = items.length; i < len; i++) {
|
||||||
|
var item = items[i];
|
||||||
|
var drawer = KTDrawer.getInstance(item);
|
||||||
|
|
||||||
|
if (!drawer) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( skip ) {
|
||||||
|
if ( item !== skip ) {
|
||||||
|
drawer.hide();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
drawer.hide();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update all drawers
|
||||||
|
KTDrawer.updateAll = function(selector = '[data-kt-drawer="true"]') {
|
||||||
|
var items = document.querySelectorAll(selector);
|
||||||
|
|
||||||
|
if (items && items.length > 0) {
|
||||||
|
for (var i = 0, len = items.length; i < len; i++) {
|
||||||
|
var drawer = KTDrawer.getInstance(items[i]);
|
||||||
|
|
||||||
|
if (drawer) {
|
||||||
|
drawer.update();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create instances
|
||||||
|
KTDrawer.createInstances = function(selector = '[data-kt-drawer="true"]') {
|
||||||
|
// Initialize Menus
|
||||||
|
var elements = document.querySelectorAll(selector);
|
||||||
|
|
||||||
|
if ( elements && elements.length > 0 ) {
|
||||||
|
for (var i = 0, len = elements.length; i < len; i++) {
|
||||||
|
new KTDrawer(elements[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Toggle instances
|
||||||
|
KTDrawer.handleShow = function() {
|
||||||
|
// External drawer toggle handler
|
||||||
|
KTUtil.on(document.body, '[data-kt-drawer-show="true"][data-kt-drawer-target]', 'click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
var element = document.querySelector(this.getAttribute('data-kt-drawer-target'));
|
||||||
|
|
||||||
|
if (element) {
|
||||||
|
KTDrawer.getInstance(element).show();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle escape key press
|
||||||
|
KTDrawer.handleEscapeKey = function() {
|
||||||
|
document.addEventListener('keydown', (event) => {
|
||||||
|
if (event.key === 'Escape') {
|
||||||
|
//if esc key was not pressed in combination with ctrl or alt or shift
|
||||||
|
const isNotCombinedKey = !(event.ctrlKey || event.altKey || event.shiftKey);
|
||||||
|
if (isNotCombinedKey) {
|
||||||
|
var elements = document.querySelectorAll('.drawer-on[data-kt-drawer="true"]:not([data-kt-drawer-escape="false"])');
|
||||||
|
var drawer;
|
||||||
|
|
||||||
|
if ( elements && elements.length > 0 ) {
|
||||||
|
for (var i = 0, len = elements.length; i < len; i++) {
|
||||||
|
drawer = KTDrawer.getInstance(elements[i]);
|
||||||
|
if (drawer.isShown()) {
|
||||||
|
drawer.hide();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dismiss instances
|
||||||
|
KTDrawer.handleDismiss = function() {
|
||||||
|
// External drawer toggle handler
|
||||||
|
KTUtil.on(document.body, '[data-kt-drawer-dismiss="true"]', 'click', function(e) {
|
||||||
|
var element = this.closest('[data-kt-drawer="true"]');
|
||||||
|
|
||||||
|
if (element) {
|
||||||
|
var drawer = KTDrawer.getInstance(element);
|
||||||
|
if (drawer.isShown()) {
|
||||||
|
drawer.hide();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle resize
|
||||||
|
KTDrawer.handleResize = function() {
|
||||||
|
// Window resize Handling
|
||||||
|
window.addEventListener('resize', function() {
|
||||||
|
var timer;
|
||||||
|
|
||||||
|
KTUtil.throttle(timer, function() {
|
||||||
|
// Locate and update drawer instances on window resize
|
||||||
|
var elements = document.querySelectorAll('[data-kt-drawer="true"]');
|
||||||
|
|
||||||
|
if ( elements && elements.length > 0 ) {
|
||||||
|
for (var i = 0, len = elements.length; i < len; i++) {
|
||||||
|
var drawer = KTDrawer.getInstance(elements[i]);
|
||||||
|
if (drawer) {
|
||||||
|
drawer.update();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 200);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Global initialization
|
||||||
|
KTDrawer.init = function() {
|
||||||
|
KTDrawer.createInstances();
|
||||||
|
|
||||||
|
if (KTDrawerHandlersInitialized === false) {
|
||||||
|
KTDrawer.handleResize();
|
||||||
|
KTDrawer.handleShow();
|
||||||
|
KTDrawer.handleDismiss();
|
||||||
|
KTDrawer.handleEscapeKey();
|
||||||
|
|
||||||
|
KTDrawerHandlersInitialized = true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Webpack support
|
||||||
|
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
|
||||||
|
module.exports = KTDrawer;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,121 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTEventHandler = function() {
|
||||||
|
////////////////////////////
|
||||||
|
// ** Private Variables ** //
|
||||||
|
////////////////////////////
|
||||||
|
var _handlers = {};
|
||||||
|
|
||||||
|
////////////////////////////
|
||||||
|
// ** Private Methods ** //
|
||||||
|
////////////////////////////
|
||||||
|
var _triggerEvent = function(element, name, target) {
|
||||||
|
var returnValue = true;
|
||||||
|
var eventValue;
|
||||||
|
|
||||||
|
if ( KTUtil.data(element).has(name) === true ) {
|
||||||
|
var handlerIds = KTUtil.data(element).get(name);
|
||||||
|
var handlerId;
|
||||||
|
|
||||||
|
for (var i = 0; i < handlerIds.length; i++) {
|
||||||
|
handlerId = handlerIds[i];
|
||||||
|
|
||||||
|
if ( _handlers[name] && _handlers[name][handlerId] ) {
|
||||||
|
var handler = _handlers[name][handlerId];
|
||||||
|
var value;
|
||||||
|
|
||||||
|
if ( handler.name === name ) {
|
||||||
|
if ( handler.one == true ) {
|
||||||
|
if ( handler.fired == false ) {
|
||||||
|
_handlers[name][handlerId].fired = true;
|
||||||
|
|
||||||
|
eventValue = handler.callback.call(this, target);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
eventValue = handler.callback.call(this, target);
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( eventValue === false ) {
|
||||||
|
returnValue = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return returnValue;
|
||||||
|
}
|
||||||
|
|
||||||
|
var _addEvent = function(element, name, callback, one) {
|
||||||
|
var handlerId = KTUtil.getUniqueId('event');
|
||||||
|
var handlerIds = KTUtil.data(element).get(name);
|
||||||
|
|
||||||
|
if ( !handlerIds ) {
|
||||||
|
handlerIds = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
handlerIds.push(handlerId);
|
||||||
|
|
||||||
|
KTUtil.data(element).set(name, handlerIds);
|
||||||
|
|
||||||
|
if ( !_handlers[name] ) {
|
||||||
|
_handlers[name] = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
_handlers[name][handlerId] = {
|
||||||
|
name: name,
|
||||||
|
callback: callback,
|
||||||
|
one: one,
|
||||||
|
fired: false
|
||||||
|
};
|
||||||
|
|
||||||
|
return handlerId;
|
||||||
|
}
|
||||||
|
|
||||||
|
var _removeEvent = function(element, name, handlerId) {
|
||||||
|
var handlerIds = KTUtil.data(element).get(name);
|
||||||
|
var index = handlerIds && handlerIds.indexOf(handlerId);
|
||||||
|
|
||||||
|
if (index !== -1) {
|
||||||
|
handlerIds.splice(index, 1);
|
||||||
|
KTUtil.data(element).set(name, handlerIds);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (_handlers[name] && _handlers[name][handlerId]) {
|
||||||
|
delete _handlers[name][handlerId];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
////////////////////////////
|
||||||
|
// ** Public Methods ** //
|
||||||
|
////////////////////////////
|
||||||
|
return {
|
||||||
|
trigger: function(element, name, target) {
|
||||||
|
return _triggerEvent(element, name, target);
|
||||||
|
},
|
||||||
|
|
||||||
|
on: function(element, name, handler) {
|
||||||
|
return _addEvent(element, name, handler);
|
||||||
|
},
|
||||||
|
|
||||||
|
one: function(element, name, handler) {
|
||||||
|
return _addEvent(element, name, handler, true);
|
||||||
|
},
|
||||||
|
|
||||||
|
off: function(element, name, handlerId) {
|
||||||
|
return _removeEvent(element, name, handlerId);
|
||||||
|
},
|
||||||
|
|
||||||
|
debug: function() {
|
||||||
|
for (var b in _handlers) {
|
||||||
|
if ( _handlers.hasOwnProperty(b) ) console.log(b);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}();
|
||||||
|
|
||||||
|
// Webpack support
|
||||||
|
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
|
||||||
|
module.exports = KTEventHandler;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,163 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTFeedback = function(options) {
|
||||||
|
////////////////////////////
|
||||||
|
// ** Private Variables ** //
|
||||||
|
////////////////////////////
|
||||||
|
var the = this;
|
||||||
|
|
||||||
|
// Default options
|
||||||
|
var defaultOptions = {
|
||||||
|
'width' : 100,
|
||||||
|
'placement' : 'top-center',
|
||||||
|
'content' : '',
|
||||||
|
'type': 'popup'
|
||||||
|
};
|
||||||
|
|
||||||
|
////////////////////////////
|
||||||
|
// ** Private methods ** //
|
||||||
|
////////////////////////////
|
||||||
|
|
||||||
|
var _construct = function() {
|
||||||
|
_init();
|
||||||
|
}
|
||||||
|
|
||||||
|
var _init = function() {
|
||||||
|
// Variables
|
||||||
|
the.options = KTUtil.deepExtend({}, defaultOptions, options);
|
||||||
|
the.uid = KTUtil.getUniqueId('feedback');
|
||||||
|
the.element;
|
||||||
|
the.shown = false;
|
||||||
|
|
||||||
|
// Event Handlers
|
||||||
|
_handlers();
|
||||||
|
|
||||||
|
// Bind Instance
|
||||||
|
KTUtil.data(the.element).set('feedback', the);
|
||||||
|
}
|
||||||
|
|
||||||
|
var _handlers = function() {
|
||||||
|
KTUtil.addEvent(the.element, 'click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
_go();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var _show = function() {
|
||||||
|
if ( KTEventHandler.trigger(the.element, 'kt.feedback.show', the) === false ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( the.options.type === 'popup') {
|
||||||
|
_showPopup();
|
||||||
|
}
|
||||||
|
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.feedback.shown', the);
|
||||||
|
|
||||||
|
return the;
|
||||||
|
}
|
||||||
|
|
||||||
|
var _hide = function() {
|
||||||
|
if ( KTEventHandler.trigger(the.element, 'kt.feedback.hide', the) === false ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( the.options.type === 'popup') {
|
||||||
|
_hidePopup();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.shown = false;
|
||||||
|
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.feedback.hidden', the);
|
||||||
|
|
||||||
|
return the;
|
||||||
|
}
|
||||||
|
|
||||||
|
var _showPopup = function() {
|
||||||
|
the.element = document.createElement("DIV");
|
||||||
|
|
||||||
|
KTUtil.addClass(the.element, 'feedback feedback-popup');
|
||||||
|
KTUtil.setHTML(the.element, the.options.content);
|
||||||
|
|
||||||
|
if (the.options.placement == 'top-center') {
|
||||||
|
_setPopupTopCenterPosition();
|
||||||
|
}
|
||||||
|
|
||||||
|
document.body.appendChild(the.element);
|
||||||
|
|
||||||
|
KTUtil.addClass(the.element, 'feedback-shown');
|
||||||
|
|
||||||
|
the.shown = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
var _setPopupTopCenterPosition = function() {
|
||||||
|
var width = KTUtil.getResponsiveValue(the.options.width);
|
||||||
|
var height = KTUtil.css(the.element, 'height');
|
||||||
|
|
||||||
|
KTUtil.addClass(the.element, 'feedback-top-center');
|
||||||
|
|
||||||
|
KTUtil.css(the.element, 'width', width);
|
||||||
|
KTUtil.css(the.element, 'left', '50%');
|
||||||
|
KTUtil.css(the.element, 'top', '-' + height);
|
||||||
|
}
|
||||||
|
|
||||||
|
var _hidePopup = function() {
|
||||||
|
the.element.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
var _destroy = function() {
|
||||||
|
KTUtil.data(the.element).remove('feedback');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Construct class
|
||||||
|
_construct();
|
||||||
|
|
||||||
|
///////////////////////
|
||||||
|
// ** Public API ** //
|
||||||
|
///////////////////////
|
||||||
|
|
||||||
|
// Plugin API
|
||||||
|
the.show = function() {
|
||||||
|
return _show();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.hide = function() {
|
||||||
|
return _hide();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.isShown = function() {
|
||||||
|
return the.shown;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.getElement = function() {
|
||||||
|
return the.element;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.destroy = function() {
|
||||||
|
return _destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Event API
|
||||||
|
the.on = function(name, handler) {
|
||||||
|
return KTEventHandler.on(the.element, name, handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.one = function(name, handler) {
|
||||||
|
return KTEventHandler.one(the.element, name, handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.off = function(name, handlerId) {
|
||||||
|
return KTEventHandler.off(the.element, name, handlerId);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.trigger = function(name, event) {
|
||||||
|
return KTEventHandler.trigger(the.element, name, event, the, event);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Webpack support
|
||||||
|
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
|
||||||
|
module.exports = KTFeedback;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,209 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTImageInput = function(element, options) {
|
||||||
|
////////////////////////////
|
||||||
|
// ** Private Variables ** //
|
||||||
|
////////////////////////////
|
||||||
|
var the = this;
|
||||||
|
|
||||||
|
if ( typeof element === "undefined" || element === null ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Default Options
|
||||||
|
var defaultOptions = {
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
////////////////////////////
|
||||||
|
// ** Private Methods ** //
|
||||||
|
////////////////////////////
|
||||||
|
|
||||||
|
var _construct = function() {
|
||||||
|
if ( KTUtil.data(element).has('image-input') === true ) {
|
||||||
|
the = KTUtil.data(element).get('image-input');
|
||||||
|
} else {
|
||||||
|
_init();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _init = function() {
|
||||||
|
// Variables
|
||||||
|
the.options = KTUtil.deepExtend({}, defaultOptions, options);
|
||||||
|
the.uid = KTUtil.getUniqueId('image-input');
|
||||||
|
|
||||||
|
// Elements
|
||||||
|
the.element = element;
|
||||||
|
the.inputElement = KTUtil.find(element, 'input[type="file"]');
|
||||||
|
the.wrapperElement = KTUtil.find(element, '.image-input-wrapper');
|
||||||
|
the.cancelElement = KTUtil.find(element, '[data-kt-image-input-action="cancel"]');
|
||||||
|
the.removeElement = KTUtil.find(element, '[data-kt-image-input-action="remove"]');
|
||||||
|
the.hiddenElement = KTUtil.find(element, 'input[type="hidden"]');
|
||||||
|
the.src = KTUtil.css(the.wrapperElement, 'backgroundImage');
|
||||||
|
|
||||||
|
// Set initialized
|
||||||
|
the.element.setAttribute('data-kt-image-input', 'true');
|
||||||
|
|
||||||
|
// Event Handlers
|
||||||
|
_handlers();
|
||||||
|
|
||||||
|
// Bind Instance
|
||||||
|
KTUtil.data(the.element).set('image-input', the);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init Event Handlers
|
||||||
|
var _handlers = function() {
|
||||||
|
KTUtil.addEvent(the.inputElement, 'change', _change);
|
||||||
|
KTUtil.addEvent(the.cancelElement, 'click', _cancel);
|
||||||
|
KTUtil.addEvent(the.removeElement, 'click', _remove);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Event Handlers
|
||||||
|
var _change = function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
if ( the.inputElement !== null && the.inputElement.files && the.inputElement.files[0] ) {
|
||||||
|
// Fire change event
|
||||||
|
if ( KTEventHandler.trigger(the.element, 'kt.imageinput.change', the) === false ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var reader = new FileReader();
|
||||||
|
|
||||||
|
reader.onload = function(e) {
|
||||||
|
KTUtil.css(the.wrapperElement, 'background-image', 'url('+ e.target.result +')');
|
||||||
|
}
|
||||||
|
|
||||||
|
reader.readAsDataURL(the.inputElement.files[0]);
|
||||||
|
|
||||||
|
the.element.classList.add('image-input-changed');
|
||||||
|
the.element.classList.remove('image-input-empty');
|
||||||
|
|
||||||
|
// Fire removed event
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.imageinput.changed', the);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _cancel = function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Fire cancel event
|
||||||
|
if ( KTEventHandler.trigger(the.element, 'kt.imageinput.cancel', the) === false ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.element.classList.remove('image-input-changed');
|
||||||
|
the.element.classList.remove('image-input-empty');
|
||||||
|
|
||||||
|
if (the.src === 'none') {
|
||||||
|
KTUtil.css(the.wrapperElement, 'background-image', '');
|
||||||
|
the.element.classList.add('image-input-empty');
|
||||||
|
} else {
|
||||||
|
KTUtil.css(the.wrapperElement, 'background-image', the.src);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.inputElement.value = "";
|
||||||
|
|
||||||
|
if ( the.hiddenElement !== null ) {
|
||||||
|
the.hiddenElement.value = "0";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fire canceled event
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.imageinput.canceled', the);
|
||||||
|
}
|
||||||
|
|
||||||
|
var _remove = function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Fire remove event
|
||||||
|
if ( KTEventHandler.trigger(the.element, 'kt.imageinput.remove', the) === false ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.element.classList.remove('image-input-changed');
|
||||||
|
the.element.classList.add('image-input-empty');
|
||||||
|
|
||||||
|
KTUtil.css(the.wrapperElement, 'background-image', "none");
|
||||||
|
the.inputElement.value = "";
|
||||||
|
|
||||||
|
if ( the.hiddenElement !== null ) {
|
||||||
|
the.hiddenElement.value = "1";
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fire removed event
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.imageinput.removed', the);
|
||||||
|
}
|
||||||
|
|
||||||
|
var _destroy = function() {
|
||||||
|
KTUtil.data(the.element).remove('image-input');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Construct Class
|
||||||
|
_construct();
|
||||||
|
|
||||||
|
///////////////////////
|
||||||
|
// ** Public API ** //
|
||||||
|
///////////////////////
|
||||||
|
|
||||||
|
// Plugin API
|
||||||
|
the.getInputElement = function() {
|
||||||
|
return the.inputElement;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.getElement = function() {
|
||||||
|
return the.element;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.destroy = function() {
|
||||||
|
return _destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Event API
|
||||||
|
the.on = function(name, handler) {
|
||||||
|
return KTEventHandler.on(the.element, name, handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.one = function(name, handler) {
|
||||||
|
return KTEventHandler.one(the.element, name, handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.off = function(name, handlerId) {
|
||||||
|
return KTEventHandler.off(the.element, name, handlerId);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.trigger = function(name, event) {
|
||||||
|
return KTEventHandler.trigger(the.element, name, event, the, event);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Static methods
|
||||||
|
KTImageInput.getInstance = function(element) {
|
||||||
|
if ( element !== null && KTUtil.data(element).has('image-input') ) {
|
||||||
|
return KTUtil.data(element).get('image-input');
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create instances
|
||||||
|
KTImageInput.createInstances = function(selector = '[data-kt-image-input]') {
|
||||||
|
// Initialize Menus
|
||||||
|
var elements = document.querySelectorAll(selector);
|
||||||
|
|
||||||
|
if ( elements && elements.length > 0 ) {
|
||||||
|
for (var i = 0, len = elements.length; i < len; i++) {
|
||||||
|
new KTImageInput(elements[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Global initialization
|
||||||
|
KTImageInput.init = function() {
|
||||||
|
KTImageInput.createInstances();
|
||||||
|
};
|
||||||
|
|
||||||
|
// Webpack Support
|
||||||
|
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
|
||||||
|
module.exports = KTImageInput;
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,253 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTPasswordMeter = function(element, options) {
|
||||||
|
////////////////////////////
|
||||||
|
// ** Private variables ** //
|
||||||
|
////////////////////////////
|
||||||
|
var the = this;
|
||||||
|
|
||||||
|
if (!element) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Default Options
|
||||||
|
var defaultOptions = {
|
||||||
|
minLength: 8,
|
||||||
|
checkUppercase: true,
|
||||||
|
checkLowercase: true,
|
||||||
|
checkDigit: true,
|
||||||
|
checkChar: true,
|
||||||
|
scoreHighlightClass: 'active'
|
||||||
|
};
|
||||||
|
|
||||||
|
////////////////////////////
|
||||||
|
// ** Private methods ** //
|
||||||
|
////////////////////////////
|
||||||
|
|
||||||
|
// Constructor
|
||||||
|
var _construct = function() {
|
||||||
|
if ( KTUtil.data(element).has('password-meter') === true ) {
|
||||||
|
the = KTUtil.data(element).get('password-meter');
|
||||||
|
} else {
|
||||||
|
_init();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize
|
||||||
|
var _init = function() {
|
||||||
|
// Variables
|
||||||
|
the.options = KTUtil.deepExtend({}, defaultOptions, options);
|
||||||
|
the.score = 0;
|
||||||
|
the.checkSteps = 5;
|
||||||
|
|
||||||
|
// Elements
|
||||||
|
the.element = element;
|
||||||
|
the.inputElement = the.element.querySelector('input[type]');
|
||||||
|
the.visibilityElement = the.element.querySelector('[data-kt-password-meter-control="visibility"]');
|
||||||
|
the.highlightElement = the.element.querySelector('[data-kt-password-meter-control="highlight"]');
|
||||||
|
|
||||||
|
// Set initialized
|
||||||
|
the.element.setAttribute('data-kt-password-meter', 'true');
|
||||||
|
|
||||||
|
// Event Handlers
|
||||||
|
_handlers();
|
||||||
|
|
||||||
|
// Bind Instance
|
||||||
|
KTUtil.data(the.element).set('password-meter', the);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handlers
|
||||||
|
var _handlers = function() {
|
||||||
|
if (the.highlightElement) {
|
||||||
|
the.inputElement.addEventListener('input', function() {
|
||||||
|
_check();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (the.visibilityElement) {
|
||||||
|
the.visibilityElement.addEventListener('click', function() {
|
||||||
|
_visibility();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Event handlers
|
||||||
|
var _check = function() {
|
||||||
|
var score = 0;
|
||||||
|
var checkScore = _getCheckScore();
|
||||||
|
|
||||||
|
if (_checkLength() === true) {
|
||||||
|
score = score + checkScore;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (the.options.checkUppercase === true && _checkLowercase() === true) {
|
||||||
|
score = score + checkScore;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (the.options.checkLowercase === true && _checkUppercase() === true ) {
|
||||||
|
score = score + checkScore;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (the.options.checkDigit === true && _checkDigit() === true ) {
|
||||||
|
score = score + checkScore;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (the.options.checkChar === true && _checkChar() === true ) {
|
||||||
|
score = score + checkScore;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.score = score;
|
||||||
|
|
||||||
|
_highlight();
|
||||||
|
}
|
||||||
|
|
||||||
|
var _checkLength = function() {
|
||||||
|
return the.inputElement.value.length >= the.options.minLength; // 20 score
|
||||||
|
}
|
||||||
|
|
||||||
|
var _checkLowercase = function() {
|
||||||
|
return /[a-z]/.test(the.inputElement.value); // 20 score
|
||||||
|
}
|
||||||
|
|
||||||
|
var _checkUppercase = function() {
|
||||||
|
return /[A-Z]/.test(the.inputElement.value); // 20 score
|
||||||
|
}
|
||||||
|
|
||||||
|
var _checkDigit = function() {
|
||||||
|
return /[0-9]/.test(the.inputElement.value); // 20 score
|
||||||
|
}
|
||||||
|
|
||||||
|
var _checkChar = function() {
|
||||||
|
return /[~`!#@$%\^&*+=\-\[\]\\';,/{}|\\":<>\?]/g.test(the.inputElement.value); // 20 score
|
||||||
|
}
|
||||||
|
|
||||||
|
var _getCheckScore = function() {
|
||||||
|
var count = 1;
|
||||||
|
|
||||||
|
if (the.options.checkUppercase === true) {
|
||||||
|
count++;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (the.options.checkLowercase === true) {
|
||||||
|
count++;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (the.options.checkDigit === true) {
|
||||||
|
count++;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (the.options.checkChar === true) {
|
||||||
|
count++;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.checkSteps = count;
|
||||||
|
|
||||||
|
return 100 / the.checkSteps;
|
||||||
|
}
|
||||||
|
|
||||||
|
var _highlight = function() {
|
||||||
|
var items = [].slice.call(the.highlightElement.querySelectorAll('div'));
|
||||||
|
var total = items.length;
|
||||||
|
var index = 0;
|
||||||
|
var checkScore = _getCheckScore();
|
||||||
|
var score = _getScore();
|
||||||
|
|
||||||
|
items.map(function (item) {
|
||||||
|
index++;
|
||||||
|
|
||||||
|
if ( (checkScore * index * (the.checkSteps / total)) <= score ) {
|
||||||
|
item.classList.add('active');
|
||||||
|
} else {
|
||||||
|
item.classList.remove('active');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var _visibility = function() {
|
||||||
|
var visibleIcon = the.visibilityElement.querySelector(':scope > i:not(.d-none)');
|
||||||
|
var hiddenIcon = the.visibilityElement.querySelector(':scope > i.d-none');
|
||||||
|
|
||||||
|
if (the.inputElement.getAttribute('type').toLowerCase() === 'password' ) {
|
||||||
|
the.inputElement.setAttribute('type', 'text');
|
||||||
|
} else {
|
||||||
|
the.inputElement.setAttribute('type', 'password');
|
||||||
|
}
|
||||||
|
|
||||||
|
visibleIcon.classList.add('d-none');
|
||||||
|
hiddenIcon.classList.remove('d-none');
|
||||||
|
|
||||||
|
the.inputElement.focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
var _reset = function() {
|
||||||
|
the.score = 0;
|
||||||
|
|
||||||
|
_highlight();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Gets current password score
|
||||||
|
var _getScore = function() {
|
||||||
|
return the.score;
|
||||||
|
}
|
||||||
|
|
||||||
|
var _destroy = function() {
|
||||||
|
KTUtil.data(the.element).remove('password-meter');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Construct class
|
||||||
|
_construct();
|
||||||
|
|
||||||
|
///////////////////////
|
||||||
|
// ** Public API ** //
|
||||||
|
///////////////////////
|
||||||
|
|
||||||
|
// Plugin API
|
||||||
|
the.check = function() {
|
||||||
|
return _check();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.getScore = function() {
|
||||||
|
return _getScore();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.reset = function() {
|
||||||
|
return _reset();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.destroy = function() {
|
||||||
|
return _destroy();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Static methods
|
||||||
|
KTPasswordMeter.getInstance = function(element) {
|
||||||
|
if ( element !== null && KTUtil.data(element).has('password-meter') ) {
|
||||||
|
return KTUtil.data(element).get('password-meter');
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create instances
|
||||||
|
KTPasswordMeter.createInstances = function(selector = '[data-kt-password-meter]') {
|
||||||
|
// Get instances
|
||||||
|
var elements = document.body.querySelectorAll(selector);
|
||||||
|
|
||||||
|
if ( elements && elements.length > 0 ) {
|
||||||
|
for (var i = 0, len = elements.length; i < len; i++) {
|
||||||
|
// Initialize instances
|
||||||
|
new KTPasswordMeter(elements[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Global initialization
|
||||||
|
KTPasswordMeter.init = function() {
|
||||||
|
KTPasswordMeter.createInstances();
|
||||||
|
};
|
||||||
|
|
||||||
|
// Webpack support
|
||||||
|
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
|
||||||
|
module.exports = KTPasswordMeter;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,358 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var KTScrollHandlersInitialized = false;
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTScroll = function(element, options) {
|
||||||
|
////////////////////////////
|
||||||
|
// ** Private Variables ** //
|
||||||
|
////////////////////////////
|
||||||
|
var the = this;
|
||||||
|
|
||||||
|
if (!element) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Default options
|
||||||
|
var defaultOptions = {
|
||||||
|
saveState: true
|
||||||
|
};
|
||||||
|
|
||||||
|
////////////////////////////
|
||||||
|
// ** Private Methods ** //
|
||||||
|
////////////////////////////
|
||||||
|
|
||||||
|
var _construct = function() {
|
||||||
|
if ( KTUtil.data(element).has('scroll') ) {
|
||||||
|
the = KTUtil.data(element).get('scroll');
|
||||||
|
} else {
|
||||||
|
_init();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _init = function() {
|
||||||
|
// Variables
|
||||||
|
the.options = KTUtil.deepExtend({}, defaultOptions, options);
|
||||||
|
|
||||||
|
// Elements
|
||||||
|
the.element = element;
|
||||||
|
the.id = the.element.getAttribute('id');
|
||||||
|
|
||||||
|
// Set initialized
|
||||||
|
the.element.setAttribute('data-kt-scroll', 'true');
|
||||||
|
|
||||||
|
// Update
|
||||||
|
_update();
|
||||||
|
|
||||||
|
// Bind Instance
|
||||||
|
KTUtil.data(the.element).set('scroll', the);
|
||||||
|
}
|
||||||
|
|
||||||
|
var _setupHeight = function() {
|
||||||
|
var heightType = _getHeightType();
|
||||||
|
var height = _getHeight();
|
||||||
|
|
||||||
|
// Set height
|
||||||
|
if ( height !== null && height.length > 0 ) {
|
||||||
|
KTUtil.css(the.element, heightType, height);
|
||||||
|
} else {
|
||||||
|
KTUtil.css(the.element, heightType, '');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _setupState = function () {
|
||||||
|
var namespace = _getStorageNamespace();
|
||||||
|
|
||||||
|
if ( _getOption('save-state') === true && the.id ) {
|
||||||
|
if ( localStorage.getItem(namespace + the.id + 'st') ) {
|
||||||
|
var pos = parseInt(localStorage.getItem(namespace + the.id + 'st'));
|
||||||
|
|
||||||
|
if ( pos > 0 ) {
|
||||||
|
the.element.scroll({
|
||||||
|
top: pos,
|
||||||
|
behavior: 'instant'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _getStorageNamespace = function(postfix) {
|
||||||
|
return document.body.hasAttribute("data-kt-name") ? document.body.getAttribute("data-kt-name") + "_" : "";
|
||||||
|
}
|
||||||
|
|
||||||
|
var _setupScrollHandler = function() {
|
||||||
|
if ( _getOption('save-state') === true && the.id ) {
|
||||||
|
the.element.addEventListener('scroll', _scrollHandler);
|
||||||
|
} else {
|
||||||
|
the.element.removeEventListener('scroll', _scrollHandler);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _destroyScrollHandler = function() {
|
||||||
|
the.element.removeEventListener('scroll', _scrollHandler);
|
||||||
|
}
|
||||||
|
|
||||||
|
var _resetHeight = function() {
|
||||||
|
KTUtil.css(the.element, _getHeightType(), '');
|
||||||
|
}
|
||||||
|
|
||||||
|
var _scrollHandler = function () {
|
||||||
|
var namespace = _getStorageNamespace();
|
||||||
|
localStorage.setItem(namespace + the.id + 'st', the.element.scrollTop);
|
||||||
|
}
|
||||||
|
|
||||||
|
var _update = function() {
|
||||||
|
// Activate/deactivate
|
||||||
|
if ( _getOption('activate') === true || the.element.hasAttribute('data-kt-scroll-activate') === false ) {
|
||||||
|
_setupHeight();
|
||||||
|
_setupStretchHeight();
|
||||||
|
_setupScrollHandler();
|
||||||
|
_setupState();
|
||||||
|
} else {
|
||||||
|
_resetHeight()
|
||||||
|
_destroyScrollHandler();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _setupStretchHeight = function() {
|
||||||
|
var stretch = _getOption('stretch');
|
||||||
|
|
||||||
|
// Stretch
|
||||||
|
if ( stretch !== null ) {
|
||||||
|
var elements = document.querySelectorAll(stretch);
|
||||||
|
|
||||||
|
if ( elements && elements.length == 2 ) {
|
||||||
|
var element1 = elements[0];
|
||||||
|
var element2 = elements[1];
|
||||||
|
var diff = _getElementHeight(element2) - _getElementHeight(element1);
|
||||||
|
|
||||||
|
if (diff > 0) {
|
||||||
|
var height = parseInt(KTUtil.css(the.element, _getHeightType())) + diff;
|
||||||
|
|
||||||
|
KTUtil.css(the.element, _getHeightType(), String(height) + 'px');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _getHeight = function() {
|
||||||
|
var height = _getOption(_getHeightType());
|
||||||
|
|
||||||
|
if ( height instanceof Function ) {
|
||||||
|
return height.call();
|
||||||
|
} else if ( height !== null && typeof height === 'string' && height.toLowerCase() === 'auto' ) {
|
||||||
|
return _getAutoHeight();
|
||||||
|
} else {
|
||||||
|
return height;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _getAutoHeight = function() {
|
||||||
|
var height = KTUtil.getViewPort().height;
|
||||||
|
var dependencies = _getOption('dependencies');
|
||||||
|
var wrappers = _getOption('wrappers');
|
||||||
|
var offset = _getOption('offset');
|
||||||
|
|
||||||
|
// Spacings
|
||||||
|
height = height - _getElementSpacing(the.element);
|
||||||
|
|
||||||
|
// Height dependencies
|
||||||
|
//console.log('Q:' + JSON.stringify(dependencies));
|
||||||
|
|
||||||
|
if ( dependencies !== null ) {
|
||||||
|
var elements = document.querySelectorAll(dependencies);
|
||||||
|
|
||||||
|
if ( elements && elements.length > 0 ) {
|
||||||
|
for ( var i = 0, len = elements.length; i < len; i++ ) {
|
||||||
|
if ( KTUtil.visible(elements[i]) === false ) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
height = height - _getElementHeight(elements[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Wrappers
|
||||||
|
if ( wrappers !== null ) {
|
||||||
|
var elements = document.querySelectorAll(wrappers);
|
||||||
|
if ( elements && elements.length > 0 ) {
|
||||||
|
for ( var i = 0, len = elements.length; i < len; i++ ) {
|
||||||
|
if ( KTUtil.visible(elements[i]) === false ) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
height = height - _getElementSpacing(elements[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Custom offset
|
||||||
|
if ( offset !== null && typeof offset !== 'object') {
|
||||||
|
height = height - parseInt(offset);
|
||||||
|
}
|
||||||
|
|
||||||
|
return String(height) + 'px';
|
||||||
|
}
|
||||||
|
|
||||||
|
var _getElementHeight = function(element) {
|
||||||
|
var height = 0;
|
||||||
|
|
||||||
|
if (element !== null) {
|
||||||
|
height = height + parseInt(KTUtil.css(element, 'height'));
|
||||||
|
height = height + parseInt(KTUtil.css(element, 'margin-top'));
|
||||||
|
height = height + parseInt(KTUtil.css(element, 'margin-bottom'));
|
||||||
|
|
||||||
|
if (KTUtil.css(element, 'border-top')) {
|
||||||
|
height = height + parseInt(KTUtil.css(element, 'border-top'));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (KTUtil.css(element, 'border-bottom')) {
|
||||||
|
height = height + parseInt(KTUtil.css(element, 'border-bottom'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return height;
|
||||||
|
}
|
||||||
|
|
||||||
|
var _getElementSpacing = function(element) {
|
||||||
|
var spacing = 0;
|
||||||
|
|
||||||
|
if (element !== null) {
|
||||||
|
spacing = spacing + parseInt(KTUtil.css(element, 'margin-top'));
|
||||||
|
spacing = spacing + parseInt(KTUtil.css(element, 'margin-bottom'));
|
||||||
|
spacing = spacing + parseInt(KTUtil.css(element, 'padding-top'));
|
||||||
|
spacing = spacing + parseInt(KTUtil.css(element, 'padding-bottom'));
|
||||||
|
|
||||||
|
if (KTUtil.css(element, 'border-top')) {
|
||||||
|
spacing = spacing + parseInt(KTUtil.css(element, 'border-top'));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (KTUtil.css(element, 'border-bottom')) {
|
||||||
|
spacing = spacing + parseInt(KTUtil.css(element, 'border-bottom'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return spacing;
|
||||||
|
}
|
||||||
|
|
||||||
|
var _getOption = function(name) {
|
||||||
|
if ( the.element.hasAttribute('data-kt-scroll-' + name) === true ) {
|
||||||
|
var attr = the.element.getAttribute('data-kt-scroll-' + name);
|
||||||
|
|
||||||
|
var value = KTUtil.getResponsiveValue(attr);
|
||||||
|
|
||||||
|
if ( value !== null && String(value) === 'true' ) {
|
||||||
|
value = true;
|
||||||
|
} else if ( value !== null && String(value) === 'false' ) {
|
||||||
|
value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return value;
|
||||||
|
} else {
|
||||||
|
var optionName = KTUtil.snakeToCamel(name);
|
||||||
|
|
||||||
|
if ( the.options[optionName] ) {
|
||||||
|
return KTUtil.getResponsiveValue(the.options[optionName]);
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _getHeightType = function() {
|
||||||
|
if (_getOption('height')) {
|
||||||
|
return 'height';
|
||||||
|
} if (_getOption('min-height')) {
|
||||||
|
return 'min-height';
|
||||||
|
} if (_getOption('max-height')) {
|
||||||
|
return 'max-height';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _destroy = function() {
|
||||||
|
KTUtil.data(the.element).remove('scroll');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Construct Class
|
||||||
|
_construct();
|
||||||
|
|
||||||
|
///////////////////////
|
||||||
|
// ** Public API ** //
|
||||||
|
///////////////////////
|
||||||
|
|
||||||
|
the.update = function() {
|
||||||
|
return _update();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.getHeight = function() {
|
||||||
|
return _getHeight();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.getElement = function() {
|
||||||
|
return the.element;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.destroy = function() {
|
||||||
|
return _destroy();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Static methods
|
||||||
|
KTScroll.getInstance = function(element) {
|
||||||
|
if ( element !== null && KTUtil.data(element).has('scroll') ) {
|
||||||
|
return KTUtil.data(element).get('scroll');
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create instances
|
||||||
|
KTScroll.createInstances = function(selector = '[data-kt-scroll="true"]') {
|
||||||
|
// Initialize Menus
|
||||||
|
var elements = document.body.querySelectorAll(selector);
|
||||||
|
|
||||||
|
if ( elements && elements.length > 0 ) {
|
||||||
|
for (var i = 0, len = elements.length; i < len; i++) {
|
||||||
|
new KTScroll(elements[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Window resize handling
|
||||||
|
KTScroll.handleResize = function() {
|
||||||
|
window.addEventListener('resize', function() {
|
||||||
|
var timer;
|
||||||
|
|
||||||
|
KTUtil.throttle(timer, function() {
|
||||||
|
// Locate and update Offcanvas instances on window resize
|
||||||
|
var elements = document.body.querySelectorAll('[data-kt-scroll="true"]');
|
||||||
|
|
||||||
|
if ( elements && elements.length > 0 ) {
|
||||||
|
for (var i = 0, len = elements.length; i < len; i++) {
|
||||||
|
var scroll = KTScroll.getInstance(elements[i]);
|
||||||
|
if (scroll) {
|
||||||
|
scroll.update();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 200);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Global initialization
|
||||||
|
KTScroll.init = function() {
|
||||||
|
KTScroll.createInstances();
|
||||||
|
|
||||||
|
if (KTScrollHandlersInitialized === false) {
|
||||||
|
KTScroll.handleResize();
|
||||||
|
|
||||||
|
KTScrollHandlersInitialized = true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Webpack Support
|
||||||
|
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
|
||||||
|
module.exports = KTScroll;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,164 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTScrolltop = function(element, options) {
|
||||||
|
////////////////////////////
|
||||||
|
// ** Private variables ** //
|
||||||
|
////////////////////////////
|
||||||
|
var the = this;
|
||||||
|
|
||||||
|
if ( typeof element === "undefined" || element === null ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Default options
|
||||||
|
var defaultOptions = {
|
||||||
|
offset: 300,
|
||||||
|
speed: 600
|
||||||
|
};
|
||||||
|
|
||||||
|
////////////////////////////
|
||||||
|
// ** Private methods ** //
|
||||||
|
////////////////////////////
|
||||||
|
|
||||||
|
var _construct = function() {
|
||||||
|
if (KTUtil.data(element).has('scrolltop')) {
|
||||||
|
the = KTUtil.data(element).get('scrolltop');
|
||||||
|
} else {
|
||||||
|
_init();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _init = function() {
|
||||||
|
// Variables
|
||||||
|
the.options = KTUtil.deepExtend({}, defaultOptions, options);
|
||||||
|
the.uid = KTUtil.getUniqueId('scrolltop');
|
||||||
|
the.element = element;
|
||||||
|
|
||||||
|
// Set initialized
|
||||||
|
the.element.setAttribute('data-kt-scrolltop', 'true');
|
||||||
|
|
||||||
|
// Event Handlers
|
||||||
|
_handlers();
|
||||||
|
|
||||||
|
// Bind Instance
|
||||||
|
KTUtil.data(the.element).set('scrolltop', the);
|
||||||
|
}
|
||||||
|
|
||||||
|
var _handlers = function() {
|
||||||
|
var timer;
|
||||||
|
|
||||||
|
window.addEventListener('scroll', function() {
|
||||||
|
KTUtil.throttle(timer, function() {
|
||||||
|
_scroll();
|
||||||
|
}, 200);
|
||||||
|
});
|
||||||
|
|
||||||
|
KTUtil.addEvent(the.element, 'click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
_go();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var _scroll = function() {
|
||||||
|
var offset = parseInt(_getOption('offset'));
|
||||||
|
|
||||||
|
var pos = KTUtil.getScrollTop(); // current vertical position
|
||||||
|
|
||||||
|
if ( pos > offset ) {
|
||||||
|
if ( document.body.hasAttribute('data-kt-scrolltop') === false ) {
|
||||||
|
document.body.setAttribute('data-kt-scrolltop', 'on');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if ( document.body.hasAttribute('data-kt-scrolltop') === true ) {
|
||||||
|
document.body.removeAttribute('data-kt-scrolltop');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _go = function() {
|
||||||
|
var speed = parseInt(_getOption('speed'));
|
||||||
|
|
||||||
|
window.scrollTo({top: 0, behavior: 'smooth'});
|
||||||
|
//KTUtil.scrollTop(0, speed);
|
||||||
|
}
|
||||||
|
|
||||||
|
var _getOption = function(name) {
|
||||||
|
if ( the.element.hasAttribute('data-kt-scrolltop-' + name) === true ) {
|
||||||
|
var attr = the.element.getAttribute('data-kt-scrolltop-' + name);
|
||||||
|
var value = KTUtil.getResponsiveValue(attr);
|
||||||
|
|
||||||
|
if ( value !== null && String(value) === 'true' ) {
|
||||||
|
value = true;
|
||||||
|
} else if ( value !== null && String(value) === 'false' ) {
|
||||||
|
value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return value;
|
||||||
|
} else {
|
||||||
|
var optionName = KTUtil.snakeToCamel(name);
|
||||||
|
|
||||||
|
if ( the.options[optionName] ) {
|
||||||
|
return KTUtil.getResponsiveValue(the.options[optionName]);
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _destroy = function() {
|
||||||
|
KTUtil.data(the.element).remove('scrolltop');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Construct class
|
||||||
|
_construct();
|
||||||
|
|
||||||
|
///////////////////////
|
||||||
|
// ** Public API ** //
|
||||||
|
///////////////////////
|
||||||
|
|
||||||
|
// Plugin API
|
||||||
|
the.go = function() {
|
||||||
|
return _go();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.getElement = function() {
|
||||||
|
return the.element;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.destroy = function() {
|
||||||
|
return _destroy();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Static methods
|
||||||
|
KTScrolltop.getInstance = function(element) {
|
||||||
|
if (element && KTUtil.data(element).has('scrolltop')) {
|
||||||
|
return KTUtil.data(element).get('scrolltop');
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create instances
|
||||||
|
KTScrolltop.createInstances = function(selector = '[data-kt-scrolltop="true"]') {
|
||||||
|
// Initialize Menus
|
||||||
|
var elements = document.body.querySelectorAll(selector);
|
||||||
|
|
||||||
|
if ( elements && elements.length > 0 ) {
|
||||||
|
for (var i = 0, len = elements.length; i < len; i++) {
|
||||||
|
new KTScrolltop(elements[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Global initialization
|
||||||
|
KTScrolltop.init = function() {
|
||||||
|
KTScrolltop.createInstances();
|
||||||
|
};
|
||||||
|
|
||||||
|
// Webpack support
|
||||||
|
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
|
||||||
|
module.exports = KTScrolltop;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,439 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTSearch = function(element, options) {
|
||||||
|
////////////////////////////
|
||||||
|
// ** Private variables ** //
|
||||||
|
////////////////////////////
|
||||||
|
var the = this;
|
||||||
|
|
||||||
|
if (!element) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Default Options
|
||||||
|
var defaultOptions = {
|
||||||
|
minLength: 2, // Miniam text lenght to query search
|
||||||
|
keypress: true, // Enable search on keypress
|
||||||
|
enter: true, // Enable search on enter key press
|
||||||
|
layout: 'menu', // Use 'menu' or 'inline' layout options to display search results
|
||||||
|
responsive: null, // Pass integer value or bootstrap compatible breakpoint key(sm,md,lg,xl,xxl) to enable reponsive form mode for device width below the breakpoint value
|
||||||
|
showOnFocus: true // Always show menu on input focus
|
||||||
|
};
|
||||||
|
|
||||||
|
////////////////////////////
|
||||||
|
// ** Private methods ** //
|
||||||
|
////////////////////////////
|
||||||
|
|
||||||
|
// Construct
|
||||||
|
var _construct = function() {
|
||||||
|
if ( KTUtil.data(element).has('search') === true ) {
|
||||||
|
the = KTUtil.data(element).get('search');
|
||||||
|
} else {
|
||||||
|
_init();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init
|
||||||
|
var _init = function() {
|
||||||
|
// Variables
|
||||||
|
the.options = KTUtil.deepExtend({}, defaultOptions, options);
|
||||||
|
the.processing = false;
|
||||||
|
|
||||||
|
// Elements
|
||||||
|
the.element = element;
|
||||||
|
the.contentElement = _getElement('content');
|
||||||
|
the.formElement = _getElement('form');
|
||||||
|
the.inputElement = _getElement('input');
|
||||||
|
the.spinnerElement = _getElement('spinner');
|
||||||
|
the.clearElement = _getElement('clear');
|
||||||
|
the.toggleElement = _getElement('toggle');
|
||||||
|
the.submitElement = _getElement('submit');
|
||||||
|
the.toolbarElement = _getElement('toolbar');
|
||||||
|
|
||||||
|
the.resultsElement = _getElement('results');
|
||||||
|
the.suggestionElement = _getElement('suggestion');
|
||||||
|
the.emptyElement = _getElement('empty');
|
||||||
|
|
||||||
|
// Set initialized
|
||||||
|
the.element.setAttribute('data-kt-search', 'true');
|
||||||
|
|
||||||
|
// Layout
|
||||||
|
the.layout = _getOption('layout');
|
||||||
|
|
||||||
|
// Menu
|
||||||
|
if ( the.layout === 'menu' ) {
|
||||||
|
the.menuObject = new KTMenu(the.contentElement);
|
||||||
|
} else {
|
||||||
|
the.menuObject = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update
|
||||||
|
_update();
|
||||||
|
|
||||||
|
// Event Handlers
|
||||||
|
_handlers();
|
||||||
|
|
||||||
|
// Bind Instance
|
||||||
|
KTUtil.data(the.element).set('search', the);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handlera
|
||||||
|
var _handlers = function() {
|
||||||
|
// Focus
|
||||||
|
the.inputElement.addEventListener('focus', _focus);
|
||||||
|
|
||||||
|
// Blur
|
||||||
|
the.inputElement.addEventListener('blur', _blur);
|
||||||
|
|
||||||
|
// Keypress
|
||||||
|
if ( _getOption('keypress') === true ) {
|
||||||
|
the.inputElement.addEventListener('input', _input);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Submit
|
||||||
|
if ( the.submitElement ) {
|
||||||
|
the.submitElement.addEventListener('click', _search);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Enter
|
||||||
|
if ( _getOption('enter') === true ) {
|
||||||
|
the.inputElement.addEventListener('keypress', _enter);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clear
|
||||||
|
if ( the.clearElement ) {
|
||||||
|
the.clearElement.addEventListener('click', _clear);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Menu
|
||||||
|
if ( the.menuObject ) {
|
||||||
|
// Toggle menu
|
||||||
|
if ( the.toggleElement ) {
|
||||||
|
the.toggleElement.addEventListener('click', _show);
|
||||||
|
|
||||||
|
the.menuObject.on('kt.menu.dropdown.show', function(item) {
|
||||||
|
if (KTUtil.visible(the.toggleElement)) {
|
||||||
|
the.toggleElement.classList.add('active');
|
||||||
|
the.toggleElement.classList.add('show');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
the.menuObject.on('kt.menu.dropdown.hide', function(item) {
|
||||||
|
if (KTUtil.visible(the.toggleElement)) {
|
||||||
|
the.toggleElement.classList.remove('active');
|
||||||
|
the.toggleElement.classList.remove('show');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
the.menuObject.on('kt.menu.dropdown.shown', function() {
|
||||||
|
the.inputElement.focus();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Window resize handling
|
||||||
|
window.addEventListener('resize', function() {
|
||||||
|
var timer;
|
||||||
|
|
||||||
|
KTUtil.throttle(timer, function() {
|
||||||
|
_update();
|
||||||
|
}, 200);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Focus
|
||||||
|
var _focus = function() {
|
||||||
|
the.element.classList.add('focus');
|
||||||
|
|
||||||
|
if ( _getOption('show-on-focus') === true || the.inputElement.value.length >= minLength ) {
|
||||||
|
_show();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Blur
|
||||||
|
var _blur = function() {
|
||||||
|
the.element.classList.remove('focus');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Enter
|
||||||
|
var _enter = function(e) {
|
||||||
|
var key = e.charCode || e.keyCode || 0;
|
||||||
|
|
||||||
|
if (key == 13) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
_search();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Input
|
||||||
|
var _input = function() {
|
||||||
|
if ( _getOption('min-length') ) {
|
||||||
|
var minLength = parseInt(_getOption('min-length'));
|
||||||
|
|
||||||
|
if ( the.inputElement.value.length >= minLength ) {
|
||||||
|
_search();
|
||||||
|
} else if ( the.inputElement.value.length === 0 ) {
|
||||||
|
_clear();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Search
|
||||||
|
var _search = function() {
|
||||||
|
if (the.processing === false) {
|
||||||
|
// Show search spinner
|
||||||
|
if (the.spinnerElement) {
|
||||||
|
the.spinnerElement.classList.remove("d-none");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hide search clear button
|
||||||
|
if (the.clearElement) {
|
||||||
|
the.clearElement.classList.add("d-none");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hide search toolbar
|
||||||
|
if (the.toolbarElement && the.formElement.contains(the.toolbarElement)) {
|
||||||
|
the.toolbarElement.classList.add("d-none");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Focus input
|
||||||
|
the.inputElement.focus();
|
||||||
|
|
||||||
|
the.processing = true;
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.search.process', the);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Complete
|
||||||
|
var _complete = function() {
|
||||||
|
if (the.spinnerElement) {
|
||||||
|
the.spinnerElement.classList.add("d-none");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show search toolbar
|
||||||
|
if (the.clearElement) {
|
||||||
|
the.clearElement.classList.remove("d-none");
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( the.inputElement.value.length === 0 ) {
|
||||||
|
_clear();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Focus input
|
||||||
|
the.inputElement.focus();
|
||||||
|
|
||||||
|
_show();
|
||||||
|
|
||||||
|
the.processing = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clear
|
||||||
|
var _clear = function() {
|
||||||
|
if ( KTEventHandler.trigger(the.element, 'kt.search.clear', the) === false ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Clear and focus input
|
||||||
|
the.inputElement.value = "";
|
||||||
|
the.inputElement.focus();
|
||||||
|
|
||||||
|
// Hide clear icon
|
||||||
|
if (the.clearElement) {
|
||||||
|
the.clearElement.classList.add("d-none");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show search toolbar
|
||||||
|
if (the.toolbarElement && the.formElement.contains(the.toolbarElement)) {
|
||||||
|
the.toolbarElement.classList.remove("d-none");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hide menu
|
||||||
|
if ( _getOption('show-on-focus') === false ) {
|
||||||
|
_hide();
|
||||||
|
}
|
||||||
|
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.search.cleared', the);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update
|
||||||
|
var _update = function() {
|
||||||
|
// Handle responsive form
|
||||||
|
if (the.layout === 'menu') {
|
||||||
|
var responsiveFormMode = _getResponsiveFormMode();
|
||||||
|
|
||||||
|
if ( responsiveFormMode === 'on' && the.contentElement.contains(the.formElement) === false ) {
|
||||||
|
the.contentElement.prepend(the.formElement);
|
||||||
|
the.formElement.classList.remove('d-none');
|
||||||
|
} else if ( responsiveFormMode === 'off' && the.contentElement.contains(the.formElement) === true ) {
|
||||||
|
the.element.prepend(the.formElement);
|
||||||
|
the.formElement.classList.add('d-none');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show menu
|
||||||
|
var _show = function() {
|
||||||
|
if ( the.menuObject ) {
|
||||||
|
_update();
|
||||||
|
|
||||||
|
the.menuObject.show(the.element);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hide menu
|
||||||
|
var _hide = function() {
|
||||||
|
if ( the.menuObject ) {
|
||||||
|
_update();
|
||||||
|
|
||||||
|
the.menuObject.hide(the.element);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get option
|
||||||
|
var _getOption = function(name) {
|
||||||
|
if ( the.element.hasAttribute('data-kt-search-' + name) === true ) {
|
||||||
|
var attr = the.element.getAttribute('data-kt-search-' + name);
|
||||||
|
var value = KTUtil.getResponsiveValue(attr);
|
||||||
|
|
||||||
|
if ( value !== null && String(value) === 'true' ) {
|
||||||
|
value = true;
|
||||||
|
} else if ( value !== null && String(value) === 'false' ) {
|
||||||
|
value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return value;
|
||||||
|
} else {
|
||||||
|
var optionName = KTUtil.snakeToCamel(name);
|
||||||
|
|
||||||
|
if ( the.options[optionName] ) {
|
||||||
|
return KTUtil.getResponsiveValue(the.options[optionName]);
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get element
|
||||||
|
var _getElement = function(name) {
|
||||||
|
return the.element.querySelector('[data-kt-search-element="' + name + '"]');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check if responsive form mode is enabled
|
||||||
|
var _getResponsiveFormMode = function() {
|
||||||
|
var responsive = _getOption('responsive');
|
||||||
|
var width = KTUtil.getViewPort().width;
|
||||||
|
|
||||||
|
if (!responsive) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
var breakpoint = KTUtil.getBreakpoint(responsive);
|
||||||
|
|
||||||
|
if (!breakpoint ) {
|
||||||
|
breakpoint = parseInt(responsive);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (width < breakpoint) {
|
||||||
|
return "on";
|
||||||
|
} else {
|
||||||
|
return "off";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _destroy = function() {
|
||||||
|
KTUtil.data(the.element).remove('search');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Construct class
|
||||||
|
_construct();
|
||||||
|
|
||||||
|
///////////////////////
|
||||||
|
// ** Public API ** //
|
||||||
|
///////////////////////
|
||||||
|
|
||||||
|
// Plugin API
|
||||||
|
the.show = function() {
|
||||||
|
return _show();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.hide = function() {
|
||||||
|
return _hide();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.update = function() {
|
||||||
|
return _update();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.search = function() {
|
||||||
|
return _search();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.complete = function() {
|
||||||
|
return _complete();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.clear = function() {
|
||||||
|
return _clear();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.isProcessing = function() {
|
||||||
|
return the.processing;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.getQuery = function() {
|
||||||
|
return the.inputElement.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.getMenu = function() {
|
||||||
|
return the.menuObject;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.getFormElement = function() {
|
||||||
|
return the.formElement;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.getInputElement = function() {
|
||||||
|
return the.inputElement;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.getContentElement = function() {
|
||||||
|
return the.contentElement;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.getElement = function() {
|
||||||
|
return the.element;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.destroy = function() {
|
||||||
|
return _destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Event API
|
||||||
|
the.on = function(name, handler) {
|
||||||
|
return KTEventHandler.on(the.element, name, handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.one = function(name, handler) {
|
||||||
|
return KTEventHandler.one(the.element, name, handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.off = function(name, handlerId) {
|
||||||
|
return KTEventHandler.off(the.element, name, handlerId);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Static methods
|
||||||
|
KTSearch.getInstance = function(element) {
|
||||||
|
if ( element !== null && KTUtil.data(element).has('search') ) {
|
||||||
|
return KTUtil.data(element).get('search');
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Webpack support
|
||||||
|
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
|
||||||
|
module.exports = KTSearch;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,347 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTStepper = function(element, options) {
|
||||||
|
//////////////////////////////
|
||||||
|
// ** Private variables ** //
|
||||||
|
//////////////////////////////
|
||||||
|
var the = this;
|
||||||
|
|
||||||
|
if ( typeof element === "undefined" || element === null ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Default Options
|
||||||
|
var defaultOptions = {
|
||||||
|
startIndex: 1,
|
||||||
|
animation: false,
|
||||||
|
animationSpeed: '0.3s',
|
||||||
|
animationNextClass: 'animate__animated animate__slideInRight animate__fast',
|
||||||
|
animationPreviousClass: 'animate__animated animate__slideInLeft animate__fast'
|
||||||
|
};
|
||||||
|
|
||||||
|
////////////////////////////
|
||||||
|
// ** Private methods ** //
|
||||||
|
////////////////////////////
|
||||||
|
|
||||||
|
var _construct = function() {
|
||||||
|
if ( KTUtil.data(element).has('stepper') === true ) {
|
||||||
|
the = KTUtil.data(element).get('stepper');
|
||||||
|
} else {
|
||||||
|
_init();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _init = function() {
|
||||||
|
the.options = KTUtil.deepExtend({}, defaultOptions, options);
|
||||||
|
the.uid = KTUtil.getUniqueId('stepper');
|
||||||
|
|
||||||
|
the.element = element;
|
||||||
|
|
||||||
|
// Set initialized
|
||||||
|
the.element.setAttribute('data-kt-stepper', 'true');
|
||||||
|
|
||||||
|
// Elements
|
||||||
|
the.steps = KTUtil.findAll(the.element, '[data-kt-stepper-element="nav"]');
|
||||||
|
the.btnNext = KTUtil.find(the.element, '[data-kt-stepper-action="next"]');
|
||||||
|
the.btnPrevious = KTUtil.find(the.element, '[data-kt-stepper-action="previous"]');
|
||||||
|
the.btnSubmit = KTUtil.find(the.element, '[data-kt-stepper-action="submit"]');
|
||||||
|
|
||||||
|
// Variables
|
||||||
|
the.totalStepsNumber = the.steps.length;
|
||||||
|
the.passedStepIndex = 0;
|
||||||
|
the.currentStepIndex = 1;
|
||||||
|
the.clickedStepIndex = 0;
|
||||||
|
|
||||||
|
// Set Current Step
|
||||||
|
if ( the.options.startIndex > 1 ) {
|
||||||
|
_goTo(the.options.startIndex);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Event listeners
|
||||||
|
the.nextListener = function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.stepper.next', the);
|
||||||
|
};
|
||||||
|
|
||||||
|
the.previousListener = function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.stepper.previous', the);
|
||||||
|
};
|
||||||
|
|
||||||
|
the.stepListener = function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
if ( the.steps && the.steps.length > 0 ) {
|
||||||
|
for (var i = 0, len = the.steps.length; i < len; i++) {
|
||||||
|
if ( the.steps[i] === this ) {
|
||||||
|
the.clickedStepIndex = i + 1;
|
||||||
|
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.stepper.click', the);
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Event Handlers
|
||||||
|
KTUtil.addEvent(the.btnNext, 'click', the.nextListener);
|
||||||
|
|
||||||
|
KTUtil.addEvent(the.btnPrevious, 'click', the.previousListener);
|
||||||
|
|
||||||
|
the.stepListenerId = KTUtil.on(the.element, '[data-kt-stepper-action="step"]', 'click', the.stepListener);
|
||||||
|
|
||||||
|
// Bind Instance
|
||||||
|
KTUtil.data(the.element).set('stepper', the);
|
||||||
|
}
|
||||||
|
|
||||||
|
var _goTo = function(index) {
|
||||||
|
// Trigger "change" event
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.stepper.change', the);
|
||||||
|
|
||||||
|
// Skip if this step is already shown
|
||||||
|
if ( index === the.currentStepIndex || index > the.totalStepsNumber || index < 0 ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Validate step number
|
||||||
|
index = parseInt(index);
|
||||||
|
|
||||||
|
// Set current step
|
||||||
|
the.passedStepIndex = the.currentStepIndex;
|
||||||
|
the.currentStepIndex = index;
|
||||||
|
|
||||||
|
// Refresh elements
|
||||||
|
_refreshUI();
|
||||||
|
|
||||||
|
// Trigger "changed" event
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.stepper.changed', the);
|
||||||
|
|
||||||
|
return the;
|
||||||
|
}
|
||||||
|
|
||||||
|
var _goNext = function() {
|
||||||
|
return _goTo( _getNextStepIndex() );
|
||||||
|
}
|
||||||
|
|
||||||
|
var _goPrevious = function() {
|
||||||
|
return _goTo( _getPreviousStepIndex() );
|
||||||
|
}
|
||||||
|
|
||||||
|
var _goLast = function() {
|
||||||
|
return _goTo( _getLastStepIndex() );
|
||||||
|
}
|
||||||
|
|
||||||
|
var _goFirst = function() {
|
||||||
|
return _goTo( _getFirstStepIndex() );
|
||||||
|
}
|
||||||
|
|
||||||
|
var _refreshUI = function() {
|
||||||
|
var state = '';
|
||||||
|
|
||||||
|
if ( _isLastStep() ) {
|
||||||
|
state = 'last';
|
||||||
|
} else if ( _isFirstStep() ) {
|
||||||
|
state = 'first';
|
||||||
|
} else {
|
||||||
|
state = 'between';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set state class
|
||||||
|
KTUtil.removeClass(the.element, 'last');
|
||||||
|
KTUtil.removeClass(the.element, 'first');
|
||||||
|
KTUtil.removeClass(the.element, 'between');
|
||||||
|
|
||||||
|
KTUtil.addClass(the.element, state);
|
||||||
|
|
||||||
|
// Step Items
|
||||||
|
var elements = KTUtil.findAll(the.element, '[data-kt-stepper-element="nav"], [data-kt-stepper-element="content"], [data-kt-stepper-element="info"]');
|
||||||
|
|
||||||
|
if ( elements && elements.length > 0 ) {
|
||||||
|
for (var i = 0, len = elements.length; i < len; i++) {
|
||||||
|
var element = elements[i];
|
||||||
|
var index = KTUtil.index(element) + 1;
|
||||||
|
|
||||||
|
KTUtil.removeClass(element, 'current');
|
||||||
|
KTUtil.removeClass(element, 'completed');
|
||||||
|
KTUtil.removeClass(element, 'pending');
|
||||||
|
|
||||||
|
if ( index == the.currentStepIndex ) {
|
||||||
|
KTUtil.addClass(element, 'current');
|
||||||
|
|
||||||
|
if ( the.options.animation !== false && element.getAttribute('data-kt-stepper-element') == 'content' ) {
|
||||||
|
KTUtil.css(element, 'animationDuration', the.options.animationSpeed);
|
||||||
|
|
||||||
|
var animation = _getStepDirection(the.passedStepIndex) === 'previous' ? the.options.animationPreviousClass : the.options.animationNextClass;
|
||||||
|
KTUtil.animateClass(element, animation);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if ( index < the.currentStepIndex ) {
|
||||||
|
KTUtil.addClass(element, 'completed');
|
||||||
|
} else {
|
||||||
|
KTUtil.addClass(element, 'pending');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _isLastStep = function() {
|
||||||
|
return the.currentStepIndex === the.totalStepsNumber;
|
||||||
|
}
|
||||||
|
|
||||||
|
var _isFirstStep = function() {
|
||||||
|
return the.currentStepIndex === 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
var _isBetweenStep = function() {
|
||||||
|
return _isLastStep() === false && _isFirstStep() === false;
|
||||||
|
}
|
||||||
|
|
||||||
|
var _getNextStepIndex = function() {
|
||||||
|
if ( the.totalStepsNumber >= ( the.currentStepIndex + 1 ) ) {
|
||||||
|
return the.currentStepIndex + 1;
|
||||||
|
} else {
|
||||||
|
return the.totalStepsNumber;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _getPreviousStepIndex = function() {
|
||||||
|
if ( ( the.currentStepIndex - 1 ) > 1 ) {
|
||||||
|
return the.currentStepIndex - 1;
|
||||||
|
} else {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _getFirstStepIndex = function(){
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
var _getLastStepIndex = function() {
|
||||||
|
return the.totalStepsNumber;
|
||||||
|
}
|
||||||
|
|
||||||
|
var _getTotalStepsNumber = function() {
|
||||||
|
return the.totalStepsNumber;
|
||||||
|
}
|
||||||
|
|
||||||
|
var _getStepDirection = function(index) {
|
||||||
|
if ( index > the.currentStepIndex ) {
|
||||||
|
return 'next';
|
||||||
|
} else {
|
||||||
|
return 'previous';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _getStepContent = function(index) {
|
||||||
|
var content = KTUtil.findAll(the.element, '[data-kt-stepper-element="content"]');
|
||||||
|
|
||||||
|
if ( content[index-1] ) {
|
||||||
|
return content[index-1];
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _destroy = function() {
|
||||||
|
// Event Handlers
|
||||||
|
KTUtil.removeEvent(the.btnNext, 'click', the.nextListener);
|
||||||
|
|
||||||
|
KTUtil.removeEvent(the.btnPrevious, 'click', the.previousListener);
|
||||||
|
|
||||||
|
KTUtil.off(the.element, 'click', the.stepListenerId);
|
||||||
|
|
||||||
|
KTUtil.data(the.element).remove('stepper');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Construct Class
|
||||||
|
_construct();
|
||||||
|
|
||||||
|
///////////////////////
|
||||||
|
// ** Public API ** //
|
||||||
|
///////////////////////
|
||||||
|
|
||||||
|
// Plugin API
|
||||||
|
the.getElement = function(index) {
|
||||||
|
return the.element;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.goTo = function(index) {
|
||||||
|
return _goTo(index);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.goPrevious = function() {
|
||||||
|
return _goPrevious();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.goNext = function() {
|
||||||
|
return _goNext();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.goFirst = function() {
|
||||||
|
return _goFirst();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.goLast = function() {
|
||||||
|
return _goLast();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.getCurrentStepIndex = function() {
|
||||||
|
return the.currentStepIndex;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.getNextStepIndex = function() {
|
||||||
|
return _getNextStepIndex();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.getPassedStepIndex = function() {
|
||||||
|
return the.passedStepIndex;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.getClickedStepIndex = function() {
|
||||||
|
return the.clickedStepIndex;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.getPreviousStepIndex = function() {
|
||||||
|
return _getPreviousStepIndex();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.destroy = function() {
|
||||||
|
return _destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Event API
|
||||||
|
the.on = function(name, handler) {
|
||||||
|
return KTEventHandler.on(the.element, name, handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.one = function(name, handler) {
|
||||||
|
return KTEventHandler.one(the.element, name, handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.off = function(name, handlerId) {
|
||||||
|
return KTEventHandler.off(the.element, name, handlerId);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.trigger = function(name, event) {
|
||||||
|
return KTEventHandler.trigger(the.element, name, event, the, event);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Static methods
|
||||||
|
KTStepper.getInstance = function(element) {
|
||||||
|
if ( element !== null && KTUtil.data(element).has('stepper') ) {
|
||||||
|
return KTUtil.data(element).get('stepper');
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Webpack support
|
||||||
|
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
|
||||||
|
module.exports = KTStepper;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,410 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var KTStickyHandlersInitialized = false;
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTSticky = function(element, options) {
|
||||||
|
////////////////////////////
|
||||||
|
// ** Private Variables ** //
|
||||||
|
////////////////////////////
|
||||||
|
var the = this;
|
||||||
|
|
||||||
|
if ( typeof element === "undefined" || element === null ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Default Options
|
||||||
|
var defaultOptions = {
|
||||||
|
offset: 200,
|
||||||
|
reverse: false,
|
||||||
|
release: null,
|
||||||
|
animation: true,
|
||||||
|
animationSpeed: '0.3s',
|
||||||
|
animationClass: 'animation-slide-in-down'
|
||||||
|
};
|
||||||
|
////////////////////////////
|
||||||
|
// ** Private Methods ** //
|
||||||
|
////////////////////////////
|
||||||
|
|
||||||
|
var _construct = function() {
|
||||||
|
if ( KTUtil.data(element).has('sticky') === true ) {
|
||||||
|
the = KTUtil.data(element).get('sticky');
|
||||||
|
} else {
|
||||||
|
_init();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _init = function() {
|
||||||
|
the.element = element;
|
||||||
|
the.options = KTUtil.deepExtend({}, defaultOptions, options);
|
||||||
|
the.uid = KTUtil.getUniqueId('sticky');
|
||||||
|
the.name = the.element.getAttribute('data-kt-sticky-name');
|
||||||
|
the.attributeName = 'data-kt-sticky-' + the.name;
|
||||||
|
the.attributeName2 = 'data-kt-' + the.name;
|
||||||
|
the.eventTriggerState = true;
|
||||||
|
the.lastScrollTop = 0;
|
||||||
|
the.scrollHandler;
|
||||||
|
|
||||||
|
// Set initialized
|
||||||
|
the.element.setAttribute('data-kt-sticky', 'true');
|
||||||
|
|
||||||
|
// Event Handlers
|
||||||
|
window.addEventListener('scroll', _scroll);
|
||||||
|
|
||||||
|
// Initial Launch
|
||||||
|
_scroll();
|
||||||
|
|
||||||
|
// Bind Instance
|
||||||
|
KTUtil.data(the.element).set('sticky', the);
|
||||||
|
}
|
||||||
|
|
||||||
|
var _scroll = function(e) {
|
||||||
|
var offset = _getOption('offset');
|
||||||
|
var release = _getOption('release');
|
||||||
|
var reverse = _getOption('reverse');
|
||||||
|
var st;
|
||||||
|
var attrName;
|
||||||
|
var diff;
|
||||||
|
|
||||||
|
// Exit if false
|
||||||
|
if ( offset === false ) {
|
||||||
|
_disable();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
offset = parseInt(offset);
|
||||||
|
release = release ? document.querySelector(release) : null;
|
||||||
|
|
||||||
|
st = KTUtil.getScrollTop();
|
||||||
|
diff = document.documentElement.scrollHeight - window.innerHeight - KTUtil.getScrollTop();
|
||||||
|
|
||||||
|
var proceed = (!release || (release.offsetTop - release.clientHeight) > st);
|
||||||
|
|
||||||
|
if ( reverse === true ) { // Release on reverse scroll mode
|
||||||
|
if ( st > offset && proceed ) {
|
||||||
|
if ( document.body.hasAttribute(the.attributeName) === false) {
|
||||||
|
|
||||||
|
if (_enable() === false) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.body.setAttribute(the.attributeName, 'on');
|
||||||
|
document.body.setAttribute(the.attributeName2, 'on');
|
||||||
|
the.element.setAttribute("data-kt-sticky-enabled", "true");
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( the.eventTriggerState === true ) {
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.sticky.on', the);
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.sticky.change', the);
|
||||||
|
|
||||||
|
the.eventTriggerState = false;
|
||||||
|
}
|
||||||
|
} else { // Back scroll mode
|
||||||
|
if ( document.body.hasAttribute(the.attributeName) === true) {
|
||||||
|
_disable();
|
||||||
|
document.body.removeAttribute(the.attributeName);
|
||||||
|
document.body.removeAttribute(the.attributeName2);
|
||||||
|
the.element.removeAttribute("data-kt-sticky-enabled");
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( the.eventTriggerState === false ) {
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.sticky.off', the);
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.sticky.change', the);
|
||||||
|
the.eventTriggerState = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
the.lastScrollTop = st;
|
||||||
|
} else { // Classic scroll mode
|
||||||
|
if ( st > offset && proceed ) {
|
||||||
|
if ( document.body.hasAttribute(the.attributeName) === false) {
|
||||||
|
|
||||||
|
if (_enable() === false) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.body.setAttribute(the.attributeName, 'on');
|
||||||
|
document.body.setAttribute(the.attributeName2, 'on');
|
||||||
|
the.element.setAttribute("data-kt-sticky-enabled", "true");
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( the.eventTriggerState === true ) {
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.sticky.on', the);
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.sticky.change', the);
|
||||||
|
the.eventTriggerState = false;
|
||||||
|
}
|
||||||
|
} else { // back scroll mode
|
||||||
|
if ( document.body.hasAttribute(the.attributeName) === true ) {
|
||||||
|
_disable();
|
||||||
|
document.body.removeAttribute(the.attributeName);
|
||||||
|
document.body.removeAttribute(the.attributeName2);
|
||||||
|
the.element.removeAttribute("data-kt-sticky-enabled");
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( the.eventTriggerState === false ) {
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.sticky.off', the);
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.sticky.change', the);
|
||||||
|
the.eventTriggerState = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (release) {
|
||||||
|
if ( release.offsetTop - release.clientHeight > st ) {
|
||||||
|
the.element.setAttribute('data-kt-sticky-released', 'true');
|
||||||
|
} else {
|
||||||
|
the.element.removeAttribute('data-kt-sticky-released');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _enable = function(update) {
|
||||||
|
var top = _getOption('top');
|
||||||
|
top = top ? parseInt(top) : 0;
|
||||||
|
|
||||||
|
var left = _getOption('left');
|
||||||
|
var right = _getOption('right');
|
||||||
|
var width = _getOption('width');
|
||||||
|
var zindex = _getOption('zindex');
|
||||||
|
var dependencies = _getOption('dependencies');
|
||||||
|
var classes = _getOption('class');
|
||||||
|
|
||||||
|
var height = _calculateHeight();
|
||||||
|
var heightOffset = _getOption('height-offset');
|
||||||
|
heightOffset = heightOffset ? parseInt(heightOffset) : 0;
|
||||||
|
|
||||||
|
if (height + heightOffset + top > KTUtil.getViewPort().height) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( update !== true && _getOption('animation') === true ) {
|
||||||
|
KTUtil.css(the.element, 'animationDuration', _getOption('animationSpeed'));
|
||||||
|
KTUtil.animateClass(the.element, 'animation ' + _getOption('animationClass'));
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( classes !== null ) {
|
||||||
|
KTUtil.addClass(the.element, classes);
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( zindex !== null ) {
|
||||||
|
KTUtil.css(the.element, 'z-index', zindex);
|
||||||
|
KTUtil.css(the.element, 'position', 'fixed');
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( top >= 0 ) {
|
||||||
|
KTUtil.css(the.element, 'top', String(top) + 'px');
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( width !== null ) {
|
||||||
|
if (width['target']) {
|
||||||
|
var targetElement = document.querySelector(width['target']);
|
||||||
|
if (targetElement) {
|
||||||
|
width = KTUtil.css(targetElement, 'width');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
KTUtil.css(the.element, 'width', width);
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( left !== null ) {
|
||||||
|
if ( String(left).toLowerCase() === 'auto' ) {
|
||||||
|
var offsetLeft = KTUtil.offset(the.element).left;
|
||||||
|
|
||||||
|
if ( offsetLeft >= 0 ) {
|
||||||
|
KTUtil.css(the.element, 'left', String(offsetLeft) + 'px');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
KTUtil.css(the.element, 'left', left);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( right !== null ) {
|
||||||
|
KTUtil.css(the.element, 'right', right);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Height dependencies
|
||||||
|
if ( dependencies !== null ) {
|
||||||
|
var dependencyElements = document.querySelectorAll(dependencies);
|
||||||
|
|
||||||
|
if ( dependencyElements && dependencyElements.length > 0 ) {
|
||||||
|
for ( var i = 0, len = dependencyElements.length; i < len; i++ ) {
|
||||||
|
KTUtil.css(dependencyElements[i], 'padding-top', String(height) + 'px');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _disable = function() {
|
||||||
|
KTUtil.css(the.element, 'top', '');
|
||||||
|
KTUtil.css(the.element, 'width', '');
|
||||||
|
KTUtil.css(the.element, 'left', '');
|
||||||
|
KTUtil.css(the.element, 'right', '');
|
||||||
|
KTUtil.css(the.element, 'z-index', '');
|
||||||
|
KTUtil.css(the.element, 'position', '');
|
||||||
|
|
||||||
|
var dependencies = _getOption('dependencies');
|
||||||
|
var classes = _getOption('class');
|
||||||
|
|
||||||
|
if ( classes !== null ) {
|
||||||
|
KTUtil.removeClass(the.element, classes);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Height dependencies
|
||||||
|
if ( dependencies !== null ) {
|
||||||
|
var dependencyElements = document.querySelectorAll(dependencies);
|
||||||
|
|
||||||
|
if ( dependencyElements && dependencyElements.length > 0 ) {
|
||||||
|
for ( var i = 0, len = dependencyElements.length; i < len; i++ ) {
|
||||||
|
KTUtil.css(dependencyElements[i], 'padding-top', '');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _check = function() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
var _calculateHeight = function() {
|
||||||
|
var height = parseFloat(KTUtil.css(the.element, 'height'));
|
||||||
|
|
||||||
|
height = height + parseFloat(KTUtil.css(the.element, 'margin-top'));
|
||||||
|
height = height + parseFloat(KTUtil.css(the.element, 'margin-bottom'));
|
||||||
|
|
||||||
|
if (KTUtil.css(element, 'border-top')) {
|
||||||
|
height = height + parseFloat(KTUtil.css(the.element, 'border-top'));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (KTUtil.css(element, 'border-bottom')) {
|
||||||
|
height = height + parseFloat(KTUtil.css(the.element, 'border-bottom'));
|
||||||
|
}
|
||||||
|
|
||||||
|
return height;
|
||||||
|
}
|
||||||
|
|
||||||
|
var _getOption = function(name) {
|
||||||
|
if ( the.element.hasAttribute('data-kt-sticky-' + name) === true ) {
|
||||||
|
var attr = the.element.getAttribute('data-kt-sticky-' + name);
|
||||||
|
var value = KTUtil.getResponsiveValue(attr);
|
||||||
|
|
||||||
|
if ( value !== null && String(value) === 'true' ) {
|
||||||
|
value = true;
|
||||||
|
} else if ( value !== null && String(value) === 'false' ) {
|
||||||
|
value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return value;
|
||||||
|
} else {
|
||||||
|
var optionName = KTUtil.snakeToCamel(name);
|
||||||
|
|
||||||
|
if ( the.options[optionName] ) {
|
||||||
|
return KTUtil.getResponsiveValue(the.options[optionName]);
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _destroy = function() {
|
||||||
|
window.removeEventListener('scroll', _scroll);
|
||||||
|
KTUtil.data(the.element).remove('sticky');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Construct Class
|
||||||
|
_construct();
|
||||||
|
|
||||||
|
///////////////////////
|
||||||
|
// ** Public API ** //
|
||||||
|
///////////////////////
|
||||||
|
|
||||||
|
// Methods
|
||||||
|
the.update = function() {
|
||||||
|
if ( document.body.hasAttribute(the.attributeName) === true ) {
|
||||||
|
_disable();
|
||||||
|
document.body.removeAttribute(the.attributeName);
|
||||||
|
document.body.removeAttribute(the.attributeName2);
|
||||||
|
_enable(true);
|
||||||
|
document.body.setAttribute(the.attributeName, 'on');
|
||||||
|
document.body.setAttribute(the.attributeName2, 'on');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
the.destroy = function() {
|
||||||
|
return _destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Event API
|
||||||
|
the.on = function(name, handler) {
|
||||||
|
return KTEventHandler.on(the.element, name, handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.one = function(name, handler) {
|
||||||
|
return KTEventHandler.one(the.element, name, handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.off = function(name, handlerId) {
|
||||||
|
return KTEventHandler.off(the.element, name, handlerId);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.trigger = function(name, event) {
|
||||||
|
return KTEventHandler.trigger(the.element, name, event, the, event);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Static methods
|
||||||
|
KTSticky.getInstance = function(element) {
|
||||||
|
if ( element !== null && KTUtil.data(element).has('sticky') ) {
|
||||||
|
return KTUtil.data(element).get('sticky');
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create instances
|
||||||
|
KTSticky.createInstances = function(selector = '[data-kt-sticky="true"]') {
|
||||||
|
// Initialize Menus
|
||||||
|
var elements = document.body.querySelectorAll(selector);
|
||||||
|
var sticky;
|
||||||
|
|
||||||
|
if ( elements && elements.length > 0 ) {
|
||||||
|
for (var i = 0, len = elements.length; i < len; i++) {
|
||||||
|
sticky = new KTSticky(elements[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Window resize handler
|
||||||
|
KTSticky.handleResize = function() {
|
||||||
|
window.addEventListener('resize', function() {
|
||||||
|
var timer;
|
||||||
|
|
||||||
|
KTUtil.throttle(timer, function() {
|
||||||
|
// Locate and update Offcanvas instances on window resize
|
||||||
|
var elements = document.body.querySelectorAll('[data-kt-sticky="true"]');
|
||||||
|
|
||||||
|
if ( elements && elements.length > 0 ) {
|
||||||
|
for (var i = 0, len = elements.length; i < len; i++) {
|
||||||
|
var sticky = KTSticky.getInstance(elements[i]);
|
||||||
|
if (sticky) {
|
||||||
|
sticky.update();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 200);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Global initialization
|
||||||
|
KTSticky.init = function() {
|
||||||
|
KTSticky.createInstances();
|
||||||
|
|
||||||
|
if (KTStickyHandlersInitialized === false) {
|
||||||
|
KTSticky.handleResize();
|
||||||
|
KTStickyHandlersInitialized = true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Webpack support
|
||||||
|
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
|
||||||
|
module.exports = KTSticky;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,180 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var KTSwapperHandlersInitialized = false;
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTSwapper = function(element, options) {
|
||||||
|
////////////////////////////
|
||||||
|
// ** Private Variables ** //
|
||||||
|
////////////////////////////
|
||||||
|
var the = this;
|
||||||
|
|
||||||
|
if ( typeof element === "undefined" || element === null ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Default Options
|
||||||
|
var defaultOptions = {
|
||||||
|
mode: 'append'
|
||||||
|
};
|
||||||
|
|
||||||
|
////////////////////////////
|
||||||
|
// ** Private Methods ** //
|
||||||
|
////////////////////////////
|
||||||
|
|
||||||
|
var _construct = function() {
|
||||||
|
if ( KTUtil.data(element).has('swapper') === true ) {
|
||||||
|
the = KTUtil.data(element).get('swapper');
|
||||||
|
} else {
|
||||||
|
_init();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _init = function() {
|
||||||
|
the.element = element;
|
||||||
|
the.options = KTUtil.deepExtend({}, defaultOptions, options);
|
||||||
|
|
||||||
|
// Set initialized
|
||||||
|
the.element.setAttribute('data-kt-swapper', 'true');
|
||||||
|
|
||||||
|
// Initial update
|
||||||
|
_update();
|
||||||
|
|
||||||
|
// Bind Instance
|
||||||
|
KTUtil.data(the.element).set('swapper', the);
|
||||||
|
}
|
||||||
|
|
||||||
|
var _update = function(e) {
|
||||||
|
var parentSelector = _getOption('parent');
|
||||||
|
|
||||||
|
var mode = _getOption('mode');
|
||||||
|
var parentElement = parentSelector ? document.querySelector(parentSelector) : null;
|
||||||
|
|
||||||
|
|
||||||
|
if (parentElement && element.parentNode !== parentElement) {
|
||||||
|
if (mode === 'prepend') {
|
||||||
|
parentElement.prepend(element);
|
||||||
|
} else if (mode === 'append') {
|
||||||
|
parentElement.append(element);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _getOption = function(name) {
|
||||||
|
if ( the.element.hasAttribute('data-kt-swapper-' + name) === true ) {
|
||||||
|
var attr = the.element.getAttribute('data-kt-swapper-' + name);
|
||||||
|
var value = KTUtil.getResponsiveValue(attr);
|
||||||
|
|
||||||
|
if ( value !== null && String(value) === 'true' ) {
|
||||||
|
value = true;
|
||||||
|
} else if ( value !== null && String(value) === 'false' ) {
|
||||||
|
value = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return value;
|
||||||
|
} else {
|
||||||
|
var optionName = KTUtil.snakeToCamel(name);
|
||||||
|
|
||||||
|
if ( the.options[optionName] ) {
|
||||||
|
return KTUtil.getResponsiveValue(the.options[optionName]);
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _destroy = function() {
|
||||||
|
KTUtil.data(the.element).remove('swapper');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Construct Class
|
||||||
|
_construct();
|
||||||
|
|
||||||
|
///////////////////////
|
||||||
|
// ** Public API ** //
|
||||||
|
///////////////////////
|
||||||
|
|
||||||
|
// Methods
|
||||||
|
the.update = function() {
|
||||||
|
_update();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.destroy = function() {
|
||||||
|
return _destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Event API
|
||||||
|
the.on = function(name, handler) {
|
||||||
|
return KTEventHandler.on(the.element, name, handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.one = function(name, handler) {
|
||||||
|
return KTEventHandler.one(the.element, name, handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.off = function(name, handlerId) {
|
||||||
|
return KTEventHandler.off(the.element, name, handlerId);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.trigger = function(name, event) {
|
||||||
|
return KTEventHandler.trigger(the.element, name, event, the, event);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Static methods
|
||||||
|
KTSwapper.getInstance = function(element) {
|
||||||
|
if ( element !== null && KTUtil.data(element).has('swapper') ) {
|
||||||
|
return KTUtil.data(element).get('swapper');
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create instances
|
||||||
|
KTSwapper.createInstances = function(selector = '[data-kt-swapper="true"]') {
|
||||||
|
// Initialize Menus
|
||||||
|
var elements = document.querySelectorAll(selector);
|
||||||
|
var swapper;
|
||||||
|
|
||||||
|
if ( elements && elements.length > 0 ) {
|
||||||
|
for (var i = 0, len = elements.length; i < len; i++) {
|
||||||
|
swapper = new KTSwapper(elements[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Window resize handler
|
||||||
|
KTSwapper.handleResize = function() {
|
||||||
|
window.addEventListener('resize', function() {
|
||||||
|
var timer;
|
||||||
|
|
||||||
|
KTUtil.throttle(timer, function() {
|
||||||
|
// Locate and update Offcanvas instances on window resize
|
||||||
|
var elements = document.querySelectorAll('[data-kt-swapper="true"]');
|
||||||
|
|
||||||
|
if ( elements && elements.length > 0 ) {
|
||||||
|
for (var i = 0, len = elements.length; i < len; i++) {
|
||||||
|
var swapper = KTSwapper.getInstance(elements[i]);
|
||||||
|
if (swapper) {
|
||||||
|
swapper.update();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, 200);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// Global initialization
|
||||||
|
KTSwapper.init = function() {
|
||||||
|
KTSwapper.createInstances();
|
||||||
|
|
||||||
|
if (KTSwapperHandlersInitialized === false) {
|
||||||
|
KTSwapper.handleResize();
|
||||||
|
KTSwapperHandlersInitialized = true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Webpack support
|
||||||
|
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
|
||||||
|
module.exports = KTSwapper;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,216 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTToggle = function(element, options) {
|
||||||
|
////////////////////////////
|
||||||
|
// ** Private variables ** //
|
||||||
|
////////////////////////////
|
||||||
|
var the = this;
|
||||||
|
|
||||||
|
if (!element) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Default Options
|
||||||
|
var defaultOptions = {
|
||||||
|
saveState: true
|
||||||
|
};
|
||||||
|
|
||||||
|
////////////////////////////
|
||||||
|
// ** Private methods ** //
|
||||||
|
////////////////////////////
|
||||||
|
|
||||||
|
var _construct = function() {
|
||||||
|
if ( KTUtil.data(element).has('toggle') === true ) {
|
||||||
|
the = KTUtil.data(element).get('toggle');
|
||||||
|
} else {
|
||||||
|
_init();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var _init = function() {
|
||||||
|
// Variables
|
||||||
|
the.options = KTUtil.deepExtend({}, defaultOptions, options);
|
||||||
|
the.uid = KTUtil.getUniqueId('toggle');
|
||||||
|
|
||||||
|
// Elements
|
||||||
|
the.element = element;
|
||||||
|
|
||||||
|
the.target = document.querySelector(the.element.getAttribute('data-kt-toggle-target')) ? document.querySelector(the.element.getAttribute('data-kt-toggle-target')) : the.element;
|
||||||
|
the.state = the.element.hasAttribute('data-kt-toggle-state') ? the.element.getAttribute('data-kt-toggle-state') : '';
|
||||||
|
the.mode = the.element.hasAttribute('data-kt-toggle-mode') ? the.element.getAttribute('data-kt-toggle-mode') : '';
|
||||||
|
the.attribute = 'data-kt-' + the.element.getAttribute('data-kt-toggle-name');
|
||||||
|
|
||||||
|
// Event Handlers
|
||||||
|
_handlers();
|
||||||
|
|
||||||
|
// Bind Instance
|
||||||
|
KTUtil.data(the.element).set('toggle', the);
|
||||||
|
}
|
||||||
|
|
||||||
|
var _handlers = function() {
|
||||||
|
KTUtil.addEvent(the.element, 'click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
if ( the.mode !== '' ) {
|
||||||
|
if ( the.mode === 'off' && _isEnabled() === false ) {
|
||||||
|
_toggle();
|
||||||
|
} else if ( the.mode === 'on' && _isEnabled() === true ) {
|
||||||
|
_toggle();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
_toggle();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Event handlers
|
||||||
|
var _toggle = function() {
|
||||||
|
// Trigger "after.toggle" event
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.toggle.change', the);
|
||||||
|
|
||||||
|
if ( _isEnabled() ) {
|
||||||
|
_disable();
|
||||||
|
} else {
|
||||||
|
_enable();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Trigger "before.toggle" event
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.toggle.changed', the);
|
||||||
|
|
||||||
|
return the;
|
||||||
|
}
|
||||||
|
|
||||||
|
var _enable = function() {
|
||||||
|
if ( _isEnabled() === true ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.toggle.enable', the);
|
||||||
|
|
||||||
|
the.target.setAttribute(the.attribute, 'on');
|
||||||
|
|
||||||
|
if (the.state.length > 0) {
|
||||||
|
the.element.classList.add(the.state);
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( typeof KTCookie !== 'undefined' && the.options.saveState === true ) {
|
||||||
|
KTCookie.set(the.attribute, 'on');
|
||||||
|
}
|
||||||
|
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.toggle.enabled', the);
|
||||||
|
|
||||||
|
return the;
|
||||||
|
}
|
||||||
|
|
||||||
|
var _disable = function() {
|
||||||
|
if ( _isEnabled() === false ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.toggle.disable', the);
|
||||||
|
|
||||||
|
the.target.removeAttribute(the.attribute);
|
||||||
|
|
||||||
|
if (the.state.length > 0) {
|
||||||
|
the.element.classList.remove(the.state);
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( typeof KTCookie !== 'undefined' && the.options.saveState === true ) {
|
||||||
|
KTCookie.remove(the.attribute);
|
||||||
|
}
|
||||||
|
|
||||||
|
KTEventHandler.trigger(the.element, 'kt.toggle.disabled', the);
|
||||||
|
|
||||||
|
return the;
|
||||||
|
}
|
||||||
|
|
||||||
|
var _isEnabled = function() {
|
||||||
|
return (String(the.target.getAttribute(the.attribute)).toLowerCase() === 'on');
|
||||||
|
}
|
||||||
|
|
||||||
|
var _destroy = function() {
|
||||||
|
KTUtil.data(the.element).remove('toggle');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Construct class
|
||||||
|
_construct();
|
||||||
|
|
||||||
|
///////////////////////
|
||||||
|
// ** Public API ** //
|
||||||
|
///////////////////////
|
||||||
|
|
||||||
|
// Plugin API
|
||||||
|
the.toggle = function() {
|
||||||
|
return _toggle();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.enable = function() {
|
||||||
|
return _enable();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.disable = function() {
|
||||||
|
return _disable();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.isEnabled = function() {
|
||||||
|
return _isEnabled();
|
||||||
|
}
|
||||||
|
|
||||||
|
the.goElement = function() {
|
||||||
|
return the.element;
|
||||||
|
}
|
||||||
|
|
||||||
|
the.destroy = function() {
|
||||||
|
return _destroy();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Event API
|
||||||
|
the.on = function(name, handler) {
|
||||||
|
return KTEventHandler.on(the.element, name, handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.one = function(name, handler) {
|
||||||
|
return KTEventHandler.one(the.element, name, handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.off = function(name, handlerId) {
|
||||||
|
return KTEventHandler.off(the.element, name, handlerId);
|
||||||
|
}
|
||||||
|
|
||||||
|
the.trigger = function(name, event) {
|
||||||
|
return KTEventHandler.trigger(the.element, name, event, the, event);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Static methods
|
||||||
|
KTToggle.getInstance = function(element) {
|
||||||
|
if ( element !== null && KTUtil.data(element).has('toggle') ) {
|
||||||
|
return KTUtil.data(element).get('toggle');
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create instances
|
||||||
|
KTToggle.createInstances = function(selector = '[data-kt-toggle]') {
|
||||||
|
// Get instances
|
||||||
|
var elements = document.body.querySelectorAll(selector);
|
||||||
|
|
||||||
|
if ( elements && elements.length > 0 ) {
|
||||||
|
for (var i = 0, len = elements.length; i < len; i++) {
|
||||||
|
// Initialize instances
|
||||||
|
new KTToggle(elements[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Global initialization
|
||||||
|
KTToggle.init = function() {
|
||||||
|
KTToggle.createInstances();
|
||||||
|
};
|
||||||
|
|
||||||
|
// Webpack support
|
||||||
|
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
|
||||||
|
module.exports = KTToggle;
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,68 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTAccountAPIKeys = function () {
|
||||||
|
// Private functions
|
||||||
|
var initLicenceCopy = function() {
|
||||||
|
KTUtil.each(document.querySelectorAll('#kt_api_keys_table [data-action="copy"]'), function(button) {
|
||||||
|
var tr = button.closest('tr');
|
||||||
|
var license = KTUtil.find(tr, '[data-bs-target="license"]');
|
||||||
|
|
||||||
|
var clipboard = new ClipboardJS(button, {
|
||||||
|
target: license,
|
||||||
|
text: function() {
|
||||||
|
return license.innerHTML;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
clipboard.on('success', function(e) {
|
||||||
|
// Icons
|
||||||
|
var copyIcon = button.querySelector('.ki-copy');
|
||||||
|
var checkIcon = button.querySelector('.ki-check');
|
||||||
|
|
||||||
|
// exit if check icon is already shown
|
||||||
|
if (checkIcon) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create check icon
|
||||||
|
checkIcon = document.createElement('i');
|
||||||
|
checkIcon.classList.add('ki-solid');
|
||||||
|
checkIcon.classList.add('ki-check');
|
||||||
|
checkIcon.classList.add('fs-2');
|
||||||
|
|
||||||
|
// Append check icon
|
||||||
|
button.appendChild(checkIcon);
|
||||||
|
|
||||||
|
// Highlight target
|
||||||
|
license.classList.add('text-success');
|
||||||
|
|
||||||
|
// Hide copy icon
|
||||||
|
copyIcon.classList.add('d-none');
|
||||||
|
|
||||||
|
// Set 3 seconds timeout to hide the check icon and show copy icon back
|
||||||
|
setTimeout(function() {
|
||||||
|
// Remove check icon
|
||||||
|
copyIcon.classList.remove('d-none');
|
||||||
|
// Show check icon back
|
||||||
|
button.removeChild(checkIcon);
|
||||||
|
|
||||||
|
// Remove highlight
|
||||||
|
license.classList.remove('text-success');
|
||||||
|
}, 3000);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function () {
|
||||||
|
initLicenceCopy();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function() {
|
||||||
|
KTAccountAPIKeys.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,138 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTAccountBillingGeneral = function () {
|
||||||
|
// Private variables
|
||||||
|
var cancelSubscriptionButton;
|
||||||
|
|
||||||
|
// Private functions
|
||||||
|
var handlePlan = function () {
|
||||||
|
cancelSubscriptionButton.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
swal.fire({
|
||||||
|
text: "Are you sure you would like to cancel your subscription ?",
|
||||||
|
icon: "warning",
|
||||||
|
buttonsStyling: false,
|
||||||
|
showDenyButton: true,
|
||||||
|
confirmButtonText: "Yes",
|
||||||
|
denyButtonText: 'No',
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-primary",
|
||||||
|
denyButton: "btn btn-light-danger"
|
||||||
|
}
|
||||||
|
}).then((result) => {
|
||||||
|
if (result.isConfirmed) {
|
||||||
|
Swal.fire({
|
||||||
|
text: 'Your subscription has been canceled.',
|
||||||
|
icon: 'success',
|
||||||
|
confirmButtonText: "Ok",
|
||||||
|
buttonsStyling: false,
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-light-primary"
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var handleCardDelete = function() {
|
||||||
|
KTUtil.on(document.body, '[data-kt-billing-action="card-delete"]', 'click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
var el = this;
|
||||||
|
|
||||||
|
swal.fire({
|
||||||
|
text: "Are you sure you would like to delete selected card ?",
|
||||||
|
icon: "warning",
|
||||||
|
buttonsStyling: false,
|
||||||
|
showDenyButton: true,
|
||||||
|
confirmButtonText: "Yes",
|
||||||
|
denyButtonText: 'No',
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-primary",
|
||||||
|
denyButton: "btn btn-light-danger"
|
||||||
|
}
|
||||||
|
}).then((result) => {
|
||||||
|
if (result.isConfirmed) {
|
||||||
|
el.setAttribute('data-kt-indicator', 'on');
|
||||||
|
el.disabled = true;
|
||||||
|
|
||||||
|
setTimeout(function() {
|
||||||
|
Swal.fire({
|
||||||
|
text: 'Your selected card has been successfully deleted',
|
||||||
|
icon: 'success',
|
||||||
|
confirmButtonText: "Ok",
|
||||||
|
buttonsStyling: false,
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-light-primary"
|
||||||
|
}
|
||||||
|
}).then((result) => {
|
||||||
|
el.closest('[data-kt-billing-element="card"]').remove();
|
||||||
|
});
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var handleAddressDelete = function() {
|
||||||
|
KTUtil.on(document.body, '[data-kt-billing-action="address-delete"]', 'click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
var el = this;
|
||||||
|
|
||||||
|
swal.fire({
|
||||||
|
text: "Are you sure you would like to delete selected address ?",
|
||||||
|
icon: "warning",
|
||||||
|
buttonsStyling: false,
|
||||||
|
showDenyButton: true,
|
||||||
|
confirmButtonText: "Yes",
|
||||||
|
denyButtonText: 'No',
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-primary",
|
||||||
|
denyButton: "btn btn-light-danger"
|
||||||
|
}
|
||||||
|
}).then((result) => {
|
||||||
|
if (result.isConfirmed) {
|
||||||
|
el.setAttribute('data-kt-indicator', 'on');
|
||||||
|
el.disabled = true;
|
||||||
|
|
||||||
|
setTimeout(function() {
|
||||||
|
Swal.fire({
|
||||||
|
text: 'Your selected address has been successfully deleted',
|
||||||
|
icon: 'success',
|
||||||
|
confirmButtonText: "Ok",
|
||||||
|
buttonsStyling: false,
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-light-primary"
|
||||||
|
}
|
||||||
|
}).then((result) => {
|
||||||
|
el.closest('[data-kt-billing-element="address"]').remove();
|
||||||
|
});
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function () {
|
||||||
|
cancelSubscriptionButton = document.querySelector('#kt_account_billing_cancel_subscription_btn');
|
||||||
|
|
||||||
|
if ( cancelSubscriptionButton ) {
|
||||||
|
handlePlan();
|
||||||
|
}
|
||||||
|
|
||||||
|
handleCardDelete();
|
||||||
|
handleAddressDelete();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function() {
|
||||||
|
KTAccountBillingGeneral.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,108 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTDatatablesClassic = function () {
|
||||||
|
// Private functions
|
||||||
|
|
||||||
|
var initClassic = function () {
|
||||||
|
|
||||||
|
// Set date data order
|
||||||
|
const table = document.getElementById('kt_orders_classic');
|
||||||
|
const tableRows = table.querySelectorAll('tbody tr');
|
||||||
|
|
||||||
|
tableRows.forEach(row => {
|
||||||
|
const dateRow = row.querySelectorAll('td');
|
||||||
|
const realDate = moment(dateRow[1].innerHTML, "MMM D, YYYY").format('x');
|
||||||
|
dateRow[1].setAttribute('data-order', realDate);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Init datatable --- more info on datatables: https://datatables.net/manual/
|
||||||
|
const datatable = $(table).DataTable({
|
||||||
|
"info": false,
|
||||||
|
'order': []
|
||||||
|
});
|
||||||
|
|
||||||
|
// Filter dropdown elements
|
||||||
|
const filterOrders = document.getElementById('kt_filter_orders');
|
||||||
|
const filterYear = document.getElementById('kt_filter_year');
|
||||||
|
|
||||||
|
// Filter by order status --- official docs reference: https://datatables.net/reference/api/search()
|
||||||
|
filterOrders.addEventListener('change', function (e) {
|
||||||
|
datatable.column(3).search(e.target.value).draw();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Filter by date --- official docs reference: https://momentjs.com/docs/
|
||||||
|
var minDate;
|
||||||
|
var maxDate;
|
||||||
|
filterYear.addEventListener('change', function (e) {
|
||||||
|
const value = e.target.value;
|
||||||
|
switch (value) {
|
||||||
|
case 'thisyear': {
|
||||||
|
minDate = moment().startOf('year').format('x');
|
||||||
|
maxDate = moment().endOf('year').format('x');
|
||||||
|
datatable.draw();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 'thismonth': {
|
||||||
|
minDate = moment().startOf('month').format('x');
|
||||||
|
maxDate = moment().endOf('month').format('x');
|
||||||
|
datatable.draw();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 'lastmonth': {
|
||||||
|
minDate = moment().subtract(1, 'months').startOf('month').format('x');
|
||||||
|
maxDate = moment().subtract(1, 'months').endOf('month').format('x');
|
||||||
|
datatable.draw();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 'last90days': {
|
||||||
|
minDate = moment().subtract(30, 'days').format('x');
|
||||||
|
maxDate = moment().format('x');
|
||||||
|
datatable.draw();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
default: {
|
||||||
|
minDate = moment().subtract(100, 'years').startOf('month').format('x');
|
||||||
|
maxDate = moment().add(1, 'months').endOf('month').format('x');
|
||||||
|
datatable.draw();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Date range filter --- offical docs reference: https://datatables.net/examples/plug-ins/range_filtering.html
|
||||||
|
$.fn.dataTable.ext.search.push(
|
||||||
|
function (settings, data, dataIndex) {
|
||||||
|
var min = minDate;
|
||||||
|
var max = maxDate;
|
||||||
|
var date = parseFloat(moment(data[1]).format('x')) || 0; // use data for the age column
|
||||||
|
|
||||||
|
if ((isNaN(min) && isNaN(max)) ||
|
||||||
|
(isNaN(min) && date <= max) ||
|
||||||
|
(min <= date && isNaN(max)) ||
|
||||||
|
(min <= date && date <= max)) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// Search --- official docs reference: https://datatables.net/reference/api/search()
|
||||||
|
var filterSearch = document.getElementById('kt_filter_search');
|
||||||
|
filterSearch.addEventListener('keyup', function (e) {
|
||||||
|
datatable.search(e.target.value).draw();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function () {
|
||||||
|
initClassic();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function() {
|
||||||
|
KTDatatablesClassic.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTAccountReferralsReferralProgram = function () {
|
||||||
|
// Private functions
|
||||||
|
|
||||||
|
var initReferralProgrammClipboard = function() {
|
||||||
|
var button = document.querySelector('#kt_referral_program_link_copy_btn');
|
||||||
|
var input = document.querySelector('#kt_referral_link_input');
|
||||||
|
var clipboard = new ClipboardJS(button);
|
||||||
|
|
||||||
|
clipboard.on('success', function(e) {
|
||||||
|
var buttonCaption = button.innerHTML;
|
||||||
|
//Add bgcolor
|
||||||
|
input.classList.add('bg-success');
|
||||||
|
input.classList.add('text-inverse-success');
|
||||||
|
|
||||||
|
button.innerHTML = 'Copied!';
|
||||||
|
|
||||||
|
setTimeout(function() {
|
||||||
|
button.innerHTML = buttonCaption;
|
||||||
|
|
||||||
|
// Remove bgcolor
|
||||||
|
input.classList.remove('bg-success');
|
||||||
|
input.classList.remove('text-inverse-success');
|
||||||
|
}, 3000); // 3seconds
|
||||||
|
|
||||||
|
e.clearSelection();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function () {
|
||||||
|
initReferralProgrammClipboard();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function() {
|
||||||
|
KTAccountReferralsReferralProgram.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,68 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTAccountSecurityLicenseUsage = function () {
|
||||||
|
// Private functions
|
||||||
|
var initLicenceCopy = function() {
|
||||||
|
KTUtil.each(document.querySelectorAll('#kt_security_license_usage_table [data-action="copy"]'), function(button) {
|
||||||
|
var tr = button.closest('tr');
|
||||||
|
var license = KTUtil.find(tr, '[data-bs-target="license"]');
|
||||||
|
|
||||||
|
var clipboard = new ClipboardJS(button, {
|
||||||
|
target: license,
|
||||||
|
text: function() {
|
||||||
|
return license.innerHTML;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
clipboard.on('success', function(e) {
|
||||||
|
// Icons
|
||||||
|
var copyIcon = button.querySelector('.ki-copy');
|
||||||
|
var checkIcon = button.querySelector('.ki-check');
|
||||||
|
|
||||||
|
// exit if check icon is already shown
|
||||||
|
if (checkIcon) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create check icon
|
||||||
|
checkIcon = document.createElement('i');
|
||||||
|
checkIcon.classList.add('ki-solid');
|
||||||
|
checkIcon.classList.add('ki-check');
|
||||||
|
checkIcon.classList.add('fs-2');
|
||||||
|
|
||||||
|
// Append check icon
|
||||||
|
button.appendChild(checkIcon);
|
||||||
|
|
||||||
|
// Highlight target
|
||||||
|
license.classList.add('text-success');
|
||||||
|
|
||||||
|
// Hide copy icon
|
||||||
|
copyIcon.classList.add('d-none');
|
||||||
|
|
||||||
|
// Set 3 seconds timeout to hide the check icon and show copy icon back
|
||||||
|
setTimeout(function() {
|
||||||
|
// Remove check icon
|
||||||
|
copyIcon.classList.remove('d-none');
|
||||||
|
// Show check icon back
|
||||||
|
button.removeChild(checkIcon);
|
||||||
|
|
||||||
|
// Remove highlight
|
||||||
|
license.classList.remove('text-success');
|
||||||
|
}, 3000);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function () {
|
||||||
|
initLicenceCopy();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function() {
|
||||||
|
KTAccountSecurityLicenseUsage.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,155 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTAccountSecuritySummary = function () {
|
||||||
|
// Private functions
|
||||||
|
var initChart = function(tabSelector, chartSelector, data1, data2, initByDefault) {
|
||||||
|
var element = document.querySelector(chartSelector);
|
||||||
|
var height = parseInt(KTUtil.css(element, 'height'));
|
||||||
|
|
||||||
|
if (!element) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var options = {
|
||||||
|
series: [{
|
||||||
|
name: 'Net Profit',
|
||||||
|
data: data1
|
||||||
|
}, {
|
||||||
|
name: 'Revenue',
|
||||||
|
data: data2
|
||||||
|
}],
|
||||||
|
chart: {
|
||||||
|
fontFamily: 'inherit',
|
||||||
|
type: 'bar',
|
||||||
|
height: height,
|
||||||
|
toolbar: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
bar: {
|
||||||
|
horizontal: false,
|
||||||
|
columnWidth: ['35%'],
|
||||||
|
borderRadius: 6
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
dataLabels: {
|
||||||
|
enabled: false
|
||||||
|
},
|
||||||
|
stroke: {
|
||||||
|
show: true,
|
||||||
|
width: 2,
|
||||||
|
colors: ['transparent']
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||||
|
axisBorder: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTicks: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
labels: {
|
||||||
|
style: {
|
||||||
|
colors: KTUtil.getCssVariableValue('--bs-gray-400'),
|
||||||
|
fontSize: '12px'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
labels: {
|
||||||
|
style: {
|
||||||
|
colors: KTUtil.getCssVariableValue('--bs-gray-400'),
|
||||||
|
fontSize: '12px'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fill: {
|
||||||
|
opacity: 1
|
||||||
|
},
|
||||||
|
states: {
|
||||||
|
normal: {
|
||||||
|
filter: {
|
||||||
|
type: 'none',
|
||||||
|
value: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
hover: {
|
||||||
|
filter: {
|
||||||
|
type: 'none',
|
||||||
|
value: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
active: {
|
||||||
|
allowMultipleDataPointsSelection: false,
|
||||||
|
filter: {
|
||||||
|
type: 'none',
|
||||||
|
value: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
style: {
|
||||||
|
fontSize: '12px'
|
||||||
|
},
|
||||||
|
y: {
|
||||||
|
formatter: function (val) {
|
||||||
|
return "$" + val + " thousands"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
colors: [KTUtil.getCssVariableValue('--bs-primary'), KTUtil.getCssVariableValue('--bs-gray-200')],
|
||||||
|
grid: {
|
||||||
|
borderColor: KTUtil.getCssVariableValue('--bs-gray-200'),
|
||||||
|
strokeDashArray: 4,
|
||||||
|
yaxis: {
|
||||||
|
lines: {
|
||||||
|
show: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var chart = new ApexCharts(element, options);
|
||||||
|
|
||||||
|
var init = false;
|
||||||
|
var tab = document.querySelector(tabSelector);
|
||||||
|
|
||||||
|
if (initByDefault === true) {
|
||||||
|
setTimeout(function() {
|
||||||
|
chart.render();
|
||||||
|
init = true;
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
|
||||||
|
tab.addEventListener('shown.bs.tab', function (event) {
|
||||||
|
if (init == false) {
|
||||||
|
chart.render();
|
||||||
|
init = true;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function () {
|
||||||
|
initChart('#kt_security_summary_tab_hours_agents', '#kt_security_summary_chart_hours_agents', [50, 70, 90, 117, 80, 65, 80, 90, 115, 95, 70, 84], [50, 70, 90, 117, 80, 65, 70, 90, 115, 95, 70, 84], true);
|
||||||
|
initChart('#kt_security_summary_tab_hours_clients', '#kt_security_summary_chart_hours_clients', [50, 70, 90, 117, 80, 65, 80, 90, 115, 95, 70, 84], [50, 70, 90, 117, 80, 65, 80, 90, 115, 95, 70, 84], false);
|
||||||
|
|
||||||
|
initChart('#kt_security_summary_tab_day', '#kt_security_summary_chart_day_agents', [50, 70, 80, 100, 90, 65, 80, 90, 115, 95, 70, 84], [50, 70, 90, 117, 60, 65, 80, 90, 100, 95, 70, 84], false);
|
||||||
|
initChart('#kt_security_summary_tab_day_clients', '#kt_security_summary_chart_day_clients', [50, 70, 100, 90, 80, 65, 80, 90, 115, 95, 70, 84], [50, 70, 90, 115, 80, 65, 80, 90, 115, 95, 70, 84], false);
|
||||||
|
|
||||||
|
initChart('#kt_security_summary_tab_week', '#kt_security_summary_chart_week_agents', [50, 70, 75, 117, 80, 65, 80, 90, 115, 95, 50, 84], [50, 60, 90, 117, 80, 65, 80, 90, 115, 95, 70, 84], false);
|
||||||
|
initChart('#kt_security_summary_tab_week_clients', '#kt_security_summary_chart_week_clients', [50, 70, 90, 117, 80, 65, 80, 90, 100, 80, 70, 84], [50, 70, 90, 117, 80, 65, 80, 90, 100, 95, 70, 84], false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function() {
|
||||||
|
KTAccountSecuritySummary.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,116 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTAccountSettingsDeactivateAccount = function () {
|
||||||
|
// Private variables
|
||||||
|
var form;
|
||||||
|
var validation;
|
||||||
|
var submitButton;
|
||||||
|
|
||||||
|
// Private functions
|
||||||
|
var initValidation = function () {
|
||||||
|
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||||
|
validation = FormValidation.formValidation(
|
||||||
|
form,
|
||||||
|
{
|
||||||
|
fields: {
|
||||||
|
deactivate: {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Please check the box to deactivate your account'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
trigger: new FormValidation.plugins.Trigger(),
|
||||||
|
submitButton: new FormValidation.plugins.SubmitButton(),
|
||||||
|
//defaultSubmit: new FormValidation.plugins.DefaultSubmit(), // Uncomment this line to enable normal button submit after form validation
|
||||||
|
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||||
|
rowSelector: '.fv-row',
|
||||||
|
eleInvalidClass: '',
|
||||||
|
eleValidClass: ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
var handleForm = function () {
|
||||||
|
submitButton.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
validation.validate().then(function (status) {
|
||||||
|
if (status == 'Valid') {
|
||||||
|
|
||||||
|
swal.fire({
|
||||||
|
text: "Are you sure you would like to deactivate your account?",
|
||||||
|
icon: "warning",
|
||||||
|
buttonsStyling: false,
|
||||||
|
showDenyButton: true,
|
||||||
|
confirmButtonText: "Yes",
|
||||||
|
denyButtonText: 'No',
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-light-primary",
|
||||||
|
denyButton: "btn btn-danger"
|
||||||
|
}
|
||||||
|
}).then((result) => {
|
||||||
|
if (result.isConfirmed) {
|
||||||
|
Swal.fire({
|
||||||
|
text: 'Your account has been deactivated.',
|
||||||
|
icon: 'success',
|
||||||
|
confirmButtonText: "Ok",
|
||||||
|
buttonsStyling: false,
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-light-primary"
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else if (result.isDenied) {
|
||||||
|
Swal.fire({
|
||||||
|
text: 'Account not deactivated.',
|
||||||
|
icon: 'info',
|
||||||
|
confirmButtonText: "Ok",
|
||||||
|
buttonsStyling: false,
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-light-primary"
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
} 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-light-primary"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function () {
|
||||||
|
form = document.querySelector('#kt_account_deactivate_form');
|
||||||
|
|
||||||
|
if (!form) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
submitButton = document.querySelector('#kt_account_deactivate_account_submit');
|
||||||
|
|
||||||
|
initValidation();
|
||||||
|
handleForm();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function() {
|
||||||
|
KTAccountSettingsDeactivateAccount.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTAccountSettingsOverview = function () {
|
||||||
|
// Private functions
|
||||||
|
var initSettings = function() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function () {
|
||||||
|
initSettings();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function() {
|
||||||
|
KTAccountSettingsOverview.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,155 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTAccountSettingsProfileDetails = function () {
|
||||||
|
// Private variables
|
||||||
|
var form;
|
||||||
|
var submitButton;
|
||||||
|
var validation;
|
||||||
|
|
||||||
|
// Private functions
|
||||||
|
var initValidation = function () {
|
||||||
|
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||||
|
validation = FormValidation.formValidation(
|
||||||
|
form,
|
||||||
|
{
|
||||||
|
fields: {
|
||||||
|
fname: {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'First name is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
lname: {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Last name is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
company: {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Company name is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
phone: {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Contact phone number is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
country: {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Please select a country'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
timezone: {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Please select a timezone'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'communication[]': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Please select at least one communication method'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
language: {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Please select a language'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
trigger: new FormValidation.plugins.Trigger(),
|
||||||
|
submitButton: new FormValidation.plugins.SubmitButton(),
|
||||||
|
//defaultSubmit: new FormValidation.plugins.DefaultSubmit(), // Uncomment this line to enable normal button submit after form validation
|
||||||
|
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||||
|
rowSelector: '.fv-row',
|
||||||
|
eleInvalidClass: '',
|
||||||
|
eleValidClass: ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// Select2 validation integration
|
||||||
|
$(form.querySelector('[name="country"]')).on('change', function() {
|
||||||
|
// Revalidate the color field when an option is chosen
|
||||||
|
validation.revalidateField('country');
|
||||||
|
});
|
||||||
|
|
||||||
|
$(form.querySelector('[name="language"]')).on('change', function() {
|
||||||
|
// Revalidate the color field when an option is chosen
|
||||||
|
validation.revalidateField('language');
|
||||||
|
});
|
||||||
|
|
||||||
|
$(form.querySelector('[name="timezone"]')).on('change', function() {
|
||||||
|
// Revalidate the color field when an option is chosen
|
||||||
|
validation.revalidateField('timezone');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var handleForm = function () {
|
||||||
|
submitButton.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
validation.validate().then(function (status) {
|
||||||
|
if (status == 'Valid') {
|
||||||
|
|
||||||
|
swal.fire({
|
||||||
|
text: "Thank you! You've updated your basic info",
|
||||||
|
icon: "success",
|
||||||
|
buttonsStyling: false,
|
||||||
|
confirmButtonText: "Ok, got it!",
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn fw-bold btn-light-primary"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
} 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 fw-bold btn-light-primary"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function () {
|
||||||
|
form = document.getElementById('kt_account_profile_details_form');
|
||||||
|
|
||||||
|
if (!form) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
submitButton = form.querySelector('#kt_account_profile_details_submit');
|
||||||
|
|
||||||
|
initValidation();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function() {
|
||||||
|
KTAccountSettingsProfileDetails.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,236 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTAccountSettingsSigninMethods = function () {
|
||||||
|
var signInForm;
|
||||||
|
var signInMainEl;
|
||||||
|
var signInEditEl;
|
||||||
|
var passwordMainEl;
|
||||||
|
var passwordEditEl;
|
||||||
|
var signInChangeEmail;
|
||||||
|
var signInCancelEmail;
|
||||||
|
var passwordChange;
|
||||||
|
var passwordCancel;
|
||||||
|
|
||||||
|
var toggleChangeEmail = function () {
|
||||||
|
signInMainEl.classList.toggle('d-none');
|
||||||
|
signInChangeEmail.classList.toggle('d-none');
|
||||||
|
signInEditEl.classList.toggle('d-none');
|
||||||
|
}
|
||||||
|
|
||||||
|
var toggleChangePassword = function () {
|
||||||
|
passwordMainEl.classList.toggle('d-none');
|
||||||
|
passwordChange.classList.toggle('d-none');
|
||||||
|
passwordEditEl.classList.toggle('d-none');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Private functions
|
||||||
|
var initSettings = function () {
|
||||||
|
if (!signInMainEl) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// toggle UI
|
||||||
|
signInChangeEmail.querySelector('button').addEventListener('click', function () {
|
||||||
|
toggleChangeEmail();
|
||||||
|
});
|
||||||
|
|
||||||
|
signInCancelEmail.addEventListener('click', function () {
|
||||||
|
toggleChangeEmail();
|
||||||
|
});
|
||||||
|
|
||||||
|
passwordChange.querySelector('button').addEventListener('click', function () {
|
||||||
|
toggleChangePassword();
|
||||||
|
});
|
||||||
|
|
||||||
|
passwordCancel.addEventListener('click', function () {
|
||||||
|
toggleChangePassword();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var handleChangeEmail = function (e) {
|
||||||
|
var validation;
|
||||||
|
|
||||||
|
if (!signInForm) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
validation = FormValidation.formValidation(
|
||||||
|
signInForm,
|
||||||
|
{
|
||||||
|
fields: {
|
||||||
|
emailaddress: {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Email is required'
|
||||||
|
},
|
||||||
|
emailAddress: {
|
||||||
|
message: 'The value is not a valid email address'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
confirmemailpassword: {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Password is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
plugins: { //Learn more: https://formvalidation.io/guide/plugins
|
||||||
|
trigger: new FormValidation.plugins.Trigger(),
|
||||||
|
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||||
|
rowSelector: '.fv-row'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
signInForm.querySelector('#kt_signin_submit').addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
console.log('click');
|
||||||
|
|
||||||
|
validation.validate().then(function (status) {
|
||||||
|
if (status == 'Valid') {
|
||||||
|
swal.fire({
|
||||||
|
text: "Sent password reset. Please check your email",
|
||||||
|
icon: "success",
|
||||||
|
buttonsStyling: false,
|
||||||
|
confirmButtonText: "Ok, got it!",
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn font-weight-bold btn-light-primary"
|
||||||
|
}
|
||||||
|
}).then(function(){
|
||||||
|
signInForm.reset();
|
||||||
|
validation.resetForm(); // Reset formvalidation --- more info: https://formvalidation.io/guide/api/reset-form/
|
||||||
|
toggleChangeEmail();
|
||||||
|
});
|
||||||
|
} 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 font-weight-bold btn-light-primary"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var handleChangePassword = function (e) {
|
||||||
|
var validation;
|
||||||
|
|
||||||
|
// form elements
|
||||||
|
var passwordForm = document.getElementById('kt_signin_change_password');
|
||||||
|
|
||||||
|
if (!passwordForm) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
validation = FormValidation.formValidation(
|
||||||
|
passwordForm,
|
||||||
|
{
|
||||||
|
fields: {
|
||||||
|
currentpassword: {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Current Password is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
newpassword: {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'New Password is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
confirmpassword: {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Confirm Password is required'
|
||||||
|
},
|
||||||
|
identical: {
|
||||||
|
compare: function() {
|
||||||
|
return passwordForm.querySelector('[name="newpassword"]').value;
|
||||||
|
},
|
||||||
|
message: 'The password and its confirm are not the same'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
plugins: { //Learn more: https://formvalidation.io/guide/plugins
|
||||||
|
trigger: new FormValidation.plugins.Trigger(),
|
||||||
|
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||||
|
rowSelector: '.fv-row'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
passwordForm.querySelector('#kt_password_submit').addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
console.log('click');
|
||||||
|
|
||||||
|
validation.validate().then(function (status) {
|
||||||
|
if (status == 'Valid') {
|
||||||
|
swal.fire({
|
||||||
|
text: "Sent password reset. Please check your email",
|
||||||
|
icon: "success",
|
||||||
|
buttonsStyling: false,
|
||||||
|
confirmButtonText: "Ok, got it!",
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn font-weight-bold btn-light-primary"
|
||||||
|
}
|
||||||
|
}).then(function(){
|
||||||
|
passwordForm.reset();
|
||||||
|
validation.resetForm(); // Reset formvalidation --- more info: https://formvalidation.io/guide/api/reset-form/
|
||||||
|
toggleChangePassword();
|
||||||
|
});
|
||||||
|
} 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 font-weight-bold btn-light-primary"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function () {
|
||||||
|
signInForm = document.getElementById('kt_signin_change_email');
|
||||||
|
signInMainEl = document.getElementById('kt_signin_email');
|
||||||
|
signInEditEl = document.getElementById('kt_signin_email_edit');
|
||||||
|
passwordMainEl = document.getElementById('kt_signin_password');
|
||||||
|
passwordEditEl = document.getElementById('kt_signin_password_edit');
|
||||||
|
signInChangeEmail = document.getElementById('kt_signin_email_button');
|
||||||
|
signInCancelEmail = document.getElementById('kt_signin_cancel');
|
||||||
|
passwordChange = document.getElementById('kt_signin_password_button');
|
||||||
|
passwordCancel = document.getElementById('kt_password_cancel');
|
||||||
|
|
||||||
|
initSettings();
|
||||||
|
handleChangeEmail();
|
||||||
|
handleChangePassword();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function() {
|
||||||
|
KTAccountSettingsSigninMethods.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,830 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTAppCalendar = function () {
|
||||||
|
// Shared variables
|
||||||
|
// Calendar variables
|
||||||
|
var calendar;
|
||||||
|
var data = {
|
||||||
|
id: '',
|
||||||
|
eventName: '',
|
||||||
|
eventDescription: '',
|
||||||
|
eventLocation: '',
|
||||||
|
startDate: '',
|
||||||
|
endDate: '',
|
||||||
|
allDay: false
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add event variables
|
||||||
|
var eventName;
|
||||||
|
var eventDescription;
|
||||||
|
var eventLocation;
|
||||||
|
var startDatepicker;
|
||||||
|
var startFlatpickr;
|
||||||
|
var endDatepicker;
|
||||||
|
var endFlatpickr;
|
||||||
|
var startTimepicker;
|
||||||
|
var startTimeFlatpickr;
|
||||||
|
var endTimepicker
|
||||||
|
var endTimeFlatpickr;
|
||||||
|
var modal;
|
||||||
|
var modalTitle;
|
||||||
|
var form;
|
||||||
|
var validator;
|
||||||
|
var addButton;
|
||||||
|
var submitButton;
|
||||||
|
var cancelButton;
|
||||||
|
var closeButton;
|
||||||
|
|
||||||
|
// View event variables
|
||||||
|
var viewEventName;
|
||||||
|
var viewAllDay;
|
||||||
|
var viewEventDescription;
|
||||||
|
var viewEventLocation;
|
||||||
|
var viewStartDate;
|
||||||
|
var viewEndDate;
|
||||||
|
var viewModal;
|
||||||
|
var viewEditButton;
|
||||||
|
var viewDeleteButton;
|
||||||
|
|
||||||
|
|
||||||
|
// Private functions
|
||||||
|
var initCalendarApp = function () {
|
||||||
|
// Define variables
|
||||||
|
var calendarEl = document.getElementById('kt_calendar_app');
|
||||||
|
var todayDate = moment().startOf('day');
|
||||||
|
var YM = todayDate.format('YYYY-MM');
|
||||||
|
var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
|
||||||
|
var TODAY = todayDate.format('YYYY-MM-DD');
|
||||||
|
var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');
|
||||||
|
|
||||||
|
// Init calendar --- more info: https://fullcalendar.io/docs/initialize-globals
|
||||||
|
calendar = new FullCalendar.Calendar(calendarEl, {
|
||||||
|
//locale: 'es', // Set local --- more info: https://fullcalendar.io/docs/locale
|
||||||
|
headerToolbar: {
|
||||||
|
left: 'prev,next today',
|
||||||
|
center: 'title',
|
||||||
|
right: 'dayGridMonth,timeGridWeek,timeGridDay'
|
||||||
|
},
|
||||||
|
initialDate: TODAY,
|
||||||
|
navLinks: true, // can click day/week names to navigate views
|
||||||
|
selectable: true,
|
||||||
|
selectMirror: true,
|
||||||
|
|
||||||
|
// Select dates action --- more info: https://fullcalendar.io/docs/select-callback
|
||||||
|
select: function (arg) {
|
||||||
|
formatArgs(arg);
|
||||||
|
handleNewEvent();
|
||||||
|
},
|
||||||
|
|
||||||
|
// Click event --- more info: https://fullcalendar.io/docs/eventClick
|
||||||
|
eventClick: function (arg) {
|
||||||
|
formatArgs({
|
||||||
|
id: arg.event.id,
|
||||||
|
title: arg.event.title,
|
||||||
|
description: arg.event.extendedProps.description,
|
||||||
|
location: arg.event.extendedProps.location,
|
||||||
|
startStr: arg.event.startStr,
|
||||||
|
endStr: arg.event.endStr,
|
||||||
|
allDay: arg.event.allDay
|
||||||
|
});
|
||||||
|
|
||||||
|
handleViewEvent();
|
||||||
|
},
|
||||||
|
|
||||||
|
editable: true,
|
||||||
|
dayMaxEvents: true, // allow "more" link when too many events
|
||||||
|
events: [
|
||||||
|
{
|
||||||
|
id: uid(),
|
||||||
|
title: 'All Day Event',
|
||||||
|
start: YM + '-01',
|
||||||
|
end: YM + '-02',
|
||||||
|
description: 'Toto lorem ipsum dolor sit incid idunt ut',
|
||||||
|
className: "border-success bg-success text-inverse-success",
|
||||||
|
location: 'Federation Square'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: uid(),
|
||||||
|
title: 'Reporting',
|
||||||
|
start: YM + '-14T13:30:00',
|
||||||
|
description: 'Lorem ipsum dolor incid idunt ut labore',
|
||||||
|
end: YM + '-14T14:30:00',
|
||||||
|
className: "border-warning bg-warning text-inverse-success",
|
||||||
|
location: 'Meeting Room 7.03'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: uid(),
|
||||||
|
title: 'Company Trip',
|
||||||
|
start: YM + '-02',
|
||||||
|
description: 'Lorem ipsum dolor sit tempor incid',
|
||||||
|
end: YM + '-03',
|
||||||
|
className: "border-info bg-info text-info-success",
|
||||||
|
location: 'Seoul, Korea'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: uid(),
|
||||||
|
title: 'ICT Expo 2021 - Product Release',
|
||||||
|
start: YM + '-03',
|
||||||
|
description: 'Lorem ipsum dolor sit tempor inci',
|
||||||
|
end: YM + '-05',
|
||||||
|
className: "fc-event-light fc-event-solid-primary",
|
||||||
|
location: 'Melbourne Exhibition Hall'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: uid(),
|
||||||
|
title: 'Dinner',
|
||||||
|
start: YM + '-12',
|
||||||
|
description: 'Lorem ipsum dolor sit amet, conse ctetur',
|
||||||
|
end: YM + '-13',
|
||||||
|
location: 'Squire\'s Loft'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: uid(),
|
||||||
|
title: 'Repeating Event',
|
||||||
|
start: YM + '-09T16:00:00',
|
||||||
|
end: YM + '-09T17:00:00',
|
||||||
|
description: 'Lorem ipsum dolor sit ncididunt ut labore',
|
||||||
|
className: "fc-event-danger",
|
||||||
|
location: 'General Area'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: uid(),
|
||||||
|
title: 'Repeating Event',
|
||||||
|
description: 'Lorem ipsum dolor sit amet, labore',
|
||||||
|
start: YM + '-16T16:00:00',
|
||||||
|
end: YM + '-16T17:00:00',
|
||||||
|
location: 'General Area'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: uid(),
|
||||||
|
title: 'Conference',
|
||||||
|
start: YESTERDAY,
|
||||||
|
end: TOMORROW,
|
||||||
|
description: 'Lorem ipsum dolor eius mod tempor labore',
|
||||||
|
className: "fc-event-primary",
|
||||||
|
location: 'Conference Hall A'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: uid(),
|
||||||
|
title: 'Meeting',
|
||||||
|
start: TODAY + 'T10:30:00',
|
||||||
|
end: TODAY + 'T12:30:00',
|
||||||
|
description: 'Lorem ipsum dolor eiu idunt ut labore',
|
||||||
|
location: 'Meeting Room 11.06'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: uid(),
|
||||||
|
title: 'Lunch',
|
||||||
|
start: TODAY + 'T12:00:00',
|
||||||
|
end: TODAY + 'T14:00:00',
|
||||||
|
className: "fc-event-info",
|
||||||
|
description: 'Lorem ipsum dolor sit amet, ut labore',
|
||||||
|
location: 'Cafeteria'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: uid(),
|
||||||
|
title: 'Meeting',
|
||||||
|
start: TODAY + 'T14:30:00',
|
||||||
|
end: TODAY + 'T15:30:00',
|
||||||
|
className: "fc-event-warning",
|
||||||
|
description: 'Lorem ipsum conse ctetur adipi scing',
|
||||||
|
location: 'Meeting Room 11.10'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: uid(),
|
||||||
|
title: 'Happy Hour',
|
||||||
|
start: TODAY + 'T17:30:00',
|
||||||
|
end: TODAY + 'T21:30:00',
|
||||||
|
className: "fc-event-info",
|
||||||
|
description: 'Lorem ipsum dolor sit amet, conse ctetur',
|
||||||
|
location: 'The English Pub'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: uid(),
|
||||||
|
title: 'Dinner',
|
||||||
|
start: TOMORROW + 'T18:00:00',
|
||||||
|
end: TOMORROW + 'T21:00:00',
|
||||||
|
className: "fc-event-solid-danger fc-event-light",
|
||||||
|
description: 'Lorem ipsum dolor sit ctetur adipi scing',
|
||||||
|
location: 'New York Steakhouse'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: uid(),
|
||||||
|
title: 'Birthday Party',
|
||||||
|
start: TOMORROW + 'T12:00:00',
|
||||||
|
end: TOMORROW + 'T14:00:00',
|
||||||
|
className: "fc-event-primary",
|
||||||
|
description: 'Lorem ipsum dolor sit amet, scing',
|
||||||
|
location: 'The English Pub'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: uid(),
|
||||||
|
title: 'Site visit',
|
||||||
|
start: YM + '-28',
|
||||||
|
end: YM + '-29',
|
||||||
|
className: "fc-event-solid-info fc-event-light",
|
||||||
|
description: 'Lorem ipsum dolor sit amet, labore',
|
||||||
|
location: '271, Spring Street'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
|
||||||
|
// Handle changing calendar views --- more info: https://fullcalendar.io/docs/datesSet
|
||||||
|
datesSet: function(){
|
||||||
|
// do some stuff
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
calendar.render();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init validator
|
||||||
|
const initValidator = () => {
|
||||||
|
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||||
|
validator = FormValidation.formValidation(
|
||||||
|
form,
|
||||||
|
{
|
||||||
|
fields: {
|
||||||
|
'calendar_event_name': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Event name is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'calendar_event_start_date': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Start date is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'calendar_event_end_date': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'End date is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
plugins: {
|
||||||
|
trigger: new FormValidation.plugins.Trigger(),
|
||||||
|
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||||
|
rowSelector: '.fv-row',
|
||||||
|
eleInvalidClass: '',
|
||||||
|
eleValidClass: ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize datepickers --- more info: https://flatpickr.js.org/
|
||||||
|
const initDatepickers = () => {
|
||||||
|
startFlatpickr = flatpickr(startDatepicker, {
|
||||||
|
enableTime: false,
|
||||||
|
dateFormat: "Y-m-d",
|
||||||
|
});
|
||||||
|
|
||||||
|
endFlatpickr = flatpickr(endDatepicker, {
|
||||||
|
enableTime: false,
|
||||||
|
dateFormat: "Y-m-d",
|
||||||
|
});
|
||||||
|
|
||||||
|
startTimeFlatpickr = flatpickr(startTimepicker, {
|
||||||
|
enableTime: true,
|
||||||
|
noCalendar: true,
|
||||||
|
dateFormat: "H:i",
|
||||||
|
});
|
||||||
|
|
||||||
|
endTimeFlatpickr = flatpickr(endTimepicker, {
|
||||||
|
enableTime: true,
|
||||||
|
noCalendar: true,
|
||||||
|
dateFormat: "H:i",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle add button
|
||||||
|
const handleAddButton = () => {
|
||||||
|
addButton.addEventListener('click', e => {
|
||||||
|
// Reset form data
|
||||||
|
data = {
|
||||||
|
id: '',
|
||||||
|
eventName: '',
|
||||||
|
eventDescription: '',
|
||||||
|
startDate: new Date(),
|
||||||
|
endDate: new Date(),
|
||||||
|
allDay: false
|
||||||
|
};
|
||||||
|
handleNewEvent();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle add new event
|
||||||
|
const handleNewEvent = () => {
|
||||||
|
// Update modal title
|
||||||
|
modalTitle.innerText = "Add a New Event";
|
||||||
|
|
||||||
|
modal.show();
|
||||||
|
|
||||||
|
// Select datepicker wrapper elements
|
||||||
|
const datepickerWrappers = form.querySelectorAll('[data-kt-calendar="datepicker"]');
|
||||||
|
|
||||||
|
// Handle all day toggle
|
||||||
|
const allDayToggle = form.querySelector('#kt_calendar_datepicker_allday');
|
||||||
|
allDayToggle.addEventListener('click', e => {
|
||||||
|
if (e.target.checked) {
|
||||||
|
datepickerWrappers.forEach(dw => {
|
||||||
|
dw.classList.add('d-none');
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
endFlatpickr.setDate(data.startDate, true, 'Y-m-d');
|
||||||
|
datepickerWrappers.forEach(dw => {
|
||||||
|
dw.classList.remove('d-none');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
populateForm(data);
|
||||||
|
|
||||||
|
// Handle submit form
|
||||||
|
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: "New event added to calendar!",
|
||||||
|
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;
|
||||||
|
|
||||||
|
// Detect if is all day event
|
||||||
|
let allDayEvent = false;
|
||||||
|
if (allDayToggle.checked) { allDayEvent = true; }
|
||||||
|
if (startTimeFlatpickr.selectedDates.length === 0) { allDayEvent = true; }
|
||||||
|
|
||||||
|
// Merge date & time
|
||||||
|
var startDateTime = moment(startFlatpickr.selectedDates[0]).format();
|
||||||
|
var endDateTime = moment(endFlatpickr.selectedDates[endFlatpickr.selectedDates.length - 1]).format();
|
||||||
|
if (!allDayEvent) {
|
||||||
|
const startDate = moment(startFlatpickr.selectedDates[0]).format('YYYY-MM-DD');
|
||||||
|
const endDate = startDate;
|
||||||
|
const startTime = moment(startTimeFlatpickr.selectedDates[0]).format('HH:mm:ss');
|
||||||
|
const endTime = moment(endTimeFlatpickr.selectedDates[0]).format('HH:mm:ss');
|
||||||
|
|
||||||
|
startDateTime = startDate + 'T' + startTime;
|
||||||
|
endDateTime = endDate + 'T' + endTime;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add new event to calendar
|
||||||
|
calendar.addEvent({
|
||||||
|
id: uid(),
|
||||||
|
title: eventName.value,
|
||||||
|
description: eventDescription.value,
|
||||||
|
location: eventLocation.value,
|
||||||
|
start: startDateTime,
|
||||||
|
end: endDateTime,
|
||||||
|
allDay: allDayEvent
|
||||||
|
});
|
||||||
|
calendar.render();
|
||||||
|
|
||||||
|
// 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"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle edit event
|
||||||
|
const handleEditEvent = () => {
|
||||||
|
// Update modal title
|
||||||
|
modalTitle.innerText = "Edit an Event";
|
||||||
|
|
||||||
|
modal.show();
|
||||||
|
|
||||||
|
// Select datepicker wrapper elements
|
||||||
|
const datepickerWrappers = form.querySelectorAll('[data-kt-calendar="datepicker"]');
|
||||||
|
|
||||||
|
// Handle all day toggle
|
||||||
|
const allDayToggle = form.querySelector('#kt_calendar_datepicker_allday');
|
||||||
|
allDayToggle.addEventListener('click', e => {
|
||||||
|
if (e.target.checked) {
|
||||||
|
datepickerWrappers.forEach(dw => {
|
||||||
|
dw.classList.add('d-none');
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
endFlatpickr.setDate(data.startDate, true, 'Y-m-d');
|
||||||
|
datepickerWrappers.forEach(dw => {
|
||||||
|
dw.classList.remove('d-none');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
populateForm(data);
|
||||||
|
|
||||||
|
// Handle submit form
|
||||||
|
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: "New event added to calendar!",
|
||||||
|
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;
|
||||||
|
|
||||||
|
// Remove old event
|
||||||
|
calendar.getEventById(data.id).remove();
|
||||||
|
|
||||||
|
// Detect if is all day event
|
||||||
|
let allDayEvent = false;
|
||||||
|
if (allDayToggle.checked) { allDayEvent = true; }
|
||||||
|
if (startTimeFlatpickr.selectedDates.length === 0) { allDayEvent = true; }
|
||||||
|
|
||||||
|
// Merge date & time
|
||||||
|
var startDateTime = moment(startFlatpickr.selectedDates[0]).format();
|
||||||
|
var endDateTime = moment(endFlatpickr.selectedDates[endFlatpickr.selectedDates.length - 1]).format();
|
||||||
|
if (!allDayEvent) {
|
||||||
|
const startDate = moment(startFlatpickr.selectedDates[0]).format('YYYY-MM-DD');
|
||||||
|
const endDate = startDate;
|
||||||
|
const startTime = moment(startTimeFlatpickr.selectedDates[0]).format('HH:mm:ss');
|
||||||
|
const endTime = moment(endTimeFlatpickr.selectedDates[0]).format('HH:mm:ss');
|
||||||
|
|
||||||
|
startDateTime = startDate + 'T' + startTime;
|
||||||
|
endDateTime = endDate + 'T' + endTime;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add new event to calendar
|
||||||
|
calendar.addEvent({
|
||||||
|
id: uid(),
|
||||||
|
title: eventName.value,
|
||||||
|
description: eventDescription.value,
|
||||||
|
location: eventLocation.value,
|
||||||
|
start: startDateTime,
|
||||||
|
end: endDateTime,
|
||||||
|
allDay: allDayEvent
|
||||||
|
});
|
||||||
|
calendar.render();
|
||||||
|
|
||||||
|
// 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"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle view event
|
||||||
|
const handleViewEvent = () => {
|
||||||
|
viewModal.show();
|
||||||
|
|
||||||
|
// Detect all day event
|
||||||
|
var eventNameMod;
|
||||||
|
var startDateMod;
|
||||||
|
var endDateMod;
|
||||||
|
|
||||||
|
// Generate labels
|
||||||
|
if (data.allDay) {
|
||||||
|
eventNameMod = 'All Day';
|
||||||
|
startDateMod = moment(data.startDate).format('Do MMM, YYYY');
|
||||||
|
endDateMod = moment(data.endDate).format('Do MMM, YYYY');
|
||||||
|
} else {
|
||||||
|
eventNameMod = '';
|
||||||
|
startDateMod = moment(data.startDate).format('Do MMM, YYYY - h:mm a');
|
||||||
|
endDateMod = moment(data.endDate).format('Do MMM, YYYY - h:mm a');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Populate view data
|
||||||
|
viewEventName.innerText = data.eventName;
|
||||||
|
viewAllDay.innerText = eventNameMod;
|
||||||
|
viewEventDescription.innerText = data.eventDescription ? data.eventDescription : '--';
|
||||||
|
viewEventLocation.innerText = data.eventLocation ? data.eventLocation : '--';
|
||||||
|
viewStartDate.innerText = startDateMod;
|
||||||
|
viewEndDate.innerText = endDateMod;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle delete event
|
||||||
|
const handleDeleteEvent = () => {
|
||||||
|
viewDeleteButton.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
Swal.fire({
|
||||||
|
text: "Are you sure you would like to delete this event?",
|
||||||
|
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) {
|
||||||
|
calendar.getEventById(data.id).remove();
|
||||||
|
|
||||||
|
viewModal.hide(); // Hide modal
|
||||||
|
} else if (result.dismiss === 'cancel') {
|
||||||
|
Swal.fire({
|
||||||
|
text: "Your event was not deleted!.",
|
||||||
|
icon: "error",
|
||||||
|
buttonsStyling: false,
|
||||||
|
confirmButtonText: "Ok, got it!",
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-primary",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle edit button
|
||||||
|
const handleEditButton = () => {
|
||||||
|
viewEditButton.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
viewModal.hide();
|
||||||
|
handleEditEvent();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle cancel button
|
||||||
|
const handleCancelButton = () => {
|
||||||
|
// Edit event modal cancel button
|
||||||
|
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",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle close button
|
||||||
|
const handleCloseButton = () => {
|
||||||
|
// Edit event modal close button
|
||||||
|
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",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle view button
|
||||||
|
const handleViewButton = () => {
|
||||||
|
const viewButton = document.querySelector('#kt_calendar_event_view_button');
|
||||||
|
viewButton.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
hidePopovers();
|
||||||
|
handleViewEvent();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper functions
|
||||||
|
|
||||||
|
// Reset form validator on modal close
|
||||||
|
const resetFormValidator = (element) => {
|
||||||
|
// Target modal hidden event --- For more info: https://getbootstrap.com/docs/5.0/components/modal/#events
|
||||||
|
element.addEventListener('hidden.bs.modal', e => {
|
||||||
|
if (validator) {
|
||||||
|
// Reset form validator. For more info: https://formvalidation.io/guide/api/reset-form
|
||||||
|
validator.resetForm(true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Populate form
|
||||||
|
const populateForm = () => {
|
||||||
|
eventName.value = data.eventName ? data.eventName : '';
|
||||||
|
eventDescription.value = data.eventDescription ? data.eventDescription : '';
|
||||||
|
eventLocation.value = data.eventLocation ? data.eventLocation : '';
|
||||||
|
startFlatpickr.setDate(data.startDate, true, 'Y-m-d');
|
||||||
|
|
||||||
|
// Handle null end dates
|
||||||
|
const endDate = data.endDate ? data.endDate : moment(data.startDate).format();
|
||||||
|
endFlatpickr.setDate(endDate, true, 'Y-m-d');
|
||||||
|
|
||||||
|
const allDayToggle = form.querySelector('#kt_calendar_datepicker_allday');
|
||||||
|
const datepickerWrappers = form.querySelectorAll('[data-kt-calendar="datepicker"]');
|
||||||
|
if (data.allDay) {
|
||||||
|
allDayToggle.checked = true;
|
||||||
|
datepickerWrappers.forEach(dw => {
|
||||||
|
dw.classList.add('d-none');
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
startTimeFlatpickr.setDate(data.startDate, true, 'Y-m-d H:i');
|
||||||
|
endTimeFlatpickr.setDate(data.endDate, true, 'Y-m-d H:i');
|
||||||
|
endFlatpickr.setDate(data.startDate, true, 'Y-m-d');
|
||||||
|
allDayToggle.checked = false;
|
||||||
|
datepickerWrappers.forEach(dw => {
|
||||||
|
dw.classList.remove('d-none');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Format FullCalendar reponses
|
||||||
|
const formatArgs = (res) => {
|
||||||
|
data.id = res.id;
|
||||||
|
data.eventName = res.title;
|
||||||
|
data.eventDescription = res.description;
|
||||||
|
data.eventLocation = res.location;
|
||||||
|
data.startDate = res.startStr;
|
||||||
|
data.endDate = res.endStr;
|
||||||
|
data.allDay = res.allDay;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Generate unique IDs for events
|
||||||
|
const uid = () => {
|
||||||
|
return Date.now().toString() + Math.floor(Math.random() * 1000).toString();
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Public Functions
|
||||||
|
init: function () {
|
||||||
|
// Define variables
|
||||||
|
// Add event modal
|
||||||
|
const element = document.getElementById('kt_modal_add_event');
|
||||||
|
form = element.querySelector('#kt_modal_add_event_form');
|
||||||
|
eventName = form.querySelector('[name="calendar_event_name"]');
|
||||||
|
eventDescription = form.querySelector('[name="calendar_event_description"]');
|
||||||
|
eventLocation = form.querySelector('[name="calendar_event_location"]');
|
||||||
|
startDatepicker = form.querySelector('#kt_calendar_datepicker_start_date');
|
||||||
|
endDatepicker = form.querySelector('#kt_calendar_datepicker_end_date');
|
||||||
|
startTimepicker = form.querySelector('#kt_calendar_datepicker_start_time');
|
||||||
|
endTimepicker = form.querySelector('#kt_calendar_datepicker_end_time');
|
||||||
|
addButton = document.querySelector('[data-kt-calendar="add"]');
|
||||||
|
submitButton = form.querySelector('#kt_modal_add_event_submit');
|
||||||
|
cancelButton = form.querySelector('#kt_modal_add_event_cancel');
|
||||||
|
closeButton = element.querySelector('#kt_modal_add_event_close');
|
||||||
|
modalTitle = form.querySelector('[data-kt-calendar="title"]');
|
||||||
|
modal = new bootstrap.Modal(element);
|
||||||
|
|
||||||
|
// View event modal
|
||||||
|
const viewElement = document.getElementById('kt_modal_view_event');
|
||||||
|
viewModal = new bootstrap.Modal(viewElement);
|
||||||
|
viewEventName = viewElement.querySelector('[data-kt-calendar="event_name"]');
|
||||||
|
viewAllDay = viewElement.querySelector('[data-kt-calendar="all_day"]');
|
||||||
|
viewEventDescription = viewElement.querySelector('[data-kt-calendar="event_description"]');
|
||||||
|
viewEventLocation = viewElement.querySelector('[data-kt-calendar="event_location"]');
|
||||||
|
viewStartDate = viewElement.querySelector('[data-kt-calendar="event_start_date"]');
|
||||||
|
viewEndDate = viewElement.querySelector('[data-kt-calendar="event_end_date"]');
|
||||||
|
viewEditButton = viewElement.querySelector('#kt_modal_view_event_edit');
|
||||||
|
viewDeleteButton = viewElement.querySelector('#kt_modal_view_event_delete');
|
||||||
|
|
||||||
|
initCalendarApp();
|
||||||
|
initValidator();
|
||||||
|
initDatepickers();
|
||||||
|
handleEditButton();
|
||||||
|
handleAddButton();
|
||||||
|
handleDeleteEvent();
|
||||||
|
handleCancelButton();
|
||||||
|
handleCloseButton();
|
||||||
|
resetFormValidator(element);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTAppCalendar.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,72 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTAppChat = function () {
|
||||||
|
// Private functions
|
||||||
|
var handeSend = function (element) {
|
||||||
|
if (!element) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle send
|
||||||
|
KTUtil.on(element, '[data-kt-element="input"]', 'keydown', function(e) {
|
||||||
|
if (e.keyCode == 13) {
|
||||||
|
handeMessaging(element);
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
KTUtil.on(element, '[data-kt-element="send"]', 'click', function(e) {
|
||||||
|
handeMessaging(element);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var handeMessaging = function(element) {
|
||||||
|
var messages = element.querySelector('[data-kt-element="messages"]');
|
||||||
|
var input = element.querySelector('[data-kt-element="input"]');
|
||||||
|
|
||||||
|
if (input.value.length === 0 ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var messageOutTemplate = messages.querySelector('[data-kt-element="template-out"]');
|
||||||
|
var messageInTemplate = messages.querySelector('[data-kt-element="template-in"]');
|
||||||
|
var message;
|
||||||
|
|
||||||
|
// Show example outgoing message
|
||||||
|
message = messageOutTemplate.cloneNode(true);
|
||||||
|
message.classList.remove('d-none');
|
||||||
|
message.querySelector('[data-kt-element="message-text"]').innerText = input.value;
|
||||||
|
input.value = '';
|
||||||
|
messages.appendChild(message);
|
||||||
|
messages.scrollTop = messages.scrollHeight;
|
||||||
|
|
||||||
|
|
||||||
|
setTimeout(function() {
|
||||||
|
// Show example incoming message
|
||||||
|
message = messageInTemplate.cloneNode(true);
|
||||||
|
message.classList.remove('d-none');
|
||||||
|
message.querySelector('[data-kt-element="message-text"]').innerText = 'Thank you for your awesome support!';
|
||||||
|
messages.appendChild(message);
|
||||||
|
messages.scrollTop = messages.scrollHeight;
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function(element) {
|
||||||
|
handeSend(element);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
// Init inline chat messenger
|
||||||
|
KTAppChat.init(document.querySelector('#kt_chat_messenger'));
|
||||||
|
|
||||||
|
// Init drawer chat messenger
|
||||||
|
KTAppChat.init(document.querySelector('#kt_drawer_chat_messenger'));
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,160 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTAppContactEdit = function () {
|
||||||
|
// Shared variables
|
||||||
|
|
||||||
|
|
||||||
|
// Private functions
|
||||||
|
const initForm = () => {
|
||||||
|
// Select form
|
||||||
|
const form = document.getElementById('kt_ecommerce_settings_general_form');
|
||||||
|
|
||||||
|
if (!form) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dynamically create validation non-empty rule
|
||||||
|
const requiredFields = form.querySelectorAll('.required');
|
||||||
|
var detectedField;
|
||||||
|
var validationFields = {
|
||||||
|
fields: {},
|
||||||
|
|
||||||
|
plugins: {
|
||||||
|
trigger: new FormValidation.plugins.Trigger(),
|
||||||
|
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||||
|
rowSelector: '.fv-row',
|
||||||
|
eleInvalidClass: '',
|
||||||
|
eleValidClass: ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Detect required fields
|
||||||
|
requiredFields.forEach(el => {
|
||||||
|
const input = el.closest('.fv-row').querySelector('input');
|
||||||
|
if (input) {
|
||||||
|
detectedField = input;
|
||||||
|
}
|
||||||
|
|
||||||
|
const select = el.closest('.fv-row').querySelector('select');
|
||||||
|
if (select) {
|
||||||
|
detectedField = select;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add validation rule
|
||||||
|
const name = detectedField.getAttribute('name');
|
||||||
|
validationFields.fields[name] = {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: el.innerText + ' is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||||
|
var validator = FormValidation.formValidation(
|
||||||
|
form,
|
||||||
|
validationFields
|
||||||
|
);
|
||||||
|
|
||||||
|
// Submit button handler
|
||||||
|
const submitButton = form.querySelector('[data-kt-contacts-type="submit"]');
|
||||||
|
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 button to avoid multiple click
|
||||||
|
submitButton.disabled = true;
|
||||||
|
|
||||||
|
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||||
|
setTimeout(function () {
|
||||||
|
// Remove loading indication
|
||||||
|
submitButton.removeAttribute('data-kt-indicator');
|
||||||
|
|
||||||
|
// Enable button
|
||||||
|
submitButton.disabled = false;
|
||||||
|
|
||||||
|
// Show popup confirmation
|
||||||
|
Swal.fire({
|
||||||
|
text: "Form has been successfully submitted!",
|
||||||
|
icon: "success",
|
||||||
|
buttonsStyling: false,
|
||||||
|
confirmButtonText: "Ok, got it!",
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-primary"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//form.submit(); // Submit form
|
||||||
|
}, 2000);
|
||||||
|
} else {
|
||||||
|
// Show popup error
|
||||||
|
Swal.fire({
|
||||||
|
text: "Oops! There are some error(s) detected.",
|
||||||
|
icon: "error",
|
||||||
|
buttonsStyling: false,
|
||||||
|
confirmButtonText: "Ok, got it!",
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-primary"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init Select2 with flags
|
||||||
|
const initSelect2Flags = () => {
|
||||||
|
// Format options
|
||||||
|
var optionFormat = function(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 me-2" style="height:19px;" alt="image"/>';
|
||||||
|
template += item.text;
|
||||||
|
|
||||||
|
span.innerHTML = template;
|
||||||
|
|
||||||
|
return $(span);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init Select2 --- more info: https://select2.org/
|
||||||
|
$('[data-kt-ecommerce-settings-type="select2_flags"]').select2({
|
||||||
|
placeholder: "Select a country",
|
||||||
|
minimumResultsForSearch: Infinity,
|
||||||
|
templateSelection: optionFormat,
|
||||||
|
templateResult: optionFormat
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function () {
|
||||||
|
|
||||||
|
initForm();
|
||||||
|
initSelect2Flags();
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTAppContactEdit.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,74 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTAppContactView = function () {
|
||||||
|
// Private functions
|
||||||
|
const handleDeleteButton = () => {
|
||||||
|
// Select form
|
||||||
|
const deleteButton = document.getElementById('kt_contact_delete');
|
||||||
|
|
||||||
|
if (!deleteButton) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
deleteButton.addEventListener('click', e => {
|
||||||
|
// Prevent default button action
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Show popup confirmation
|
||||||
|
Swal.fire({
|
||||||
|
text: "Delete contact confirmation",
|
||||||
|
icon: "warning",
|
||||||
|
buttonsStyling: false,
|
||||||
|
showCancelButton: true,
|
||||||
|
confirmButtonText: "Yes, delete it!",
|
||||||
|
cancelButtonText: "No, return",
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-danger",
|
||||||
|
cancelButton: "btn btn-active-light"
|
||||||
|
}
|
||||||
|
}).then(function (result) {
|
||||||
|
if (result.value) {
|
||||||
|
Swal.fire({
|
||||||
|
text: "Contact has been deleted!",
|
||||||
|
icon: "success",
|
||||||
|
buttonsStyling: false,
|
||||||
|
confirmButtonText: "Ok, got it!",
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-primary"
|
||||||
|
}
|
||||||
|
}).then(function (result) {
|
||||||
|
if (result.value) {
|
||||||
|
// Redirect to customers list page
|
||||||
|
window.location = deleteButton.getAttribute("data-kt-redirect");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else if (result.dismiss === 'cancel') {
|
||||||
|
Swal.fire({
|
||||||
|
text: "Contact has not been deleted!.",
|
||||||
|
icon: "error",
|
||||||
|
buttonsStyling: false,
|
||||||
|
confirmButtonText: "Ok, got it!",
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-primary",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function () {
|
||||||
|
|
||||||
|
handleDeleteButton();
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTAppContactView.init();
|
||||||
|
});
|
||||||
|
|
@ -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,283 @@
|
||||||
|
"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();
|
||||||
|
KTMenu.init(); // reinit KTMenu instances
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,114 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTAppEcommerceCategories = function () {
|
||||||
|
// Shared variables
|
||||||
|
var table;
|
||||||
|
var datatable;
|
||||||
|
|
||||||
|
// 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: 3 }, // Disable ordering on column 3 (actions)
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
// Re-init functions on datatable re-draws
|
||||||
|
datatable.on('draw', function () {
|
||||||
|
handleDeleteRows();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
|
||||||
|
var handleSearchDatatable = () => {
|
||||||
|
const filterSearch = document.querySelector('[data-kt-ecommerce-category-filter="search"]');
|
||||||
|
filterSearch.addEventListener('keyup', function (e) {
|
||||||
|
datatable.search(e.target.value).draw();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Delete cateogry
|
||||||
|
var handleDeleteRows = () => {
|
||||||
|
// Select all delete buttons
|
||||||
|
const deleteButtons = table.querySelectorAll('[data-kt-ecommerce-category-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 categoryName = parent.querySelector('[data-kt-ecommerce-category-filter="category_name"]').innerText;
|
||||||
|
|
||||||
|
// SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
|
||||||
|
Swal.fire({
|
||||||
|
text: "Are you sure you want to delete " + categoryName + "?",
|
||||||
|
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 " + categoryName + "!.",
|
||||||
|
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: categoryName + " 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_category_table');
|
||||||
|
|
||||||
|
if (!table) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
initDatatable();
|
||||||
|
handleSearchDatatable();
|
||||||
|
handleDeleteRows();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTAppEcommerceCategories.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,128 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTAppEcommerceProducts = function () {
|
||||||
|
// Shared variables
|
||||||
|
var table;
|
||||||
|
var datatable;
|
||||||
|
|
||||||
|
// Private functions
|
||||||
|
var initDatatable = function () {
|
||||||
|
// Init datatable --- more info on datatables: https://datatables.net/manual/
|
||||||
|
datatable = $(table).DataTable({
|
||||||
|
"info": false,
|
||||||
|
'order': [],
|
||||||
|
'pageLength': 10,
|
||||||
|
'columnDefs': [
|
||||||
|
{ render: DataTable.render.number(',', '.', 2), targets: 4},
|
||||||
|
{ 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();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
|
||||||
|
var handleSearchDatatable = () => {
|
||||||
|
const filterSearch = document.querySelector('[data-kt-ecommerce-product-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-product-filter="status"]');
|
||||||
|
$(filterStatus).on('change', e => {
|
||||||
|
let value = e.target.value;
|
||||||
|
if(value === 'all'){
|
||||||
|
value = '';
|
||||||
|
}
|
||||||
|
datatable.column(6).search(value).draw();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Delete cateogry
|
||||||
|
var handleDeleteRows = () => {
|
||||||
|
// Select all delete buttons
|
||||||
|
const deleteButtons = table.querySelectorAll('[data-kt-ecommerce-product-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 productName = parent.querySelector('[data-kt-ecommerce-product-filter="product_name"]').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: productName + " 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_products_table');
|
||||||
|
|
||||||
|
if (!table) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
initDatatable();
|
||||||
|
handleSearchDatatable();
|
||||||
|
handleStatusFilter();
|
||||||
|
handleDeleteRows();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTAppEcommerceProducts.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,287 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTAppEcommerceSaveCategory = function () {
|
||||||
|
|
||||||
|
// Private functions
|
||||||
|
|
||||||
|
// Init quill editor
|
||||||
|
const initQuill = () => {
|
||||||
|
// Define all elements for quill editor
|
||||||
|
const elements = [
|
||||||
|
'#kt_ecommerce_add_category_description',
|
||||||
|
'#kt_ecommerce_add_category_meta_description'
|
||||||
|
];
|
||||||
|
|
||||||
|
// Loop all elements
|
||||||
|
elements.forEach(element => {
|
||||||
|
// Get quill element
|
||||||
|
let quill = document.querySelector(element);
|
||||||
|
|
||||||
|
// Break if element not found
|
||||||
|
if (!quill) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init quill --- more info: https://quilljs.com/docs/quickstart/
|
||||||
|
quill = new Quill(element, {
|
||||||
|
modules: {
|
||||||
|
toolbar: [
|
||||||
|
[{
|
||||||
|
header: [1, 2, false]
|
||||||
|
}],
|
||||||
|
['bold', 'italic', 'underline'],
|
||||||
|
['image', 'code-block']
|
||||||
|
]
|
||||||
|
},
|
||||||
|
placeholder: 'Type your text here...',
|
||||||
|
theme: 'snow' // or 'bubble'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init tagify
|
||||||
|
const initTagify = () => {
|
||||||
|
// Define all elements for tagify
|
||||||
|
const elements = [
|
||||||
|
'#kt_ecommerce_add_category_meta_keywords'
|
||||||
|
];
|
||||||
|
|
||||||
|
// Loop all elements
|
||||||
|
elements.forEach(element => {
|
||||||
|
// Get tagify element
|
||||||
|
const tagify = document.querySelector(element);
|
||||||
|
|
||||||
|
// Break if element not found
|
||||||
|
if (!tagify) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init tagify --- more info: https://yaireo.github.io/tagify/
|
||||||
|
new Tagify(tagify);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init form repeater --- more info: https://github.com/DubFriend/jquery.repeater
|
||||||
|
const initFormRepeater = () => {
|
||||||
|
$('#kt_ecommerce_add_category_conditions').repeater({
|
||||||
|
initEmpty: false,
|
||||||
|
|
||||||
|
defaultValues: {
|
||||||
|
'text-input': 'foo'
|
||||||
|
},
|
||||||
|
|
||||||
|
show: function () {
|
||||||
|
$(this).slideDown();
|
||||||
|
|
||||||
|
// Init select2 on new repeated items
|
||||||
|
initConditionsSelect2();
|
||||||
|
},
|
||||||
|
|
||||||
|
hide: function (deleteElement) {
|
||||||
|
$(this).slideUp(deleteElement);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init condition select2
|
||||||
|
const initConditionsSelect2 = () => {
|
||||||
|
// Tnit new repeating condition types
|
||||||
|
const allConditionTypes = document.querySelectorAll('[data-kt-ecommerce-catalog-add-category="condition_type"]');
|
||||||
|
allConditionTypes.forEach(type => {
|
||||||
|
if ($(type).hasClass("select2-hidden-accessible")) {
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
$(type).select2({
|
||||||
|
minimumResultsForSearch: -1
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Tnit new repeating condition equals
|
||||||
|
const allConditionEquals = document.querySelectorAll('[data-kt-ecommerce-catalog-add-category="condition_equals"]');
|
||||||
|
allConditionEquals.forEach(equal => {
|
||||||
|
if ($(equal).hasClass("select2-hidden-accessible")) {
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
$(equal).select2({
|
||||||
|
minimumResultsForSearch: -1
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Category status handler
|
||||||
|
const handleStatus = () => {
|
||||||
|
const target = document.getElementById('kt_ecommerce_add_category_status');
|
||||||
|
const select = document.getElementById('kt_ecommerce_add_category_status_select');
|
||||||
|
const statusClasses = ['bg-success', 'bg-warning', 'bg-danger'];
|
||||||
|
|
||||||
|
$(select).on('change', function (e) {
|
||||||
|
const value = e.target.value;
|
||||||
|
|
||||||
|
switch (value) {
|
||||||
|
case "published": {
|
||||||
|
target.classList.remove(...statusClasses);
|
||||||
|
target.classList.add('bg-success');
|
||||||
|
hideDatepicker();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "scheduled": {
|
||||||
|
target.classList.remove(...statusClasses);
|
||||||
|
target.classList.add('bg-warning');
|
||||||
|
showDatepicker();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "unpublished": {
|
||||||
|
target.classList.remove(...statusClasses);
|
||||||
|
target.classList.add('bg-danger');
|
||||||
|
hideDatepicker();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// Handle datepicker
|
||||||
|
const datepicker = document.getElementById('kt_ecommerce_add_category_status_datepicker');
|
||||||
|
|
||||||
|
// Init flatpickr --- more info: https://flatpickr.js.org/
|
||||||
|
$('#kt_ecommerce_add_category_status_datepicker').flatpickr({
|
||||||
|
enableTime: true,
|
||||||
|
dateFormat: "Y-m-d H:i",
|
||||||
|
});
|
||||||
|
|
||||||
|
const showDatepicker = () => {
|
||||||
|
datepicker.parentNode.classList.remove('d-none');
|
||||||
|
}
|
||||||
|
|
||||||
|
const hideDatepicker = () => {
|
||||||
|
datepicker.parentNode.classList.add('d-none');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Condition type handler
|
||||||
|
const handleConditions = () => {
|
||||||
|
const allConditions = document.querySelectorAll('[name="method"][type="radio"]');
|
||||||
|
const conditionMatch = document.querySelector('[data-kt-ecommerce-catalog-add-category="auto-options"]');
|
||||||
|
allConditions.forEach(radio => {
|
||||||
|
radio.addEventListener('change', e => {
|
||||||
|
if (e.target.value === '1') {
|
||||||
|
conditionMatch.classList.remove('d-none');
|
||||||
|
} else {
|
||||||
|
conditionMatch.classList.add('d-none');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Submit form handler
|
||||||
|
const handleSubmit = () => {
|
||||||
|
// Define variables
|
||||||
|
let validator;
|
||||||
|
|
||||||
|
// Get elements
|
||||||
|
const form = document.getElementById('kt_ecommerce_add_category_form');
|
||||||
|
const submitButton = document.getElementById('kt_ecommerce_add_category_submit');
|
||||||
|
|
||||||
|
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||||
|
validator = FormValidation.formValidation(
|
||||||
|
form,
|
||||||
|
{
|
||||||
|
fields: {
|
||||||
|
'category_name': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Category name 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({
|
||||||
|
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"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function () {
|
||||||
|
// Init forms
|
||||||
|
initQuill();
|
||||||
|
initTagify();
|
||||||
|
initFormRepeater();
|
||||||
|
initConditionsSelect2();
|
||||||
|
|
||||||
|
// Handle forms
|
||||||
|
handleStatus();
|
||||||
|
handleConditions();
|
||||||
|
handleSubmit();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTAppEcommerceSaveCategory.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,416 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTAppEcommerceSaveProduct = function () {
|
||||||
|
|
||||||
|
// Private functions
|
||||||
|
|
||||||
|
// Init quill editor
|
||||||
|
const initQuill = () => {
|
||||||
|
// Define all elements for quill editor
|
||||||
|
const elements = [
|
||||||
|
'#kt_ecommerce_add_product_description',
|
||||||
|
'#kt_ecommerce_add_product_meta_description'
|
||||||
|
];
|
||||||
|
|
||||||
|
// Loop all elements
|
||||||
|
elements.forEach(element => {
|
||||||
|
// Get quill element
|
||||||
|
let quill = document.querySelector(element);
|
||||||
|
|
||||||
|
// Break if element not found
|
||||||
|
if (!quill) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init quill --- more info: https://quilljs.com/docs/quickstart/
|
||||||
|
quill = new Quill(element, {
|
||||||
|
modules: {
|
||||||
|
toolbar: [
|
||||||
|
[{
|
||||||
|
header: [1, 2, false]
|
||||||
|
}],
|
||||||
|
['bold', 'italic', 'underline'],
|
||||||
|
['image', 'code-block']
|
||||||
|
]
|
||||||
|
},
|
||||||
|
placeholder: 'Type your text here...',
|
||||||
|
theme: 'snow' // or 'bubble'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init tagify
|
||||||
|
const initTagify = () => {
|
||||||
|
// Define all elements for tagify
|
||||||
|
const elements = [
|
||||||
|
'#kt_ecommerce_add_product_category',
|
||||||
|
'#kt_ecommerce_add_product_tags'
|
||||||
|
];
|
||||||
|
|
||||||
|
// Loop all elements
|
||||||
|
elements.forEach(element => {
|
||||||
|
// Get tagify element
|
||||||
|
const tagify = document.querySelector(element);
|
||||||
|
|
||||||
|
// Break if element not found
|
||||||
|
if (!tagify) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init tagify --- more info: https://yaireo.github.io/tagify/
|
||||||
|
new Tagify(tagify, {
|
||||||
|
whitelist: ["new", "trending", "sale", "discounted", "selling fast", "last 10"],
|
||||||
|
dropdown: {
|
||||||
|
maxItems: 20, // <- mixumum allowed rendered suggestions
|
||||||
|
classname: "tagify__inline__suggestions", // <- custom classname for this dropdown, so it could be targeted
|
||||||
|
enabled: 0, // <- show suggestions on focus
|
||||||
|
closeOnSelect: false // <- do not hide the suggestions dropdown once an item has been selected
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init form repeater --- more info: https://github.com/DubFriend/jquery.repeater
|
||||||
|
const initFormRepeater = () => {
|
||||||
|
$('#kt_ecommerce_add_product_options').repeater({
|
||||||
|
initEmpty: false,
|
||||||
|
|
||||||
|
defaultValues: {
|
||||||
|
'text-input': 'foo'
|
||||||
|
},
|
||||||
|
|
||||||
|
show: function () {
|
||||||
|
$(this).slideDown();
|
||||||
|
|
||||||
|
// Init select2 on new repeated items
|
||||||
|
initConditionsSelect2();
|
||||||
|
},
|
||||||
|
|
||||||
|
hide: function (deleteElement) {
|
||||||
|
$(this).slideUp(deleteElement);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init condition select2
|
||||||
|
const initConditionsSelect2 = () => {
|
||||||
|
// Tnit new repeating condition types
|
||||||
|
const allConditionTypes = document.querySelectorAll('[data-kt-ecommerce-catalog-add-product="product_option"]');
|
||||||
|
allConditionTypes.forEach(type => {
|
||||||
|
if ($(type).hasClass("select2-hidden-accessible")) {
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
$(type).select2({
|
||||||
|
minimumResultsForSearch: -1
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Init noUIslider
|
||||||
|
const initSlider = () => {
|
||||||
|
var slider = document.querySelector("#kt_ecommerce_add_product_discount_slider");
|
||||||
|
var value = document.querySelector("#kt_ecommerce_add_product_discount_label");
|
||||||
|
|
||||||
|
noUiSlider.create(slider, {
|
||||||
|
start: [10],
|
||||||
|
connect: true,
|
||||||
|
range: {
|
||||||
|
"min": 1,
|
||||||
|
"max": 100
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
slider.noUiSlider.on("update", function (values, handle) {
|
||||||
|
value.innerHTML = Math.round(values[handle]);
|
||||||
|
if (handle) {
|
||||||
|
value.innerHTML = Math.round(values[handle]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init DropzoneJS --- more info:
|
||||||
|
const initDropzone = () => {
|
||||||
|
var myDropzone = new Dropzone("#kt_ecommerce_add_product_media", {
|
||||||
|
url: "https://keenthemes.com/scripts/void.php", // Set the url for your upload script location
|
||||||
|
paramName: "file", // The name that will be used to transfer the file
|
||||||
|
maxFiles: 10,
|
||||||
|
maxFilesize: 10, // MB
|
||||||
|
addRemoveLinks: true,
|
||||||
|
accept: function (file, done) {
|
||||||
|
if (file.name == "wow.jpg") {
|
||||||
|
done("Naha, you don't.");
|
||||||
|
} else {
|
||||||
|
done();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle discount options
|
||||||
|
const handleDiscount = () => {
|
||||||
|
const discountOptions = document.querySelectorAll('input[name="discount_option"]');
|
||||||
|
const percentageEl = document.getElementById('kt_ecommerce_add_product_discount_percentage');
|
||||||
|
const fixedEl = document.getElementById('kt_ecommerce_add_product_discount_fixed');
|
||||||
|
|
||||||
|
discountOptions.forEach(option => {
|
||||||
|
option.addEventListener('change', e => {
|
||||||
|
const value = e.target.value;
|
||||||
|
|
||||||
|
switch (value) {
|
||||||
|
case '2': {
|
||||||
|
percentageEl.classList.remove('d-none');
|
||||||
|
fixedEl.classList.add('d-none');
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case '3': {
|
||||||
|
percentageEl.classList.add('d-none');
|
||||||
|
fixedEl.classList.remove('d-none');
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
default: {
|
||||||
|
percentageEl.classList.add('d-none');
|
||||||
|
fixedEl.classList.add('d-none');
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Shipping option handler
|
||||||
|
const handleShipping = () => {
|
||||||
|
const shippingOption = document.getElementById('kt_ecommerce_add_product_shipping_checkbox');
|
||||||
|
const shippingForm = document.getElementById('kt_ecommerce_add_product_shipping');
|
||||||
|
|
||||||
|
shippingOption.addEventListener('change', e => {
|
||||||
|
const value = e.target.checked;
|
||||||
|
|
||||||
|
if (value) {
|
||||||
|
shippingForm.classList.remove('d-none');
|
||||||
|
} else {
|
||||||
|
shippingForm.classList.add('d-none');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Category status handler
|
||||||
|
const handleStatus = () => {
|
||||||
|
const target = document.getElementById('kt_ecommerce_add_product_status');
|
||||||
|
const select = document.getElementById('kt_ecommerce_add_product_status_select');
|
||||||
|
const statusClasses = ['bg-success', 'bg-warning', 'bg-danger'];
|
||||||
|
|
||||||
|
$(select).on('change', function (e) {
|
||||||
|
const value = e.target.value;
|
||||||
|
|
||||||
|
switch (value) {
|
||||||
|
case "published": {
|
||||||
|
target.classList.remove(...statusClasses);
|
||||||
|
target.classList.add('bg-success');
|
||||||
|
hideDatepicker();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "scheduled": {
|
||||||
|
target.classList.remove(...statusClasses);
|
||||||
|
target.classList.add('bg-warning');
|
||||||
|
showDatepicker();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "inactive": {
|
||||||
|
target.classList.remove(...statusClasses);
|
||||||
|
target.classList.add('bg-danger');
|
||||||
|
hideDatepicker();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "draft": {
|
||||||
|
target.classList.remove(...statusClasses);
|
||||||
|
target.classList.add('bg-primary');
|
||||||
|
hideDatepicker();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// Handle datepicker
|
||||||
|
const datepicker = document.getElementById('kt_ecommerce_add_product_status_datepicker');
|
||||||
|
|
||||||
|
// Init flatpickr --- more info: https://flatpickr.js.org/
|
||||||
|
$('#kt_ecommerce_add_product_status_datepicker').flatpickr({
|
||||||
|
enableTime: true,
|
||||||
|
dateFormat: "Y-m-d H:i",
|
||||||
|
});
|
||||||
|
|
||||||
|
const showDatepicker = () => {
|
||||||
|
datepicker.parentNode.classList.remove('d-none');
|
||||||
|
}
|
||||||
|
|
||||||
|
const hideDatepicker = () => {
|
||||||
|
datepicker.parentNode.classList.add('d-none');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Condition type handler
|
||||||
|
const handleConditions = () => {
|
||||||
|
const allConditions = document.querySelectorAll('[name="method"][type="radio"]');
|
||||||
|
const conditionMatch = document.querySelector('[data-kt-ecommerce-catalog-add-category="auto-options"]');
|
||||||
|
allConditions.forEach(radio => {
|
||||||
|
radio.addEventListener('change', e => {
|
||||||
|
if (e.target.value === '1') {
|
||||||
|
conditionMatch.classList.remove('d-none');
|
||||||
|
} else {
|
||||||
|
conditionMatch.classList.add('d-none');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Submit form handler
|
||||||
|
const handleSubmit = () => {
|
||||||
|
// Define variables
|
||||||
|
let validator;
|
||||||
|
|
||||||
|
// Get elements
|
||||||
|
const form = document.getElementById('kt_ecommerce_add_product_form');
|
||||||
|
const submitButton = document.getElementById('kt_ecommerce_add_product_submit');
|
||||||
|
|
||||||
|
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||||
|
validator = FormValidation.formValidation(
|
||||||
|
form,
|
||||||
|
{
|
||||||
|
fields: {
|
||||||
|
'product_name': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Product name is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'sku': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'SKU is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'barcode': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Product barcode is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'shelf': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Shelf quantity is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'price': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Product base price is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'tax': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Product tax class 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. <br/><br/>Please note that there may be errors in the <strong>General</strong> or <strong>Advanced</strong> tabs",
|
||||||
|
icon: "error",
|
||||||
|
buttonsStyling: false,
|
||||||
|
confirmButtonText: "Ok, got it!",
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-primary"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function () {
|
||||||
|
// Init forms
|
||||||
|
initQuill();
|
||||||
|
initTagify();
|
||||||
|
initSlider();
|
||||||
|
initFormRepeater();
|
||||||
|
initDropzone();
|
||||||
|
initConditionsSelect2();
|
||||||
|
|
||||||
|
// Handle forms
|
||||||
|
handleStatus();
|
||||||
|
handleConditions();
|
||||||
|
handleDiscount();
|
||||||
|
handleShipping();
|
||||||
|
handleSubmit();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTAppEcommerceSaveProduct.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,214 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTModalAddAddress = 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: 'Address 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;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, 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_address'));
|
||||||
|
|
||||||
|
form = document.querySelector('#kt_modal_add_address_form');
|
||||||
|
submitButton = form.querySelector('#kt_modal_add_address_submit');
|
||||||
|
cancelButton = form.querySelector('#kt_modal_add_address_cancel');
|
||||||
|
closeButton = form.querySelector('#kt_modal_add_address_close');
|
||||||
|
|
||||||
|
handleForm();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTModalAddAddress.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,81 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTUsersAddAuthApp = function () {
|
||||||
|
// Shared variables
|
||||||
|
const element = document.getElementById('kt_modal_add_auth_app');
|
||||||
|
const modal = new bootstrap.Modal(element);
|
||||||
|
|
||||||
|
// Init add schedule modal
|
||||||
|
var initAddAuthApp = () => {
|
||||||
|
|
||||||
|
// Close button handler
|
||||||
|
const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
|
||||||
|
closeButton.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
Swal.fire({
|
||||||
|
text: "Are you sure you would like to close?",
|
||||||
|
icon: "warning",
|
||||||
|
showCancelButton: true,
|
||||||
|
buttonsStyling: false,
|
||||||
|
confirmButtonText: "Yes, close it!",
|
||||||
|
cancelButtonText: "No, return",
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-primary",
|
||||||
|
cancelButton: "btn btn-active-light"
|
||||||
|
}
|
||||||
|
}).then(function (result) {
|
||||||
|
if (result.value) {
|
||||||
|
modal.hide(); // Hide modal
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// QR code to text code swapper
|
||||||
|
var initCodeSwap = () => {
|
||||||
|
const qrCode = element.querySelector('[ data-kt-add-auth-action="qr-code"]');
|
||||||
|
const textCode = element.querySelector('[ data-kt-add-auth-action="text-code"]');
|
||||||
|
const qrCodeButton = element.querySelector('[ data-kt-add-auth-action="qr-code-button"]');
|
||||||
|
const textCodeButton = element.querySelector('[ data-kt-add-auth-action="text-code-button"]');
|
||||||
|
const qrCodeLabel = element.querySelector('[ data-kt-add-auth-action="qr-code-label"]');
|
||||||
|
const textCodeLabel = element.querySelector('[ data-kt-add-auth-action="text-code-label"]');
|
||||||
|
|
||||||
|
const toggleClass = () =>{
|
||||||
|
qrCode.classList.toggle('d-none');
|
||||||
|
qrCodeButton.classList.toggle('d-none');
|
||||||
|
qrCodeLabel.classList.toggle('d-none');
|
||||||
|
textCode.classList.toggle('d-none');
|
||||||
|
textCodeButton.classList.toggle('d-none');
|
||||||
|
textCodeLabel.classList.toggle('d-none');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Swap to text code handler
|
||||||
|
textCodeButton.addEventListener('click', e =>{
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
toggleClass();
|
||||||
|
});
|
||||||
|
|
||||||
|
qrCodeButton.addEventListener('click', e =>{
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
toggleClass();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Public functions
|
||||||
|
init: function () {
|
||||||
|
initAddAuthApp();
|
||||||
|
initCodeSwap();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTUsersAddAuthApp.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,173 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTUsersAddOneTimePassword = function () {
|
||||||
|
// Shared variables
|
||||||
|
const element = document.getElementById('kt_modal_add_one_time_password');
|
||||||
|
const form = element.querySelector('#kt_modal_add_one_time_password_form');
|
||||||
|
const modal = new bootstrap.Modal(element);
|
||||||
|
|
||||||
|
// Init one time password modal
|
||||||
|
var initAddOneTimePassword = () => {
|
||||||
|
|
||||||
|
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||||
|
var validator = FormValidation.formValidation(
|
||||||
|
form,
|
||||||
|
{
|
||||||
|
fields: {
|
||||||
|
'otp_mobile_number': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Valid mobile number is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'otp_confirm_password': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Password confirmation is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
plugins: {
|
||||||
|
trigger: new FormValidation.plugins.Trigger(),
|
||||||
|
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||||
|
rowSelector: '.fv-row',
|
||||||
|
eleInvalidClass: '',
|
||||||
|
eleValidClass: ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// Close button handler
|
||||||
|
const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
|
||||||
|
closeButton.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
Swal.fire({
|
||||||
|
text: "Are you sure you would like to close?",
|
||||||
|
icon: "warning",
|
||||||
|
showCancelButton: true,
|
||||||
|
buttonsStyling: false,
|
||||||
|
confirmButtonText: "Yes, close it!",
|
||||||
|
cancelButtonText: "No, return",
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-primary",
|
||||||
|
cancelButton: "btn btn-active-light"
|
||||||
|
}
|
||||||
|
}).then(function (result) {
|
||||||
|
if (result.value) {
|
||||||
|
modal.hide(); // Hide modal
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Cancel button handler
|
||||||
|
const cancelButton = element.querySelector('[data-kt-users-modal-action="cancel"]');
|
||||||
|
cancelButton.addEventListener('click', 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",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Submit button handler
|
||||||
|
const submitButton = element.querySelector('[data-kt-users-modal-action="submit"]');
|
||||||
|
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 button to avoid multiple click
|
||||||
|
submitButton.disabled = true;
|
||||||
|
|
||||||
|
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||||
|
setTimeout(function () {
|
||||||
|
// Remove loading indication
|
||||||
|
submitButton.removeAttribute('data-kt-indicator');
|
||||||
|
|
||||||
|
// Enable button
|
||||||
|
submitButton.disabled = false;
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
} else {
|
||||||
|
// Show popup warning. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||||
|
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"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Public functions
|
||||||
|
init: function () {
|
||||||
|
initAddOneTimePassword();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTUsersAddOneTimePassword.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,217 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTModalUpdateAddress = function () {
|
||||||
|
var element;
|
||||||
|
var submitButton;
|
||||||
|
var cancelButton;
|
||||||
|
var closeButton;
|
||||||
|
var form;
|
||||||
|
var modal;
|
||||||
|
var validator;
|
||||||
|
|
||||||
|
// 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: {
|
||||||
|
'name': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Address 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) {
|
||||||
|
// Prevent default button action
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, 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
|
||||||
|
element = document.querySelector('#kt_modal_update_address');
|
||||||
|
modal = new bootstrap.Modal(element);
|
||||||
|
|
||||||
|
form = element.querySelector('#kt_modal_update_address_form');
|
||||||
|
submitButton = form.querySelector('#kt_modal_update_address_submit');
|
||||||
|
cancelButton = form.querySelector('#kt_modal_update_address_cancel');
|
||||||
|
closeButton = element.querySelector('#kt_modal_update_address_close');
|
||||||
|
|
||||||
|
initForm();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTModalUpdateAddress.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,194 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTUsersUpdatePassword = function () {
|
||||||
|
// Shared variables
|
||||||
|
const element = document.getElementById('kt_modal_update_password');
|
||||||
|
const form = element.querySelector('#kt_modal_update_password_form');
|
||||||
|
const modal = new bootstrap.Modal(element);
|
||||||
|
|
||||||
|
// Init add schedule modal
|
||||||
|
var initUpdatePassword = () => {
|
||||||
|
|
||||||
|
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||||
|
var validator = FormValidation.formValidation(
|
||||||
|
form,
|
||||||
|
{
|
||||||
|
fields: {
|
||||||
|
'current_password': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Current password is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'new_password': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'The password is required'
|
||||||
|
},
|
||||||
|
callback: {
|
||||||
|
message: 'Please enter valid password',
|
||||||
|
callback: function (input) {
|
||||||
|
if (input.value.length > 0) {
|
||||||
|
return validatePassword();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'confirm_password': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'The password confirmation is required'
|
||||||
|
},
|
||||||
|
identical: {
|
||||||
|
compare: function () {
|
||||||
|
return form.querySelector('[name="new_password"]').value;
|
||||||
|
},
|
||||||
|
message: 'The password and its confirm are not the same'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
plugins: {
|
||||||
|
trigger: new FormValidation.plugins.Trigger(),
|
||||||
|
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||||
|
rowSelector: '.fv-row',
|
||||||
|
eleInvalidClass: '',
|
||||||
|
eleValidClass: ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// Close button handler
|
||||||
|
const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
|
||||||
|
closeButton.addEventListener('click', 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",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Cancel button handler
|
||||||
|
const cancelButton = element.querySelector('[data-kt-users-modal-action="cancel"]');
|
||||||
|
cancelButton.addEventListener('click', 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",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Submit button handler
|
||||||
|
const submitButton = element.querySelector('[data-kt-users-modal-action="submit"]');
|
||||||
|
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 button to avoid multiple click
|
||||||
|
submitButton.disabled = true;
|
||||||
|
|
||||||
|
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||||
|
setTimeout(function () {
|
||||||
|
// Remove loading indication
|
||||||
|
submitButton.removeAttribute('data-kt-indicator');
|
||||||
|
|
||||||
|
// Enable button
|
||||||
|
submitButton.disabled = false;
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Public functions
|
||||||
|
init: function () {
|
||||||
|
initUpdatePassword();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTUsersUpdatePassword.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,166 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTUsersUpdateEmail = function () {
|
||||||
|
// Shared variables
|
||||||
|
const element = document.getElementById('kt_modal_update_phone');
|
||||||
|
const form = element.querySelector('#kt_modal_update_phone_form');
|
||||||
|
const modal = new bootstrap.Modal(element);
|
||||||
|
|
||||||
|
// Init add schedule modal
|
||||||
|
var initUpdateEmail = () => {
|
||||||
|
|
||||||
|
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||||
|
var validator = FormValidation.formValidation(
|
||||||
|
form,
|
||||||
|
{
|
||||||
|
fields: {
|
||||||
|
'profile_phone': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Phone number is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
plugins: {
|
||||||
|
trigger: new FormValidation.plugins.Trigger(),
|
||||||
|
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||||
|
rowSelector: '.fv-row',
|
||||||
|
eleInvalidClass: '',
|
||||||
|
eleValidClass: ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// Close button handler
|
||||||
|
const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
|
||||||
|
closeButton.addEventListener('click', 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",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Cancel button handler
|
||||||
|
const cancelButton = element.querySelector('[data-kt-users-modal-action="cancel"]');
|
||||||
|
cancelButton.addEventListener('click', 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",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Submit button handler
|
||||||
|
const submitButton = element.querySelector('[data-kt-users-modal-action="submit"]');
|
||||||
|
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 button to avoid multiple click
|
||||||
|
submitButton.disabled = true;
|
||||||
|
|
||||||
|
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||||
|
setTimeout(function () {
|
||||||
|
// Remove loading indication
|
||||||
|
submitButton.removeAttribute('data-kt-indicator');
|
||||||
|
|
||||||
|
// Enable button
|
||||||
|
submitButton.disabled = false;
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Public functions
|
||||||
|
init: function () {
|
||||||
|
initUpdateEmail();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTUsersUpdateEmail.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,106 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTEcommerceUpdateProfile = function () {
|
||||||
|
var submitButton;
|
||||||
|
var validator;
|
||||||
|
var form;
|
||||||
|
|
||||||
|
// 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: 'Name is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'gen_email': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'General Email 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: "Your profile has been saved!",
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, 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"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Public functions
|
||||||
|
init: function () {
|
||||||
|
// Elements
|
||||||
|
form = document.querySelector('#kt_ecommerce_customer_profile');
|
||||||
|
submitButton = form.querySelector('#kt_ecommerce_customer_profile_submit');
|
||||||
|
|
||||||
|
handleForm();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTEcommerceUpdateProfile.init();
|
||||||
|
});
|
||||||
|
|
@ -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,242 @@
|
||||||
|
"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();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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();
|
||||||
|
handleDeleteRows();
|
||||||
|
handleStatusFilter();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTCustomersList.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,136 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTAppEcommerceReportCustomerOrders = function () {
|
||||||
|
// Shared variables
|
||||||
|
var table;
|
||||||
|
var datatable;
|
||||||
|
|
||||||
|
// Private functions
|
||||||
|
var initDatatable = 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': 10,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init daterangepicker
|
||||||
|
var initDaterangepicker = () => {
|
||||||
|
var start = moment().subtract(29, "days");
|
||||||
|
var end = moment();
|
||||||
|
var input = $("#kt_ecommerce_report_customer_orders_daterangepicker");
|
||||||
|
|
||||||
|
function cb(start, end) {
|
||||||
|
input.html(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));
|
||||||
|
}
|
||||||
|
|
||||||
|
input.daterangepicker({
|
||||||
|
startDate: start,
|
||||||
|
endDate: end,
|
||||||
|
ranges: {
|
||||||
|
"Today": [moment(), moment()],
|
||||||
|
"Yesterday": [moment().subtract(1, "days"), moment().subtract(1, "days")],
|
||||||
|
"Last 7 Days": [moment().subtract(6, "days"), moment()],
|
||||||
|
"Last 30 Days": [moment().subtract(29, "days"), moment()],
|
||||||
|
"This Month": [moment().startOf("month"), moment().endOf("month")],
|
||||||
|
"Last Month": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
|
||||||
|
}
|
||||||
|
}, cb);
|
||||||
|
|
||||||
|
cb(start, end);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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(2).search(value).draw();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hook export buttons
|
||||||
|
var exportButtons = () => {
|
||||||
|
const documentTitle = 'Customer Orders Report';
|
||||||
|
var buttons = new $.fn.dataTable.Buttons(table, {
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
extend: 'copyHtml5',
|
||||||
|
title: documentTitle
|
||||||
|
},
|
||||||
|
{
|
||||||
|
extend: 'excelHtml5',
|
||||||
|
title: documentTitle
|
||||||
|
},
|
||||||
|
{
|
||||||
|
extend: 'csvHtml5',
|
||||||
|
title: documentTitle
|
||||||
|
},
|
||||||
|
{
|
||||||
|
extend: 'pdfHtml5',
|
||||||
|
title: documentTitle
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}).container().appendTo($('#kt_ecommerce_report_customer_orders_export'));
|
||||||
|
|
||||||
|
// Hook dropdown menu click event to datatable export buttons
|
||||||
|
const exportButtons = document.querySelectorAll('#kt_ecommerce_report_customer_orders_export_menu [data-kt-ecommerce-export]');
|
||||||
|
exportButtons.forEach(exportButton => {
|
||||||
|
exportButton.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Get clicked export value
|
||||||
|
const exportValue = e.target.getAttribute('data-kt-ecommerce-export');
|
||||||
|
const target = document.querySelector('.dt-buttons .buttons-' + exportValue);
|
||||||
|
|
||||||
|
// Trigger click event on hidden datatable export buttons
|
||||||
|
target.click();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 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();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function () {
|
||||||
|
table = document.querySelector('#kt_ecommerce_report_customer_orders_table');
|
||||||
|
|
||||||
|
if (!table) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
initDatatable();
|
||||||
|
initDaterangepicker();
|
||||||
|
exportButtons();
|
||||||
|
handleSearchDatatable();
|
||||||
|
handleStatusFilter();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTAppEcommerceReportCustomerOrders.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,123 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTAppEcommerceReportReturns = function () {
|
||||||
|
// Shared variables
|
||||||
|
var table;
|
||||||
|
var datatable;
|
||||||
|
|
||||||
|
// Private functions
|
||||||
|
var initDatatable = function () {
|
||||||
|
// Set date data order
|
||||||
|
const tableRows = table.querySelectorAll('tbody tr');
|
||||||
|
|
||||||
|
tableRows.forEach(row => {
|
||||||
|
const dateRow = row.querySelectorAll('td');
|
||||||
|
const realDate = moment(dateRow[0].innerHTML, "MMM DD, YYYY").format(); // select date from 4th column in table
|
||||||
|
dateRow[0].setAttribute('data-order', realDate);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Init datatable --- more info on datatables: https://datatables.net/manual/
|
||||||
|
datatable = $(table).DataTable({
|
||||||
|
"info": false,
|
||||||
|
'order': [],
|
||||||
|
'pageLength': 10,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init daterangepicker
|
||||||
|
var initDaterangepicker = () => {
|
||||||
|
var start = moment().subtract(29, "days");
|
||||||
|
var end = moment();
|
||||||
|
var input = $("#kt_ecommerce_report_returns_daterangepicker");
|
||||||
|
|
||||||
|
function cb(start, end) {
|
||||||
|
input.html(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));
|
||||||
|
}
|
||||||
|
|
||||||
|
input.daterangepicker({
|
||||||
|
startDate: start,
|
||||||
|
endDate: end,
|
||||||
|
ranges: {
|
||||||
|
"Today": [moment(), moment()],
|
||||||
|
"Yesterday": [moment().subtract(1, "days"), moment().subtract(1, "days")],
|
||||||
|
"Last 7 Days": [moment().subtract(6, "days"), moment()],
|
||||||
|
"Last 30 Days": [moment().subtract(29, "days"), moment()],
|
||||||
|
"This Month": [moment().startOf("month"), moment().endOf("month")],
|
||||||
|
"Last Month": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
|
||||||
|
}
|
||||||
|
}, cb);
|
||||||
|
|
||||||
|
cb(start, end);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hook export buttons
|
||||||
|
var exportButtons = () => {
|
||||||
|
const documentTitle = 'Returns Report';
|
||||||
|
var buttons = new $.fn.dataTable.Buttons(table, {
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
extend: 'copyHtml5',
|
||||||
|
title: documentTitle
|
||||||
|
},
|
||||||
|
{
|
||||||
|
extend: 'excelHtml5',
|
||||||
|
title: documentTitle
|
||||||
|
},
|
||||||
|
{
|
||||||
|
extend: 'csvHtml5',
|
||||||
|
title: documentTitle
|
||||||
|
},
|
||||||
|
{
|
||||||
|
extend: 'pdfHtml5',
|
||||||
|
title: documentTitle
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}).container().appendTo($('#kt_ecommerce_report_returns_export'));
|
||||||
|
|
||||||
|
// Hook dropdown menu click event to datatable export buttons
|
||||||
|
const exportButtons = document.querySelectorAll('#kt_ecommerce_report_returns_export_menu [data-kt-ecommerce-export]');
|
||||||
|
exportButtons.forEach(exportButton => {
|
||||||
|
exportButton.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Get clicked export value
|
||||||
|
const exportValue = e.target.getAttribute('data-kt-ecommerce-export');
|
||||||
|
const target = document.querySelector('.dt-buttons .buttons-' + exportValue);
|
||||||
|
|
||||||
|
// Trigger click event on hidden datatable export buttons
|
||||||
|
target.click();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 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();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function () {
|
||||||
|
table = document.querySelector('#kt_ecommerce_report_returns_table');
|
||||||
|
|
||||||
|
if (!table) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
initDatatable();
|
||||||
|
initDaterangepicker();
|
||||||
|
exportButtons();
|
||||||
|
handleSearchDatatable();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTAppEcommerceReportReturns.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,124 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTAppEcommerceReportSales = function () {
|
||||||
|
// Shared variables
|
||||||
|
var table;
|
||||||
|
var datatable;
|
||||||
|
|
||||||
|
// Private functions
|
||||||
|
var initDatatable = function () {
|
||||||
|
// Set date data order
|
||||||
|
const tableRows = table.querySelectorAll('tbody tr');
|
||||||
|
|
||||||
|
tableRows.forEach(row => {
|
||||||
|
const dateRow = row.querySelectorAll('td');
|
||||||
|
const realDate = moment(dateRow[0].innerHTML, "MMM DD, YYYY").format(); // select date from 4th column in table
|
||||||
|
dateRow[0].setAttribute('data-order', realDate);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// Init datatable --- more info on datatables: https://datatables.net/manual/
|
||||||
|
datatable = $(table).DataTable({
|
||||||
|
"info": false,
|
||||||
|
'order': [],
|
||||||
|
'pageLength': 10,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init daterangepicker
|
||||||
|
var initDaterangepicker = () => {
|
||||||
|
var start = moment().subtract(29, "days");
|
||||||
|
var end = moment();
|
||||||
|
var input = $("#kt_ecommerce_report_sales_daterangepicker");
|
||||||
|
|
||||||
|
function cb(start, end) {
|
||||||
|
input.html(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));
|
||||||
|
}
|
||||||
|
|
||||||
|
input.daterangepicker({
|
||||||
|
startDate: start,
|
||||||
|
endDate: end,
|
||||||
|
ranges: {
|
||||||
|
"Today": [moment(), moment()],
|
||||||
|
"Yesterday": [moment().subtract(1, "days"), moment().subtract(1, "days")],
|
||||||
|
"Last 7 Days": [moment().subtract(6, "days"), moment()],
|
||||||
|
"Last 30 Days": [moment().subtract(29, "days"), moment()],
|
||||||
|
"This Month": [moment().startOf("month"), moment().endOf("month")],
|
||||||
|
"Last Month": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
|
||||||
|
}
|
||||||
|
}, cb);
|
||||||
|
|
||||||
|
cb(start, end);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hook export buttons
|
||||||
|
var exportButtons = () => {
|
||||||
|
const documentTitle = 'Sales Report';
|
||||||
|
var buttons = new $.fn.dataTable.Buttons(table, {
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
extend: 'copyHtml5',
|
||||||
|
title: documentTitle
|
||||||
|
},
|
||||||
|
{
|
||||||
|
extend: 'excelHtml5',
|
||||||
|
title: documentTitle
|
||||||
|
},
|
||||||
|
{
|
||||||
|
extend: 'csvHtml5',
|
||||||
|
title: documentTitle
|
||||||
|
},
|
||||||
|
{
|
||||||
|
extend: 'pdfHtml5',
|
||||||
|
title: documentTitle
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}).container().appendTo($('#kt_ecommerce_report_sales_export'));
|
||||||
|
|
||||||
|
// Hook dropdown menu click event to datatable export buttons
|
||||||
|
const exportButtons = document.querySelectorAll('#kt_ecommerce_report_sales_export_menu [data-kt-ecommerce-export]');
|
||||||
|
exportButtons.forEach(exportButton => {
|
||||||
|
exportButton.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Get clicked export value
|
||||||
|
const exportValue = e.target.getAttribute('data-kt-ecommerce-export');
|
||||||
|
const target = document.querySelector('.dt-buttons .buttons-' + exportValue);
|
||||||
|
|
||||||
|
// Trigger click event on hidden datatable export buttons
|
||||||
|
target.click();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 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();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function () {
|
||||||
|
table = document.querySelector('#kt_ecommerce_report_sales_table');
|
||||||
|
|
||||||
|
if (!table) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
initDatatable();
|
||||||
|
initDaterangepicker();
|
||||||
|
exportButtons();
|
||||||
|
handleSearchDatatable();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTAppEcommerceReportSales.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,137 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTAppEcommerceReportShipping = function () {
|
||||||
|
// Shared variables
|
||||||
|
var table;
|
||||||
|
var datatable;
|
||||||
|
|
||||||
|
// Private functions
|
||||||
|
var initDatatable = function () {
|
||||||
|
// Set date data order
|
||||||
|
const tableRows = table.querySelectorAll('tbody tr');
|
||||||
|
|
||||||
|
tableRows.forEach(row => {
|
||||||
|
const dateRow = row.querySelectorAll('td');
|
||||||
|
const realDate = moment(dateRow[0].innerHTML, "MMM DD, YYYY").format(); // select date from 4th column in table
|
||||||
|
dateRow[0].setAttribute('data-order', realDate);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
// Init datatable --- more info on datatables: https://datatables.net/manual/
|
||||||
|
datatable = $(table).DataTable({
|
||||||
|
"info": false,
|
||||||
|
'order': [],
|
||||||
|
'pageLength': 10,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init daterangepicker
|
||||||
|
var initDaterangepicker = () => {
|
||||||
|
var start = moment().subtract(29, "days");
|
||||||
|
var end = moment();
|
||||||
|
var input = $("#kt_ecommerce_report_shipping_daterangepicker");
|
||||||
|
|
||||||
|
function cb(start, end) {
|
||||||
|
input.html(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));
|
||||||
|
}
|
||||||
|
|
||||||
|
input.daterangepicker({
|
||||||
|
startDate: start,
|
||||||
|
endDate: end,
|
||||||
|
ranges: {
|
||||||
|
"Today": [moment(), moment()],
|
||||||
|
"Yesterday": [moment().subtract(1, "days"), moment().subtract(1, "days")],
|
||||||
|
"Last 7 Days": [moment().subtract(6, "days"), moment()],
|
||||||
|
"Last 30 Days": [moment().subtract(29, "days"), moment()],
|
||||||
|
"This Month": [moment().startOf("month"), moment().endOf("month")],
|
||||||
|
"Last Month": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
|
||||||
|
}
|
||||||
|
}, cb);
|
||||||
|
|
||||||
|
cb(start, end);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hook export buttons
|
||||||
|
var exportButtons = () => {
|
||||||
|
const documentTitle = 'Shipping Report';
|
||||||
|
var buttons = new $.fn.dataTable.Buttons(table, {
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
extend: 'copyHtml5',
|
||||||
|
title: documentTitle
|
||||||
|
},
|
||||||
|
{
|
||||||
|
extend: 'excelHtml5',
|
||||||
|
title: documentTitle
|
||||||
|
},
|
||||||
|
{
|
||||||
|
extend: 'csvHtml5',
|
||||||
|
title: documentTitle
|
||||||
|
},
|
||||||
|
{
|
||||||
|
extend: 'pdfHtml5',
|
||||||
|
title: documentTitle
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}).container().appendTo($('#kt_ecommerce_report_shipping_export'));
|
||||||
|
|
||||||
|
// Hook dropdown menu click event to datatable export buttons
|
||||||
|
const exportButtons = document.querySelectorAll('#kt_ecommerce_report_shipping_export_menu [data-kt-ecommerce-export]');
|
||||||
|
exportButtons.forEach(exportButton => {
|
||||||
|
exportButton.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Get clicked export value
|
||||||
|
const exportValue = e.target.getAttribute('data-kt-ecommerce-export');
|
||||||
|
const target = document.querySelector('.dt-buttons .buttons-' + exportValue);
|
||||||
|
|
||||||
|
// Trigger click event on hidden datatable export buttons
|
||||||
|
target.click();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 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();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function () {
|
||||||
|
table = document.querySelector('#kt_ecommerce_report_shipping_table');
|
||||||
|
|
||||||
|
if (!table) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
initDatatable();
|
||||||
|
initDaterangepicker();
|
||||||
|
exportButtons();
|
||||||
|
handleSearchDatatable();
|
||||||
|
handleStatusFilter();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTAppEcommerceReportShipping.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,127 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTAppEcommerceReportViews = function () {
|
||||||
|
// Shared variables
|
||||||
|
var table;
|
||||||
|
var datatable;
|
||||||
|
|
||||||
|
// Private functions
|
||||||
|
var initDatatable = function () {
|
||||||
|
// Init datatable --- more info on datatables: https://datatables.net/manual/
|
||||||
|
datatable = $(table).DataTable({
|
||||||
|
"info": false,
|
||||||
|
'order': [],
|
||||||
|
'pageLength': 10,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init daterangepicker
|
||||||
|
var initDaterangepicker = () => {
|
||||||
|
var start = moment().subtract(29, "days");
|
||||||
|
var end = moment();
|
||||||
|
var input = $("#kt_ecommerce_report_views_daterangepicker");
|
||||||
|
|
||||||
|
function cb(start, end) {
|
||||||
|
input.html(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));
|
||||||
|
}
|
||||||
|
|
||||||
|
input.daterangepicker({
|
||||||
|
startDate: start,
|
||||||
|
endDate: end,
|
||||||
|
ranges: {
|
||||||
|
"Today": [moment(), moment()],
|
||||||
|
"Yesterday": [moment().subtract(1, "days"), moment().subtract(1, "days")],
|
||||||
|
"Last 7 Days": [moment().subtract(6, "days"), moment()],
|
||||||
|
"Last 30 Days": [moment().subtract(29, "days"), moment()],
|
||||||
|
"This Month": [moment().startOf("month"), moment().endOf("month")],
|
||||||
|
"Last Month": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
|
||||||
|
}
|
||||||
|
}, cb);
|
||||||
|
|
||||||
|
cb(start, end);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle rating filter dropdown
|
||||||
|
var handleStatusFilter = () => {
|
||||||
|
const filterStatus = document.querySelector('[data-kt-ecommerce-order-filter="rating"]');
|
||||||
|
$(filterStatus).on('change', e => {
|
||||||
|
let value = e.target.value;
|
||||||
|
if (value === 'all') {
|
||||||
|
value = '';
|
||||||
|
}
|
||||||
|
datatable.column(2).search(value).draw();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Hook export buttons
|
||||||
|
var exportButtons = () => {
|
||||||
|
const documentTitle = 'Product Views Report';
|
||||||
|
var buttons = new $.fn.dataTable.Buttons(table, {
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
extend: 'copyHtml5',
|
||||||
|
title: documentTitle
|
||||||
|
},
|
||||||
|
{
|
||||||
|
extend: 'excelHtml5',
|
||||||
|
title: documentTitle
|
||||||
|
},
|
||||||
|
{
|
||||||
|
extend: 'csvHtml5',
|
||||||
|
title: documentTitle
|
||||||
|
},
|
||||||
|
{
|
||||||
|
extend: 'pdfHtml5',
|
||||||
|
title: documentTitle
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}).container().appendTo($('#kt_ecommerce_report_views_export'));
|
||||||
|
|
||||||
|
// Hook dropdown menu click event to datatable export buttons
|
||||||
|
const exportButtons = document.querySelectorAll('#kt_ecommerce_report_views_export_menu [data-kt-ecommerce-export]');
|
||||||
|
exportButtons.forEach(exportButton => {
|
||||||
|
exportButton.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Get clicked export value
|
||||||
|
const exportValue = e.target.getAttribute('data-kt-ecommerce-export');
|
||||||
|
const target = document.querySelector('.dt-buttons .buttons-' + exportValue);
|
||||||
|
|
||||||
|
// Trigger click event on hidden datatable export buttons
|
||||||
|
target.click();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 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();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function () {
|
||||||
|
table = document.querySelector('#kt_ecommerce_report_views_table');
|
||||||
|
|
||||||
|
if (!table) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
initDatatable();
|
||||||
|
initDaterangepicker();
|
||||||
|
exportButtons();
|
||||||
|
handleSearchDatatable();
|
||||||
|
handleStatusFilter();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTAppEcommerceReportViews.init();
|
||||||
|
});
|
||||||
|
|
@ -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();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,188 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTAppEcommerceSettings = function () {
|
||||||
|
// Shared variables
|
||||||
|
|
||||||
|
|
||||||
|
// Private functions
|
||||||
|
const initForms = () => {
|
||||||
|
const forms = [
|
||||||
|
'kt_ecommerce_settings_general_form',
|
||||||
|
'kt_ecommerce_settings_general_store',
|
||||||
|
'kt_ecommerce_settings_general_localization',
|
||||||
|
'kt_ecommerce_settings_general_products',
|
||||||
|
'kt_ecommerce_settings_general_customers',
|
||||||
|
];
|
||||||
|
|
||||||
|
// Init all forms
|
||||||
|
forms.forEach(formId => {
|
||||||
|
// Select form
|
||||||
|
const form = document.getElementById(formId);
|
||||||
|
|
||||||
|
if(!form){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Dynamically create validation non-empty rule
|
||||||
|
const requiredFields = form.querySelectorAll('.required');
|
||||||
|
var detectedField;
|
||||||
|
var validationFields = {
|
||||||
|
fields: {},
|
||||||
|
|
||||||
|
plugins: {
|
||||||
|
trigger: new FormValidation.plugins.Trigger(),
|
||||||
|
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||||
|
rowSelector: '.fv-row',
|
||||||
|
eleInvalidClass: '',
|
||||||
|
eleValidClass: ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Detect required fields
|
||||||
|
requiredFields.forEach(el => {
|
||||||
|
const input = el.closest('.row').querySelector('input');
|
||||||
|
if (input) {
|
||||||
|
detectedField = input;
|
||||||
|
}
|
||||||
|
|
||||||
|
const textarea = el.closest('.row').querySelector('textarea');
|
||||||
|
if (textarea) {
|
||||||
|
detectedField = textarea;
|
||||||
|
}
|
||||||
|
|
||||||
|
const select = el.closest('.row').querySelector('select');
|
||||||
|
if (select) {
|
||||||
|
detectedField = select;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add validation rule
|
||||||
|
const name = detectedField.getAttribute('name');
|
||||||
|
validationFields.fields[name] = {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: el.innerText + ' is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||||
|
var validator = FormValidation.formValidation(
|
||||||
|
form,
|
||||||
|
validationFields
|
||||||
|
);
|
||||||
|
|
||||||
|
// Submit button handler
|
||||||
|
const submitButton = form.querySelector('[data-kt-ecommerce-settings-type="submit"]');
|
||||||
|
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 button to avoid multiple click
|
||||||
|
submitButton.disabled = true;
|
||||||
|
|
||||||
|
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||||
|
setTimeout(function () {
|
||||||
|
// Remove loading indication
|
||||||
|
submitButton.removeAttribute('data-kt-indicator');
|
||||||
|
|
||||||
|
// Enable button
|
||||||
|
submitButton.disabled = false;
|
||||||
|
|
||||||
|
// Show popup confirmation
|
||||||
|
Swal.fire({
|
||||||
|
text: "Form has been successfully submitted!",
|
||||||
|
icon: "success",
|
||||||
|
buttonsStyling: false,
|
||||||
|
confirmButtonText: "Ok, got it!",
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-primary"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//form.submit(); // Submit form
|
||||||
|
}, 2000);
|
||||||
|
} else {
|
||||||
|
// Show popup error
|
||||||
|
Swal.fire({
|
||||||
|
text: "Oops! There are some error(s) detected.",
|
||||||
|
icon: "error",
|
||||||
|
buttonsStyling: false,
|
||||||
|
confirmButtonText: "Ok, got it!",
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-primary"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init Tagify
|
||||||
|
const initTagify = () => {
|
||||||
|
// Get tagify elements
|
||||||
|
const elements = document.querySelectorAll('[data-kt-ecommerce-settings-type="tagify"]');
|
||||||
|
|
||||||
|
// Init tagify
|
||||||
|
elements.forEach(element => {
|
||||||
|
new Tagify(element);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init Select2 with flags
|
||||||
|
const initSelect2Flags = () => {
|
||||||
|
// 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/
|
||||||
|
$('[data-kt-ecommerce-settings-type="select2_flags"]').select2({
|
||||||
|
placeholder: "Select a country",
|
||||||
|
minimumResultsForSearch: Infinity,
|
||||||
|
templateSelection: optionFormat,
|
||||||
|
templateResult: optionFormat
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function () {
|
||||||
|
|
||||||
|
initForms();
|
||||||
|
initTagify();
|
||||||
|
initSelect2Flags();
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTAppEcommerceSettings.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,939 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTFileManagerList = function () {
|
||||||
|
// Define shared variables
|
||||||
|
var datatable;
|
||||||
|
var table
|
||||||
|
|
||||||
|
// Define template element variables
|
||||||
|
var uploadTemplate;
|
||||||
|
var renameTemplate;
|
||||||
|
var actionTemplate;
|
||||||
|
var checkboxTemplate;
|
||||||
|
|
||||||
|
|
||||||
|
// Private functions
|
||||||
|
const initTemplates = () => {
|
||||||
|
uploadTemplate = document.querySelector('[data-kt-filemanager-template="upload"]');
|
||||||
|
renameTemplate = document.querySelector('[data-kt-filemanager-template="rename"]');
|
||||||
|
actionTemplate = document.querySelector('[data-kt-filemanager-template="action"]');
|
||||||
|
checkboxTemplate = document.querySelector('[data-kt-filemanager-template="checkbox"]');
|
||||||
|
}
|
||||||
|
|
||||||
|
const initDatatable = () => {
|
||||||
|
// Set date data order
|
||||||
|
const tableRows = table.querySelectorAll('tbody tr');
|
||||||
|
|
||||||
|
tableRows.forEach(row => {
|
||||||
|
const dateRow = row.querySelectorAll('td');
|
||||||
|
const dateCol = dateRow[3]; // select date from 4th column in table
|
||||||
|
const realDate = moment(dateCol.innerHTML, "DD MMM YYYY, LT").format();
|
||||||
|
dateCol.setAttribute('data-order', realDate);
|
||||||
|
});
|
||||||
|
|
||||||
|
const foldersListOptions = {
|
||||||
|
"info": false,
|
||||||
|
'order': [],
|
||||||
|
"scrollY": "700px",
|
||||||
|
"scrollCollapse": true,
|
||||||
|
"paging": false,
|
||||||
|
'ordering': false,
|
||||||
|
'columns': [
|
||||||
|
{ data: 'checkbox' },
|
||||||
|
{ data: 'name' },
|
||||||
|
{ data: 'size' },
|
||||||
|
{ data: 'date' },
|
||||||
|
{ data: 'action' },
|
||||||
|
],
|
||||||
|
'language': {
|
||||||
|
emptyTable: `<div class="d-flex flex-column flex-center">
|
||||||
|
<img src="${hostUrl}media/illustrations/sketchy-1/5.png" class="mw-400px" />
|
||||||
|
<div class="fs-1 fw-bolder text-dark">No items found.</div>
|
||||||
|
<div class="fs-6">Start creating new folders or uploading a new file!</div>
|
||||||
|
</div>`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const filesListOptions = {
|
||||||
|
"info": false,
|
||||||
|
'order': [],
|
||||||
|
'pageLength': 10,
|
||||||
|
"lengthChange": false,
|
||||||
|
'ordering': false,
|
||||||
|
'columns': [
|
||||||
|
{ data: 'checkbox' },
|
||||||
|
{ data: 'name' },
|
||||||
|
{ data: 'size' },
|
||||||
|
{ data: 'date' },
|
||||||
|
{ data: 'action' },
|
||||||
|
],
|
||||||
|
'language': {
|
||||||
|
emptyTable: `<div class="d-flex flex-column flex-center">
|
||||||
|
<img src="${hostUrl}media/illustrations/sketchy-1/5.png" class="mw-400px" />
|
||||||
|
<div class="fs-1 fw-bolder text-dark mb-4">No items found.</div>
|
||||||
|
<div class="fs-6">Start creating new folders or uploading a new file!</div>
|
||||||
|
</div>`
|
||||||
|
},
|
||||||
|
conditionalPaging: true
|
||||||
|
};
|
||||||
|
|
||||||
|
// Define datatable options to load
|
||||||
|
var loadOptions;
|
||||||
|
if (table.getAttribute('data-kt-filemanager-table') === 'folders') {
|
||||||
|
loadOptions = foldersListOptions;
|
||||||
|
} else {
|
||||||
|
loadOptions = filesListOptions;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init datatable --- more info on datatables: https://datatables.net/manual/
|
||||||
|
datatable = $(table).DataTable(loadOptions);
|
||||||
|
|
||||||
|
// Re-init functions on every table re-draw -- more info: https://datatables.net/reference/event/draw
|
||||||
|
datatable.on('draw', function () {
|
||||||
|
initToggleToolbar();
|
||||||
|
handleDeleteRows();
|
||||||
|
toggleToolbars();
|
||||||
|
resetNewFolder();
|
||||||
|
KTMenu.createInstances();
|
||||||
|
initCopyLink();
|
||||||
|
countTotalItems();
|
||||||
|
handleRename();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
|
||||||
|
const handleSearchDatatable = () => {
|
||||||
|
const filterSearch = document.querySelector('[data-kt-filemanager-table-filter="search"]');
|
||||||
|
filterSearch.addEventListener('keyup', function (e) {
|
||||||
|
datatable.search(e.target.value).draw();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Delete customer
|
||||||
|
const handleDeleteRows = () => {
|
||||||
|
// Select all delete buttons
|
||||||
|
const deleteButtons = table.querySelectorAll('[data-kt-filemanager-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 fileName = 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 " + fileName + "?",
|
||||||
|
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 " + fileName + "!.",
|
||||||
|
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",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init toggle toolbar
|
||||||
|
const initToggleToolbar = () => {
|
||||||
|
// Toggle selected action toolbar
|
||||||
|
// Select all checkboxes
|
||||||
|
var checkboxes = table.querySelectorAll('[type="checkbox"]');
|
||||||
|
if (table.getAttribute('data-kt-filemanager-table') === 'folders') {
|
||||||
|
checkboxes = document.querySelectorAll('#kt_file_manager_list_wrapper [type="checkbox"]');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Select elements
|
||||||
|
const deleteSelected = document.querySelector('[data-kt-filemanager-table-select="delete_selected"]');
|
||||||
|
|
||||||
|
// Toggle delete selected toolbar
|
||||||
|
checkboxes.forEach(c => {
|
||||||
|
// Checkbox on click event
|
||||||
|
c.addEventListener('click', function () {
|
||||||
|
console.log(c);
|
||||||
|
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 files or folders?",
|
||||||
|
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 files or folders!.",
|
||||||
|
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 files or folders 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-filemanager-table-toolbar="base"]');
|
||||||
|
const toolbarSelected = document.querySelector('[data-kt-filemanager-table-toolbar="selected"]');
|
||||||
|
const selectedCount = document.querySelector('[data-kt-filemanager-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');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle new folder
|
||||||
|
const handleNewFolder = () => {
|
||||||
|
// Select button
|
||||||
|
const newFolder = document.getElementById('kt_file_manager_new_folder');
|
||||||
|
|
||||||
|
// Handle click action
|
||||||
|
newFolder.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Ignore if input already exist
|
||||||
|
if (table.querySelector('#kt_file_manager_new_folder_row')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add new blank row to datatable
|
||||||
|
const tableBody = table.querySelector('tbody');
|
||||||
|
const rowElement = uploadTemplate.cloneNode(true); // Clone template markup
|
||||||
|
tableBody.prepend(rowElement);
|
||||||
|
|
||||||
|
// Define template interactive elements
|
||||||
|
const rowForm = rowElement.querySelector('#kt_file_manager_add_folder_form');
|
||||||
|
const rowButton = rowElement.querySelector('#kt_file_manager_add_folder');
|
||||||
|
const cancelButton = rowElement.querySelector('#kt_file_manager_cancel_folder');
|
||||||
|
const folderIcon = rowElement.querySelector('#kt_file_manager_folder_icon');
|
||||||
|
const rowInput = rowElement.querySelector('[name="new_folder_name"]');
|
||||||
|
|
||||||
|
// Define validator
|
||||||
|
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||||
|
var validator = FormValidation.formValidation(
|
||||||
|
rowForm,
|
||||||
|
{
|
||||||
|
fields: {
|
||||||
|
'new_folder_name': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Folder name is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
trigger: new FormValidation.plugins.Trigger(),
|
||||||
|
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||||
|
rowSelector: '.fv-row',
|
||||||
|
eleInvalidClass: '',
|
||||||
|
eleValidClass: ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// Handle add new folder button
|
||||||
|
rowButton.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Activate indicator
|
||||||
|
rowButton.setAttribute("data-kt-indicator", "on");
|
||||||
|
|
||||||
|
// Validate form before submit
|
||||||
|
if (validator) {
|
||||||
|
validator.validate().then(function (status) {
|
||||||
|
console.log('validated!');
|
||||||
|
|
||||||
|
if (status == 'Valid') {
|
||||||
|
// Simulate process for demo only
|
||||||
|
setTimeout(function () {
|
||||||
|
// Create folder link
|
||||||
|
const folderLink = document.createElement('a');
|
||||||
|
const folderLinkClasses = ['text-gray-800', 'text-hover-primary'];
|
||||||
|
folderLink.setAttribute('href', '?page=apps/file-manager/blank');
|
||||||
|
folderLink.classList.add(...folderLinkClasses);
|
||||||
|
folderLink.innerText = rowInput.value;
|
||||||
|
|
||||||
|
const newRow = datatable.row.add({
|
||||||
|
'checkbox': checkboxTemplate.innerHTML,
|
||||||
|
'name': folderIcon.outerHTML + folderLink.outerHTML,
|
||||||
|
"size": '-',
|
||||||
|
"date": '-',
|
||||||
|
'action': actionTemplate.innerHTML
|
||||||
|
}).node();
|
||||||
|
$(newRow).find('td').eq(4).attr('data-kt-filemanager-table', 'action_dropdown');
|
||||||
|
$(newRow).find('td').eq(4).addClass('text-end'); // Add custom class to last 'td' element --- more info: https://datatables.net/forums/discussion/22341/row-add-cell-class
|
||||||
|
|
||||||
|
// Re-sort datatable to allow new folder added at the top
|
||||||
|
var index = datatable.row(0).index(),
|
||||||
|
rowCount = datatable.data().length - 1,
|
||||||
|
insertedRow = datatable.row(rowCount).data(),
|
||||||
|
tempRow;
|
||||||
|
|
||||||
|
for (var i = rowCount; i > index; i--) {
|
||||||
|
tempRow = datatable.row(i - 1).data();
|
||||||
|
datatable.row(i).data(tempRow);
|
||||||
|
datatable.row(i - 1).data(insertedRow);
|
||||||
|
}
|
||||||
|
|
||||||
|
toastr.options = {
|
||||||
|
"closeButton": true,
|
||||||
|
"debug": false,
|
||||||
|
"newestOnTop": false,
|
||||||
|
"progressBar": false,
|
||||||
|
"positionClass": "toastr-top-right",
|
||||||
|
"preventDuplicates": false,
|
||||||
|
"showDuration": "300",
|
||||||
|
"hideDuration": "1000",
|
||||||
|
"timeOut": "5000",
|
||||||
|
"extendedTimeOut": "1000",
|
||||||
|
"showEasing": "swing",
|
||||||
|
"hideEasing": "linear",
|
||||||
|
"showMethod": "fadeIn",
|
||||||
|
"hideMethod": "fadeOut"
|
||||||
|
};
|
||||||
|
|
||||||
|
toastr.success(rowInput.value + ' was created!');
|
||||||
|
|
||||||
|
// Disable indicator
|
||||||
|
rowButton.removeAttribute("data-kt-indicator");
|
||||||
|
|
||||||
|
// Reset input
|
||||||
|
rowInput.value = '';
|
||||||
|
|
||||||
|
datatable.draw(false);
|
||||||
|
|
||||||
|
}, 2000);
|
||||||
|
} else {
|
||||||
|
// Disable indicator
|
||||||
|
rowButton.removeAttribute("data-kt-indicator");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle cancel new folder button
|
||||||
|
cancelButton.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Activate indicator
|
||||||
|
cancelButton.setAttribute("data-kt-indicator", "on");
|
||||||
|
|
||||||
|
setTimeout(function () {
|
||||||
|
// Disable indicator
|
||||||
|
cancelButton.removeAttribute("data-kt-indicator");
|
||||||
|
|
||||||
|
// Toggle toastr
|
||||||
|
toastr.options = {
|
||||||
|
"closeButton": true,
|
||||||
|
"debug": false,
|
||||||
|
"newestOnTop": false,
|
||||||
|
"progressBar": false,
|
||||||
|
"positionClass": "toastr-top-right",
|
||||||
|
"preventDuplicates": false,
|
||||||
|
"showDuration": "300",
|
||||||
|
"hideDuration": "1000",
|
||||||
|
"timeOut": "5000",
|
||||||
|
"extendedTimeOut": "1000",
|
||||||
|
"showEasing": "swing",
|
||||||
|
"hideEasing": "linear",
|
||||||
|
"showMethod": "fadeIn",
|
||||||
|
"hideMethod": "fadeOut"
|
||||||
|
};
|
||||||
|
|
||||||
|
toastr.error('Cancelled new folder creation');
|
||||||
|
resetNewFolder();
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reset add new folder input
|
||||||
|
const resetNewFolder = () => {
|
||||||
|
const newFolderRow = table.querySelector('#kt_file_manager_new_folder_row');
|
||||||
|
|
||||||
|
if (newFolderRow) {
|
||||||
|
newFolderRow.parentNode.removeChild(newFolderRow);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle rename file or folder
|
||||||
|
const handleRename = () => {
|
||||||
|
const renameButton = table.querySelectorAll('[data-kt-filemanager-table="rename"]');
|
||||||
|
|
||||||
|
renameButton.forEach(button => {
|
||||||
|
button.addEventListener('click', renameCallback);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Rename callback
|
||||||
|
const renameCallback = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Define shared value
|
||||||
|
let nameValue;
|
||||||
|
|
||||||
|
// Stop renaming if there's an input existing
|
||||||
|
if (table.querySelectorAll('#kt_file_manager_rename_input').length > 0) {
|
||||||
|
Swal.fire({
|
||||||
|
text: "Unsaved input detected. Please save or cancel the current item",
|
||||||
|
icon: "warning",
|
||||||
|
buttonsStyling: false,
|
||||||
|
confirmButtonText: "Ok, got it!",
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn fw-bold btn-danger"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Select parent row
|
||||||
|
const parent = e.target.closest('tr');
|
||||||
|
|
||||||
|
// Get name column
|
||||||
|
const nameCol = parent.querySelectorAll('td')[1];
|
||||||
|
const colIcon = nameCol.querySelector('.icon-wrapper');
|
||||||
|
nameValue = nameCol.innerText;
|
||||||
|
|
||||||
|
// Set rename input template
|
||||||
|
const renameInput = renameTemplate.cloneNode(true);
|
||||||
|
renameInput.querySelector('#kt_file_manager_rename_folder_icon').innerHTML = colIcon.outerHTML;
|
||||||
|
|
||||||
|
// Swap current column content with input template
|
||||||
|
nameCol.innerHTML = renameInput.innerHTML;
|
||||||
|
|
||||||
|
// Set input value with current file/folder name
|
||||||
|
parent.querySelector('#kt_file_manager_rename_input').value = nameValue;
|
||||||
|
|
||||||
|
// Rename file / folder validator
|
||||||
|
var renameValidator = FormValidation.formValidation(
|
||||||
|
nameCol,
|
||||||
|
{
|
||||||
|
fields: {
|
||||||
|
'rename_folder_name': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Name is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
trigger: new FormValidation.plugins.Trigger(),
|
||||||
|
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||||
|
rowSelector: '.fv-row',
|
||||||
|
eleInvalidClass: '',
|
||||||
|
eleValidClass: ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// Rename input button action
|
||||||
|
const renameInputButton = document.querySelector('#kt_file_manager_rename_folder');
|
||||||
|
renameInputButton.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Detect if valid
|
||||||
|
if (renameValidator) {
|
||||||
|
renameValidator.validate().then(function (status) {
|
||||||
|
console.log('validated!');
|
||||||
|
|
||||||
|
if (status == 'Valid') {
|
||||||
|
// Pop up confirmation
|
||||||
|
Swal.fire({
|
||||||
|
text: "Are you sure you want to rename " + nameValue + "?",
|
||||||
|
icon: "warning",
|
||||||
|
showCancelButton: true,
|
||||||
|
buttonsStyling: false,
|
||||||
|
confirmButtonText: "Yes, rename it!",
|
||||||
|
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 renamed " + nameValue + "!.",
|
||||||
|
icon: "success",
|
||||||
|
buttonsStyling: false,
|
||||||
|
confirmButtonText: "Ok, got it!",
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn fw-bold btn-primary",
|
||||||
|
}
|
||||||
|
}).then(function () {
|
||||||
|
// Get new file / folder name value
|
||||||
|
const newValue = document.querySelector('#kt_file_manager_rename_input').value;
|
||||||
|
|
||||||
|
// New column data template
|
||||||
|
const newData = `<div class="d-flex align-items-center">
|
||||||
|
${colIcon.outerHTML}
|
||||||
|
<a href="?page=apps/file-manager/files/" class="text-gray-800 text-hover-primary">${newValue}</a>
|
||||||
|
</div>`;
|
||||||
|
|
||||||
|
// Draw datatable with new content -- Add more events here for any server-side events
|
||||||
|
datatable.cell($(nameCol)).data(newData).draw();
|
||||||
|
});
|
||||||
|
} else if (result.dismiss === 'cancel') {
|
||||||
|
Swal.fire({
|
||||||
|
text: nameValue + " was not renamed.",
|
||||||
|
icon: "error",
|
||||||
|
buttonsStyling: false,
|
||||||
|
confirmButtonText: "Ok, got it!",
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn fw-bold btn-primary",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Cancel rename input
|
||||||
|
const cancelInputButton = document.querySelector('#kt_file_manager_rename_folder_cancel');
|
||||||
|
cancelInputButton.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Simulate process for demo only
|
||||||
|
cancelInputButton.setAttribute("data-kt-indicator", "on");
|
||||||
|
|
||||||
|
setTimeout(function () {
|
||||||
|
const revertTemplate = `<div class="d-flex align-items-center">
|
||||||
|
${colIcon.outerHTML}
|
||||||
|
<a href="?page=apps/file-manager/files/" class="text-gray-800 text-hover-primary">${nameValue}</a>
|
||||||
|
</div>`;
|
||||||
|
|
||||||
|
// Remove spinner
|
||||||
|
cancelInputButton.removeAttribute("data-kt-indicator");
|
||||||
|
|
||||||
|
// Draw datatable with new content -- Add more events here for any server-side events
|
||||||
|
datatable.cell($(nameCol)).data(revertTemplate).draw();
|
||||||
|
|
||||||
|
// Toggle toastr
|
||||||
|
toastr.options = {
|
||||||
|
"closeButton": true,
|
||||||
|
"debug": false,
|
||||||
|
"newestOnTop": false,
|
||||||
|
"progressBar": false,
|
||||||
|
"positionClass": "toastr-top-right",
|
||||||
|
"preventDuplicates": false,
|
||||||
|
"showDuration": "300",
|
||||||
|
"hideDuration": "1000",
|
||||||
|
"timeOut": "5000",
|
||||||
|
"extendedTimeOut": "1000",
|
||||||
|
"showEasing": "swing",
|
||||||
|
"hideEasing": "linear",
|
||||||
|
"showMethod": "fadeIn",
|
||||||
|
"hideMethod": "fadeOut"
|
||||||
|
};
|
||||||
|
|
||||||
|
toastr.error('Cancelled rename function');
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init dropzone
|
||||||
|
const initDropzone = () => {
|
||||||
|
// set the dropzone container id
|
||||||
|
const id = "#kt_modal_upload_dropzone";
|
||||||
|
const dropzone = document.querySelector(id);
|
||||||
|
|
||||||
|
// set the preview element template
|
||||||
|
var previewNode = dropzone.querySelector(".dropzone-item");
|
||||||
|
previewNode.id = "";
|
||||||
|
var previewTemplate = previewNode.parentNode.innerHTML;
|
||||||
|
previewNode.parentNode.removeChild(previewNode);
|
||||||
|
|
||||||
|
var myDropzone = new Dropzone(id, { // Make the whole body a dropzone
|
||||||
|
url: "path/to/your/server", // Set the url for your upload script location
|
||||||
|
parallelUploads: 10,
|
||||||
|
previewTemplate: previewTemplate,
|
||||||
|
maxFilesize: 1, // Max filesize in MB
|
||||||
|
autoProcessQueue: false, // Stop auto upload
|
||||||
|
autoQueue: false, // Make sure the files aren't queued until manually added
|
||||||
|
previewsContainer: id + " .dropzone-items", // Define the container to display the previews
|
||||||
|
clickable: id + " .dropzone-select" // Define the element that should be used as click trigger to select files.
|
||||||
|
});
|
||||||
|
|
||||||
|
myDropzone.on("addedfile", function (file) {
|
||||||
|
// Hook each start button
|
||||||
|
file.previewElement.querySelector(id + " .dropzone-start").onclick = function () {
|
||||||
|
// myDropzone.enqueueFile(file); -- default dropzone function
|
||||||
|
|
||||||
|
// Process simulation for demo only
|
||||||
|
const progressBar = file.previewElement.querySelector('.progress-bar');
|
||||||
|
progressBar.style.opacity = "1";
|
||||||
|
var width = 1;
|
||||||
|
var timer = setInterval(function () {
|
||||||
|
if (width >= 100) {
|
||||||
|
myDropzone.emit("success", file);
|
||||||
|
myDropzone.emit("complete", file);
|
||||||
|
clearInterval(timer);
|
||||||
|
} else {
|
||||||
|
width++;
|
||||||
|
progressBar.style.width = width + '%';
|
||||||
|
}
|
||||||
|
}, 20);
|
||||||
|
};
|
||||||
|
|
||||||
|
const dropzoneItems = dropzone.querySelectorAll('.dropzone-item');
|
||||||
|
dropzoneItems.forEach(dropzoneItem => {
|
||||||
|
dropzoneItem.style.display = '';
|
||||||
|
});
|
||||||
|
dropzone.querySelector('.dropzone-upload').style.display = "inline-block";
|
||||||
|
dropzone.querySelector('.dropzone-remove-all').style.display = "inline-block";
|
||||||
|
});
|
||||||
|
|
||||||
|
// Hide the total progress bar when nothing's uploading anymore
|
||||||
|
myDropzone.on("complete", function (file) {
|
||||||
|
const progressBars = dropzone.querySelectorAll('.dz-complete');
|
||||||
|
setTimeout(function () {
|
||||||
|
progressBars.forEach(progressBar => {
|
||||||
|
progressBar.querySelector('.progress-bar').style.opacity = "0";
|
||||||
|
progressBar.querySelector('.progress').style.opacity = "0";
|
||||||
|
progressBar.querySelector('.dropzone-start').style.opacity = "0";
|
||||||
|
});
|
||||||
|
}, 300);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Setup the buttons for all transfers
|
||||||
|
dropzone.querySelector(".dropzone-upload").addEventListener('click', function () {
|
||||||
|
// myDropzone.processQueue(); --- default dropzone process
|
||||||
|
|
||||||
|
// Process simulation for demo only
|
||||||
|
myDropzone.files.forEach(file => {
|
||||||
|
const progressBar = file.previewElement.querySelector('.progress-bar');
|
||||||
|
progressBar.style.opacity = "1";
|
||||||
|
var width = 1;
|
||||||
|
var timer = setInterval(function () {
|
||||||
|
if (width >= 100) {
|
||||||
|
myDropzone.emit("success", file);
|
||||||
|
myDropzone.emit("complete", file);
|
||||||
|
clearInterval(timer);
|
||||||
|
} else {
|
||||||
|
width++;
|
||||||
|
progressBar.style.width = width + '%';
|
||||||
|
}
|
||||||
|
}, 20);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Setup the button for remove all files
|
||||||
|
dropzone.querySelector(".dropzone-remove-all").addEventListener('click', function () {
|
||||||
|
Swal.fire({
|
||||||
|
text: "Are you sure you would like to remove all files?",
|
||||||
|
icon: "warning",
|
||||||
|
showCancelButton: true,
|
||||||
|
buttonsStyling: false,
|
||||||
|
confirmButtonText: "Yes, remove it!",
|
||||||
|
cancelButtonText: "No, return",
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-primary",
|
||||||
|
cancelButton: "btn btn-active-light"
|
||||||
|
}
|
||||||
|
}).then(function (result) {
|
||||||
|
if (result.value) {
|
||||||
|
dropzone.querySelector('.dropzone-upload').style.display = "none";
|
||||||
|
dropzone.querySelector('.dropzone-remove-all').style.display = "none";
|
||||||
|
myDropzone.removeAllFiles(true);
|
||||||
|
} else if (result.dismiss === 'cancel') {
|
||||||
|
Swal.fire({
|
||||||
|
text: "Your files was not removed!.",
|
||||||
|
icon: "error",
|
||||||
|
buttonsStyling: false,
|
||||||
|
confirmButtonText: "Ok, got it!",
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-primary",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// On all files completed upload
|
||||||
|
myDropzone.on("queuecomplete", function (progress) {
|
||||||
|
const uploadIcons = dropzone.querySelectorAll('.dropzone-upload');
|
||||||
|
uploadIcons.forEach(uploadIcon => {
|
||||||
|
uploadIcon.style.display = "none";
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// On all files removed
|
||||||
|
myDropzone.on("removedfile", function (file) {
|
||||||
|
if (myDropzone.files.length < 1) {
|
||||||
|
dropzone.querySelector('.dropzone-upload').style.display = "none";
|
||||||
|
dropzone.querySelector('.dropzone-remove-all').style.display = "none";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init copy link
|
||||||
|
const initCopyLink = () => {
|
||||||
|
// Select all copy link elements
|
||||||
|
const elements = table.querySelectorAll('[data-kt-filemanger-table="copy_link"]');
|
||||||
|
|
||||||
|
elements.forEach(el => {
|
||||||
|
// Define elements
|
||||||
|
const button = el.querySelector('button');
|
||||||
|
const generator = el.querySelector('[data-kt-filemanger-table="copy_link_generator"]');
|
||||||
|
const result = el.querySelector('[data-kt-filemanger-table="copy_link_result"]');
|
||||||
|
const input = el.querySelector('input');
|
||||||
|
|
||||||
|
// Click action
|
||||||
|
button.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
// Reset toggle
|
||||||
|
generator.classList.remove('d-none');
|
||||||
|
result.classList.add('d-none');
|
||||||
|
|
||||||
|
var linkTimeout;
|
||||||
|
clearTimeout(linkTimeout);
|
||||||
|
linkTimeout = setTimeout(() => {
|
||||||
|
generator.classList.add('d-none');
|
||||||
|
result.classList.remove('d-none');
|
||||||
|
input.select();
|
||||||
|
}, 2000);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle move to folder
|
||||||
|
const handleMoveToFolder = () => {
|
||||||
|
const element = document.querySelector('#kt_modal_move_to_folder');
|
||||||
|
const form = element.querySelector('#kt_modal_move_to_folder_form');
|
||||||
|
const saveButton = form.querySelector('#kt_modal_move_to_folder_submit');
|
||||||
|
const moveModal = new bootstrap.Modal(element);
|
||||||
|
|
||||||
|
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||||
|
var validator = FormValidation.formValidation(
|
||||||
|
form,
|
||||||
|
{
|
||||||
|
fields: {
|
||||||
|
'move_to_folder': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Please select a folder.'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
plugins: {
|
||||||
|
trigger: new FormValidation.plugins.Trigger(),
|
||||||
|
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||||
|
rowSelector: '.fv-row',
|
||||||
|
eleInvalidClass: '',
|
||||||
|
eleValidClass: ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
saveButton.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
saveButton.setAttribute("data-kt-indicator", "on");
|
||||||
|
|
||||||
|
if (validator) {
|
||||||
|
validator.validate().then(function (status) {
|
||||||
|
console.log('validated!');
|
||||||
|
|
||||||
|
if (status == 'Valid') {
|
||||||
|
// Simulate process for demo only
|
||||||
|
setTimeout(function () {
|
||||||
|
|
||||||
|
Swal.fire({
|
||||||
|
text: "Are you sure you would like to move to this folder",
|
||||||
|
icon: "warning",
|
||||||
|
showCancelButton: true,
|
||||||
|
buttonsStyling: false,
|
||||||
|
confirmButtonText: "Yes, move it!",
|
||||||
|
cancelButtonText: "No, return",
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-primary",
|
||||||
|
cancelButton: "btn btn-active-light"
|
||||||
|
}
|
||||||
|
}).then(function (result) {
|
||||||
|
if (result.isConfirmed) {
|
||||||
|
form.reset(); // Reset form
|
||||||
|
moveModal.hide(); // Hide modal
|
||||||
|
|
||||||
|
toastr.options = {
|
||||||
|
"closeButton": true,
|
||||||
|
"debug": false,
|
||||||
|
"newestOnTop": false,
|
||||||
|
"progressBar": false,
|
||||||
|
"positionClass": "toastr-top-right",
|
||||||
|
"preventDuplicates": false,
|
||||||
|
"showDuration": "300",
|
||||||
|
"hideDuration": "1000",
|
||||||
|
"timeOut": "5000",
|
||||||
|
"extendedTimeOut": "1000",
|
||||||
|
"showEasing": "swing",
|
||||||
|
"hideEasing": "linear",
|
||||||
|
"showMethod": "fadeIn",
|
||||||
|
"hideMethod": "fadeOut"
|
||||||
|
};
|
||||||
|
|
||||||
|
toastr.success('1 item has been moved.');
|
||||||
|
|
||||||
|
saveButton.removeAttribute("data-kt-indicator");
|
||||||
|
} else {
|
||||||
|
Swal.fire({
|
||||||
|
text: "Your action has been cancelled!.",
|
||||||
|
icon: "error",
|
||||||
|
buttonsStyling: false,
|
||||||
|
confirmButtonText: "Ok, got it!",
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-primary",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
saveButton.removeAttribute("data-kt-indicator");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, 500);
|
||||||
|
} else {
|
||||||
|
saveButton.removeAttribute("data-kt-indicator");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Count total number of items
|
||||||
|
const countTotalItems = () => {
|
||||||
|
const counter = document.getElementById('kt_file_manager_items_counter');
|
||||||
|
|
||||||
|
// Count total number of elements in datatable --- more info: https://datatables.net/reference/api/count()
|
||||||
|
counter.innerText = datatable.rows().count() + ' items';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function () {
|
||||||
|
table = document.querySelector('#kt_file_manager_list');
|
||||||
|
|
||||||
|
if (!table) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
initTemplates();
|
||||||
|
initDatatable();
|
||||||
|
initToggleToolbar();
|
||||||
|
handleSearchDatatable();
|
||||||
|
handleDeleteRows();
|
||||||
|
handleNewFolder();
|
||||||
|
initDropzone();
|
||||||
|
initCopyLink();
|
||||||
|
handleRename();
|
||||||
|
handleMoveToFolder();
|
||||||
|
countTotalItems();
|
||||||
|
KTMenu.createInstances();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTFileManagerList.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,55 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTAppFileManagerSettings = function () {
|
||||||
|
var form;
|
||||||
|
|
||||||
|
// Private functions
|
||||||
|
var handleForm = function() {
|
||||||
|
const saveButton = form.querySelector('#kt_file_manager_settings_submit');
|
||||||
|
|
||||||
|
saveButton.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
saveButton.setAttribute("data-kt-indicator", "on");
|
||||||
|
|
||||||
|
// Simulate process for demo only
|
||||||
|
setTimeout(function(){
|
||||||
|
toastr.options = {
|
||||||
|
"closeButton": true,
|
||||||
|
"debug": false,
|
||||||
|
"newestOnTop": false,
|
||||||
|
"progressBar": false,
|
||||||
|
"positionClass": "toast-top-right",
|
||||||
|
"preventDuplicates": false,
|
||||||
|
"showDuration": "300",
|
||||||
|
"hideDuration": "1000",
|
||||||
|
"timeOut": "5000",
|
||||||
|
"extendedTimeOut": "1000",
|
||||||
|
"showEasing": "swing",
|
||||||
|
"hideEasing": "linear",
|
||||||
|
"showMethod": "fadeIn",
|
||||||
|
"hideMethod": "fadeOut"
|
||||||
|
};
|
||||||
|
|
||||||
|
toastr.success('File manager settings have been saved');
|
||||||
|
|
||||||
|
saveButton.removeAttribute("data-kt-indicator");
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function(element) {
|
||||||
|
form = document.querySelector('#kt_file_manager_settings');
|
||||||
|
|
||||||
|
handleForm();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTAppFileManagerSettings.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,294 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTAppInboxCompose = function () {
|
||||||
|
// Private functions
|
||||||
|
// Init reply form
|
||||||
|
const initForm = () => {
|
||||||
|
// Set variables
|
||||||
|
const form = document.querySelector('#kt_inbox_compose_form');
|
||||||
|
const allTagify = form.querySelectorAll('[data-kt-inbox-form="tagify"]');
|
||||||
|
|
||||||
|
// Handle CC and BCC
|
||||||
|
handleCCandBCC(form);
|
||||||
|
|
||||||
|
// Handle submit form
|
||||||
|
handleSubmit(form);
|
||||||
|
|
||||||
|
// Init tagify
|
||||||
|
allTagify.forEach(tagify => {
|
||||||
|
initTagify(tagify);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Init quill editor
|
||||||
|
initQuill(form);
|
||||||
|
|
||||||
|
// Init dropzone
|
||||||
|
initDropzone(form);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle CC and BCC toggle
|
||||||
|
const handleCCandBCC = (el) => {
|
||||||
|
// Get elements
|
||||||
|
const ccElement = el.querySelector('[data-kt-inbox-form="cc"]');
|
||||||
|
const ccButton = el.querySelector('[data-kt-inbox-form="cc_button"]');
|
||||||
|
const ccClose = el.querySelector('[data-kt-inbox-form="cc_close"]');
|
||||||
|
const bccElement = el.querySelector('[data-kt-inbox-form="bcc"]');
|
||||||
|
const bccButton = el.querySelector('[data-kt-inbox-form="bcc_button"]');
|
||||||
|
const bccClose = el.querySelector('[data-kt-inbox-form="bcc_close"]');
|
||||||
|
|
||||||
|
// Handle CC button click
|
||||||
|
ccButton.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
ccElement.classList.remove('d-none');
|
||||||
|
ccElement.classList.add('d-flex');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle CC close button click
|
||||||
|
ccClose.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
ccElement.classList.add('d-none');
|
||||||
|
ccElement.classList.remove('d-flex');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle BCC button click
|
||||||
|
bccButton.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
bccElement.classList.remove('d-none');
|
||||||
|
bccElement.classList.add('d-flex');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle CC close button click
|
||||||
|
bccClose.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
bccElement.classList.add('d-none');
|
||||||
|
bccElement.classList.remove('d-flex');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle submit form
|
||||||
|
const handleSubmit = (el) => {
|
||||||
|
const submitButton = el.querySelector('[data-kt-inbox-form="send"]');
|
||||||
|
|
||||||
|
// Handle button click event
|
||||||
|
submitButton.addEventListener("click", function () {
|
||||||
|
// Activate indicator
|
||||||
|
submitButton.setAttribute("data-kt-indicator", "on");
|
||||||
|
|
||||||
|
// Disable indicator after 3 seconds
|
||||||
|
setTimeout(function () {
|
||||||
|
submitButton.removeAttribute("data-kt-indicator");
|
||||||
|
}, 3000);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init tagify
|
||||||
|
const initTagify = (el) => {
|
||||||
|
var inputElm = el;
|
||||||
|
|
||||||
|
const usersList = [
|
||||||
|
{ value: 1, name: 'Emma Smith', avatar: 'avatars/300-6.jpg', email: 'e.smith@kpmg.com.au' },
|
||||||
|
{ value: 2, name: 'Max Smith', avatar: 'avatars/300-1.jpg', email: 'max@kt.com' },
|
||||||
|
{ value: 3, name: 'Sean Bean', avatar: 'avatars/300-5.jpg', email: 'sean@dellito.com' },
|
||||||
|
{ value: 4, name: 'Brian Cox', avatar: 'avatars/300-25.jpg', email: 'brian@exchange.com' },
|
||||||
|
{ value: 5, name: 'Francis Mitcham', avatar: 'avatars/300-9.jpg', email: 'f.mitcham@kpmg.com.au' },
|
||||||
|
{ value: 6, name: 'Dan Wilson', avatar: 'avatars/300-23.jpg', email: 'dam@consilting.com' },
|
||||||
|
{ value: 7, name: 'Ana Crown', avatar: 'avatars/300-12.jpg', email: 'ana.cf@limtel.com' },
|
||||||
|
{ value: 8, name: 'John Miller', avatar: 'avatars/300-13.jpg', email: 'miller@mapple.com' }
|
||||||
|
];
|
||||||
|
|
||||||
|
function tagTemplate(tagData) {
|
||||||
|
return `
|
||||||
|
<tag title="${(tagData.title || tagData.email)}"
|
||||||
|
contenteditable='false'
|
||||||
|
spellcheck='false'
|
||||||
|
tabIndex="-1"
|
||||||
|
class="${this.settings.classNames.tag} ${tagData.class ? tagData.class : ""}"
|
||||||
|
${this.getAttributes(tagData)}>
|
||||||
|
<x title='' class='tagify__tag__removeBtn' role='button' aria-label='remove tag'></x>
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<div class='tagify__tag__avatar-wrap ps-0'>
|
||||||
|
<img onerror="this.style.visibility='hidden'" class="rounded-circle w-25px me-2" src="${hostUrl}media/${tagData.avatar}">
|
||||||
|
</div>
|
||||||
|
<span class='tagify__tag-text'>${tagData.name}</span>
|
||||||
|
</div>
|
||||||
|
</tag>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
function suggestionItemTemplate(tagData) {
|
||||||
|
return `
|
||||||
|
<div ${this.getAttributes(tagData)}
|
||||||
|
class='tagify__dropdown__item d-flex align-items-center ${tagData.class ? tagData.class : ""}'
|
||||||
|
tabindex="0"
|
||||||
|
role="option">
|
||||||
|
|
||||||
|
${tagData.avatar ? `
|
||||||
|
<div class='tagify__dropdown__item__avatar-wrap me-2'>
|
||||||
|
<img onerror="this.style.visibility='hidden'" class="rounded-circle w-50px me-2" src="${hostUrl}media/${tagData.avatar}">
|
||||||
|
</div>` : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
<div class="d-flex flex-column">
|
||||||
|
<strong>${tagData.name}</strong>
|
||||||
|
<span>${tagData.email}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
// initialize Tagify on the above input node reference
|
||||||
|
var tagify = new Tagify(inputElm, {
|
||||||
|
tagTextProp: 'name', // very important since a custom template is used with this property as text. allows typing a "value" or a "name" to match input with whitelist
|
||||||
|
enforceWhitelist: true,
|
||||||
|
skipInvalid: true, // do not remporarily add invalid tags
|
||||||
|
dropdown: {
|
||||||
|
closeOnSelect: false,
|
||||||
|
enabled: 0,
|
||||||
|
classname: 'users-list',
|
||||||
|
searchKeys: ['name', 'email'] // very important to set by which keys to search for suggesttions when typing
|
||||||
|
},
|
||||||
|
templates: {
|
||||||
|
tag: tagTemplate,
|
||||||
|
dropdownItem: suggestionItemTemplate
|
||||||
|
},
|
||||||
|
whitelist: usersList
|
||||||
|
})
|
||||||
|
|
||||||
|
tagify.on('dropdown:show dropdown:updated', onDropdownShow)
|
||||||
|
tagify.on('dropdown:select', onSelectSuggestion)
|
||||||
|
|
||||||
|
var addAllSuggestionsElm;
|
||||||
|
|
||||||
|
function onDropdownShow(e) {
|
||||||
|
var dropdownContentElm = e.detail.tagify.DOM.dropdown.content;
|
||||||
|
|
||||||
|
if (tagify.suggestedListItems.length > 1) {
|
||||||
|
addAllSuggestionsElm = getAddAllSuggestionsElm();
|
||||||
|
|
||||||
|
// insert "addAllSuggestionsElm" as the first element in the suggestions list
|
||||||
|
dropdownContentElm.insertBefore(addAllSuggestionsElm, dropdownContentElm.firstChild)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onSelectSuggestion(e) {
|
||||||
|
if (e.detail.elm == addAllSuggestionsElm)
|
||||||
|
tagify.dropdown.selectAll.call(tagify);
|
||||||
|
}
|
||||||
|
|
||||||
|
// create a "add all" custom suggestion element every time the dropdown changes
|
||||||
|
function getAddAllSuggestionsElm() {
|
||||||
|
// suggestions items should be based on "dropdownItem" template
|
||||||
|
return tagify.parseTemplate('dropdownItem', [{
|
||||||
|
class: "addAll",
|
||||||
|
name: "Add all",
|
||||||
|
email: tagify.settings.whitelist.reduce(function (remainingSuggestions, item) {
|
||||||
|
return tagify.isTagDuplicate(item.value) ? remainingSuggestions : remainingSuggestions + 1
|
||||||
|
}, 0) + " Members"
|
||||||
|
}]
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init quill editor
|
||||||
|
const initQuill = (el) => {
|
||||||
|
var quill = new Quill('#kt_inbox_form_editor', {
|
||||||
|
modules: {
|
||||||
|
toolbar: [
|
||||||
|
[{
|
||||||
|
header: [1, 2, false]
|
||||||
|
}],
|
||||||
|
['bold', 'italic', 'underline'],
|
||||||
|
['image', 'code-block']
|
||||||
|
]
|
||||||
|
},
|
||||||
|
placeholder: 'Type your text here...',
|
||||||
|
theme: 'snow' // or 'bubble'
|
||||||
|
});
|
||||||
|
|
||||||
|
// Customize editor
|
||||||
|
const toolbar = el.querySelector('.ql-toolbar');
|
||||||
|
|
||||||
|
if (toolbar) {
|
||||||
|
const classes = ['px-5', 'border-top-0', 'border-start-0', 'border-end-0'];
|
||||||
|
toolbar.classList.add(...classes);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init dropzone
|
||||||
|
const initDropzone = (el) => {
|
||||||
|
// set the dropzone container id
|
||||||
|
const id = '[data-kt-inbox-form="dropzone"]';
|
||||||
|
const dropzone = el.querySelector(id);
|
||||||
|
const uploadButton = el.querySelector('[data-kt-inbox-form="dropzone_upload"]');
|
||||||
|
|
||||||
|
// set the preview element template
|
||||||
|
var previewNode = dropzone.querySelector(".dropzone-item");
|
||||||
|
previewNode.id = "";
|
||||||
|
var previewTemplate = previewNode.parentNode.innerHTML;
|
||||||
|
previewNode.parentNode.removeChild(previewNode);
|
||||||
|
|
||||||
|
var myDropzone = new Dropzone(id, { // Make the whole body a dropzone
|
||||||
|
url: "https://preview.keenthemes.com/api/dropzone/void.php", // Set the url for your upload script location
|
||||||
|
parallelUploads: 20,
|
||||||
|
maxFilesize: 1, // Max filesize in MB
|
||||||
|
previewTemplate: previewTemplate,
|
||||||
|
previewsContainer: id + " .dropzone-items", // Define the container to display the previews
|
||||||
|
clickable: uploadButton // Define the element that should be used as click trigger to select files.
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
myDropzone.on("addedfile", function (file) {
|
||||||
|
// Hookup the start button
|
||||||
|
const dropzoneItems = dropzone.querySelectorAll('.dropzone-item');
|
||||||
|
dropzoneItems.forEach(dropzoneItem => {
|
||||||
|
dropzoneItem.style.display = '';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update the total progress bar
|
||||||
|
myDropzone.on("totaluploadprogress", function (progress) {
|
||||||
|
const progressBars = dropzone.querySelectorAll('.progress-bar');
|
||||||
|
progressBars.forEach(progressBar => {
|
||||||
|
progressBar.style.width = progress + "%";
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
myDropzone.on("sending", function (file) {
|
||||||
|
// Show the total progress bar when upload starts
|
||||||
|
const progressBars = dropzone.querySelectorAll('.progress-bar');
|
||||||
|
progressBars.forEach(progressBar => {
|
||||||
|
progressBar.style.opacity = "1";
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Hide the total progress bar when nothing"s uploading anymore
|
||||||
|
myDropzone.on("complete", function (progress) {
|
||||||
|
const progressBars = dropzone.querySelectorAll('.dz-complete');
|
||||||
|
|
||||||
|
setTimeout(function () {
|
||||||
|
progressBars.forEach(progressBar => {
|
||||||
|
progressBar.querySelector('.progress-bar').style.opacity = "0";
|
||||||
|
progressBar.querySelector('.progress').style.opacity = "0";
|
||||||
|
});
|
||||||
|
}, 300);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function () {
|
||||||
|
initForm();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTAppInboxCompose.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTAppInboxListing = function () {
|
||||||
|
var table;
|
||||||
|
var datatable;
|
||||||
|
|
||||||
|
// Private functions
|
||||||
|
var initDatatable = function () {
|
||||||
|
// Init datatable --- more info on datatables: https://datatables.net/manual/
|
||||||
|
datatable = $(table).DataTable({
|
||||||
|
"info": false,
|
||||||
|
'order': [],
|
||||||
|
// 'paging': false,
|
||||||
|
// 'pageLength': false,
|
||||||
|
});
|
||||||
|
|
||||||
|
datatable.on('draw', function () {
|
||||||
|
handleDatatableFooter();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle datatable footer spacings
|
||||||
|
var handleDatatableFooter = () => {
|
||||||
|
const footerElement = document.querySelector('#kt_inbox_listing_wrapper > .row');
|
||||||
|
const spacingClasses = ['px-9', 'pt-3', 'pb-5'];
|
||||||
|
footerElement.classList.add(...spacingClasses);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
|
||||||
|
var handleSearchDatatable = () => {
|
||||||
|
const filterSearch = document.querySelector('[data-kt-inbox-listing-filter="search"]');
|
||||||
|
filterSearch.addEventListener('keyup', function (e) {
|
||||||
|
datatable.search(e.target.value).draw();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function () {
|
||||||
|
table = document.querySelector('#kt_inbox_listing');
|
||||||
|
|
||||||
|
if (!table) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
initDatatable();
|
||||||
|
handleSearchDatatable();
|
||||||
|
handleDatatableFooter();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTAppInboxListing.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,323 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTAppInboxReply = function () {
|
||||||
|
|
||||||
|
// Private functions
|
||||||
|
const handlePreviewText = () => {
|
||||||
|
// Get all messages
|
||||||
|
const accordions = document.querySelectorAll('[data-kt-inbox-message="message_wrapper"]');
|
||||||
|
accordions.forEach(accordion => {
|
||||||
|
// Set variables
|
||||||
|
const header = accordion.querySelector('[data-kt-inbox-message="header"]');
|
||||||
|
const previewText = accordion.querySelector('[data-kt-inbox-message="preview"]');
|
||||||
|
const details = accordion.querySelector('[data-kt-inbox-message="details"]');
|
||||||
|
const message = accordion.querySelector('[data-kt-inbox-message="message"]');
|
||||||
|
|
||||||
|
// Init bootstrap collapse -- more info: https://getbootstrap.com/docs/5.1/components/collapse/#via-javascript
|
||||||
|
const collapse = new bootstrap.Collapse(message, { toggle: false });
|
||||||
|
|
||||||
|
// Handle header click action
|
||||||
|
header.addEventListener('click', e => {
|
||||||
|
// Return if KTMenu or buttons are clicked
|
||||||
|
if (e.target.closest('[data-kt-menu-trigger="click"]') || e.target.closest('.btn')) {
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
previewText.classList.toggle('d-none');
|
||||||
|
details.classList.toggle('d-none');
|
||||||
|
collapse.toggle();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init reply form
|
||||||
|
const initForm = () => {
|
||||||
|
// Set variables
|
||||||
|
const form = document.querySelector('#kt_inbox_reply_form');
|
||||||
|
const allTagify = form.querySelectorAll('[data-kt-inbox-form="tagify"]');
|
||||||
|
|
||||||
|
// Handle CC and BCC
|
||||||
|
handleCCandBCC(form);
|
||||||
|
|
||||||
|
// Handle submit form
|
||||||
|
handleSubmit(form);
|
||||||
|
|
||||||
|
// Init tagify
|
||||||
|
allTagify.forEach(tagify => {
|
||||||
|
initTagify(tagify);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Init quill editor
|
||||||
|
initQuill(form);
|
||||||
|
|
||||||
|
// Init dropzone
|
||||||
|
initDropzone(form);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle CC and BCC toggle
|
||||||
|
const handleCCandBCC = (el) => {
|
||||||
|
// Get elements
|
||||||
|
const ccElement = el.querySelector('[data-kt-inbox-form="cc"]');
|
||||||
|
const ccButton = el.querySelector('[data-kt-inbox-form="cc_button"]');
|
||||||
|
const ccClose = el.querySelector('[data-kt-inbox-form="cc_close"]');
|
||||||
|
const bccElement = el.querySelector('[data-kt-inbox-form="bcc"]');
|
||||||
|
const bccButton = el.querySelector('[data-kt-inbox-form="bcc_button"]');
|
||||||
|
const bccClose = el.querySelector('[data-kt-inbox-form="bcc_close"]');
|
||||||
|
|
||||||
|
// Handle CC button click
|
||||||
|
ccButton.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
ccElement.classList.remove('d-none');
|
||||||
|
ccElement.classList.add('d-flex');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle CC close button click
|
||||||
|
ccClose.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
ccElement.classList.add('d-none');
|
||||||
|
ccElement.classList.remove('d-flex');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle BCC button click
|
||||||
|
bccButton.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
bccElement.classList.remove('d-none');
|
||||||
|
bccElement.classList.add('d-flex');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle CC close button click
|
||||||
|
bccClose.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
bccElement.classList.add('d-none');
|
||||||
|
bccElement.classList.remove('d-flex');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle submit form
|
||||||
|
const handleSubmit = (el) => {
|
||||||
|
const submitButton = el.querySelector('[data-kt-inbox-form="send"]');
|
||||||
|
|
||||||
|
// Handle button click event
|
||||||
|
submitButton.addEventListener("click", function () {
|
||||||
|
// Activate indicator
|
||||||
|
submitButton.setAttribute("data-kt-indicator", "on");
|
||||||
|
|
||||||
|
// Disable indicator after 3 seconds
|
||||||
|
setTimeout(function () {
|
||||||
|
submitButton.removeAttribute("data-kt-indicator");
|
||||||
|
}, 3000);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init tagify
|
||||||
|
const initTagify = (el) => {
|
||||||
|
var inputElm = el;
|
||||||
|
|
||||||
|
const usersList = [
|
||||||
|
{ value: 1, name: 'Emma Smith', avatar: 'avatars/300-6.jpg', email: 'e.smith@kpmg.com.au' },
|
||||||
|
{ value: 2, name: 'Max Smith', avatar: 'avatars/300-1.jpg', email: 'max@kt.com' },
|
||||||
|
{ value: 3, name: 'Sean Bean', avatar: 'avatars/300-5.jpg', email: 'sean@dellito.com' },
|
||||||
|
{ value: 4, name: 'Brian Cox', avatar: 'avatars/300-25.jpg', email: 'brian@exchange.com' },
|
||||||
|
{ value: 5, name: 'Francis Mitcham', avatar: 'avatars/300-9.jpg', email: 'f.mitcham@kpmg.com.au' },
|
||||||
|
{ value: 6, name: 'Dan Wilson', avatar: 'avatars/300-23.jpg', email: 'dam@consilting.com' },
|
||||||
|
{ value: 7, name: 'Ana Crown', avatar: 'avatars/300-12.jpg', email: 'ana.cf@limtel.com' },
|
||||||
|
{ value: 8, name: 'John Miller', avatar: 'avatars/300-13.jpg', email: 'miller@mapple.com' }
|
||||||
|
];
|
||||||
|
|
||||||
|
function tagTemplate(tagData) {
|
||||||
|
return `
|
||||||
|
<tag title="${(tagData.title || tagData.email)}"
|
||||||
|
contenteditable='false'
|
||||||
|
spellcheck='false'
|
||||||
|
tabIndex="-1"
|
||||||
|
class="${this.settings.classNames.tag} ${tagData.class ? tagData.class : ""}"
|
||||||
|
${this.getAttributes(tagData)}>
|
||||||
|
<x title='' class='tagify__tag__removeBtn' role='button' aria-label='remove tag'></x>
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<div class='tagify__tag__avatar-wrap ps-0'>
|
||||||
|
<img onerror="this.style.visibility='hidden'" class="rounded-circle w-25px me-2" src="${hostUrl}media/${tagData.avatar}">
|
||||||
|
</div>
|
||||||
|
<span class='tagify__tag-text'>${tagData.name}</span>
|
||||||
|
</div>
|
||||||
|
</tag>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
function suggestionItemTemplate(tagData) {
|
||||||
|
return `
|
||||||
|
<div ${this.getAttributes(tagData)}
|
||||||
|
class='tagify__dropdown__item d-flex align-items-center ${tagData.class ? tagData.class : ""}'
|
||||||
|
tabindex="0"
|
||||||
|
role="option">
|
||||||
|
|
||||||
|
${tagData.avatar ? `
|
||||||
|
<div class='tagify__dropdown__item__avatar-wrap me-2'>
|
||||||
|
<img onerror="this.style.visibility='hidden'" class="rounded-circle w-50px me-2" src="${hostUrl}media/${tagData.avatar}">
|
||||||
|
</div>` : ''
|
||||||
|
}
|
||||||
|
|
||||||
|
<div class="d-flex flex-column">
|
||||||
|
<strong>${tagData.name}</strong>
|
||||||
|
<span>${tagData.email}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
// initialize Tagify on the above input node reference
|
||||||
|
var tagify = new Tagify(inputElm, {
|
||||||
|
tagTextProp: 'name', // very important since a custom template is used with this property as text. allows typing a "value" or a "name" to match input with whitelist
|
||||||
|
enforceWhitelist: true,
|
||||||
|
skipInvalid: true, // do not remporarily add invalid tags
|
||||||
|
dropdown: {
|
||||||
|
closeOnSelect: false,
|
||||||
|
enabled: 0,
|
||||||
|
classname: 'users-list',
|
||||||
|
searchKeys: ['name', 'email'] // very important to set by which keys to search for suggesttions when typing
|
||||||
|
},
|
||||||
|
templates: {
|
||||||
|
tag: tagTemplate,
|
||||||
|
dropdownItem: suggestionItemTemplate
|
||||||
|
},
|
||||||
|
whitelist: usersList
|
||||||
|
})
|
||||||
|
|
||||||
|
tagify.on('dropdown:show dropdown:updated', onDropdownShow)
|
||||||
|
tagify.on('dropdown:select', onSelectSuggestion)
|
||||||
|
|
||||||
|
var addAllSuggestionsElm;
|
||||||
|
|
||||||
|
function onDropdownShow(e) {
|
||||||
|
var dropdownContentElm = e.detail.tagify.DOM.dropdown.content;
|
||||||
|
|
||||||
|
if (tagify.suggestedListItems.length > 1) {
|
||||||
|
addAllSuggestionsElm = getAddAllSuggestionsElm();
|
||||||
|
|
||||||
|
// insert "addAllSuggestionsElm" as the first element in the suggestions list
|
||||||
|
dropdownContentElm.insertBefore(addAllSuggestionsElm, dropdownContentElm.firstChild)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onSelectSuggestion(e) {
|
||||||
|
if (e.detail.elm == addAllSuggestionsElm)
|
||||||
|
tagify.dropdown.selectAll.call(tagify);
|
||||||
|
}
|
||||||
|
|
||||||
|
// create a "add all" custom suggestion element every time the dropdown changes
|
||||||
|
function getAddAllSuggestionsElm() {
|
||||||
|
// suggestions items should be based on "dropdownItem" template
|
||||||
|
return tagify.parseTemplate('dropdownItem', [{
|
||||||
|
class: "addAll",
|
||||||
|
name: "Add all",
|
||||||
|
email: tagify.settings.whitelist.reduce(function (remainingSuggestions, item) {
|
||||||
|
return tagify.isTagDuplicate(item.value) ? remainingSuggestions : remainingSuggestions + 1
|
||||||
|
}, 0) + " Members"
|
||||||
|
}]
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init quill editor
|
||||||
|
const initQuill = (el) => {
|
||||||
|
var quill = new Quill('#kt_inbox_form_editor', {
|
||||||
|
modules: {
|
||||||
|
toolbar: [
|
||||||
|
[{
|
||||||
|
header: [1, 2, false]
|
||||||
|
}],
|
||||||
|
['bold', 'italic', 'underline'],
|
||||||
|
['image', 'code-block']
|
||||||
|
]
|
||||||
|
},
|
||||||
|
placeholder: 'Type your text here...',
|
||||||
|
theme: 'snow' // or 'bubble'
|
||||||
|
});
|
||||||
|
|
||||||
|
// Customize editor
|
||||||
|
const toolbar = el.querySelector('.ql-toolbar');
|
||||||
|
|
||||||
|
if (toolbar) {
|
||||||
|
const classes = ['px-5', 'border-top-0', 'border-start-0', 'border-end-0'];
|
||||||
|
toolbar.classList.add(...classes);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init dropzone
|
||||||
|
const initDropzone = (el) => {
|
||||||
|
// set the dropzone container id
|
||||||
|
const id = '[data-kt-inbox-form="dropzone"]';
|
||||||
|
const dropzone = el.querySelector(id);
|
||||||
|
const uploadButton = el.querySelector('[data-kt-inbox-form="dropzone_upload"]');
|
||||||
|
|
||||||
|
// set the preview element template
|
||||||
|
var previewNode = dropzone.querySelector(".dropzone-item");
|
||||||
|
previewNode.id = "";
|
||||||
|
var previewTemplate = previewNode.parentNode.innerHTML;
|
||||||
|
previewNode.parentNode.removeChild(previewNode);
|
||||||
|
|
||||||
|
var myDropzone = new Dropzone(id, { // Make the whole body a dropzone
|
||||||
|
url: "https://preview.keenthemes.com/api/dropzone/void.php", // Set the url for your upload script location
|
||||||
|
parallelUploads: 20,
|
||||||
|
maxFilesize: 1, // Max filesize in MB
|
||||||
|
previewTemplate: previewTemplate,
|
||||||
|
previewsContainer: id + " .dropzone-items", // Define the container to display the previews
|
||||||
|
clickable: uploadButton // Define the element that should be used as click trigger to select files.
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
myDropzone.on("addedfile", function (file) {
|
||||||
|
// Hookup the start button
|
||||||
|
const dropzoneItems = dropzone.querySelectorAll('.dropzone-item');
|
||||||
|
dropzoneItems.forEach(dropzoneItem => {
|
||||||
|
dropzoneItem.style.display = '';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update the total progress bar
|
||||||
|
myDropzone.on("totaluploadprogress", function (progress) {
|
||||||
|
const progressBars = dropzone.querySelectorAll('.progress-bar');
|
||||||
|
progressBars.forEach(progressBar => {
|
||||||
|
progressBar.style.width = progress + "%";
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
myDropzone.on("sending", function (file) {
|
||||||
|
// Show the total progress bar when upload starts
|
||||||
|
const progressBars = dropzone.querySelectorAll('.progress-bar');
|
||||||
|
progressBars.forEach(progressBar => {
|
||||||
|
progressBar.style.opacity = "1";
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Hide the total progress bar when nothing"s uploading anymore
|
||||||
|
myDropzone.on("complete", function (progress) {
|
||||||
|
const progressBars = dropzone.querySelectorAll('.dz-complete');
|
||||||
|
|
||||||
|
setTimeout(function () {
|
||||||
|
progressBars.forEach(progressBar => {
|
||||||
|
progressBar.querySelector('.progress-bar').style.opacity = "0";
|
||||||
|
progressBar.querySelector('.progress').style.opacity = "0";
|
||||||
|
});
|
||||||
|
}, 300);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function () {
|
||||||
|
handlePreviewText();
|
||||||
|
initForm();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTAppInboxReply.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,111 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTAppInvoicesCreate = function () {
|
||||||
|
var form;
|
||||||
|
|
||||||
|
// Private functions
|
||||||
|
var updateTotal = function() {
|
||||||
|
var items = [].slice.call(form.querySelectorAll('[data-kt-element="items"] [data-kt-element="item"]'));
|
||||||
|
var grandTotal = 0;
|
||||||
|
|
||||||
|
var format = wNumb({
|
||||||
|
//prefix: '$ ',
|
||||||
|
decimals: 2,
|
||||||
|
thousand: ','
|
||||||
|
});
|
||||||
|
|
||||||
|
items.map(function (item) {
|
||||||
|
var quantity = item.querySelector('[data-kt-element="quantity"]');
|
||||||
|
var price = item.querySelector('[data-kt-element="price"]');
|
||||||
|
|
||||||
|
var priceValue = format.from(price.value);
|
||||||
|
priceValue = (!priceValue || priceValue < 0) ? 0 : priceValue;
|
||||||
|
|
||||||
|
var quantityValue = parseInt(quantity.value);
|
||||||
|
quantityValue = (!quantityValue || quantityValue < 0) ? 1 : quantityValue;
|
||||||
|
|
||||||
|
price.value = format.to(priceValue);
|
||||||
|
quantity.value = quantityValue;
|
||||||
|
|
||||||
|
item.querySelector('[data-kt-element="total"]').innerText = format.to(priceValue * quantityValue);
|
||||||
|
|
||||||
|
grandTotal += priceValue * quantityValue;
|
||||||
|
});
|
||||||
|
|
||||||
|
form.querySelector('[data-kt-element="sub-total"]').innerText = format.to(grandTotal);
|
||||||
|
form.querySelector('[data-kt-element="grand-total"]').innerText = format.to(grandTotal);
|
||||||
|
}
|
||||||
|
|
||||||
|
var handleEmptyState = function() {
|
||||||
|
if (form.querySelectorAll('[data-kt-element="items"] [data-kt-element="item"]').length === 0) {
|
||||||
|
var item = form.querySelector('[data-kt-element="empty-template"] tr').cloneNode(true);
|
||||||
|
form.querySelector('[data-kt-element="items"] tbody').appendChild(item);
|
||||||
|
} else {
|
||||||
|
KTUtil.remove(form.querySelector('[data-kt-element="items"] [data-kt-element="empty"]'));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var handeForm = function (element) {
|
||||||
|
// Add item
|
||||||
|
form.querySelector('[data-kt-element="items"] [data-kt-element="add-item"]').addEventListener('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
var item = form.querySelector('[data-kt-element="item-template"] tr').cloneNode(true);
|
||||||
|
|
||||||
|
form.querySelector('[data-kt-element="items"] tbody').appendChild(item);
|
||||||
|
|
||||||
|
handleEmptyState();
|
||||||
|
updateTotal();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Remove item
|
||||||
|
KTUtil.on(form, '[data-kt-element="items"] [data-kt-element="remove-item"]', 'click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
KTUtil.remove(this.closest('[data-kt-element="item"]'));
|
||||||
|
|
||||||
|
handleEmptyState();
|
||||||
|
updateTotal();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle price and quantity changes
|
||||||
|
KTUtil.on(form, '[data-kt-element="items"] [data-kt-element="quantity"], [data-kt-element="items"] [data-kt-element="price"]', 'change', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
updateTotal();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var initForm = function(element) {
|
||||||
|
// Due date. For more info, please visit the official plugin site: https://flatpickr.js.org/
|
||||||
|
var invoiceDate = $(form.querySelector('[name="invoice_date"]'));
|
||||||
|
invoiceDate.flatpickr({
|
||||||
|
enableTime: false,
|
||||||
|
dateFormat: "d, M Y",
|
||||||
|
});
|
||||||
|
|
||||||
|
// Due date. For more info, please visit the official plugin site: https://flatpickr.js.org/
|
||||||
|
var dueDate = $(form.querySelector('[name="invoice_due_date"]'));
|
||||||
|
dueDate.flatpickr({
|
||||||
|
enableTime: false,
|
||||||
|
dateFormat: "d, M Y",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function(element) {
|
||||||
|
form = document.querySelector('#kt_invoice_form');
|
||||||
|
|
||||||
|
handeForm();
|
||||||
|
initForm();
|
||||||
|
updateTotal();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTAppInvoicesCreate.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,79 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTProjectList = function () {
|
||||||
|
var initChart = function () {
|
||||||
|
// init chart
|
||||||
|
var element = document.getElementById("kt_project_list_chart");
|
||||||
|
|
||||||
|
if (!element) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var config = {
|
||||||
|
type: 'doughnut',
|
||||||
|
data: {
|
||||||
|
datasets: [{
|
||||||
|
data: [30, 45, 25],
|
||||||
|
backgroundColor: ['#00A3FF', '#50CD89', '#E4E6EF']
|
||||||
|
}],
|
||||||
|
labels: ['Active', 'Completed', 'Yet to start']
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
chart: {
|
||||||
|
fontFamily: 'inherit'
|
||||||
|
},
|
||||||
|
borderWidth: 0,
|
||||||
|
cutout: '75%',
|
||||||
|
cutoutPercentage: 65,
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
title: {
|
||||||
|
display: false
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
animateScale: true,
|
||||||
|
animateRotate: true
|
||||||
|
},
|
||||||
|
stroke: {
|
||||||
|
width: 0
|
||||||
|
},
|
||||||
|
tooltips: {
|
||||||
|
enabled: true,
|
||||||
|
intersect: false,
|
||||||
|
mode: 'nearest',
|
||||||
|
bodySpacing: 5,
|
||||||
|
yPadding: 10,
|
||||||
|
xPadding: 10,
|
||||||
|
caretPadding: 0,
|
||||||
|
displayColors: false,
|
||||||
|
backgroundColor: '#20D489',
|
||||||
|
titleFontColor: '#ffffff',
|
||||||
|
cornerRadius: 4,
|
||||||
|
footerSpacing: 0,
|
||||||
|
titleSpacing: 0
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
display: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var ctx = element.getContext('2d');
|
||||||
|
var myDoughnut = new Chart(ctx, config);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function () {
|
||||||
|
initChart();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function() {
|
||||||
|
KTProjectList.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,316 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTProjectOverview = function () {
|
||||||
|
// Colors
|
||||||
|
var primary = KTUtil.getCssVariableValue('--bs-primary');
|
||||||
|
var lightPrimary = KTUtil.getCssVariableValue('--bs-primary-light');
|
||||||
|
var success = KTUtil.getCssVariableValue('--bs-success');
|
||||||
|
var lightSuccess = KTUtil.getCssVariableValue('--bs-success-light');
|
||||||
|
var gray200 = KTUtil.getCssVariableValue('--bs-gray-200');
|
||||||
|
var gray500 = KTUtil.getCssVariableValue('--bs-gray-500');
|
||||||
|
|
||||||
|
// Private functions
|
||||||
|
var initChart = function () {
|
||||||
|
// init chart
|
||||||
|
var element = document.getElementById("project_overview_chart");
|
||||||
|
|
||||||
|
if (!element) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var config = {
|
||||||
|
type: 'doughnut',
|
||||||
|
data: {
|
||||||
|
datasets: [{
|
||||||
|
data: [30, 45, 25],
|
||||||
|
backgroundColor: ['#00A3FF', '#50CD89', '#E4E6EF']
|
||||||
|
}],
|
||||||
|
labels: ['Active', 'Completed', 'Yet to start']
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
chart: {
|
||||||
|
fontFamily: 'inherit'
|
||||||
|
},
|
||||||
|
cutoutPercentage: 75,
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
cutout: '75%',
|
||||||
|
title: {
|
||||||
|
display: false
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
animateScale: true,
|
||||||
|
animateRotate: true
|
||||||
|
},
|
||||||
|
tooltips: {
|
||||||
|
enabled: true,
|
||||||
|
intersect: false,
|
||||||
|
mode: 'nearest',
|
||||||
|
bodySpacing: 5,
|
||||||
|
yPadding: 10,
|
||||||
|
xPadding: 10,
|
||||||
|
caretPadding: 0,
|
||||||
|
displayColors: false,
|
||||||
|
backgroundColor: '#20D489',
|
||||||
|
titleFontColor: '#ffffff',
|
||||||
|
cornerRadius: 4,
|
||||||
|
footerSpacing: 0,
|
||||||
|
titleSpacing: 0
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
display: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var ctx = element.getContext('2d');
|
||||||
|
var myDoughnut = new Chart(ctx, config);
|
||||||
|
}
|
||||||
|
|
||||||
|
var initGraph = function () {
|
||||||
|
var element = document.getElementById("kt_project_overview_graph");
|
||||||
|
var height = parseInt(KTUtil.css(element, 'height'));
|
||||||
|
|
||||||
|
if (!element) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var options = {
|
||||||
|
series: [{
|
||||||
|
name: 'Incomplete',
|
||||||
|
data: [70, 70, 80, 80, 75, 75, 75]
|
||||||
|
}, {
|
||||||
|
name: 'Complete',
|
||||||
|
data: [55, 55, 60, 60, 55, 55, 60]
|
||||||
|
}],
|
||||||
|
chart: {
|
||||||
|
type: 'area',
|
||||||
|
height: height,
|
||||||
|
toolbar: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
dataLabels: {
|
||||||
|
enabled: false
|
||||||
|
},
|
||||||
|
fill: {
|
||||||
|
type: 'solid',
|
||||||
|
opacity: 1
|
||||||
|
},
|
||||||
|
stroke: {
|
||||||
|
curve: 'smooth',
|
||||||
|
show: true,
|
||||||
|
width: 3,
|
||||||
|
colors: [primary, success]
|
||||||
|
},
|
||||||
|
xaxis: {
|
||||||
|
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
|
||||||
|
axisBorder: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisTicks: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
labels: {
|
||||||
|
style: {
|
||||||
|
colors: gray500,
|
||||||
|
fontSize: '12px'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
crosshairs: {
|
||||||
|
position: 'front',
|
||||||
|
stroke: {
|
||||||
|
color: primary,
|
||||||
|
width: 1,
|
||||||
|
dashArray: 3
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
enabled: true,
|
||||||
|
formatter: undefined,
|
||||||
|
offsetY: 0,
|
||||||
|
style: {
|
||||||
|
fontSize: '12px'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yaxis: {
|
||||||
|
labels: {
|
||||||
|
style: {
|
||||||
|
colors: gray500,
|
||||||
|
fontSize: '12px',
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
states: {
|
||||||
|
normal: {
|
||||||
|
filter: {
|
||||||
|
type: 'none',
|
||||||
|
value: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
hover: {
|
||||||
|
filter: {
|
||||||
|
type: 'none',
|
||||||
|
value: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
active: {
|
||||||
|
allowMultipleDataPointsSelection: false,
|
||||||
|
filter: {
|
||||||
|
type: 'none',
|
||||||
|
value: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
style: {
|
||||||
|
fontSize: '12px',
|
||||||
|
},
|
||||||
|
y: {
|
||||||
|
formatter: function (val) {
|
||||||
|
return val + " tasks"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
colors: [lightPrimary, lightSuccess],
|
||||||
|
grid: {
|
||||||
|
borderColor: gray200,
|
||||||
|
strokeDashArray: 4,
|
||||||
|
yaxis: {
|
||||||
|
lines: {
|
||||||
|
show: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
markers: {
|
||||||
|
//size: 5,
|
||||||
|
colors: [lightPrimary, lightSuccess],
|
||||||
|
strokeColor: [primary, success],
|
||||||
|
strokeWidth: 3
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var chart = new ApexCharts(element, options);
|
||||||
|
chart.render();
|
||||||
|
}
|
||||||
|
|
||||||
|
var initTable = function () {
|
||||||
|
var table = document.querySelector('#kt_profile_overview_table');
|
||||||
|
|
||||||
|
if (!table) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set date data order
|
||||||
|
const tableRows = table.querySelectorAll('tbody tr');
|
||||||
|
|
||||||
|
tableRows.forEach(row => {
|
||||||
|
const dateRow = row.querySelectorAll('td');
|
||||||
|
const realDate = moment(dateRow[1].innerHTML, "MMM D, YYYY").format();
|
||||||
|
dateRow[1].setAttribute('data-order', realDate);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Init datatable --- more info on datatables: https://datatables.net/manual/
|
||||||
|
const datatable = $(table).DataTable({
|
||||||
|
"info": false,
|
||||||
|
'order': []
|
||||||
|
});
|
||||||
|
|
||||||
|
// Filter dropdown elements
|
||||||
|
const filterOrders = document.getElementById('kt_filter_orders');
|
||||||
|
const filterYear = document.getElementById('kt_filter_year');
|
||||||
|
|
||||||
|
// Filter by order status --- official docs reference: https://datatables.net/reference/api/search()
|
||||||
|
filterOrders.addEventListener('change', function (e) {
|
||||||
|
datatable.column(3).search(e.target.value).draw();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Filter by date --- official docs reference: https://momentjs.com/docs/
|
||||||
|
var minDate;
|
||||||
|
var maxDate;
|
||||||
|
|
||||||
|
filterYear.addEventListener('change', function (e) {
|
||||||
|
const value = e.target.value;
|
||||||
|
switch (value) {
|
||||||
|
case 'thisyear': {
|
||||||
|
minDate = moment().startOf('year').format();
|
||||||
|
maxDate = moment().endOf('year').format();
|
||||||
|
datatable.draw();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 'thismonth': {
|
||||||
|
minDate = moment().startOf('month').format();
|
||||||
|
maxDate = moment().endOf('month').format();
|
||||||
|
datatable.draw();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 'lastmonth': {
|
||||||
|
minDate = moment().subtract(1, 'months').startOf('month').format();
|
||||||
|
maxDate = moment().subtract(1, 'months').endOf('month').format();
|
||||||
|
datatable.draw();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case 'last90days': {
|
||||||
|
minDate = moment().subtract(30, 'days').format();
|
||||||
|
maxDate = moment().format();
|
||||||
|
datatable.draw();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
default: {
|
||||||
|
minDate = moment().subtract(100, 'years').startOf('month').format();
|
||||||
|
maxDate = moment().add(1, 'months').endOf('month').format();
|
||||||
|
datatable.draw();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Date range filter --- offical docs reference: https://datatables.net/examples/plug-ins/range_filtering.html
|
||||||
|
$.fn.dataTable.ext.search.push(
|
||||||
|
function (settings, data, dataIndex) {
|
||||||
|
var min = minDate;
|
||||||
|
var max = maxDate;
|
||||||
|
var date = parseFloat(moment(data[1]).format()) || 0; // use data for the age column
|
||||||
|
|
||||||
|
if ((isNaN(min) && isNaN(max)) ||
|
||||||
|
(isNaN(min) && date <= max) ||
|
||||||
|
(min <= date && isNaN(max)) ||
|
||||||
|
(min <= date && date <= max)) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// Search --- official docs reference: https://datatables.net/reference/api/search()
|
||||||
|
var filterSearch = document.getElementById('kt_filter_search');
|
||||||
|
filterSearch.addEventListener('keyup', function (e) {
|
||||||
|
datatable.search(e.target.value).draw();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function () {
|
||||||
|
initChart();
|
||||||
|
initGraph();
|
||||||
|
initTable();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}();
|
||||||
|
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function() {
|
||||||
|
KTProjectOverview.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,104 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTProjectSettings = function () {
|
||||||
|
|
||||||
|
// Private functions
|
||||||
|
var handleForm = function () {
|
||||||
|
// Init Datepicker --- For more info, please check Flatpickr's official documentation: https://flatpickr.js.org/
|
||||||
|
$("#kt_datepicker_1").flatpickr();
|
||||||
|
|
||||||
|
// Form validation
|
||||||
|
var validation;
|
||||||
|
var _form = document.getElementById('kt_project_settings_form');
|
||||||
|
var submitButton = _form.querySelector('#kt_project_settings_submit');
|
||||||
|
|
||||||
|
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||||
|
validation = FormValidation.formValidation(
|
||||||
|
_form,
|
||||||
|
{
|
||||||
|
fields: {
|
||||||
|
name: {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Project name is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Project type is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
description: {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Project Description is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
date: {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Due Date is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
trigger: new FormValidation.plugins.Trigger(),
|
||||||
|
submitButton: new FormValidation.plugins.SubmitButton(),
|
||||||
|
//defaultSubmit: new FormValidation.plugins.DefaultSubmit(), // Uncomment this line to enable normal button submit after form validation
|
||||||
|
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||||
|
rowSelector: '.fv-row'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
submitButton.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
validation.validate().then(function (status) {
|
||||||
|
if (status == 'Valid') {
|
||||||
|
|
||||||
|
swal.fire({
|
||||||
|
text: "Thank you! You've updated your project settings",
|
||||||
|
icon: "success",
|
||||||
|
buttonsStyling: false,
|
||||||
|
confirmButtonText: "Ok, got it!",
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn fw-bold btn-light-primary"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
} 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 fw-bold btn-light-primary"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function () {
|
||||||
|
handleForm();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}();
|
||||||
|
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function() {
|
||||||
|
KTProjectSettings.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTProjectTargets = function () {
|
||||||
|
|
||||||
|
var initDatatable = function () {
|
||||||
|
const table = document.getElementById('kt_profile_overview_table');
|
||||||
|
|
||||||
|
// set date data order
|
||||||
|
const tableRows = table.querySelectorAll('tbody tr');
|
||||||
|
tableRows.forEach(row => {
|
||||||
|
const dateRow = row.querySelectorAll('td');
|
||||||
|
const realDate = moment(dateRow[1].innerHTML, "MMM D, YYYY").format();
|
||||||
|
dateRow[1].setAttribute('data-order', realDate);
|
||||||
|
});
|
||||||
|
|
||||||
|
// init datatable --- more info on datatables: https://datatables.net/manual/
|
||||||
|
const datatable = $(table).DataTable({
|
||||||
|
"info": false,
|
||||||
|
'order': [],
|
||||||
|
"paging": false,
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function () {
|
||||||
|
initDatatable();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}();
|
||||||
|
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function() {
|
||||||
|
KTProjectTargets.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,52 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTProjectUsers = function () {
|
||||||
|
|
||||||
|
var initTable = function () {
|
||||||
|
// Set date data order
|
||||||
|
const table = document.getElementById('kt_project_users_table');
|
||||||
|
|
||||||
|
if (!table) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const tableRows = table.querySelectorAll('tbody tr');
|
||||||
|
|
||||||
|
tableRows.forEach(row => {
|
||||||
|
const dateRow = row.querySelectorAll('td');
|
||||||
|
const realDate = moment(dateRow[1].innerHTML, "MMM D, YYYY").format();
|
||||||
|
dateRow[1].setAttribute('data-order', realDate);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Init datatable --- more info on datatables: https://datatables.net/manual/
|
||||||
|
const datatable = $(table).DataTable({
|
||||||
|
"info": false,
|
||||||
|
'order': [],
|
||||||
|
"columnDefs": [{
|
||||||
|
"targets": 4,
|
||||||
|
"orderable": false
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
|
||||||
|
// Search --- official docs reference: https://datatables.net/reference/api/search()
|
||||||
|
var filterSearch = document.getElementById('kt_filter_search');
|
||||||
|
if (filterSearch) {
|
||||||
|
filterSearch.addEventListener('keyup', function (e) {
|
||||||
|
datatable.search(e.target.value).draw();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Public methods
|
||||||
|
return {
|
||||||
|
init: function () {
|
||||||
|
initTable();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function() {
|
||||||
|
KTProjectUsers.init();
|
||||||
|
});
|
||||||
|
|
@ -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();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,189 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTSubscriptionsExport = 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_subscriptions_export_modal');
|
||||||
|
modal = new bootstrap.Modal(element);
|
||||||
|
|
||||||
|
form = document.querySelector('#kt_subscriptions_export_form');
|
||||||
|
submitButton = form.querySelector('#kt_subscriptions_export_submit');
|
||||||
|
cancelButton = form.querySelector('#kt_subscriptions_export_cancel');
|
||||||
|
closeButton = element.querySelector('#kt_subscriptions_export_close');
|
||||||
|
|
||||||
|
handleForm();
|
||||||
|
initForm();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTSubscriptionsExport.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,277 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var KTSubscriptionsList = function () {
|
||||||
|
// Define shared variables
|
||||||
|
var table;
|
||||||
|
var datatable;
|
||||||
|
var toolbarBase;
|
||||||
|
var toolbarSelected;
|
||||||
|
var selectedCount;
|
||||||
|
|
||||||
|
// Private functions
|
||||||
|
var initDatatable = 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 4th 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': [],
|
||||||
|
"pageLength": 10,
|
||||||
|
"lengthChange": false,
|
||||||
|
'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();
|
||||||
|
handleRowDeletion();
|
||||||
|
toggleToolbars();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
|
||||||
|
var handleSearch = function () {
|
||||||
|
const filterSearch = document.querySelector('[data-kt-subscription-table-filter="search"]');
|
||||||
|
filterSearch.addEventListener('keyup', function (e) {
|
||||||
|
datatable.search(e.target.value).draw();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Filter Datatable
|
||||||
|
var handleFilter = function () {
|
||||||
|
// Select filter options
|
||||||
|
const filterForm = document.querySelector('[data-kt-subscription-table-filter="form"]');
|
||||||
|
const filterButton = filterForm.querySelector('[data-kt-subscription-table-filter="filter"]');
|
||||||
|
const resetButton = filterForm.querySelector('[data-kt-subscription-table-filter="reset"]');
|
||||||
|
const selectOptions = filterForm.querySelectorAll('select');
|
||||||
|
|
||||||
|
// Filter datatable on submit
|
||||||
|
filterButton.addEventListener('click', function () {
|
||||||
|
var filterString = '';
|
||||||
|
|
||||||
|
// Get filter values
|
||||||
|
selectOptions.forEach((item, index) => {
|
||||||
|
if (item.value && item.value !== '') {
|
||||||
|
if (index !== 0) {
|
||||||
|
filterString += ' ';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Build filter value options
|
||||||
|
filterString += item.value;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Filter datatable --- official docs reference: https://datatables.net/reference/api/search()
|
||||||
|
datatable.search(filterString).draw();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reset datatable
|
||||||
|
resetButton.addEventListener('click', function () {
|
||||||
|
// Reset filter form
|
||||||
|
selectOptions.forEach((item, index) => {
|
||||||
|
// Reset Select2 dropdown --- official docs reference: https://select2.org/programmatic-control/add-select-clear-items
|
||||||
|
$(item).val(null).trigger('change');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Filter datatable --- official docs reference: https://datatables.net/reference/api/search()
|
||||||
|
datatable.search('').draw();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Delete subscirption
|
||||||
|
var handleRowDeletion = function () {
|
||||||
|
// Select all delete buttons
|
||||||
|
const deleteButtons = table.querySelectorAll('[data-kt-subscriptions-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();
|
||||||
|
}).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",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init toggle toolbar
|
||||||
|
var initToggleToolbar = () => {
|
||||||
|
// Toggle selected action toolbar
|
||||||
|
// Select all checkboxes
|
||||||
|
const checkboxes = table.querySelectorAll('[type="checkbox"]');
|
||||||
|
|
||||||
|
// Select elements
|
||||||
|
toolbarBase = document.querySelector('[data-kt-subscription-table-toolbar="base"]');
|
||||||
|
toolbarSelected = document.querySelector('[data-kt-subscription-table-toolbar="selected"]');
|
||||||
|
selectedCount = document.querySelector('[data-kt-subscription-table-select="selected_count"]');
|
||||||
|
const deleteSelected = document.querySelector('[data-kt-subscription-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;
|
||||||
|
}).then(function () {
|
||||||
|
toggleToolbars(); // Detect checked checkboxes
|
||||||
|
initToggleToolbar(); // Re-init toolbar to recalculate checkboxes
|
||||||
|
});
|
||||||
|
} 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 = () => {
|
||||||
|
// 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');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Public functions
|
||||||
|
init: function () {
|
||||||
|
table = document.getElementById('kt_subscriptions_table');
|
||||||
|
|
||||||
|
if (!table) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
initDatatable();
|
||||||
|
initToggleToolbar();
|
||||||
|
handleSearch();
|
||||||
|
handleRowDeletion();
|
||||||
|
handleFilter();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTSubscriptionsList.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,74 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var KTSupportCenterGeneral = function() {
|
||||||
|
var menuWrapper;
|
||||||
|
|
||||||
|
var initInstance = function(element) {
|
||||||
|
var elements = element;
|
||||||
|
|
||||||
|
if ( typeof elements === 'undefined' ) {
|
||||||
|
elements = document.querySelectorAll('.highlight');
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( elements && elements.length > 0 ) {
|
||||||
|
for ( var i = 0; i < elements.length; ++i ) {
|
||||||
|
var highlight = elements[i];
|
||||||
|
var copy = highlight.querySelector('.highlight-copy');
|
||||||
|
|
||||||
|
if ( copy ) {
|
||||||
|
var clipboard = new ClipboardJS(copy, {
|
||||||
|
target: function(trigger) {
|
||||||
|
var highlight = trigger.closest('.highlight');
|
||||||
|
var el = highlight.querySelector('.tab-pane.active');
|
||||||
|
|
||||||
|
if ( el == null ) {
|
||||||
|
el = highlight.querySelector('.highlight-code');
|
||||||
|
}
|
||||||
|
|
||||||
|
return el;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
clipboard.on('success', function(e) {
|
||||||
|
var caption = e.trigger.innerHTML;
|
||||||
|
|
||||||
|
e.trigger.innerHTML = 'copied';
|
||||||
|
e.clearSelection();
|
||||||
|
|
||||||
|
setTimeout(function() {
|
||||||
|
e.trigger.innerHTML = caption;
|
||||||
|
}, 2000);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var handleMenuScroll = function() {
|
||||||
|
var menuActiveItem = menuWrapper.querySelector(".menu-link.active");
|
||||||
|
|
||||||
|
if ( !menuActiveItem ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( KTUtil.isVisibleInContainer(menuActiveItem, menuWrapper) === true) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
menuWrapper.scroll({
|
||||||
|
top: KTUtil.getRelativeTopPosition(menuActiveItem, menuWrapper),
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
init: function() {
|
||||||
|
initInstance();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function() {
|
||||||
|
KTSupportCenterGeneral.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,219 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTModalNewTicket = function () {
|
||||||
|
var submitButton;
|
||||||
|
var cancelButton;
|
||||||
|
var validator;
|
||||||
|
var form;
|
||||||
|
var modal;
|
||||||
|
var modalEl;
|
||||||
|
|
||||||
|
// Init form inputs
|
||||||
|
var initForm = function() {
|
||||||
|
// Ticket attachments
|
||||||
|
// For more info about Dropzone plugin visit: https://www.dropzonejs.com/#usage
|
||||||
|
var myDropzone = new Dropzone("#kt_modal_create_ticket_attachments", {
|
||||||
|
url: "https://keenthemes.com/scripts/void.php", // Set the url for your upload script location
|
||||||
|
paramName: "file", // The name that will be used to transfer the file
|
||||||
|
maxFiles: 10,
|
||||||
|
maxFilesize: 10, // MB
|
||||||
|
addRemoveLinks: true,
|
||||||
|
accept: function(file, done) {
|
||||||
|
if (file.name == "justinbieber.jpg") {
|
||||||
|
done("Naha, you don't.");
|
||||||
|
} else {
|
||||||
|
done();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Due date. For more info, please visit the official plugin site: https://flatpickr.js.org/
|
||||||
|
var dueDate = $(form.querySelector('[name="due_date"]'));
|
||||||
|
dueDate.flatpickr({
|
||||||
|
enableTime: true,
|
||||||
|
dateFormat: "d, M Y, H:i",
|
||||||
|
});
|
||||||
|
|
||||||
|
// Ticket user. For more info, plase visit the official plugin site: https://select2.org/
|
||||||
|
$(form.querySelector('[name="user"]')).on('change', function() {
|
||||||
|
// Revalidate the field when an option is chosen
|
||||||
|
validator.revalidateField('user');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Ticket status. 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');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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: {
|
||||||
|
subject: {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Ticket subject is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
user: {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Ticket user is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
due_date: {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Ticket due date is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
description: {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Target description is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'notifications[]': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Please select at least one notifications method'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
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 button to avoid multiple click
|
||||||
|
submitButton.disabled = true;
|
||||||
|
|
||||||
|
setTimeout(function() {
|
||||||
|
submitButton.removeAttribute('data-kt-indicator');
|
||||||
|
|
||||||
|
// Enable button
|
||||||
|
submitButton.disabled = false;
|
||||||
|
|
||||||
|
// Show success message. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||||
|
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);
|
||||||
|
} else {
|
||||||
|
// Show error message.
|
||||||
|
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",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Public functions
|
||||||
|
init: function () {
|
||||||
|
// Elements
|
||||||
|
modalEl = document.querySelector('#kt_modal_new_ticket');
|
||||||
|
|
||||||
|
if (!modalEl) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
modal = new bootstrap.Modal(modalEl);
|
||||||
|
|
||||||
|
form = document.querySelector('#kt_modal_new_ticket_form');
|
||||||
|
submitButton = document.getElementById('kt_modal_new_ticket_submit');
|
||||||
|
cancelButton = document.getElementById('kt_modal_new_ticket_cancel');
|
||||||
|
|
||||||
|
initForm();
|
||||||
|
handleForm();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTModalNewTicket.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,166 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTUsersAddPermission = function () {
|
||||||
|
// Shared variables
|
||||||
|
const element = document.getElementById('kt_modal_add_permission');
|
||||||
|
const form = element.querySelector('#kt_modal_add_permission_form');
|
||||||
|
const modal = new bootstrap.Modal(element);
|
||||||
|
|
||||||
|
// Init add schedule modal
|
||||||
|
var initAddPermission = () => {
|
||||||
|
|
||||||
|
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||||
|
var validator = FormValidation.formValidation(
|
||||||
|
form,
|
||||||
|
{
|
||||||
|
fields: {
|
||||||
|
'permission_name': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Permission name is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
plugins: {
|
||||||
|
trigger: new FormValidation.plugins.Trigger(),
|
||||||
|
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||||
|
rowSelector: '.fv-row',
|
||||||
|
eleInvalidClass: '',
|
||||||
|
eleValidClass: ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// Close button handler
|
||||||
|
const closeButton = element.querySelector('[data-kt-permissions-modal-action="close"]');
|
||||||
|
closeButton.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
Swal.fire({
|
||||||
|
text: "Are you sure you would like to close?",
|
||||||
|
icon: "warning",
|
||||||
|
showCancelButton: true,
|
||||||
|
buttonsStyling: false,
|
||||||
|
confirmButtonText: "Yes, close it!",
|
||||||
|
cancelButtonText: "No, return",
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-primary",
|
||||||
|
cancelButton: "btn btn-active-light"
|
||||||
|
}
|
||||||
|
}).then(function (result) {
|
||||||
|
if (result.value) {
|
||||||
|
modal.hide(); // Hide modal
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Cancel button handler
|
||||||
|
const cancelButton = element.querySelector('[data-kt-permissions-modal-action="cancel"]');
|
||||||
|
cancelButton.addEventListener('click', 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",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Submit button handler
|
||||||
|
const submitButton = element.querySelector('[data-kt-permissions-modal-action="submit"]');
|
||||||
|
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 button to avoid multiple click
|
||||||
|
submitButton.disabled = true;
|
||||||
|
|
||||||
|
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||||
|
setTimeout(function () {
|
||||||
|
// Remove loading indication
|
||||||
|
submitButton.removeAttribute('data-kt-indicator');
|
||||||
|
|
||||||
|
// Enable button
|
||||||
|
submitButton.disabled = false;
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
} else {
|
||||||
|
// Show popup warning. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||||
|
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"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Public functions
|
||||||
|
init: function () {
|
||||||
|
initAddPermission();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTUsersAddPermission.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,117 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTUsersPermissionsList = function () {
|
||||||
|
// Shared variables
|
||||||
|
var datatable;
|
||||||
|
var table;
|
||||||
|
|
||||||
|
// Init add schedule modal
|
||||||
|
var initPermissionsList = () => {
|
||||||
|
// Set date data order
|
||||||
|
const tableRows = table.querySelectorAll('tbody tr');
|
||||||
|
|
||||||
|
tableRows.forEach(row => {
|
||||||
|
const dateRow = row.querySelectorAll('td');
|
||||||
|
const realDate = moment(dateRow[2].innerHTML, "DD MMM YYYY, LT").format(); // select date from 2nd column in table
|
||||||
|
dateRow[2].setAttribute('data-order', realDate);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Init datatable --- more info on datatables: https://datatables.net/manual/
|
||||||
|
datatable = $(table).DataTable({
|
||||||
|
"info": false,
|
||||||
|
'order': [],
|
||||||
|
'columnDefs': [
|
||||||
|
{ orderable: false, targets: 1 }, // Disable ordering on column 1 (assigned)
|
||||||
|
{ orderable: false, targets: 3 }, // Disable ordering on column 3 (actions)
|
||||||
|
]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
|
||||||
|
var handleSearchDatatable = () => {
|
||||||
|
const filterSearch = document.querySelector('[data-kt-permissions-table-filter="search"]');
|
||||||
|
filterSearch.addEventListener('keyup', function (e) {
|
||||||
|
datatable.search(e.target.value).draw();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Delete user
|
||||||
|
var handleDeleteRows = () => {
|
||||||
|
// Select all delete buttons
|
||||||
|
const deleteButtons = table.querySelectorAll('[data-kt-permissions-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 permission name
|
||||||
|
const permissionName = 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 " + permissionName + "?",
|
||||||
|
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 " + permissionName + "!.",
|
||||||
|
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",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Public functions
|
||||||
|
init: function () {
|
||||||
|
table = document.querySelector('#kt_permissions_table');
|
||||||
|
|
||||||
|
if (!table) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
initPermissionsList();
|
||||||
|
handleSearchDatatable();
|
||||||
|
handleDeleteRows();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTUsersPermissionsList.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,166 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTUsersUpdatePermission = function () {
|
||||||
|
// Shared variables
|
||||||
|
const element = document.getElementById('kt_modal_update_permission');
|
||||||
|
const form = element.querySelector('#kt_modal_update_permission_form');
|
||||||
|
const modal = new bootstrap.Modal(element);
|
||||||
|
|
||||||
|
// Init add schedule modal
|
||||||
|
var initUpdatePermission = () => {
|
||||||
|
|
||||||
|
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||||
|
var validator = FormValidation.formValidation(
|
||||||
|
form,
|
||||||
|
{
|
||||||
|
fields: {
|
||||||
|
'permission_name': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Permission name is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
plugins: {
|
||||||
|
trigger: new FormValidation.plugins.Trigger(),
|
||||||
|
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||||
|
rowSelector: '.fv-row',
|
||||||
|
eleInvalidClass: '',
|
||||||
|
eleValidClass: ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// Close button handler
|
||||||
|
const closeButton = element.querySelector('[data-kt-permissions-modal-action="close"]');
|
||||||
|
closeButton.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
Swal.fire({
|
||||||
|
text: "Are you sure you would like to close?",
|
||||||
|
icon: "warning",
|
||||||
|
showCancelButton: true,
|
||||||
|
buttonsStyling: false,
|
||||||
|
confirmButtonText: "Yes, close it!",
|
||||||
|
cancelButtonText: "No, return",
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-primary",
|
||||||
|
cancelButton: "btn btn-active-light"
|
||||||
|
}
|
||||||
|
}).then(function (result) {
|
||||||
|
if (result.value) {
|
||||||
|
modal.hide(); // Hide modal
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Cancel button handler
|
||||||
|
const cancelButton = element.querySelector('[data-kt-permissions-modal-action="cancel"]');
|
||||||
|
cancelButton.addEventListener('click', 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",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Submit button handler
|
||||||
|
const submitButton = element.querySelector('[data-kt-permissions-modal-action="submit"]');
|
||||||
|
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 button to avoid multiple click
|
||||||
|
submitButton.disabled = true;
|
||||||
|
|
||||||
|
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||||
|
setTimeout(function () {
|
||||||
|
// Remove loading indication
|
||||||
|
submitButton.removeAttribute('data-kt-indicator');
|
||||||
|
|
||||||
|
// Enable button
|
||||||
|
submitButton.disabled = false;
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
} else {
|
||||||
|
// Show popup warning. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||||
|
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"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Public functions
|
||||||
|
init: function () {
|
||||||
|
initUpdatePermission();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTUsersUpdatePermission.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,185 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTUsersAddRole = function () {
|
||||||
|
// Shared variables
|
||||||
|
const element = document.getElementById('kt_modal_add_role');
|
||||||
|
const form = element.querySelector('#kt_modal_add_role_form');
|
||||||
|
const modal = new bootstrap.Modal(element);
|
||||||
|
|
||||||
|
// Init add schedule modal
|
||||||
|
var initAddRole = () => {
|
||||||
|
|
||||||
|
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||||
|
var validator = FormValidation.formValidation(
|
||||||
|
form,
|
||||||
|
{
|
||||||
|
fields: {
|
||||||
|
'role_name': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Role name is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
plugins: {
|
||||||
|
trigger: new FormValidation.plugins.Trigger(),
|
||||||
|
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||||
|
rowSelector: '.fv-row',
|
||||||
|
eleInvalidClass: '',
|
||||||
|
eleValidClass: ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// Close button handler
|
||||||
|
const closeButton = element.querySelector('[data-kt-roles-modal-action="close"]');
|
||||||
|
closeButton.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
Swal.fire({
|
||||||
|
text: "Are you sure you would like to close?",
|
||||||
|
icon: "warning",
|
||||||
|
showCancelButton: true,
|
||||||
|
buttonsStyling: false,
|
||||||
|
confirmButtonText: "Yes, close it!",
|
||||||
|
cancelButtonText: "No, return",
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-primary",
|
||||||
|
cancelButton: "btn btn-active-light"
|
||||||
|
}
|
||||||
|
}).then(function (result) {
|
||||||
|
if (result.value) {
|
||||||
|
modal.hide(); // Hide modal
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Cancel button handler
|
||||||
|
const cancelButton = element.querySelector('[data-kt-roles-modal-action="cancel"]');
|
||||||
|
cancelButton.addEventListener('click', 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",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Submit button handler
|
||||||
|
const submitButton = element.querySelector('[data-kt-roles-modal-action="submit"]');
|
||||||
|
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 button to avoid multiple click
|
||||||
|
submitButton.disabled = true;
|
||||||
|
|
||||||
|
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||||
|
setTimeout(function () {
|
||||||
|
// Remove loading indication
|
||||||
|
submitButton.removeAttribute('data-kt-indicator');
|
||||||
|
|
||||||
|
// Enable button
|
||||||
|
submitButton.disabled = false;
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
} else {
|
||||||
|
// Show popup warning. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||||
|
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"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Select all handler
|
||||||
|
const handleSelectAll = () =>{
|
||||||
|
// Define variables
|
||||||
|
const selectAll = form.querySelector('#kt_roles_select_all');
|
||||||
|
const allCheckboxes = form.querySelectorAll('[type="checkbox"]');
|
||||||
|
|
||||||
|
// Handle check state
|
||||||
|
selectAll.addEventListener('change', e => {
|
||||||
|
|
||||||
|
// Apply check state to all checkboxes
|
||||||
|
allCheckboxes.forEach(c => {
|
||||||
|
c.checked = e.target.checked;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Public functions
|
||||||
|
init: function () {
|
||||||
|
initAddRole();
|
||||||
|
handleSelectAll();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTUsersAddRole.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,183 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTUsersUpdatePermissions = function () {
|
||||||
|
// Shared variables
|
||||||
|
const element = document.getElementById('kt_modal_update_role');
|
||||||
|
const form = element.querySelector('#kt_modal_update_role_form');
|
||||||
|
const modal = new bootstrap.Modal(element);
|
||||||
|
|
||||||
|
// Init add schedule modal
|
||||||
|
var initUpdatePermissions = () => {
|
||||||
|
|
||||||
|
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||||
|
var validator = FormValidation.formValidation(
|
||||||
|
form,
|
||||||
|
{
|
||||||
|
fields: {
|
||||||
|
'role_name': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Role name is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
plugins: {
|
||||||
|
trigger: new FormValidation.plugins.Trigger(),
|
||||||
|
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||||
|
rowSelector: '.fv-row',
|
||||||
|
eleInvalidClass: '',
|
||||||
|
eleValidClass: ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// Close button handler
|
||||||
|
const closeButton = element.querySelector('[data-kt-roles-modal-action="close"]');
|
||||||
|
closeButton.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
Swal.fire({
|
||||||
|
text: "Are you sure you would like to close?",
|
||||||
|
icon: "warning",
|
||||||
|
showCancelButton: true,
|
||||||
|
buttonsStyling: false,
|
||||||
|
confirmButtonText: "Yes, close it!",
|
||||||
|
cancelButtonText: "No, return",
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-primary",
|
||||||
|
cancelButton: "btn btn-active-light"
|
||||||
|
}
|
||||||
|
}).then(function (result) {
|
||||||
|
if (result.value) {
|
||||||
|
modal.hide(); // Hide modal
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Cancel button handler
|
||||||
|
const cancelButton = element.querySelector('[data-kt-roles-modal-action="cancel"]');
|
||||||
|
cancelButton.addEventListener('click', 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",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Submit button handler
|
||||||
|
const submitButton = element.querySelector('[data-kt-roles-modal-action="submit"]');
|
||||||
|
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 button to avoid multiple click
|
||||||
|
submitButton.disabled = true;
|
||||||
|
|
||||||
|
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||||
|
setTimeout(function () {
|
||||||
|
// Remove loading indication
|
||||||
|
submitButton.removeAttribute('data-kt-indicator');
|
||||||
|
|
||||||
|
// Enable button
|
||||||
|
submitButton.disabled = false;
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
} else {
|
||||||
|
// Show popup warning. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||||
|
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"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Select all handler
|
||||||
|
const handleSelectAll = () => {
|
||||||
|
// Define variables
|
||||||
|
const selectAll = form.querySelector('#kt_roles_select_all');
|
||||||
|
const allCheckboxes = form.querySelectorAll('[type="checkbox"]');
|
||||||
|
|
||||||
|
// Handle check state
|
||||||
|
selectAll.addEventListener('change', e => {
|
||||||
|
|
||||||
|
// Apply check state to all checkboxes
|
||||||
|
allCheckboxes.forEach(c => {
|
||||||
|
c.checked = e.target.checked;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Public functions
|
||||||
|
init: function () {
|
||||||
|
initUpdatePermissions();
|
||||||
|
handleSelectAll();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTUsersUpdatePermissions.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,183 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTUsersUpdatePermissions = function () {
|
||||||
|
// Shared variables
|
||||||
|
const element = document.getElementById('kt_modal_update_role');
|
||||||
|
const form = element.querySelector('#kt_modal_update_role_form');
|
||||||
|
const modal = new bootstrap.Modal(element);
|
||||||
|
|
||||||
|
// Init add schedule modal
|
||||||
|
var initUpdatePermissions = () => {
|
||||||
|
|
||||||
|
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||||
|
var validator = FormValidation.formValidation(
|
||||||
|
form,
|
||||||
|
{
|
||||||
|
fields: {
|
||||||
|
'role_name': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Role name is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
plugins: {
|
||||||
|
trigger: new FormValidation.plugins.Trigger(),
|
||||||
|
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||||
|
rowSelector: '.fv-row',
|
||||||
|
eleInvalidClass: '',
|
||||||
|
eleValidClass: ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// Close button handler
|
||||||
|
const closeButton = element.querySelector('[data-kt-roles-modal-action="close"]');
|
||||||
|
closeButton.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
Swal.fire({
|
||||||
|
text: "Are you sure you would like to close?",
|
||||||
|
icon: "warning",
|
||||||
|
showCancelButton: true,
|
||||||
|
buttonsStyling: false,
|
||||||
|
confirmButtonText: "Yes, close it!",
|
||||||
|
cancelButtonText: "No, return",
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-primary",
|
||||||
|
cancelButton: "btn btn-active-light"
|
||||||
|
}
|
||||||
|
}).then(function (result) {
|
||||||
|
if (result.value) {
|
||||||
|
modal.hide(); // Hide modal
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Cancel button handler
|
||||||
|
const cancelButton = element.querySelector('[data-kt-roles-modal-action="cancel"]');
|
||||||
|
cancelButton.addEventListener('click', 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",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Submit button handler
|
||||||
|
const submitButton = element.querySelector('[data-kt-roles-modal-action="submit"]');
|
||||||
|
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 button to avoid multiple click
|
||||||
|
submitButton.disabled = true;
|
||||||
|
|
||||||
|
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||||
|
setTimeout(function () {
|
||||||
|
// Remove loading indication
|
||||||
|
submitButton.removeAttribute('data-kt-indicator');
|
||||||
|
|
||||||
|
// Enable button
|
||||||
|
submitButton.disabled = false;
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
} else {
|
||||||
|
// Show popup warning. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||||
|
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"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Select all handler
|
||||||
|
const handleSelectAll = () => {
|
||||||
|
// Define variables
|
||||||
|
const selectAll = form.querySelector('#kt_roles_select_all');
|
||||||
|
const allCheckboxes = form.querySelectorAll('[type="checkbox"]');
|
||||||
|
|
||||||
|
// Handle check state
|
||||||
|
selectAll.addEventListener('change', e => {
|
||||||
|
|
||||||
|
// Apply check state to all checkboxes
|
||||||
|
allCheckboxes.forEach(c => {
|
||||||
|
c.checked = e.target.checked;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Public functions
|
||||||
|
init: function () {
|
||||||
|
initUpdatePermissions();
|
||||||
|
handleSelectAll();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTUsersUpdatePermissions.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,225 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTUsersViewRole = function () {
|
||||||
|
// Shared variables
|
||||||
|
var datatable;
|
||||||
|
var table;
|
||||||
|
|
||||||
|
// Init add schedule modal
|
||||||
|
var initViewRole = () => {
|
||||||
|
// 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 5th 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: 0 }, // Disable ordering on column 0 (checkbox)
|
||||||
|
{ orderable: false, targets: 4 }, // Disable ordering on column 4 (actions)
|
||||||
|
]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
|
||||||
|
var handleSearchDatatable = () => {
|
||||||
|
const filterSearch = document.querySelector('[data-kt-roles-table-filter="search"]');
|
||||||
|
filterSearch.addEventListener('keyup', function (e) {
|
||||||
|
datatable.search(e.target.value).draw();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Delete user
|
||||||
|
var handleDeleteRows = () => {
|
||||||
|
// Select all delete buttons
|
||||||
|
const deleteButtons = table.querySelectorAll('[data-kt-roles-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 userName = 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 " + userName + "?",
|
||||||
|
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 " + userName + "!.",
|
||||||
|
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",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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-view-roles-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;
|
||||||
|
}).then(function(){
|
||||||
|
toggleToolbars(); // Detect checked checkboxes
|
||||||
|
initToggleToolbar(); // Re-init toolbar to recalculate checkboxes
|
||||||
|
});
|
||||||
|
} 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-view-roles-table-toolbar="base"]');
|
||||||
|
const toolbarSelected = document.querySelector('[data-kt-view-roles-table-toolbar="selected"]');
|
||||||
|
const selectedCount = document.querySelector('[data-kt-view-roles-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');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Public functions
|
||||||
|
init: function () {
|
||||||
|
table = document.querySelector('#kt_roles_view_table');
|
||||||
|
|
||||||
|
if (!table) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
initViewRole();
|
||||||
|
handleSearchDatatable();
|
||||||
|
handleDeleteRows();
|
||||||
|
initToggleToolbar();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTUsersViewRole.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,183 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTUsersAddUser = function () {
|
||||||
|
// Shared variables
|
||||||
|
const element = document.getElementById('kt_modal_add_user');
|
||||||
|
const form = element.querySelector('#kt_modal_add_user_form');
|
||||||
|
const modal = new bootstrap.Modal(element);
|
||||||
|
|
||||||
|
// Init add schedule modal
|
||||||
|
var initAddUser = () => {
|
||||||
|
|
||||||
|
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||||
|
var validator = FormValidation.formValidation(
|
||||||
|
form,
|
||||||
|
{
|
||||||
|
fields: {
|
||||||
|
'user_name': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Full name is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'user_email': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Valid email address is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
plugins: {
|
||||||
|
trigger: new FormValidation.plugins.Trigger(),
|
||||||
|
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||||
|
rowSelector: '.fv-row',
|
||||||
|
eleInvalidClass: '',
|
||||||
|
eleValidClass: ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// Submit button handler
|
||||||
|
const submitButton = element.querySelector('[data-kt-users-modal-action="submit"]');
|
||||||
|
submitButton.addEventListener('click', e => {
|
||||||
|
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 button to avoid multiple click
|
||||||
|
submitButton.disabled = true;
|
||||||
|
|
||||||
|
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||||
|
setTimeout(function () {
|
||||||
|
// Remove loading indication
|
||||||
|
submitButton.removeAttribute('data-kt-indicator');
|
||||||
|
|
||||||
|
// Enable button
|
||||||
|
submitButton.disabled = false;
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
} else {
|
||||||
|
// Show popup warning. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||||
|
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"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Cancel button handler
|
||||||
|
const cancelButton = element.querySelector('[data-kt-users-modal-action="cancel"]');
|
||||||
|
cancelButton.addEventListener('click', 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();
|
||||||
|
} 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",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close button handler
|
||||||
|
const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
|
||||||
|
closeButton.addEventListener('click', 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();
|
||||||
|
} 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 () {
|
||||||
|
initAddUser();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTUsersAddUser.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,170 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTModalExportUsers = function () {
|
||||||
|
// Shared variables
|
||||||
|
const element = document.getElementById('kt_modal_export_users');
|
||||||
|
const form = element.querySelector('#kt_modal_export_users_form');
|
||||||
|
const modal = new bootstrap.Modal(element);
|
||||||
|
|
||||||
|
// Init form inputs
|
||||||
|
var initForm = function () {
|
||||||
|
|
||||||
|
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||||
|
var validator = FormValidation.formValidation(
|
||||||
|
form,
|
||||||
|
{
|
||||||
|
fields: {
|
||||||
|
'format': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'File format is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
trigger: new FormValidation.plugins.Trigger(),
|
||||||
|
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||||
|
rowSelector: '.fv-row',
|
||||||
|
eleInvalidClass: '',
|
||||||
|
eleValidClass: ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// Submit button handler
|
||||||
|
const submitButton = element.querySelector('[data-kt-users-modal-action="submit"]');
|
||||||
|
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: "User 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"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Cancel button handler
|
||||||
|
const cancelButton = element.querySelector('[data-kt-users-modal-action="cancel"]');
|
||||||
|
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",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close button handler
|
||||||
|
const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
|
||||||
|
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 () {
|
||||||
|
initForm();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTModalExportUsers.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,315 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var KTUsersList = function () {
|
||||||
|
// Define shared variables
|
||||||
|
var table = document.getElementById('kt_table_users');
|
||||||
|
var datatable;
|
||||||
|
var toolbarBase;
|
||||||
|
var toolbarSelected;
|
||||||
|
var selectedCount;
|
||||||
|
|
||||||
|
// Private functions
|
||||||
|
var initUserTable = function () {
|
||||||
|
// Set date data order
|
||||||
|
const tableRows = table.querySelectorAll('tbody tr');
|
||||||
|
|
||||||
|
tableRows.forEach(row => {
|
||||||
|
const dateRow = row.querySelectorAll('td');
|
||||||
|
const lastLogin = dateRow[3].innerText.toLowerCase(); // Get last login time
|
||||||
|
let timeCount = 0;
|
||||||
|
let timeFormat = 'minutes';
|
||||||
|
|
||||||
|
// Determine date & time format -- add more formats when necessary
|
||||||
|
if (lastLogin.includes('yesterday')) {
|
||||||
|
timeCount = 1;
|
||||||
|
timeFormat = 'days';
|
||||||
|
} else if (lastLogin.includes('mins')) {
|
||||||
|
timeCount = parseInt(lastLogin.replace(/\D/g, ''));
|
||||||
|
timeFormat = 'minutes';
|
||||||
|
} else if (lastLogin.includes('hours')) {
|
||||||
|
timeCount = parseInt(lastLogin.replace(/\D/g, ''));
|
||||||
|
timeFormat = 'hours';
|
||||||
|
} else if (lastLogin.includes('days')) {
|
||||||
|
timeCount = parseInt(lastLogin.replace(/\D/g, ''));
|
||||||
|
timeFormat = 'days';
|
||||||
|
} else if (lastLogin.includes('weeks')) {
|
||||||
|
timeCount = parseInt(lastLogin.replace(/\D/g, ''));
|
||||||
|
timeFormat = 'weeks';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Subtract date/time from today -- more info on moment datetime subtraction: https://momentjs.com/docs/#/durations/subtract/
|
||||||
|
const realDate = moment().subtract(timeCount, timeFormat).format();
|
||||||
|
|
||||||
|
// Insert real date to last login attribute
|
||||||
|
dateRow[3].setAttribute('data-order', realDate);
|
||||||
|
|
||||||
|
// Set real date for joined column
|
||||||
|
const joinedDate = moment(dateRow[5].innerHTML, "DD MMM YYYY, LT").format(); // select date from 5th column in table
|
||||||
|
dateRow[5].setAttribute('data-order', joinedDate);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Init datatable --- more info on datatables: https://datatables.net/manual/
|
||||||
|
datatable = $(table).DataTable({
|
||||||
|
"info": false,
|
||||||
|
'order': [],
|
||||||
|
"pageLength": 10,
|
||||||
|
"lengthChange": false,
|
||||||
|
'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-user-table-filter="search"]');
|
||||||
|
filterSearch.addEventListener('keyup', function (e) {
|
||||||
|
datatable.search(e.target.value).draw();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Filter Datatable
|
||||||
|
var handleFilterDatatable = () => {
|
||||||
|
// Select filter options
|
||||||
|
const filterForm = document.querySelector('[data-kt-user-table-filter="form"]');
|
||||||
|
const filterButton = filterForm.querySelector('[data-kt-user-table-filter="filter"]');
|
||||||
|
const selectOptions = filterForm.querySelectorAll('select');
|
||||||
|
|
||||||
|
// Filter datatable on submit
|
||||||
|
filterButton.addEventListener('click', function () {
|
||||||
|
var filterString = '';
|
||||||
|
|
||||||
|
// Get filter values
|
||||||
|
selectOptions.forEach((item, index) => {
|
||||||
|
if (item.value && item.value !== '') {
|
||||||
|
if (index !== 0) {
|
||||||
|
filterString += ' ';
|
||||||
|
}
|
||||||
|
|
||||||
|
// Build filter value options
|
||||||
|
filterString += item.value;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Filter datatable --- official docs reference: https://datatables.net/reference/api/search()
|
||||||
|
datatable.search(filterString).draw();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reset Filter
|
||||||
|
var handleResetForm = () => {
|
||||||
|
// Select reset button
|
||||||
|
const resetButton = document.querySelector('[data-kt-user-table-filter="reset"]');
|
||||||
|
|
||||||
|
// Reset datatable
|
||||||
|
resetButton.addEventListener('click', function () {
|
||||||
|
// Select filter options
|
||||||
|
const filterForm = document.querySelector('[data-kt-user-table-filter="form"]');
|
||||||
|
const selectOptions = filterForm.querySelectorAll('select');
|
||||||
|
|
||||||
|
// Reset select2 values -- more info: https://select2.org/programmatic-control/add-select-clear-items
|
||||||
|
selectOptions.forEach(select => {
|
||||||
|
$(select).val('').trigger('change');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reset datatable --- official docs reference: https://datatables.net/reference/api/search()
|
||||||
|
datatable.search('').draw();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Delete subscirption
|
||||||
|
var handleDeleteRows = () => {
|
||||||
|
// Select all delete buttons
|
||||||
|
const deleteButtons = table.querySelectorAll('[data-kt-users-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 user name
|
||||||
|
const userName = parent.querySelectorAll('td')[1].querySelectorAll('a')[1].innerText;
|
||||||
|
|
||||||
|
// SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
|
||||||
|
Swal.fire({
|
||||||
|
text: "Are you sure you want to delete " + userName + "?",
|
||||||
|
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 " + userName + "!.",
|
||||||
|
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",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init toggle toolbar
|
||||||
|
var initToggleToolbar = () => {
|
||||||
|
// Toggle selected action toolbar
|
||||||
|
// Select all checkboxes
|
||||||
|
const checkboxes = table.querySelectorAll('[type="checkbox"]');
|
||||||
|
|
||||||
|
// Select elements
|
||||||
|
toolbarBase = document.querySelector('[data-kt-user-table-toolbar="base"]');
|
||||||
|
toolbarSelected = document.querySelector('[data-kt-user-table-toolbar="selected"]');
|
||||||
|
selectedCount = document.querySelector('[data-kt-user-table-select="selected_count"]');
|
||||||
|
const deleteSelected = document.querySelector('[data-kt-user-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;
|
||||||
|
}).then(function () {
|
||||||
|
toggleToolbars(); // Detect checked checkboxes
|
||||||
|
initToggleToolbar(); // Re-init toolbar to recalculate checkboxes
|
||||||
|
});
|
||||||
|
} 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 = () => {
|
||||||
|
// 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');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Public functions
|
||||||
|
init: function () {
|
||||||
|
if (!table) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
initUserTable();
|
||||||
|
initToggleToolbar();
|
||||||
|
handleSearchDatatable();
|
||||||
|
handleResetForm();
|
||||||
|
handleDeleteRows();
|
||||||
|
handleFilterDatatable();
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTUsersList.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,81 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTUsersAddAuthApp = function () {
|
||||||
|
// Shared variables
|
||||||
|
const element = document.getElementById('kt_modal_add_auth_app');
|
||||||
|
const modal = new bootstrap.Modal(element);
|
||||||
|
|
||||||
|
// Init add schedule modal
|
||||||
|
var initAddAuthApp = () => {
|
||||||
|
|
||||||
|
// Close button handler
|
||||||
|
const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
|
||||||
|
closeButton.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
Swal.fire({
|
||||||
|
text: "Are you sure you would like to close?",
|
||||||
|
icon: "warning",
|
||||||
|
showCancelButton: true,
|
||||||
|
buttonsStyling: false,
|
||||||
|
confirmButtonText: "Yes, close it!",
|
||||||
|
cancelButtonText: "No, return",
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-primary",
|
||||||
|
cancelButton: "btn btn-active-light"
|
||||||
|
}
|
||||||
|
}).then(function (result) {
|
||||||
|
if (result.value) {
|
||||||
|
modal.hide(); // Hide modal
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// QR code to text code swapper
|
||||||
|
var initCodeSwap = () => {
|
||||||
|
const qrCode = element.querySelector('[ data-kt-add-auth-action="qr-code"]');
|
||||||
|
const textCode = element.querySelector('[ data-kt-add-auth-action="text-code"]');
|
||||||
|
const qrCodeButton = element.querySelector('[ data-kt-add-auth-action="qr-code-button"]');
|
||||||
|
const textCodeButton = element.querySelector('[ data-kt-add-auth-action="text-code-button"]');
|
||||||
|
const qrCodeLabel = element.querySelector('[ data-kt-add-auth-action="qr-code-label"]');
|
||||||
|
const textCodeLabel = element.querySelector('[ data-kt-add-auth-action="text-code-label"]');
|
||||||
|
|
||||||
|
const toggleClass = () =>{
|
||||||
|
qrCode.classList.toggle('d-none');
|
||||||
|
qrCodeButton.classList.toggle('d-none');
|
||||||
|
qrCodeLabel.classList.toggle('d-none');
|
||||||
|
textCode.classList.toggle('d-none');
|
||||||
|
textCodeButton.classList.toggle('d-none');
|
||||||
|
textCodeLabel.classList.toggle('d-none');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Swap to text code handler
|
||||||
|
textCodeButton.addEventListener('click', e =>{
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
toggleClass();
|
||||||
|
});
|
||||||
|
|
||||||
|
qrCodeButton.addEventListener('click', e =>{
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
toggleClass();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Public functions
|
||||||
|
init: function () {
|
||||||
|
initAddAuthApp();
|
||||||
|
initCodeSwap();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTUsersAddAuthApp.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,173 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTUsersAddOneTimePassword = function () {
|
||||||
|
// Shared variables
|
||||||
|
const element = document.getElementById('kt_modal_add_one_time_password');
|
||||||
|
const form = element.querySelector('#kt_modal_add_one_time_password_form');
|
||||||
|
const modal = new bootstrap.Modal(element);
|
||||||
|
|
||||||
|
// Init one time password modal
|
||||||
|
var initAddOneTimePassword = () => {
|
||||||
|
|
||||||
|
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||||
|
var validator = FormValidation.formValidation(
|
||||||
|
form,
|
||||||
|
{
|
||||||
|
fields: {
|
||||||
|
'otp_mobile_number': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Valid mobile number is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'otp_confirm_password': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Password confirmation is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
plugins: {
|
||||||
|
trigger: new FormValidation.plugins.Trigger(),
|
||||||
|
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||||
|
rowSelector: '.fv-row',
|
||||||
|
eleInvalidClass: '',
|
||||||
|
eleValidClass: ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// Close button handler
|
||||||
|
const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
|
||||||
|
closeButton.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
Swal.fire({
|
||||||
|
text: "Are you sure you would like to close?",
|
||||||
|
icon: "warning",
|
||||||
|
showCancelButton: true,
|
||||||
|
buttonsStyling: false,
|
||||||
|
confirmButtonText: "Yes, close it!",
|
||||||
|
cancelButtonText: "No, return",
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-primary",
|
||||||
|
cancelButton: "btn btn-active-light"
|
||||||
|
}
|
||||||
|
}).then(function (result) {
|
||||||
|
if (result.value) {
|
||||||
|
modal.hide(); // Hide modal
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Cancel button handler
|
||||||
|
const cancelButton = element.querySelector('[data-kt-users-modal-action="cancel"]');
|
||||||
|
cancelButton.addEventListener('click', 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",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Submit button handler
|
||||||
|
const submitButton = element.querySelector('[data-kt-users-modal-action="submit"]');
|
||||||
|
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 button to avoid multiple click
|
||||||
|
submitButton.disabled = true;
|
||||||
|
|
||||||
|
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||||
|
setTimeout(function () {
|
||||||
|
// Remove loading indication
|
||||||
|
submitButton.removeAttribute('data-kt-indicator');
|
||||||
|
|
||||||
|
// Enable button
|
||||||
|
submitButton.disabled = false;
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
} else {
|
||||||
|
// Show popup warning. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||||
|
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"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Public functions
|
||||||
|
init: function () {
|
||||||
|
initAddOneTimePassword();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTUsersAddOneTimePassword.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,223 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTUsersAddSchedule = function () {
|
||||||
|
// Shared variables
|
||||||
|
const element = document.getElementById('kt_modal_add_schedule');
|
||||||
|
const form = element.querySelector('#kt_modal_add_schedule_form');
|
||||||
|
const modal = new bootstrap.Modal(element);
|
||||||
|
|
||||||
|
// Init add schedule modal
|
||||||
|
var initAddSchedule = () => {
|
||||||
|
|
||||||
|
// Init flatpickr -- for more info: https://flatpickr.js.org/
|
||||||
|
$("#kt_modal_add_schedule_datepicker").flatpickr({
|
||||||
|
enableTime: true,
|
||||||
|
dateFormat: "Y-m-d H:i",
|
||||||
|
});
|
||||||
|
|
||||||
|
// Init tagify -- for more info: https://yaireo.github.io/tagify/
|
||||||
|
const tagifyInput = form.querySelector('#kt_modal_add_schedule_tagify');
|
||||||
|
new Tagify(tagifyInput, {
|
||||||
|
whitelist: ["sean@dellito.com", "brian@exchange.com", "mikaela@pexcom.com", "f.mitcham@kpmg.com.au", "olivia@corpmail.com", "owen.neil@gmail.com", "dam@consilting.com", "emma@intenso.com", "ana.cf@limtel.com", "robert@benko.com", "lucy.m@fentech.com", "ethan@loop.com.au"],
|
||||||
|
maxTags: 10,
|
||||||
|
dropdown: {
|
||||||
|
maxItems: 20, // <- mixumum allowed rendered suggestions
|
||||||
|
classname: "tagify__inline__suggestions", // <- custom classname for this dropdown, so it could be targeted
|
||||||
|
enabled: 0, // <- show suggestions on focus
|
||||||
|
closeOnSelect: false // <- do not hide the suggestions dropdown once an item has been selected
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||||
|
var validator = FormValidation.formValidation(
|
||||||
|
form,
|
||||||
|
{
|
||||||
|
fields: {
|
||||||
|
'event_datetime': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Event date & time is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'event_name': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Event name is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'event_org': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Event organiser is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'event_invitees': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Event invitees 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="event_invitees"]')).on('change', function () {
|
||||||
|
// Revalidate the field when an option is chosen
|
||||||
|
validator.revalidateField('event_invitees');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Close button handler
|
||||||
|
const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
|
||||||
|
closeButton.addEventListener('click', 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",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Cancel button handler
|
||||||
|
const cancelButton = element.querySelector('[data-kt-users-modal-action="cancel"]');
|
||||||
|
cancelButton.addEventListener('click', 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",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Submit button handler
|
||||||
|
const submitButton = element.querySelector('[data-kt-users-modal-action="submit"]');
|
||||||
|
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 button to avoid multiple click
|
||||||
|
submitButton.disabled = true;
|
||||||
|
|
||||||
|
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||||
|
setTimeout(function() {
|
||||||
|
// Remove loading indication
|
||||||
|
submitButton.removeAttribute('data-kt-indicator');
|
||||||
|
|
||||||
|
// Enable button
|
||||||
|
submitButton.disabled = false;
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
} else {
|
||||||
|
// Show popup warning. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||||
|
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"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Public functions
|
||||||
|
init: function () {
|
||||||
|
initAddSchedule();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTUsersAddSchedule.init();
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,324 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
// Class definition
|
||||||
|
var KTUsersAddTask = function () {
|
||||||
|
// Shared variables
|
||||||
|
const element = document.getElementById('kt_modal_add_task');
|
||||||
|
const form = element.querySelector('#kt_modal_add_task_form');
|
||||||
|
const modal = new bootstrap.Modal(element);
|
||||||
|
|
||||||
|
// Init add task modal
|
||||||
|
var initAddTask = () => {
|
||||||
|
|
||||||
|
// Init flatpickr -- for more info: https://flatpickr.js.org/
|
||||||
|
$("#kt_modal_add_task_datepicker").flatpickr({
|
||||||
|
dateFormat: "Y-m-d",
|
||||||
|
});
|
||||||
|
|
||||||
|
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||||
|
var validator = FormValidation.formValidation(
|
||||||
|
form,
|
||||||
|
{
|
||||||
|
fields: {
|
||||||
|
'task_duedate': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Task due date is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'task_name': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Task name is required'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
plugins: {
|
||||||
|
trigger: new FormValidation.plugins.Trigger(),
|
||||||
|
bootstrap: new FormValidation.plugins.Bootstrap5({
|
||||||
|
rowSelector: '.fv-row',
|
||||||
|
eleInvalidClass: '',
|
||||||
|
eleValidClass: ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// Close button handler
|
||||||
|
const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
|
||||||
|
closeButton.addEventListener('click', 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",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Cancel button handler
|
||||||
|
const cancelButton = element.querySelector('[data-kt-users-modal-action="cancel"]');
|
||||||
|
cancelButton.addEventListener('click', 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",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Submit button handler
|
||||||
|
const submitButton = element.querySelector('[data-kt-users-modal-action="submit"]');
|
||||||
|
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 button to avoid multiple click
|
||||||
|
submitButton.disabled = true;
|
||||||
|
|
||||||
|
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||||
|
setTimeout(function () {
|
||||||
|
// Remove loading indication
|
||||||
|
submitButton.removeAttribute('data-kt-indicator');
|
||||||
|
|
||||||
|
// Enable button
|
||||||
|
submitButton.disabled = false;
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
} else {
|
||||||
|
// Show popup warning. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||||
|
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"
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Init update task status
|
||||||
|
var initUpdateTaskStatus = () => {
|
||||||
|
const allTaskMenus = document.querySelectorAll('[data-kt-menu-id="kt-users-tasks"]');
|
||||||
|
|
||||||
|
allTaskMenus.forEach(el => {
|
||||||
|
const resetButton = el.querySelector('[data-kt-users-update-task-status="reset"]');
|
||||||
|
const submitButton = el.querySelector('[data-kt-users-update-task-status="submit"]');
|
||||||
|
const taskForm = el.querySelector('[data-kt-menu-id="kt-users-tasks-form"]');
|
||||||
|
|
||||||
|
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
|
||||||
|
var validator = FormValidation.formValidation(
|
||||||
|
taskForm,
|
||||||
|
{
|
||||||
|
fields: {
|
||||||
|
'task_status': {
|
||||||
|
validators: {
|
||||||
|
notEmpty: {
|
||||||
|
message: 'Task due date 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/
|
||||||
|
$(taskForm.querySelector('[name="task_status"]')).on('change', function () {
|
||||||
|
// Revalidate the field when an option is chosen
|
||||||
|
validator.revalidateField('task_status');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Reset action handler
|
||||||
|
resetButton.addEventListener('click', e => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
Swal.fire({
|
||||||
|
text: "Are you sure you would like to reset?",
|
||||||
|
icon: "warning",
|
||||||
|
showCancelButton: true,
|
||||||
|
buttonsStyling: false,
|
||||||
|
confirmButtonText: "Yes, reset it!",
|
||||||
|
cancelButtonText: "No, return",
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-primary",
|
||||||
|
cancelButton: "btn btn-active-light"
|
||||||
|
}
|
||||||
|
}).then(function (result) {
|
||||||
|
if (result.value) {
|
||||||
|
taskForm.reset(); // Reset form
|
||||||
|
el.hide();
|
||||||
|
} else if (result.dismiss === 'cancel') {
|
||||||
|
Swal.fire({
|
||||||
|
text: "Your form was not reset!.",
|
||||||
|
icon: "error",
|
||||||
|
buttonsStyling: false,
|
||||||
|
confirmButtonText: "Ok, got it!",
|
||||||
|
customClass: {
|
||||||
|
confirmButton: "btn btn-primary",
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Submit action handler
|
||||||
|
submitButton.addEventListener('click', e => {
|
||||||
|
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 button to avoid multiple click
|
||||||
|
submitButton.disabled = true;
|
||||||
|
|
||||||
|
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||||
|
setTimeout(function () {
|
||||||
|
// Remove loading indication
|
||||||
|
submitButton.removeAttribute('data-kt-indicator');
|
||||||
|
|
||||||
|
// Enable button
|
||||||
|
submitButton.disabled = false;
|
||||||
|
|
||||||
|
// 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) {
|
||||||
|
el.hide();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//taskForm.submit(); // Submit form
|
||||||
|
}, 2000);
|
||||||
|
} else {
|
||||||
|
// Show popup warning. For more info check the plugin's official documentation: https://sweetalert2.github.io/
|
||||||
|
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"
|
||||||
|
}
|
||||||
|
}).then(function(){
|
||||||
|
//el.show();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
// Public functions
|
||||||
|
init: function () {
|
||||||
|
initAddTask();
|
||||||
|
initUpdateTaskStatus();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}();
|
||||||
|
|
||||||
|
// On document ready
|
||||||
|
KTUtil.onDOMContentLoaded(function () {
|
||||||
|
KTUsersAddTask.init();
|
||||||
|
});
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue