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