adding files of assets
This commit is contained in:
Arjun Patel
@@ -0,0 +1,894 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTAppCalendar = function () {
|
||||
// Shared variables
|
||||
// Calendar variables
|
||||
var calendar;
|
||||
var data = {
|
||||
id: '',
|
||||
eventName: '',
|
||||
eventDescription: '',
|
||||
eventLocation: '',
|
||||
startDate: '',
|
||||
endDate: '',
|
||||
allDay: false
|
||||
};
|
||||
var popover;
|
||||
var popoverState = 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, {
|
||||
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) {
|
||||
hidePopovers();
|
||||
formatArgs(arg);
|
||||
handleNewEvent();
|
||||
},
|
||||
|
||||
// Click event --- more info: https://fullcalendar.io/docs/eventClick
|
||||
eventClick: function (arg) {
|
||||
hidePopovers();
|
||||
|
||||
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();
|
||||
},
|
||||
|
||||
// MouseEnter event --- more info: https://fullcalendar.io/docs/eventMouseEnter
|
||||
eventMouseEnter: 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
|
||||
});
|
||||
|
||||
// Show popover preview
|
||||
initPopovers(arg.el);
|
||||
},
|
||||
|
||||
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: "fc-event-danger fc-event-solid-warning",
|
||||
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: "fc-event-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: "fc-event-primary",
|
||||
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'
|
||||
}
|
||||
],
|
||||
|
||||
// Reset popovers when changing calendar views --- more info: https://fullcalendar.io/docs/datesSet
|
||||
datesSet: function(){
|
||||
hidePopovers();
|
||||
}
|
||||
});
|
||||
|
||||
calendar.render();
|
||||
}
|
||||
|
||||
// Initialize popovers --- more info: https://getbootstrap.com/docs/4.0/components/popovers/
|
||||
const initPopovers = (element) => {
|
||||
hidePopovers();
|
||||
|
||||
// Generate popover content
|
||||
const startDate = data.allDay ? moment(data.startDate).format('Do MMM, YYYY') : moment(data.startDate).format('Do MMM, YYYY - h:mm a');
|
||||
const endDate = data.allDay ? moment(data.endDate).format('Do MMM, YYYY') : moment(data.endDate).format('Do MMM, YYYY - h:mm a');
|
||||
const popoverHtml = '<div class="fw-bolder mb-2">' + data.eventName + '</div><div class="fs-7"><span class="fw-bold">Start:</span> ' + startDate + '</div><div class="fs-7 mb-4"><span class="fw-bold">End:</span> ' + endDate + '</div><div id="kt_calendar_event_view_button" type="button" class="btn btn-sm btn-light-primary">View More</div>';
|
||||
|
||||
// Popover options
|
||||
var options = {
|
||||
container: 'body',
|
||||
trigger: 'manual',
|
||||
boundary: 'window',
|
||||
placement: 'auto',
|
||||
dismiss: true,
|
||||
html: true,
|
||||
title: 'Event Summary',
|
||||
content: popoverHtml,
|
||||
}
|
||||
|
||||
// Initialize popover
|
||||
popover = KTApp.initBootstrapPopover(element, options);
|
||||
|
||||
// Show popover
|
||||
popover.show();
|
||||
|
||||
// Update popover state
|
||||
popoverState = true;
|
||||
|
||||
// Open view event modal
|
||||
handleViewButton();
|
||||
}
|
||||
|
||||
// Hide active popovers
|
||||
const hidePopovers = () => {
|
||||
if (popoverState) {
|
||||
popover.dispose();
|
||||
popoverState = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 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 => {
|
||||
hidePopovers();
|
||||
|
||||
// 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,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="assets/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="assets/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('.svg-icon-2x');
|
||||
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": "toast-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": "toast-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('.svg-icon');
|
||||
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": "toast-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": "toast-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,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,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: ["[email protected]", "[email protected]", "[email protected]", "[email protected]", "[email protected]", "[email protected]", "[email protected]", "[email protected]", "[email protected]", "[email protected]", "[email protected]", "[email protected]"],
|
||||
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();
|
||||
});
|
||||
@@ -0,0 +1,132 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTUsersUpdateDetails = function () {
|
||||
// Shared variables
|
||||
const element = document.getElementById('kt_modal_update_details');
|
||||
const form = element.querySelector('#kt_modal_update_user_form');
|
||||
const modal = new bootstrap.Modal(element);
|
||||
|
||||
// Init add schedule modal
|
||||
var initUpdateDetails = () => {
|
||||
|
||||
// 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();
|
||||
|
||||
// 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 () {
|
||||
initUpdateDetails();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTUsersUpdateDetails.init();
|
||||
});
|
||||
@@ -0,0 +1,166 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTUsersUpdateEmail = function () {
|
||||
// Shared variables
|
||||
const element = document.getElementById('kt_modal_update_email');
|
||||
const form = element.querySelector('#kt_modal_update_email_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_email': {
|
||||
validators: {
|
||||
notEmpty: {
|
||||
message: 'Email address 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,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,132 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTUsersUpdateRole = 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 initUpdateRole = () => {
|
||||
|
||||
// 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();
|
||||
|
||||
// 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 () {
|
||||
initUpdateRole();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTUsersUpdateRole.init();
|
||||
});
|
||||
@@ -0,0 +1,234 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTUsersViewMain = function () {
|
||||
|
||||
// Init login session button
|
||||
var initLoginSession = () => {
|
||||
const button = document.getElementById('kt_modal_sign_out_sesions');
|
||||
|
||||
button.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
|
||||
Swal.fire({
|
||||
text: "Are you sure you would like sign out all sessions?",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Yes, sign out!",
|
||||
cancelButtonText: "No, return",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
cancelButton: "btn btn-active-light"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
Swal.fire({
|
||||
text: "You have signed out all sessions!.",
|
||||
icon: "success",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
}
|
||||
});
|
||||
} else if (result.dismiss === 'cancel') {
|
||||
Swal.fire({
|
||||
text: "Your sessions are still preserved!.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// Init sign out single user
|
||||
var initSignOutUser = () => {
|
||||
const signOutButtons = document.querySelectorAll('[data-kt-users-sign-out="single_user"]');
|
||||
|
||||
signOutButtons.forEach(button => {
|
||||
button.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
|
||||
const deviceName = button.closest('tr').querySelectorAll('td')[1].innerText;
|
||||
|
||||
Swal.fire({
|
||||
text: "Are you sure you would like sign out " + deviceName + "?",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Yes, sign out!",
|
||||
cancelButtonText: "No, return",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
cancelButton: "btn btn-active-light"
|
||||
}
|
||||
}).then(function (result) {
|
||||
if (result.value) {
|
||||
Swal.fire({
|
||||
text: "You have signed out " + deviceName + "!.",
|
||||
icon: "success",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
}
|
||||
}).then(function(){
|
||||
button.closest('tr').remove();
|
||||
});
|
||||
} else if (result.dismiss === 'cancel') {
|
||||
Swal.fire({
|
||||
text: deviceName + "'s session is still preserved!.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
|
||||
// Delete two step authentication handler
|
||||
const initDeleteTwoStep = () => {
|
||||
const deleteButton = document.getElementById('kt_users_delete_two_step');
|
||||
|
||||
deleteButton.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
|
||||
Swal.fire({
|
||||
text: "Are you sure you would like remove this two-step authentication?",
|
||||
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) {
|
||||
Swal.fire({
|
||||
text: "You have removed this two-step authentication!.",
|
||||
icon: "success",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
}
|
||||
});
|
||||
} else if (result.dismiss === 'cancel') {
|
||||
Swal.fire({
|
||||
text: "Your two-step authentication is still valid!.",
|
||||
icon: "error",
|
||||
buttonsStyling: false,
|
||||
confirmButtonText: "Ok, got it!",
|
||||
customClass: {
|
||||
confirmButton: "btn btn-primary",
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
// Email preference form handler
|
||||
const initEmailPreferenceForm = () => {
|
||||
// Define variables
|
||||
const form = document.getElementById('kt_users_email_notification_form');
|
||||
const submitButton = form.querySelector('#kt_users_email_notification_submit');
|
||||
const cancelButton = form.querySelector('#kt_users_email_notification_cancel');
|
||||
|
||||
// Submit action handler
|
||||
submitButton.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
|
||||
// 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);
|
||||
});
|
||||
|
||||
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
|
||||
} 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 () {
|
||||
initLoginSession();
|
||||
initSignOutUser();
|
||||
initDeleteTwoStep();
|
||||
initEmailPreferenceForm();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTUsersViewMain.init();
|
||||
});
|
||||
Reference in New Issue
Block a user