newedge/think-greaterchiangmai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
kurogeek
2025-11-11 14:55:29 +07:00
commit 7c17aa7843
2490 changed files with 606138 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

831
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/calendar/calendar.js Normal file
View File

@@ -0,0 +1,831 @@
"use strict";
// Class definition
var KTAppCalendar = function () {
// Shared variables
// Calendar variables
var calendar;
var data = {
id: '',
eventName: '',
eventDescription: '',
eventLocation: '',
startDate: '',
endDate: '',
allDay: false
};
// Add event variables
var eventName;
var eventDescription;
var eventLocation;
var startDatepicker;
var startFlatpickr;
var endDatepicker;
var endFlatpickr;
var startTimepicker;
var startTimeFlatpickr;
var endTimepicker
var endTimeFlatpickr;
var modal;
var modalTitle;
var form;
var validator;
var addButton;
var submitButton;
var cancelButton;
var closeButton;
// View event variables
var viewEventName;
var viewAllDay;
var viewEventDescription;
var viewEventLocation;
var viewStartDate;
var viewEndDate;
var viewModal;
var viewEditButton;
var viewDeleteButton;
// Private functions
var initCalendarApp = function () {
// Define variables
var calendarEl = document.getElementById('kt_calendar_app');
var todayDate = moment().startOf('day');
var YM = todayDate.format('YYYY-MM');
var YESTERDAY = todayDate.clone().subtract(1, 'day').format('YYYY-MM-DD');
var TODAY = todayDate.format('YYYY-MM-DD');
var TOMORROW = todayDate.clone().add(1, 'day').format('YYYY-MM-DD');
// Init calendar --- more info: https://fullcalendar.io/docs/initialize-globals
calendar = new FullCalendar.Calendar(calendarEl, {
//locale: 'es', // Set local --- more info: https://fullcalendar.io/docs/locale
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
initialDate: TODAY,
navLinks: true, // can click day/week names to navigate views
selectable: true,
selectMirror: true,
// Select dates action --- more info: https://fullcalendar.io/docs/select-callback
select: function (arg) {
formatArgs(arg);
handleNewEvent();
},
// Click event --- more info: https://fullcalendar.io/docs/eventClick
eventClick: function (arg) {
formatArgs({
id: arg.event.id,
title: arg.event.title,
description: arg.event.extendedProps.description,
location: arg.event.extendedProps.location,
startStr: arg.event.startStr,
endStr: arg.event.endStr,
allDay: arg.event.allDay
});
handleViewEvent();
},
editable: true,
dayMaxEvents: true, // allow "more" link when too many events
events: [
{
id: uid(),
title: 'All Day Event',
start: YM + '-01',
end: YM + '-02',
description: 'Toto lorem ipsum dolor sit incid idunt ut',
className: "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'
}
],
// Handle changing calendar views --- more info: https://fullcalendar.io/docs/datesSet
datesSet: function(){
// do some stuff
}
});
calendar.render();
}
// Init validator
const initValidator = () => {
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
validator = FormValidation.formValidation(
form,
{
fields: {
'calendar_event_name': {
validators: {
notEmpty: {
message: 'Event name is required'
}
}
},
'calendar_event_start_date': {
validators: {
notEmpty: {
message: 'Start date is required'
}
}
},
'calendar_event_end_date': {
validators: {
notEmpty: {
message: 'End date is required'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
}
// Initialize datepickers --- more info: https://flatpickr.js.org/
const initDatepickers = () => {
startFlatpickr = flatpickr(startDatepicker, {
enableTime: false,
dateFormat: "Y-m-d",
});
endFlatpickr = flatpickr(endDatepicker, {
enableTime: false,
dateFormat: "Y-m-d",
});
startTimeFlatpickr = flatpickr(startTimepicker, {
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
});
endTimeFlatpickr = flatpickr(endTimepicker, {
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
});
}
// Handle add button
const handleAddButton = () => {
addButton.addEventListener('click', e => {
// Reset form data
data = {
id: '',
eventName: '',
eventDescription: '',
startDate: new Date(),
endDate: new Date(),
allDay: false
};
handleNewEvent();
});
}
// Handle add new event
const handleNewEvent = () => {
// Update modal title
modalTitle.innerText = "Add a New Event";
modal.show();
// Select datepicker wrapper elements
const datepickerWrappers = form.querySelectorAll('[data-kt-calendar="datepicker"]');
// Handle all day toggle
const allDayToggle = form.querySelector('#kt_calendar_datepicker_allday');
allDayToggle.addEventListener('click', e => {
if (e.target.checked) {
datepickerWrappers.forEach(dw => {
dw.classList.add('d-none');
});
} else {
endFlatpickr.setDate(data.startDate, true, 'Y-m-d');
datepickerWrappers.forEach(dw => {
dw.classList.remove('d-none');
});
}
});
populateForm(data);
// Handle submit form
submitButton.addEventListener('click', function (e) {
// Prevent default button action
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
// Show loading indication
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable submit button whilst loading
submitButton.disabled = true;
// Simulate form submission
setTimeout(function () {
// Simulate form submission
submitButton.removeAttribute('data-kt-indicator');
// Show popup confirmation
Swal.fire({
text: "New event added to calendar!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
}).then(function (result) {
if (result.isConfirmed) {
modal.hide();
// Enable submit button after loading
submitButton.disabled = false;
// Detect if is all day event
let allDayEvent = false;
if (allDayToggle.checked) { allDayEvent = true; }
if (startTimeFlatpickr.selectedDates.length === 0) { allDayEvent = true; }
// Merge date & time
var startDateTime = moment(startFlatpickr.selectedDates[0]).format();
var endDateTime = moment(endFlatpickr.selectedDates[endFlatpickr.selectedDates.length - 1]).format();
if (!allDayEvent) {
const startDate = moment(startFlatpickr.selectedDates[0]).format('YYYY-MM-DD');
const endDate = startDate;
const startTime = moment(startTimeFlatpickr.selectedDates[0]).format('HH:mm:ss');
const endTime = moment(endTimeFlatpickr.selectedDates[0]).format('HH:mm:ss');
startDateTime = startDate + 'T' + startTime;
endDateTime = endDate + 'T' + endTime;
}
// Add new event to calendar
calendar.addEvent({
id: uid(),
title: eventName.value,
description: eventDescription.value,
location: eventLocation.value,
start: startDateTime,
end: endDateTime,
allDay: allDayEvent
});
calendar.render();
// Reset form for demo purposes only
form.reset();
}
});
//form.submit(); // Submit form
}, 2000);
} else {
// Show popup warning
Swal.fire({
text: "Sorry, looks like there are some errors detected, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
});
}
});
}
// Handle edit event
const handleEditEvent = () => {
// Update modal title
modalTitle.innerText = "Edit an Event";
modal.show();
// Select datepicker wrapper elements
const datepickerWrappers = form.querySelectorAll('[data-kt-calendar="datepicker"]');
// Handle all day toggle
const allDayToggle = form.querySelector('#kt_calendar_datepicker_allday');
allDayToggle.addEventListener('click', e => {
if (e.target.checked) {
datepickerWrappers.forEach(dw => {
dw.classList.add('d-none');
});
} else {
endFlatpickr.setDate(data.startDate, true, 'Y-m-d');
datepickerWrappers.forEach(dw => {
dw.classList.remove('d-none');
});
}
});
populateForm(data);
// Handle submit form
submitButton.addEventListener('click', function (e) {
// Prevent default button action
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
// Show loading indication
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable submit button whilst loading
submitButton.disabled = true;
// Simulate form submission
setTimeout(function () {
// Simulate form submission
submitButton.removeAttribute('data-kt-indicator');
// Show popup confirmation
Swal.fire({
text: "New event added to calendar!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
}).then(function (result) {
if (result.isConfirmed) {
modal.hide();
// Enable submit button after loading
submitButton.disabled = false;
// Remove old event
calendar.getEventById(data.id).remove();
// Detect if is all day event
let allDayEvent = false;
if (allDayToggle.checked) { allDayEvent = true; }
if (startTimeFlatpickr.selectedDates.length === 0) { allDayEvent = true; }
// Merge date & time
var startDateTime = moment(startFlatpickr.selectedDates[0]).format();
var endDateTime = moment(endFlatpickr.selectedDates[endFlatpickr.selectedDates.length - 1]).format();
if (!allDayEvent) {
const startDate = moment(startFlatpickr.selectedDates[0]).format('YYYY-MM-DD');
const endDate = startDate;
const startTime = moment(startTimeFlatpickr.selectedDates[0]).format('HH:mm:ss');
const endTime = moment(endTimeFlatpickr.selectedDates[0]).format('HH:mm:ss');
startDateTime = startDate + 'T' + startTime;
endDateTime = endDate + 'T' + endTime;
}
// Add new event to calendar
calendar.addEvent({
id: uid(),
title: eventName.value,
description: eventDescription.value,
location: eventLocation.value,
start: startDateTime,
end: endDateTime,
allDay: allDayEvent
});
calendar.render();
// Reset form for demo purposes only
form.reset();
}
});
//form.submit(); // Submit form
}, 2000);
} else {
// Show popup warning
Swal.fire({
text: "Sorry, looks like there are some errors detected, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
});
}
});
}
// Handle view event
const handleViewEvent = () => {
viewModal.show();
// Detect all day event
var eventNameMod;
var startDateMod;
var endDateMod;
// Generate labels
if (data.allDay) {
eventNameMod = 'All Day';
startDateMod = moment(data.startDate).format('Do MMM, YYYY');
endDateMod = moment(data.endDate).format('Do MMM, YYYY');
} else {
eventNameMod = '';
startDateMod = moment(data.startDate).format('Do MMM, YYYY - h:mm a');
endDateMod = moment(data.endDate).format('Do MMM, YYYY - h:mm a');
}
// Populate view data
viewEventName.innerText = data.eventName;
viewAllDay.innerText = eventNameMod;
viewEventDescription.innerText = data.eventDescription ? data.eventDescription : '--';
viewEventLocation.innerText = data.eventLocation ? data.eventLocation : '--';
viewStartDate.innerText = startDateMod;
viewEndDate.innerText = endDateMod;
}
// Handle delete event
const handleDeleteEvent = () => {
viewDeleteButton.addEventListener('click', e => {
e.preventDefault();
Swal.fire({
text: "Are you sure you would like to delete this event?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
calendar.getEventById(data.id).remove();
viewModal.hide(); // Hide modal
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Your event was not deleted!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
});
}
// Handle edit button
const handleEditButton = () => {
viewEditButton.addEventListener('click', e => {
e.preventDefault();
viewModal.hide();
handleEditEvent();
});
}
// Handle cancel button
const handleCancelButton = () => {
// Edit event modal cancel button
cancelButton.addEventListener('click', function (e) {
e.preventDefault();
Swal.fire({
text: "Are you sure you would like to cancel?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, cancel it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
form.reset(); // Reset form
modal.hide(); // Hide modal
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Your form has not been cancelled!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
});
}
// Handle close button
const handleCloseButton = () => {
// Edit event modal close button
closeButton.addEventListener('click', function (e) {
e.preventDefault();
Swal.fire({
text: "Are you sure you would like to cancel?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, cancel it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
form.reset(); // Reset form
modal.hide(); // Hide modal
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Your form has not been cancelled!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
});
}
// Handle view button
const handleViewButton = () => {
const viewButton = document.querySelector('#kt_calendar_event_view_button');
viewButton.addEventListener('click', e => {
e.preventDefault();
hidePopovers();
handleViewEvent();
});
}
// Helper functions
// Reset form validator on modal close
const resetFormValidator = (element) => {
// Target modal hidden event --- For more info: https://getbootstrap.com/docs/5.0/components/modal/#events
element.addEventListener('hidden.bs.modal', e => {
if (validator) {
// Reset form validator. For more info: https://formvalidation.io/guide/api/reset-form
validator.resetForm(true);
}
});
}
// Populate form
const populateForm = () => {
eventName.value = data.eventName ? data.eventName : '';
eventDescription.value = data.eventDescription ? data.eventDescription : '';
eventLocation.value = data.eventLocation ? data.eventLocation : '';
startFlatpickr.setDate(data.startDate, true, 'Y-m-d');
// Handle null end dates
const endDate = data.endDate ? data.endDate : moment(data.startDate).format();
endFlatpickr.setDate(endDate, true, 'Y-m-d');
const allDayToggle = form.querySelector('#kt_calendar_datepicker_allday');
const datepickerWrappers = form.querySelectorAll('[data-kt-calendar="datepicker"]');
if (data.allDay) {
allDayToggle.checked = true;
datepickerWrappers.forEach(dw => {
dw.classList.add('d-none');
});
} else {
startTimeFlatpickr.setDate(data.startDate, true, 'Y-m-d H:i');
endTimeFlatpickr.setDate(data.endDate, true, 'Y-m-d H:i');
endFlatpickr.setDate(data.startDate, true, 'Y-m-d');
allDayToggle.checked = false;
datepickerWrappers.forEach(dw => {
dw.classList.remove('d-none');
});
}
}
// Format FullCalendar reponses
const formatArgs = (res) => {
data.id = res.id;
data.eventName = res.title;
data.eventDescription = res.description;
data.eventLocation = res.location;
data.startDate = res.startStr;
data.endDate = res.endStr;
data.allDay = res.allDay;
}
// Generate unique IDs for events
const uid = () => {
return Date.now().toString() + Math.floor(Math.random() * 1000).toString();
}
return {
// Public Functions
init: function () {
// Define variables
// Add event modal
const element = document.getElementById('kt_modal_add_event');
form = element.querySelector('#kt_modal_add_event_form');
eventName = form.querySelector('[name="calendar_event_name"]');
eventDescription = form.querySelector('[name="calendar_event_description"]');
eventLocation = form.querySelector('[name="calendar_event_location"]');
startDatepicker = form.querySelector('#kt_calendar_datepicker_start_date');
endDatepicker = form.querySelector('#kt_calendar_datepicker_end_date');
startTimepicker = form.querySelector('#kt_calendar_datepicker_start_time');
endTimepicker = form.querySelector('#kt_calendar_datepicker_end_time');
addButton = document.querySelector('[data-kt-calendar="add"]');
submitButton = form.querySelector('#kt_modal_add_event_submit');
cancelButton = form.querySelector('#kt_modal_add_event_cancel');
closeButton = element.querySelector('#kt_modal_add_event_close');
modalTitle = form.querySelector('[data-kt-calendar="title"]');
modal = new bootstrap.Modal(element);
// View event modal
const viewElement = document.getElementById('kt_modal_view_event');
viewModal = new bootstrap.Modal(viewElement);
viewEventName = viewElement.querySelector('[data-kt-calendar="event_name"]');
viewAllDay = viewElement.querySelector('[data-kt-calendar="all_day"]');
viewEventDescription = viewElement.querySelector('[data-kt-calendar="event_description"]');
viewEventLocation = viewElement.querySelector('[data-kt-calendar="event_location"]');
viewStartDate = viewElement.querySelector('[data-kt-calendar="event_start_date"]');
viewEndDate = viewElement.querySelector('[data-kt-calendar="event_end_date"]');
viewEditButton = viewElement.querySelector('#kt_modal_view_event_edit');
viewDeleteButton = viewElement.querySelector('#kt_modal_view_event_delete');
initCalendarApp();
initValidator();
initDatepickers();
handleEditButton();
handleAddButton();
handleDeleteEvent();
handleCancelButton();
handleCloseButton();
resetFormValidator(element);
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTAppCalendar.init();
});

72
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/chat/chat.js Normal file
View File

@@ -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'));
});

160
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/contacts/edit-contact.js Normal file
View File

@@ -0,0 +1,160 @@
"use strict";
// Class definition
var KTAppContactEdit = function () {
// Shared variables
// Private functions
const initForm = () => {
// Select form
const form = document.getElementById('kt_ecommerce_settings_general_form');
if (!form) {
return;
}
// Dynamically create validation non-empty rule
const requiredFields = form.querySelectorAll('.required');
var detectedField;
var validationFields = {
fields: {},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
// Detect required fields
requiredFields.forEach(el => {
const input = el.closest('.fv-row').querySelector('input');
if (input) {
detectedField = input;
}
const select = el.closest('.fv-row').querySelector('select');
if (select) {
detectedField = select;
}
// Add validation rule
const name = detectedField.getAttribute('name');
validationFields.fields[name] = {
validators: {
notEmpty: {
message: el.innerText + ' is required'
}
}
}
});
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
form,
validationFields
);
// Submit button handler
const submitButton = form.querySelector('[data-kt-contacts-type="submit"]');
submitButton.addEventListener('click', function (e) {
// Prevent default button action
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
// Show loading indication
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable button to avoid multiple click
submitButton.disabled = true;
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
setTimeout(function () {
// Remove loading indication
submitButton.removeAttribute('data-kt-indicator');
// Enable button
submitButton.disabled = false;
// Show popup confirmation
Swal.fire({
text: "Form has been successfully submitted!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
//form.submit(); // Submit form
}, 2000);
} else {
// Show popup error
Swal.fire({
text: "Oops! There are some error(s) detected.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
});
}
});
}
// Init Select2 with flags
const initSelect2Flags = () => {
// Format options
var optionFormat = function(item) {
if ( !item.id ) {
return item.text;
}
var span = document.createElement('span');
var template = '';
template += '<img src="' + item.element.getAttribute('data-kt-select2-country') + '" class="rounded-circle me-2" style="height:19px;" alt="image"/>';
template += item.text;
span.innerHTML = template;
return $(span);
}
// Init Select2 --- more info: https://select2.org/
$('[data-kt-ecommerce-settings-type="select2_flags"]').select2({
placeholder: "Select a country",
minimumResultsForSearch: Infinity,
templateSelection: optionFormat,
templateResult: optionFormat
});
}
// Public methods
return {
init: function () {
initForm();
initSelect2Flags();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTAppContactEdit.init();
});

74
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/contacts/view-contact.js Normal file
View File

@@ -0,0 +1,74 @@
"use strict";
// Class definition
var KTAppContactView = function () {
// Private functions
const handleDeleteButton = () => {
// Select form
const deleteButton = document.getElementById('kt_contact_delete');
if (!deleteButton) {
return;
}
deleteButton.addEventListener('click', e => {
// Prevent default button action
e.preventDefault();
// Show popup confirmation
Swal.fire({
text: "Delete contact confirmation",
icon: "warning",
buttonsStyling: false,
showCancelButton: true,
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-danger",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
Swal.fire({
text: "Contact has been deleted!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
}).then(function (result) {
if (result.value) {
// Redirect to customers list page
window.location = deleteButton.getAttribute("data-kt-redirect");
}
});
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Contact has not been deleted!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
});
}
// Public methods
return {
init: function () {
handleDeleteButton();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTAppContactView.init();
});

238
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/customers/add.js Normal file
View File

@@ -0,0 +1,238 @@
"use strict";
// Class definition
var KTModalCustomersAdd = function () {
var submitButton;
var cancelButton;
var closeButton;
var validator;
var form;
var modal;
// Init form inputs
var handleForm = function () {
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
validator = FormValidation.formValidation(
form,
{
fields: {
'name': {
validators: {
notEmpty: {
message: 'Customer name is required'
}
}
},
'email': {
validators: {
notEmpty: {
message: 'Customer email is required'
}
}
},
'first-name': {
validators: {
notEmpty: {
message: 'First name is required'
}
}
},
'last-name': {
validators: {
notEmpty: {
message: 'Last name is required'
}
}
},
'country': {
validators: {
notEmpty: {
message: 'Country is required'
}
}
},
'address1': {
validators: {
notEmpty: {
message: 'Address 1 is required'
}
}
},
'city': {
validators: {
notEmpty: {
message: 'City is required'
}
}
},
'state': {
validators: {
notEmpty: {
message: 'State is required'
}
}
},
'postcode': {
validators: {
notEmpty: {
message: 'Postcode is required'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
// Revalidate country field. For more info, plase visit the official plugin site: https://select2.org/
$(form.querySelector('[name="country"]')).on('change', function() {
// Revalidate the field when an option is chosen
validator.revalidateField('country');
});
// Action buttons
submitButton.addEventListener('click', function (e) {
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable submit button whilst loading
submitButton.disabled = true;
setTimeout(function() {
submitButton.removeAttribute('data-kt-indicator');
Swal.fire({
text: "Form has been successfully submitted!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
}).then(function (result) {
if (result.isConfirmed) {
// Hide modal
modal.hide();
// Enable submit button after loading
submitButton.disabled = false;
// Redirect to customers list page
window.location = form.getAttribute("data-kt-redirect");
}
});
}, 2000);
} else {
Swal.fire({
text: "Sorry, looks like there are some errors detected, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
});
}
});
cancelButton.addEventListener('click', function (e) {
e.preventDefault();
Swal.fire({
text: "Are you sure you would like to cancel?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, cancel it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
form.reset(); // Reset form
modal.hide(); // Hide modal
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Your form has not been cancelled!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
});
closeButton.addEventListener('click', function(e){
e.preventDefault();
Swal.fire({
text: "Are you sure you would like to cancel?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, cancel it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
form.reset(); // Reset form
modal.hide(); // Hide modal
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Your form has not been cancelled!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
})
}
return {
// Public functions
init: function () {
// Elements
modal = new bootstrap.Modal(document.querySelector('#kt_modal_add_customer'));
form = document.querySelector('#kt_modal_add_customer_form');
submitButton = form.querySelector('#kt_modal_add_customer_submit');
cancelButton = form.querySelector('#kt_modal_add_customer_cancel');
closeButton = form.querySelector('#kt_modal_add_customer_close');
handleForm();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTModalCustomersAdd.init();
});

189
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/customers/list/export.js Normal file
View File

@@ -0,0 +1,189 @@
"use strict";
// Class definition
var KTCustomersExport = function () {
var element;
var submitButton;
var cancelButton;
var closeButton;
var validator;
var form;
var modal;
// Init form inputs
var handleForm = function () {
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
validator = FormValidation.formValidation(
form,
{
fields: {
'date': {
validators: {
notEmpty: {
message: 'Date range is required'
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
// Action buttons
submitButton.addEventListener('click', function (e) {
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable submit button whilst loading
submitButton.disabled = true;
setTimeout(function() {
submitButton.removeAttribute('data-kt-indicator');
Swal.fire({
text: "Customer list has been successfully exported!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
}).then(function (result) {
if (result.isConfirmed) {
modal.hide();
// Enable submit button after loading
submitButton.disabled = false;
}
});
//form.submit(); // Submit form
}, 2000);
} else {
Swal.fire({
text: "Sorry, looks like there are some errors detected, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
});
}
});
cancelButton.addEventListener('click', function (e) {
e.preventDefault();
Swal.fire({
text: "Are you sure you would like to cancel?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, cancel it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
form.reset(); // Reset form
modal.hide(); // Hide modal
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Your form has not been cancelled!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
});
closeButton.addEventListener('click', function(e){
e.preventDefault();
Swal.fire({
text: "Are you sure you would like to cancel?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, cancel it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
form.reset(); // Reset form
modal.hide(); // Hide modal
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Your form has not been cancelled!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
});
}
var initForm = function () {
const datepicker = form.querySelector("[name=date]");
// Handle datepicker range -- For more info on flatpickr plugin, please visit: https://flatpickr.js.org/
$(datepicker).flatpickr({
altInput: true,
altFormat: "F j, Y",
dateFormat: "Y-m-d",
mode: "range"
});
}
return {
// Public functions
init: function () {
// Elements
element = document.querySelector('#kt_customers_export_modal');
modal = new bootstrap.Modal(element);
form = document.querySelector('#kt_customers_export_form');
submitButton = form.querySelector('#kt_customers_export_submit');
cancelButton = form.querySelector('#kt_customers_export_cancel');
closeButton = element.querySelector('#kt_customers_export_close');
handleForm();
initForm();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTCustomersExport.init();
});

282
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/customers/list/list.js Normal file
View File

@@ -0,0 +1,282 @@
"use strict";
// Class definition
var KTCustomersList = function () {
// Define shared variables
var datatable;
var filterMonth;
var filterPayment;
var table
// Private functions
var initCustomerList = function () {
// Set date data order
const tableRows = table.querySelectorAll('tbody tr');
tableRows.forEach(row => {
const dateRow = row.querySelectorAll('td');
const realDate = moment(dateRow[5].innerHTML, "DD MMM YYYY, LT").format(); // select date from 5th column in table
dateRow[5].setAttribute('data-order', realDate);
});
// Init datatable --- more info on datatables: https://datatables.net/manual/
datatable = $(table).DataTable({
"info": false,
'order': [],
'columnDefs': [
{ orderable: false, targets: 0 }, // Disable ordering on column 0 (checkbox)
{ orderable: false, targets: 6 }, // Disable ordering on column 6 (actions)
]
});
// Re-init functions on every table re-draw -- more info: https://datatables.net/reference/event/draw
datatable.on('draw', function () {
initToggleToolbar();
handleDeleteRows();
toggleToolbars();
});
}
// Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
var handleSearchDatatable = () => {
const filterSearch = document.querySelector('[data-kt-customer-table-filter="search"]');
filterSearch.addEventListener('keyup', function (e) {
datatable.search(e.target.value).draw();
});
}
// Filter Datatable
var handleFilterDatatable = () => {
// Select filter options
filterMonth = $('[data-kt-customer-table-filter="month"]');
filterPayment = document.querySelectorAll('[data-kt-customer-table-filter="payment_type"] [name="payment_type"]');
const filterButton = document.querySelector('[data-kt-customer-table-filter="filter"]');
// Filter datatable on submit
filterButton.addEventListener('click', function () {
// Get filter values
const monthValue = filterMonth.val();
let paymentValue = '';
// Get payment value
filterPayment.forEach(r => {
if (r.checked) {
paymentValue = r.value;
}
// Reset payment value if "All" is selected
if (paymentValue === 'all') {
paymentValue = '';
}
});
// Build filter string from filter options
const filterString = monthValue + ' ' + paymentValue;
// Filter datatable --- official docs reference: https://datatables.net/reference/api/search()
datatable.search(filterString).draw();
});
}
// Delete customer
var handleDeleteRows = () => {
// Select all delete buttons
const deleteButtons = table.querySelectorAll('[data-kt-customer-table-filter="delete_row"]');
deleteButtons.forEach(d => {
// Delete button on click
d.addEventListener('click', function (e) {
e.preventDefault();
// Select parent row
const parent = e.target.closest('tr');
// Get customer name
const customerName = parent.querySelectorAll('td')[1].innerText;
// SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
Swal.fire({
text: "Are you sure you want to delete " + customerName + "?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, delete!",
cancelButtonText: "No, cancel",
customClass: {
confirmButton: "btn fw-bold btn-danger",
cancelButton: "btn fw-bold btn-active-light-primary"
}
}).then(function (result) {
if (result.value) {
Swal.fire({
text: "You have deleted " + customerName + "!.",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-primary",
}
}).then(function () {
// Remove current row
datatable.row($(parent)).remove().draw();
});
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: customerName + " was not deleted.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-primary",
}
});
}
});
})
});
}
// Reset Filter
var handleResetForm = () => {
// Select reset button
const resetButton = document.querySelector('[data-kt-customer-table-filter="reset"]');
// Reset datatable
resetButton.addEventListener('click', function () {
// Reset month
filterMonth.val(null).trigger('change');
// Reset payment type
filterPayment[0].checked = true;
// Reset datatable --- official docs reference: https://datatables.net/reference/api/search()
datatable.search('').draw();
});
}
// Init toggle toolbar
var initToggleToolbar = () => {
// Toggle selected action toolbar
// Select all checkboxes
const checkboxes = table.querySelectorAll('[type="checkbox"]');
// Select elements
const deleteSelected = document.querySelector('[data-kt-customer-table-select="delete_selected"]');
// Toggle delete selected toolbar
checkboxes.forEach(c => {
// Checkbox on click event
c.addEventListener('click', function () {
setTimeout(function () {
toggleToolbars();
}, 50);
});
});
// Deleted selected rows
deleteSelected.addEventListener('click', function () {
// SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
Swal.fire({
text: "Are you sure you want to delete selected customers?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, delete!",
cancelButtonText: "No, cancel",
customClass: {
confirmButton: "btn fw-bold btn-danger",
cancelButton: "btn fw-bold btn-active-light-primary"
}
}).then(function (result) {
if (result.value) {
Swal.fire({
text: "You have deleted all selected customers!.",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-primary",
}
}).then(function () {
// Remove all selected customers
checkboxes.forEach(c => {
if (c.checked) {
datatable.row($(c.closest('tbody tr'))).remove().draw();
}
});
// Remove header checked box
const headerCheckbox = table.querySelectorAll('[type="checkbox"]')[0];
headerCheckbox.checked = false;
});
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Selected customers was not deleted.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-primary",
}
});
}
});
});
}
// Toggle toolbars
const toggleToolbars = () => {
// Define variables
const toolbarBase = document.querySelector('[data-kt-customer-table-toolbar="base"]');
const toolbarSelected = document.querySelector('[data-kt-customer-table-toolbar="selected"]');
const selectedCount = document.querySelector('[data-kt-customer-table-select="selected_count"]');
// Select refreshed checkbox DOM elements
const allCheckboxes = table.querySelectorAll('tbody [type="checkbox"]');
// Detect checkboxes state & count
let checkedState = false;
let count = 0;
// Count checked boxes
allCheckboxes.forEach(c => {
if (c.checked) {
checkedState = true;
count++;
}
});
// Toggle toolbars
if (checkedState) {
selectedCount.innerHTML = count;
toolbarBase.classList.add('d-none');
toolbarSelected.classList.remove('d-none');
} else {
toolbarBase.classList.remove('d-none');
toolbarSelected.classList.add('d-none');
}
}
// Public methods
return {
init: function () {
table = document.querySelector('#kt_customers_table');
if (!table) {
return;
}
initCustomerList();
initToggleToolbar();
handleSearchDatatable();
handleFilterDatatable();
handleDeleteRows();
handleResetForm();
}
}
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTCustomersList.init();
});

131
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/customers/update.js Normal file
View File

@@ -0,0 +1,131 @@
"use strict";
// Class definition
var KTModalUpdateCustomer = function () {
var element;
var submitButton;
var cancelButton;
var closeButton;
var form;
var modal;
// Init form inputs
var initForm = function () {
// Action buttons
submitButton.addEventListener('click', function (e) {
// Prevent default button action
e.preventDefault();
// Show loading indication
submitButton.setAttribute('data-kt-indicator', 'on');
// Simulate form submission
setTimeout(function () {
// Simulate form submission
submitButton.removeAttribute('data-kt-indicator');
// Show popup confirmation
Swal.fire({
text: "Form has been successfully submitted!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
}).then(function (result) {
if (result.isConfirmed) {
modal.hide();
}
});
//form.submit(); // Submit form
}, 2000);
});
cancelButton.addEventListener('click', function (e) {
e.preventDefault();
Swal.fire({
text: "Are you sure you would like to cancel?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, cancel it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
form.reset(); // Reset form
modal.hide(); // Hide modal
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Your form has not been cancelled!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
});
closeButton.addEventListener('click', function (e) {
e.preventDefault();
Swal.fire({
text: "Are you sure you would like to cancel?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, cancel it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
form.reset(); // Reset form
modal.hide(); // Hide modal
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Your form has not been cancelled!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
});
}
return {
// Public functions
init: function () {
// Elements
element = document.querySelector('#kt_modal_update_customer');
modal = new bootstrap.Modal(element);
form = element.querySelector('#kt_modal_update_customer_form');
submitButton = form.querySelector('#kt_modal_update_customer_submit');
cancelButton = form.querySelector('#kt_modal_update_customer_cancel');
closeButton = element.querySelector('#kt_modal_update_customer_close');
initForm();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTModalUpdateCustomer.init();
});

207
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/customers/view/add-payment.js Normal file
View File

@@ -0,0 +1,207 @@
"use strict";
// Class definition
var KTModalAddPayment = function () {
var element;
var submitButton;
var cancelButton;
var closeButton;
var validator;
var newBalance;
var form;
var modal;
// Init form inputs
var initForm = function () {
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
validator = FormValidation.formValidation(
form,
{
fields: {
'invoice': {
validators: {
notEmpty: {
message: 'Invoice number is required'
}
}
},
'status': {
validators: {
notEmpty: {
message: 'Invoice status is required'
}
}
},
'amount': {
validators: {
notEmpty: {
message: 'Invoice amount is required'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
// Revalidate country field. For more info, plase visit the official plugin site: https://select2.org/
$(form.querySelector('[name="status"]')).on('change', function () {
// Revalidate the field when an option is chosen
validator.revalidateField('status');
});
// Action buttons
submitButton.addEventListener('click', function (e) {
// Prevent default button action
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
// Show loading indication
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable submit button whilst loading
submitButton.disabled = true;
// Simulate form submission
setTimeout(function () {
// Simulate form submission
submitButton.removeAttribute('data-kt-indicator');
// Show popup confirmation
Swal.fire({
text: "Form has been successfully submitted!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
}).then(function (result) {
if (result.isConfirmed) {
modal.hide();
// Enable submit button after loading
submitButton.disabled = false;
// Reset form for demo purposes only
form.reset();
}
});
//form.submit(); // Submit form
}, 2000);
} else {
// Show popup warning
Swal.fire({
text: "Sorry, looks like there are some errors detected, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
});
}
});
cancelButton.addEventListener('click', function (e) {
e.preventDefault();
Swal.fire({
text: "Are you sure you would like to cancel?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, cancel it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
form.reset(); // Reset form
modal.hide(); // Hide modal
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Your form has not been cancelled!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
});
closeButton.addEventListener('click', function (e) {
e.preventDefault();
Swal.fire({
text: "Are you sure you would like to cancel?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, cancel it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
form.reset(); // Reset form
modal.hide(); // Hide modal
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Your form has not been cancelled!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
});
}
return {
// Public functions
init: function () {
// Elements
element = document.querySelector('#kt_modal_add_payment');
modal = new bootstrap.Modal(element);
form = element.querySelector('#kt_modal_add_payment_form');
submitButton = form.querySelector('#kt_modal_add_payment_submit');
cancelButton = form.querySelector('#kt_modal_add_payment_cancel');
closeButton = element.querySelector('#kt_modal_add_payment_close');
initForm();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTModalAddPayment.init();
});

241
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/customers/view/adjust-balance.js Normal file
View File

@@ -0,0 +1,241 @@
"use strict";
// Class definition
var KTModalAdjustBalance = function () {
var element;
var submitButton;
var cancelButton;
var closeButton;
var validator;
var maskInput;
var newBalance;
var form;
var modal;
// Init form inputs
var initForm = function () {
// Init inputmask plugin --- For more info please refer to the official documentation here: https://github.com/RobinHerbots/Inputmask
Inputmask("US$ 9,999,999.99", {
"numericInput": true
}).mask("#kt_modal_inputmask");
}
var handleBalanceCalculator = function () {
// Select elements
const currentBalance = element.querySelector('[kt-modal-adjust-balance="current_balance"]');
newBalance = element.querySelector('[kt-modal-adjust-balance="new_balance"]');
maskInput = document.getElementById('kt_modal_inputmask');
// Get current balance value
const isNegative = currentBalance.innerHTML.includes('-');
let currentValue = parseFloat(currentBalance.innerHTML.replace(/[^0-9.]/g, '').replace(',', ''));
currentValue = isNegative ? currentValue * -1 : currentValue;
// On change event for inputmask
let maskValue;
maskInput.addEventListener('focusout', function (e) {
// Get inputmask value on change
maskValue = parseFloat(e.target.value.replace(/[^0-9.]/g, '').replace(',', ''));
// Set mask value as 0 when NaN detected
if(isNaN(maskValue)){
maskValue = 0;
}
// Calculate & set new balance value
newBalance.innerHTML = 'US$ ' + (maskValue + currentValue).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
});
}
// Handle form validation and submittion
var handleForm = function () {
// Stepper custom navigation
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
validator = FormValidation.formValidation(
form,
{
fields: {
'adjustment': {
validators: {
notEmpty: {
message: 'Adjustment type is required'
}
}
},
'amount': {
validators: {
notEmpty: {
message: 'Amount is required'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
// Revalidate country field. For more info, plase visit the official plugin site: https://select2.org/
$(form.querySelector('[name="adjustment"]')).on('change', function () {
// Revalidate the field when an option is chosen
validator.revalidateField('adjustment');
});
// Action buttons
submitButton.addEventListener('click', function (e) {
// Prevent default button action
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
// Show loading indication
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable submit button whilst loading
submitButton.disabled = true;
// Simulate form submission
setTimeout(function () {
// Simulate form submission
submitButton.removeAttribute('data-kt-indicator');
// Show popup confirmation
Swal.fire({
text: "Form has been successfully submitted!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
}).then(function (result) {
if (result.isConfirmed) {
modal.hide();
// Enable submit button after loading
submitButton.disabled = false;
// Reset form for demo purposes only
form.reset();
newBalance.innerHTML = "--";
}
});
//form.submit(); // Submit form
}, 2000);
} else {
// Show popup warning
Swal.fire({
text: "Sorry, looks like there are some errors detected, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
});
}
});
cancelButton.addEventListener('click', function (e) {
e.preventDefault();
Swal.fire({
text: "Are you sure you would like to cancel?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, cancel it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
form.reset(); // Reset form
modal.hide(); // Hide modal
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Your form has not been cancelled!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
});
closeButton.addEventListener('click', function (e) {
e.preventDefault();
Swal.fire({
text: "Are you sure you would like to cancel?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, cancel it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
form.reset(); // Reset form
modal.hide(); // Hide modal
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Your form has not been cancelled!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
});
}
return {
// Public functions
init: function () {
// Elements
element = document.querySelector('#kt_modal_adjust_balance');
modal = new bootstrap.Modal(element);
form = element.querySelector('#kt_modal_adjust_balance_form');
submitButton = form.querySelector('#kt_modal_adjust_balance_submit');
cancelButton = form.querySelector('#kt_modal_adjust_balance_cancel');
closeButton = element.querySelector('#kt_modal_adjust_balance_close');
initForm();
handleBalanceCalculator();
handleForm();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTModalAdjustBalance.init();
});

129
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/customers/view/invoices.js Normal file
View File

@@ -0,0 +1,129 @@
"use strict";
// Class definition
var KTCustomerViewInvoices = function () {
// Private functions
// Init current year datatable
var initInvoiceYearCurrent = function () {
// Define table element
const id = '#kt_customer_details_invoices_table_1';
var table = document.querySelector(id);
// Set date data order
const tableRows = table.querySelectorAll('tbody tr');
tableRows.forEach(row => {
const dateRow = row.querySelectorAll('td');
const realDate = moment(dateRow[0].innerHTML, "DD MMM YYYY, LT").format(); // select date from 1st column in table
dateRow[0].setAttribute('data-order', realDate);
});
// Init datatable --- more info on datatables: https://datatables.net/manual/
var datatable = $(id).DataTable({
"info": false,
'order': [],
"pageLength": 5,
"lengthChange": false,
'columnDefs': [
{ orderable: false, targets: 4 }, // Disable ordering on column 0 (download)
]
});
}
// Init year 2020 datatable
var initInvoiceYear2020 = function () {
// Define table element
const id = '#kt_customer_details_invoices_table_2';
var table = document.querySelector(id);
// Set date data order
const tableRows = table.querySelectorAll('tbody tr');
tableRows.forEach(row => {
const dateRow = row.querySelectorAll('td');
const realDate = moment(dateRow[0].innerHTML, "DD MMM YYYY, LT").format(); // select date from 1st column in table
dateRow[0].setAttribute('data-order', realDate);
});
// Init datatable --- more info on datatables: https://datatables.net/manual/
var datatable = $(id).DataTable({
"info": false,
'order': [],
"pageLength": 5,
"lengthChange": false,
'columnDefs': [
{ orderable: false, targets: 4 }, // Disable ordering on column 0 (download)
]
});
}
// Init year 2019 datatable
var initInvoiceYear2019 = function () {
// Define table element
const id = '#kt_customer_details_invoices_table_3';
var table = document.querySelector(id);
// Set date data order
const tableRows = table.querySelectorAll('tbody tr');
tableRows.forEach(row => {
const dateRow = row.querySelectorAll('td');
const realDate = moment(dateRow[0].innerHTML, "DD MMM YYYY, LT").format(); // select date from 1st column in table
dateRow[0].setAttribute('data-order', realDate);
});
// Init datatable --- more info on datatables: https://datatables.net/manual/
var datatable = $(id).DataTable({
"info": false,
'order': [],
"pageLength": 5,
"lengthChange": false,
'columnDefs': [
{ orderable: false, targets: 4 }, // Disable ordering on column 0 (download)
]
});
}
// Init year 2018 datatable
var initInvoiceYear2018 = function () {
// Define table element
const id = '#kt_customer_details_invoices_table_4';
var table = document.querySelector(id);
// Set date data order
const tableRows = table.querySelectorAll('tbody tr');
tableRows.forEach(row => {
const dateRow = row.querySelectorAll('td');
const realDate = moment(dateRow[0].innerHTML, "DD MMM YYYY, LT").format(); // select date from 1st column in table
dateRow[0].setAttribute('data-order', realDate);
});
// Init datatable --- more info on datatables: https://datatables.net/manual/
var datatable = $(id).DataTable({
"info": false,
'order': [],
"pageLength": 5,
"lengthChange": false,
'columnDefs': [
{ orderable: false, targets: 4 }, // Disable ordering on column 0 (download)
]
});
}
// Public methods
return {
init: function () {
initInvoiceYearCurrent();
initInvoiceYear2020();
initInvoiceYear2019();
initInvoiceYear2018();
}
}
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTCustomerViewInvoices.init();
});

110
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/customers/view/payment-method.js Normal file
View File

@@ -0,0 +1,110 @@
"use strict";
// Class definition
var KTCustomerViewPaymentMethod = function () {
// Private functions
var initPaymentMethod = function () {
// Define variables
const table = document.getElementById('kt_customer_view_payment_method');
const tableRows = table.querySelectorAll('[ data-kt-customer-payment-method="row"]');
tableRows.forEach(row => {
// Select delete button
const deleteButton = row.querySelector('[data-kt-customer-payment-method="delete"]');
// Delete button action
deleteButton.addEventListener('click', e => {
e.preventDefault();
// Popup confirmation
Swal.fire({
text: "Are you sure you would like to delete this card?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
row.remove();
modal.hide(); // Hide modal
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Your card was not deleted!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
});
});
}
// Handle set as primary button
const handlePrimaryButton = () => {
// Define variable
const button = document.querySelector('[data-kt-payment-mehtod-action="set_as_primary"]');
button.addEventListener('click', e => {
e.preventDefault();
// Popup confirmation
Swal.fire({
text: "Are you sure you would like to set this card as primary?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, set it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
Swal.fire({
text: "Your card was set to primary!.",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Your card was not set to primary!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
});
};
// Public methods
return {
init: function () {
initPaymentMethod();
handlePrimaryButton();
}
}
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTCustomerViewPaymentMethod.init();
});

110
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/customers/view/payment-table.js Normal file
View File

@@ -0,0 +1,110 @@
"use strict";
// Class definition
var KTCustomerViewPaymentTable = function () {
// Define shared variables
var datatable;
var table = document.querySelector('#kt_table_customers_payment');
// Private functions
var initCustomerView = function () {
// Set date data order
const tableRows = table.querySelectorAll('tbody tr');
tableRows.forEach(row => {
const dateRow = row.querySelectorAll('td');
const realDate = moment(dateRow[3].innerHTML, "DD MMM YYYY, LT").format(); // select date from 4th column in table
dateRow[3].setAttribute('data-order', realDate);
});
// Init datatable --- more info on datatables: https://datatables.net/manual/
datatable = $(table).DataTable({
"info": false,
'order': [],
"pageLength": 5,
"lengthChange": false,
'columnDefs': [
{ orderable: false, targets: 4 }, // Disable ordering on column 5 (actions)
]
});
}
// Delete customer
var deleteRows = () => {
// Select all delete buttons
const deleteButtons = table.querySelectorAll('[data-kt-customer-table-filter="delete_row"]');
deleteButtons.forEach(d => {
// Delete button on click
d.addEventListener('click', function (e) {
e.preventDefault();
// Select parent row
const parent = e.target.closest('tr');
// Get customer name
const invoiceNumber = parent.querySelectorAll('td')[0].innerText;
// SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
Swal.fire({
text: "Are you sure you want to delete " + invoiceNumber + "?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, delete!",
cancelButtonText: "No, cancel",
customClass: {
confirmButton: "btn fw-bold btn-danger",
cancelButton: "btn fw-bold btn-active-light-primary"
}
}).then(function (result) {
if (result.value) {
Swal.fire({
text: "You have deleted " + invoiceNumber + "!.",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-primary",
}
}).then(function () {
// Remove current row
datatable.row($(parent)).remove().draw();
}).then(function () {
// Detect checked checkboxes
toggleToolbars();
});
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: customerName + " was not deleted.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-primary",
}
});
}
});
})
});
}
// Public methods
return {
init: function () {
if (!table) {
return;
}
initCustomerView();
deleteRows();
}
}
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTCustomerViewPaymentTable.init();
});

129
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/customers/view/statement.js Normal file
View File

@@ -0,0 +1,129 @@
"use strict";
// Class definition
var KTCustomerViewStatements = function () {
// Private functions
// Init current year datatable
var initStatementYearCurrent = function () {
// Define table element
const id = '#kt_customer_view_statement_table_1';
var table = document.querySelector(id);
// Set date data order
const tableRows = table.querySelectorAll('tbody tr');
tableRows.forEach(row => {
const dateRow = row.querySelectorAll('td');
const realDate = moment(dateRow[0].innerHTML, "DD MMM YYYY, LT").format(); // select date from 1st column in table
dateRow[0].setAttribute('data-order', realDate);
});
// Init datatable --- more info on datatables: https://datatables.net/manual/
var datatable = $(id).DataTable({
"info": false,
'order': [],
"pageLength": 10,
"lengthChange": false,
'columnDefs': [
{ orderable: false, targets: 4 }, // Disable ordering on column 0 (download)
]
});
}
// Init year 2020 datatable
var initStatementYear2020 = function () {
// Define table element
const id = '#kt_customer_view_statement_table_2';
var table = document.querySelector(id);
// Set date data order
const tableRows = table.querySelectorAll('tbody tr');
tableRows.forEach(row => {
const dateRow = row.querySelectorAll('td');
const realDate = moment(dateRow[0].innerHTML, "DD MMM YYYY, LT").format(); // select date from 1st column in table
dateRow[0].setAttribute('data-order', realDate);
});
// Init datatable --- more info on datatables: https://datatables.net/manual/
var datatable = $(id).DataTable({
"info": false,
'order': [],
"pageLength": 10,
"lengthChange": false,
'columnDefs': [
{ orderable: false, targets: 4 }, // Disable ordering on column 0 (download)
]
});
}
// Init year 2019 datatable
var initStatementYear2019 = function () {
// Define table element
const id = '#kt_customer_view_statement_table_3';
var table = document.querySelector(id);
// Set date data order
const tableRows = table.querySelectorAll('tbody tr');
tableRows.forEach(row => {
const dateRow = row.querySelectorAll('td');
const realDate = moment(dateRow[0].innerHTML, "DD MMM YYYY, LT").format(); // select date from 1st column in table
dateRow[0].setAttribute('data-order', realDate);
});
// Init datatable --- more info on datatables: https://datatables.net/manual/
var datatable = $(id).DataTable({
"info": false,
'order': [],
"pageLength": 10,
"lengthChange": false,
'columnDefs': [
{ orderable: false, targets: 4 }, // Disable ordering on column 0 (download)
]
});
}
// Init year 2018 datatable
var initStatementYear2018 = function () {
// Define table element
const id = '#kt_customer_view_statement_table_4';
var table = document.querySelector(id);
// Set date data order
const tableRows = table.querySelectorAll('tbody tr');
tableRows.forEach(row => {
const dateRow = row.querySelectorAll('td');
const realDate = moment(dateRow[0].innerHTML, "DD MMM YYYY, LT").format(); // select date from 1st column in table
dateRow[0].setAttribute('data-order', realDate);
});
// Init datatable --- more info on datatables: https://datatables.net/manual/
var datatable = $(id).DataTable({
"info": false,
'order': [],
"pageLength": 10,
"lengthChange": false,
'columnDefs': [
{ orderable: false, targets: 4 }, // Disable ordering on column 0 (download)
]
});
}
// Public methods
return {
init: function () {
initStatementYearCurrent();
initStatementYear2020();
initStatementYear2019();
initStatementYear2018();
}
}
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTCustomerViewStatements.init();
});

114
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/catalog/categories.js Normal file
View File

@@ -0,0 +1,114 @@
"use strict";
// Class definition
var KTAppEcommerceCategories = function () {
// Shared variables
var table;
var datatable;
// Private functions
var initDatatable = function () {
// Init datatable --- more info on datatables: https://datatables.net/manual/
datatable = $(table).DataTable({
"info": false,
'order': [],
'pageLength': 10,
'columnDefs': [
{ orderable: false, targets: 0 }, // Disable ordering on column 0 (checkbox)
{ orderable: false, targets: 3 }, // Disable ordering on column 3 (actions)
]
});
// Re-init functions on datatable re-draws
datatable.on('draw', function () {
handleDeleteRows();
});
}
// Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
var handleSearchDatatable = () => {
const filterSearch = document.querySelector('[data-kt-ecommerce-category-filter="search"]');
filterSearch.addEventListener('keyup', function (e) {
datatable.search(e.target.value).draw();
});
}
// Delete cateogry
var handleDeleteRows = () => {
// Select all delete buttons
const deleteButtons = table.querySelectorAll('[data-kt-ecommerce-category-filter="delete_row"]');
deleteButtons.forEach(d => {
// Delete button on click
d.addEventListener('click', function (e) {
e.preventDefault();
// Select parent row
const parent = e.target.closest('tr');
// Get category name
const categoryName = parent.querySelector('[data-kt-ecommerce-category-filter="category_name"]').innerText;
// SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
Swal.fire({
text: "Are you sure you want to delete " + categoryName + "?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, delete!",
cancelButtonText: "No, cancel",
customClass: {
confirmButton: "btn fw-bold btn-danger",
cancelButton: "btn fw-bold btn-active-light-primary"
}
}).then(function (result) {
if (result.value) {
Swal.fire({
text: "You have deleted " + categoryName + "!.",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-primary",
}
}).then(function () {
// Remove current row
datatable.row($(parent)).remove().draw();
});
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: categoryName + " was not deleted.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-primary",
}
});
}
});
})
});
}
// Public methods
return {
init: function () {
table = document.querySelector('#kt_ecommerce_category_table');
if (!table) {
return;
}
initDatatable();
handleSearchDatatable();
handleDeleteRows();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTAppEcommerceCategories.init();
});

128
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/catalog/products.js Normal file
View File

@@ -0,0 +1,128 @@
"use strict";
// Class definition
var KTAppEcommerceProducts = function () {
// Shared variables
var table;
var datatable;
// Private functions
var initDatatable = function () {
// Init datatable --- more info on datatables: https://datatables.net/manual/
datatable = $(table).DataTable({
"info": false,
'order': [],
'pageLength': 10,
'columnDefs': [
{ render: DataTable.render.number(',', '.', 2), targets: 4},
{ orderable: false, targets: 0 }, // Disable ordering on column 0 (checkbox)
{ orderable: false, targets: 7 }, // Disable ordering on column 7 (actions)
]
});
// Re-init functions on datatable re-draws
datatable.on('draw', function () {
handleDeleteRows();
});
}
// Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
var handleSearchDatatable = () => {
const filterSearch = document.querySelector('[data-kt-ecommerce-product-filter="search"]');
filterSearch.addEventListener('keyup', function (e) {
datatable.search(e.target.value).draw();
});
}
// Handle status filter dropdown
var handleStatusFilter = () => {
const filterStatus = document.querySelector('[data-kt-ecommerce-product-filter="status"]');
$(filterStatus).on('change', e => {
let value = e.target.value;
if(value === 'all'){
value = '';
}
datatable.column(6).search(value).draw();
});
}
// Delete cateogry
var handleDeleteRows = () => {
// Select all delete buttons
const deleteButtons = table.querySelectorAll('[data-kt-ecommerce-product-filter="delete_row"]');
deleteButtons.forEach(d => {
// Delete button on click
d.addEventListener('click', function (e) {
e.preventDefault();
// Select parent row
const parent = e.target.closest('tr');
// Get category name
const productName = parent.querySelector('[data-kt-ecommerce-product-filter="product_name"]').innerText;
// SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
Swal.fire({
text: "Are you sure you want to delete " + productName + "?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, delete!",
cancelButtonText: "No, cancel",
customClass: {
confirmButton: "btn fw-bold btn-danger",
cancelButton: "btn fw-bold btn-active-light-primary"
}
}).then(function (result) {
if (result.value) {
Swal.fire({
text: "You have deleted " + productName + "!.",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-primary",
}
}).then(function () {
// Remove current row
datatable.row($(parent)).remove().draw();
});
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: productName + " was not deleted.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-primary",
}
});
}
});
})
});
}
// Public methods
return {
init: function () {
table = document.querySelector('#kt_ecommerce_products_table');
if (!table) {
return;
}
initDatatable();
handleSearchDatatable();
handleStatusFilter();
handleDeleteRows();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTAppEcommerceProducts.init();
});

287
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/catalog/save-category.js Normal file
View File

@@ -0,0 +1,287 @@
"use strict";
// Class definition
var KTAppEcommerceSaveCategory = function () {
// Private functions
// Init quill editor
const initQuill = () => {
// Define all elements for quill editor
const elements = [
'#kt_ecommerce_add_category_description',
'#kt_ecommerce_add_category_meta_description'
];
// Loop all elements
elements.forEach(element => {
// Get quill element
let quill = document.querySelector(element);
// Break if element not found
if (!quill) {
return;
}
// Init quill --- more info: https://quilljs.com/docs/quickstart/
quill = new Quill(element, {
modules: {
toolbar: [
[{
header: [1, 2, false]
}],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Type your text here...',
theme: 'snow' // or 'bubble'
});
});
}
// Init tagify
const initTagify = () => {
// Define all elements for tagify
const elements = [
'#kt_ecommerce_add_category_meta_keywords'
];
// Loop all elements
elements.forEach(element => {
// Get tagify element
const tagify = document.querySelector(element);
// Break if element not found
if (!tagify) {
return;
}
// Init tagify --- more info: https://yaireo.github.io/tagify/
new Tagify(tagify);
});
}
// Init form repeater --- more info: https://github.com/DubFriend/jquery.repeater
const initFormRepeater = () => {
$('#kt_ecommerce_add_category_conditions').repeater({
initEmpty: false,
defaultValues: {
'text-input': 'foo'
},
show: function () {
$(this).slideDown();
// Init select2 on new repeated items
initConditionsSelect2();
},
hide: function (deleteElement) {
$(this).slideUp(deleteElement);
}
});
}
// Init condition select2
const initConditionsSelect2 = () => {
// Tnit new repeating condition types
const allConditionTypes = document.querySelectorAll('[data-kt-ecommerce-catalog-add-category="condition_type"]');
allConditionTypes.forEach(type => {
if ($(type).hasClass("select2-hidden-accessible")) {
return;
} else {
$(type).select2({
minimumResultsForSearch: -1
});
}
});
// Tnit new repeating condition equals
const allConditionEquals = document.querySelectorAll('[data-kt-ecommerce-catalog-add-category="condition_equals"]');
allConditionEquals.forEach(equal => {
if ($(equal).hasClass("select2-hidden-accessible")) {
return;
} else {
$(equal).select2({
minimumResultsForSearch: -1
});
}
});
}
// Category status handler
const handleStatus = () => {
const target = document.getElementById('kt_ecommerce_add_category_status');
const select = document.getElementById('kt_ecommerce_add_category_status_select');
const statusClasses = ['bg-success', 'bg-warning', 'bg-danger'];
$(select).on('change', function (e) {
const value = e.target.value;
switch (value) {
case "published": {
target.classList.remove(...statusClasses);
target.classList.add('bg-success');
hideDatepicker();
break;
}
case "scheduled": {
target.classList.remove(...statusClasses);
target.classList.add('bg-warning');
showDatepicker();
break;
}
case "unpublished": {
target.classList.remove(...statusClasses);
target.classList.add('bg-danger');
hideDatepicker();
break;
}
default:
break;
}
});
// Handle datepicker
const datepicker = document.getElementById('kt_ecommerce_add_category_status_datepicker');
// Init flatpickr --- more info: https://flatpickr.js.org/
$('#kt_ecommerce_add_category_status_datepicker').flatpickr({
enableTime: true,
dateFormat: "Y-m-d H:i",
});
const showDatepicker = () => {
datepicker.parentNode.classList.remove('d-none');
}
const hideDatepicker = () => {
datepicker.parentNode.classList.add('d-none');
}
}
// Condition type handler
const handleConditions = () => {
const allConditions = document.querySelectorAll('[name="method"][type="radio"]');
const conditionMatch = document.querySelector('[data-kt-ecommerce-catalog-add-category="auto-options"]');
allConditions.forEach(radio => {
radio.addEventListener('change', e => {
if (e.target.value === '1') {
conditionMatch.classList.remove('d-none');
} else {
conditionMatch.classList.add('d-none');
}
});
})
}
// Submit form handler
const handleSubmit = () => {
// Define variables
let validator;
// Get elements
const form = document.getElementById('kt_ecommerce_add_category_form');
const submitButton = document.getElementById('kt_ecommerce_add_category_submit');
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
validator = FormValidation.formValidation(
form,
{
fields: {
'category_name': {
validators: {
notEmpty: {
message: 'Category name is required'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
// Handle submit button
submitButton.addEventListener('click', e => {
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable submit button whilst loading
submitButton.disabled = true;
setTimeout(function () {
submitButton.removeAttribute('data-kt-indicator');
Swal.fire({
text: "Form has been successfully submitted!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
}).then(function (result) {
if (result.isConfirmed) {
// Enable submit button after loading
submitButton.disabled = false;
// Redirect to customers list page
window.location = form.getAttribute("data-kt-redirect");
}
});
}, 2000);
} else {
Swal.fire({
text: "Sorry, looks like there are some errors detected, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
});
}
})
}
// Public methods
return {
init: function () {
// Init forms
initQuill();
initTagify();
initFormRepeater();
initConditionsSelect2();
// Handle forms
handleStatus();
handleConditions();
handleSubmit();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTAppEcommerceSaveCategory.init();
});

416
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/catalog/save-product.js Normal file
View File

@@ -0,0 +1,416 @@
"use strict";
// Class definition
var KTAppEcommerceSaveProduct = function () {
// Private functions
// Init quill editor
const initQuill = () => {
// Define all elements for quill editor
const elements = [
'#kt_ecommerce_add_product_description',
'#kt_ecommerce_add_product_meta_description'
];
// Loop all elements
elements.forEach(element => {
// Get quill element
let quill = document.querySelector(element);
// Break if element not found
if (!quill) {
return;
}
// Init quill --- more info: https://quilljs.com/docs/quickstart/
quill = new Quill(element, {
modules: {
toolbar: [
[{
header: [1, 2, false]
}],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Type your text here...',
theme: 'snow' // or 'bubble'
});
});
}
// Init tagify
const initTagify = () => {
// Define all elements for tagify
const elements = [
'#kt_ecommerce_add_product_category',
'#kt_ecommerce_add_product_tags'
];
// Loop all elements
elements.forEach(element => {
// Get tagify element
const tagify = document.querySelector(element);
// Break if element not found
if (!tagify) {
return;
}
// Init tagify --- more info: https://yaireo.github.io/tagify/
new Tagify(tagify, {
whitelist: ["new", "trending", "sale", "discounted", "selling fast", "last 10"],
dropdown: {
maxItems: 20, // <- mixumum allowed rendered suggestions
classname: "tagify__inline__suggestions", // <- custom classname for this dropdown, so it could be targeted
enabled: 0, // <- show suggestions on focus
closeOnSelect: false // <- do not hide the suggestions dropdown once an item has been selected
}
});
});
}
// Init form repeater --- more info: https://github.com/DubFriend/jquery.repeater
const initFormRepeater = () => {
$('#kt_ecommerce_add_product_options').repeater({
initEmpty: false,
defaultValues: {
'text-input': 'foo'
},
show: function () {
$(this).slideDown();
// Init select2 on new repeated items
initConditionsSelect2();
},
hide: function (deleteElement) {
$(this).slideUp(deleteElement);
}
});
}
// Init condition select2
const initConditionsSelect2 = () => {
// Tnit new repeating condition types
const allConditionTypes = document.querySelectorAll('[data-kt-ecommerce-catalog-add-product="product_option"]');
allConditionTypes.forEach(type => {
if ($(type).hasClass("select2-hidden-accessible")) {
return;
} else {
$(type).select2({
minimumResultsForSearch: -1
});
}
});
}
// Init noUIslider
const initSlider = () => {
var slider = document.querySelector("#kt_ecommerce_add_product_discount_slider");
var value = document.querySelector("#kt_ecommerce_add_product_discount_label");
noUiSlider.create(slider, {
start: [10],
connect: true,
range: {
"min": 1,
"max": 100
}
});
slider.noUiSlider.on("update", function (values, handle) {
value.innerHTML = Math.round(values[handle]);
if (handle) {
value.innerHTML = Math.round(values[handle]);
}
});
}
// Init DropzoneJS --- more info:
const initDropzone = () => {
var myDropzone = new Dropzone("#kt_ecommerce_add_product_media", {
url: "https://keenthemes.com/scripts/void.php", // Set the url for your upload script location
paramName: "file", // The name that will be used to transfer the file
maxFiles: 10,
maxFilesize: 10, // MB
addRemoveLinks: true,
accept: function (file, done) {
if (file.name == "wow.jpg") {
done("Naha, you don't.");
} else {
done();
}
}
});
}
// Handle discount options
const handleDiscount = () => {
const discountOptions = document.querySelectorAll('input[name="discount_option"]');
const percentageEl = document.getElementById('kt_ecommerce_add_product_discount_percentage');
const fixedEl = document.getElementById('kt_ecommerce_add_product_discount_fixed');
discountOptions.forEach(option => {
option.addEventListener('change', e => {
const value = e.target.value;
switch (value) {
case '2': {
percentageEl.classList.remove('d-none');
fixedEl.classList.add('d-none');
break;
}
case '3': {
percentageEl.classList.add('d-none');
fixedEl.classList.remove('d-none');
break;
}
default: {
percentageEl.classList.add('d-none');
fixedEl.classList.add('d-none');
break;
}
}
});
});
}
// Shipping option handler
const handleShipping = () => {
const shippingOption = document.getElementById('kt_ecommerce_add_product_shipping_checkbox');
const shippingForm = document.getElementById('kt_ecommerce_add_product_shipping');
shippingOption.addEventListener('change', e => {
const value = e.target.checked;
if (value) {
shippingForm.classList.remove('d-none');
} else {
shippingForm.classList.add('d-none');
}
});
}
// Category status handler
const handleStatus = () => {
const target = document.getElementById('kt_ecommerce_add_product_status');
const select = document.getElementById('kt_ecommerce_add_product_status_select');
const statusClasses = ['bg-success', 'bg-warning', 'bg-danger'];
$(select).on('change', function (e) {
const value = e.target.value;
switch (value) {
case "published": {
target.classList.remove(...statusClasses);
target.classList.add('bg-success');
hideDatepicker();
break;
}
case "scheduled": {
target.classList.remove(...statusClasses);
target.classList.add('bg-warning');
showDatepicker();
break;
}
case "inactive": {
target.classList.remove(...statusClasses);
target.classList.add('bg-danger');
hideDatepicker();
break;
}
case "draft": {
target.classList.remove(...statusClasses);
target.classList.add('bg-primary');
hideDatepicker();
break;
}
default:
break;
}
});
// Handle datepicker
const datepicker = document.getElementById('kt_ecommerce_add_product_status_datepicker');
// Init flatpickr --- more info: https://flatpickr.js.org/
$('#kt_ecommerce_add_product_status_datepicker').flatpickr({
enableTime: true,
dateFormat: "Y-m-d H:i",
});
const showDatepicker = () => {
datepicker.parentNode.classList.remove('d-none');
}
const hideDatepicker = () => {
datepicker.parentNode.classList.add('d-none');
}
}
// Condition type handler
const handleConditions = () => {
const allConditions = document.querySelectorAll('[name="method"][type="radio"]');
const conditionMatch = document.querySelector('[data-kt-ecommerce-catalog-add-category="auto-options"]');
allConditions.forEach(radio => {
radio.addEventListener('change', e => {
if (e.target.value === '1') {
conditionMatch.classList.remove('d-none');
} else {
conditionMatch.classList.add('d-none');
}
});
})
}
// Submit form handler
const handleSubmit = () => {
// Define variables
let validator;
// Get elements
const form = document.getElementById('kt_ecommerce_add_product_form');
const submitButton = document.getElementById('kt_ecommerce_add_product_submit');
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
validator = FormValidation.formValidation(
form,
{
fields: {
'product_name': {
validators: {
notEmpty: {
message: 'Product name is required'
}
}
},
'sku': {
validators: {
notEmpty: {
message: 'SKU is required'
}
}
},
'sku': {
validators: {
notEmpty: {
message: 'Product barcode is required'
}
}
},
'shelf': {
validators: {
notEmpty: {
message: 'Shelf quantity is required'
}
}
},
'price': {
validators: {
notEmpty: {
message: 'Product base price is required'
}
}
},
'tax': {
validators: {
notEmpty: {
message: 'Product tax class is required'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
// Handle submit button
submitButton.addEventListener('click', e => {
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable submit button whilst loading
submitButton.disabled = true;
setTimeout(function () {
submitButton.removeAttribute('data-kt-indicator');
Swal.fire({
text: "Form has been successfully submitted!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
}).then(function (result) {
if (result.isConfirmed) {
// Enable submit button after loading
submitButton.disabled = false;
// Redirect to customers list page
window.location = form.getAttribute("data-kt-redirect");
}
});
}, 2000);
} else {
Swal.fire({
html: "Sorry, looks like there are some errors detected, please try again. <br/><br/>Please note that there may be errors in the <strong>General</strong> or <strong>Advanced</strong> tabs",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
});
}
})
}
// Public methods
return {
init: function () {
// Init forms
initQuill();
initTagify();
initSlider();
initFormRepeater();
initDropzone();
initConditionsSelect2();
// Handle forms
handleStatus();
handleConditions();
handleDiscount();
handleShipping();
handleSubmit();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTAppEcommerceSaveProduct.init();
});

214
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/customers/details/add-address.js Normal file
View File

@@ -0,0 +1,214 @@
"use strict";
// Class definition
var KTModalAddAddress = function () {
var submitButton;
var cancelButton;
var closeButton;
var validator;
var form;
var modal;
// Init form inputs
var handleForm = function () {
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
validator = FormValidation.formValidation(
form,
{
fields: {
'name': {
validators: {
notEmpty: {
message: 'Address name is required'
}
}
},
'country': {
validators: {
notEmpty: {
message: 'Country is required'
}
}
},
'address1': {
validators: {
notEmpty: {
message: 'Address 1 is required'
}
}
},
'city': {
validators: {
notEmpty: {
message: 'City is required'
}
}
},
'state': {
validators: {
notEmpty: {
message: 'State is required'
}
}
},
'postcode': {
validators: {
notEmpty: {
message: 'Postcode is required'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
// Revalidate country field. For more info, plase visit the official plugin site: https://select2.org/
$(form.querySelector('[name="country"]')).on('change', function() {
// Revalidate the field when an option is chosen
validator.revalidateField('country');
});
// Action buttons
submitButton.addEventListener('click', function (e) {
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable submit button whilst loading
submitButton.disabled = true;
setTimeout(function() {
submitButton.removeAttribute('data-kt-indicator');
Swal.fire({
text: "Form has been successfully submitted!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
}).then(function (result) {
if (result.isConfirmed) {
// Hide modal
modal.hide();
// Enable submit button after loading
submitButton.disabled = false;
}
});
}, 2000);
} else {
Swal.fire({
text: "Sorry, looks like there are some errors detected, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
});
}
});
cancelButton.addEventListener('click', function (e) {
e.preventDefault();
Swal.fire({
text: "Are you sure you would like to cancel?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, cancel it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
form.reset(); // Reset form
modal.hide(); // Hide modal
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Your form has not been cancelled!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
});
closeButton.addEventListener('click', function(e){
e.preventDefault();
Swal.fire({
text: "Are you sure you would like to cancel?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, cancel it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
form.reset(); // Reset form
modal.hide(); // Hide modal
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Your form has not been cancelled!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
})
}
return {
// Public functions
init: function () {
// Elements
modal = new bootstrap.Modal(document.querySelector('#kt_modal_add_address'));
form = document.querySelector('#kt_modal_add_address_form');
submitButton = form.querySelector('#kt_modal_add_address_submit');
cancelButton = form.querySelector('#kt_modal_add_address_cancel');
closeButton = form.querySelector('#kt_modal_add_address_close');
handleForm();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTModalAddAddress.init();
});

81
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/customers/details/add-auth-app.js Normal file
View File

@@ -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();
});

173
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/customers/details/add-one-time-password.js Normal file
View File

@@ -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();
});

110
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/customers/details/payment-method.js Normal file
View File

@@ -0,0 +1,110 @@
"use strict";
// Class definition
var KTCustomerViewPaymentMethod = function () {
// Private functions
var initPaymentMethod = function () {
// Define variables
const table = document.getElementById('kt_customer_view_payment_method');
const tableRows = table.querySelectorAll('[ data-kt-customer-payment-method="row"]');
tableRows.forEach(row => {
// Select delete button
const deleteButton = row.querySelector('[data-kt-customer-payment-method="delete"]');
// Delete button action
deleteButton.addEventListener('click', e => {
e.preventDefault();
// Popup confirmation
Swal.fire({
text: "Are you sure you would like to delete this card?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
row.remove();
modal.hide(); // Hide modal
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Your card was not deleted!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
});
});
}
// Handle set as primary button
const handlePrimaryButton = () => {
// Define variable
const button = document.querySelector('[data-kt-payment-mehtod-action="set_as_primary"]');
button.addEventListener('click', e => {
e.preventDefault();
// Popup confirmation
Swal.fire({
text: "Are you sure you would like to set this card as primary?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, set it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
Swal.fire({
text: "Your card was set to primary!.",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Your card was not set to primary!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
});
};
// Public methods
return {
init: function () {
initPaymentMethod();
handlePrimaryButton();
}
}
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTCustomerViewPaymentMethod.init();
});

110
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/customers/details/transaction-history.js Normal file
View File

@@ -0,0 +1,110 @@
"use strict";
// Class definition
var KTCustomerViewPaymentTable = function () {
// Define shared variables
var datatable;
var table = document.querySelector('#kt_table_customers_payment');
// Private functions
var initCustomerView = function () {
// Set date data order
const tableRows = table.querySelectorAll('tbody tr');
tableRows.forEach(row => {
const dateRow = row.querySelectorAll('td');
const realDate = moment(dateRow[3].innerHTML, "DD MMM YYYY, LT").format(); // select date from 4th column in table
dateRow[3].setAttribute('data-order', realDate);
});
// Init datatable --- more info on datatables: https://datatables.net/manual/
datatable = $(table).DataTable({
"info": false,
'order': [],
"pageLength": 5,
"lengthChange": false,
'columnDefs': [
{ orderable: false, targets: 4 }, // Disable ordering on column 5 (actions)
]
});
}
// Delete customer
var deleteRows = () => {
// Select all delete buttons
const deleteButtons = table.querySelectorAll('[data-kt-customer-table-filter="delete_row"]');
deleteButtons.forEach(d => {
// Delete button on click
d.addEventListener('click', function (e) {
e.preventDefault();
// Select parent row
const parent = e.target.closest('tr');
// Get customer name
const invoiceNumber = parent.querySelectorAll('td')[0].innerText;
// SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
Swal.fire({
text: "Are you sure you want to delete " + invoiceNumber + "?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, delete!",
cancelButtonText: "No, cancel",
customClass: {
confirmButton: "btn fw-bold btn-danger",
cancelButton: "btn fw-bold btn-active-light-primary"
}
}).then(function (result) {
if (result.value) {
Swal.fire({
text: "You have deleted " + invoiceNumber + "!.",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-primary",
}
}).then(function () {
// Remove current row
datatable.row($(parent)).remove().draw();
}).then(function () {
// Detect checked checkboxes
toggleToolbars();
});
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: customerName + " was not deleted.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-primary",
}
});
}
});
})
});
}
// Public methods
return {
init: function () {
if (!table) {
return;
}
initCustomerView();
deleteRows();
}
}
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTCustomerViewPaymentTable.init();
});

217
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/customers/details/update-address.js Normal file
View File

@@ -0,0 +1,217 @@
"use strict";
// Class definition
var KTModalUpdateAddress = function () {
var element;
var submitButton;
var cancelButton;
var closeButton;
var form;
var modal;
var validator;
// Init form inputs
var initForm = function () {
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
validator = FormValidation.formValidation(
form,
{
fields: {
'name': {
validators: {
notEmpty: {
message: 'Address name is required'
}
}
},
'country': {
validators: {
notEmpty: {
message: 'Country is required'
}
}
},
'address1': {
validators: {
notEmpty: {
message: 'Address 1 is required'
}
}
},
'city': {
validators: {
notEmpty: {
message: 'City is required'
}
}
},
'state': {
validators: {
notEmpty: {
message: 'State is required'
}
}
},
'postcode': {
validators: {
notEmpty: {
message: 'Postcode is required'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
// Revalidate country field. For more info, plase visit the official plugin site: https://select2.org/
$(form.querySelector('[name="country"]')).on('change', function () {
// Revalidate the field when an option is chosen
validator.revalidateField('country');
});
// Action buttons
submitButton.addEventListener('click', function (e) {
// Prevent default button action
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable submit button whilst loading
submitButton.disabled = true;
setTimeout(function() {
submitButton.removeAttribute('data-kt-indicator');
Swal.fire({
text: "Form has been successfully submitted!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
}).then(function (result) {
if (result.isConfirmed) {
// Hide modal
modal.hide();
// Enable submit button after loading
submitButton.disabled = false;
}
});
}, 2000);
} else {
Swal.fire({
text: "Sorry, looks like there are some errors detected, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
});
}
});
cancelButton.addEventListener('click', function (e) {
e.preventDefault();
Swal.fire({
text: "Are you sure you would like to cancel?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, cancel it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
form.reset(); // Reset form
modal.hide(); // Hide modal
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Your form has not been cancelled!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
});
closeButton.addEventListener('click', function (e) {
e.preventDefault();
Swal.fire({
text: "Are you sure you would like to cancel?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, cancel it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
form.reset(); // Reset form
modal.hide(); // Hide modal
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Your form has not been cancelled!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
});
}
return {
// Public functions
init: function () {
// Elements
element = document.querySelector('#kt_modal_update_address');
modal = new bootstrap.Modal(element);
form = element.querySelector('#kt_modal_update_address_form');
submitButton = form.querySelector('#kt_modal_update_address_submit');
cancelButton = form.querySelector('#kt_modal_update_address_cancel');
closeButton = element.querySelector('#kt_modal_update_address_close');
initForm();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTModalUpdateAddress.init();
});

194
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/customers/details/update-password.js Normal file
View File

@@ -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();
});

166
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/customers/details/update-phone.js Normal file
View File

@@ -0,0 +1,166 @@
"use strict";
// Class definition
var KTUsersUpdateEmail = function () {
// Shared variables
const element = document.getElementById('kt_modal_update_phone');
const form = element.querySelector('#kt_modal_update_phone_form');
const modal = new bootstrap.Modal(element);
// Init add schedule modal
var initUpdateEmail = () => {
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
form,
{
fields: {
'profile_phone': {
validators: {
notEmpty: {
message: 'Phone number is required'
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
// Close button handler
const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
closeButton.addEventListener('click', e => {
e.preventDefault();
Swal.fire({
text: "Are you sure you would like to cancel?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, cancel it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
form.reset(); // Reset form
modal.hide(); // Hide modal
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Your form has not been cancelled!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
});
// Cancel button handler
const cancelButton = element.querySelector('[data-kt-users-modal-action="cancel"]');
cancelButton.addEventListener('click', e => {
e.preventDefault();
Swal.fire({
text: "Are you sure you would like to cancel?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, cancel it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
form.reset(); // Reset form
modal.hide(); // Hide modal
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Your form has not been cancelled!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
});
// Submit button handler
const submitButton = element.querySelector('[data-kt-users-modal-action="submit"]');
submitButton.addEventListener('click', function (e) {
// Prevent default button action
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
// Show loading indication
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable button to avoid multiple click
submitButton.disabled = true;
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
setTimeout(function () {
// Remove loading indication
submitButton.removeAttribute('data-kt-indicator');
// Enable button
submitButton.disabled = false;
// Show popup confirmation
Swal.fire({
text: "Form has been successfully submitted!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
}).then(function (result) {
if (result.isConfirmed) {
modal.hide();
}
});
//form.submit(); // Submit form
}, 2000);
}
});
}
});
}
return {
// Public functions
init: function () {
initUpdateEmail();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTUsersUpdateEmail.init();
});

106
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/customers/details/update-profile.js Normal file
View File

@@ -0,0 +1,106 @@
"use strict";
// Class definition
var KTEcommerceUpdateProfile = function () {
var submitButton;
var validator;
var form;
// Init form inputs
var handleForm = function () {
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
validator = FormValidation.formValidation(
form,
{
fields: {
'name': {
validators: {
notEmpty: {
message: 'Name is required'
}
}
},
'gen_email': {
validators: {
notEmpty: {
message: 'General Email is required'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
// Action buttons
submitButton.addEventListener('click', function (e) {
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable submit button whilst loading
submitButton.disabled = true;
setTimeout(function() {
submitButton.removeAttribute('data-kt-indicator');
Swal.fire({
text: "Your profile has been saved!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
}).then(function (result) {
if (result.isConfirmed) {
// Enable submit button after loading
submitButton.disabled = false;
}
});
}, 2000);
} else {
Swal.fire({
text: "Sorry, looks like there are some errors detected, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
});
}
});
}
return {
// Public functions
init: function () {
// Elements
form = document.querySelector('#kt_ecommerce_customer_profile');
submitButton = form.querySelector('#kt_ecommerce_customer_profile_submit');
handleForm();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTEcommerceUpdateProfile.init();
});

238
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/customers/listing/add.js Normal file
View File

@@ -0,0 +1,238 @@
"use strict";
// Class definition
var KTModalCustomersAdd = function () {
var submitButton;
var cancelButton;
var closeButton;
var validator;
var form;
var modal;
// Init form inputs
var handleForm = function () {
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
validator = FormValidation.formValidation(
form,
{
fields: {
'name': {
validators: {
notEmpty: {
message: 'Customer name is required'
}
}
},
'email': {
validators: {
notEmpty: {
message: 'Customer email is required'
}
}
},
'first-name': {
validators: {
notEmpty: {
message: 'First name is required'
}
}
},
'last-name': {
validators: {
notEmpty: {
message: 'Last name is required'
}
}
},
'country': {
validators: {
notEmpty: {
message: 'Country is required'
}
}
},
'address1': {
validators: {
notEmpty: {
message: 'Address 1 is required'
}
}
},
'city': {
validators: {
notEmpty: {
message: 'City is required'
}
}
},
'state': {
validators: {
notEmpty: {
message: 'State is required'
}
}
},
'postcode': {
validators: {
notEmpty: {
message: 'Postcode is required'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
// Revalidate country field. For more info, plase visit the official plugin site: https://select2.org/
$(form.querySelector('[name="country"]')).on('change', function() {
// Revalidate the field when an option is chosen
validator.revalidateField('country');
});
// Action buttons
submitButton.addEventListener('click', function (e) {
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable submit button whilst loading
submitButton.disabled = true;
setTimeout(function() {
submitButton.removeAttribute('data-kt-indicator');
Swal.fire({
text: "Form has been successfully submitted!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
}).then(function (result) {
if (result.isConfirmed) {
// Hide modal
modal.hide();
// Enable submit button after loading
submitButton.disabled = false;
// Redirect to customers list page
window.location = form.getAttribute("data-kt-redirect");
}
});
}, 2000);
} else {
Swal.fire({
text: "Sorry, looks like there are some errors detected, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
});
}
});
cancelButton.addEventListener('click', function (e) {
e.preventDefault();
Swal.fire({
text: "Are you sure you would like to cancel?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, cancel it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
form.reset(); // Reset form
modal.hide(); // Hide modal
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Your form has not been cancelled!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
});
closeButton.addEventListener('click', function(e){
e.preventDefault();
Swal.fire({
text: "Are you sure you would like to cancel?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, cancel it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
form.reset(); // Reset form
modal.hide(); // Hide modal
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Your form has not been cancelled!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
})
}
return {
// Public functions
init: function () {
// Elements
modal = new bootstrap.Modal(document.querySelector('#kt_modal_add_customer'));
form = document.querySelector('#kt_modal_add_customer_form');
submitButton = form.querySelector('#kt_modal_add_customer_submit');
cancelButton = form.querySelector('#kt_modal_add_customer_cancel');
closeButton = form.querySelector('#kt_modal_add_customer_close');
handleForm();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTModalCustomersAdd.init();
});

189
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/customers/listing/export.js Normal file
View File

@@ -0,0 +1,189 @@
"use strict";
// Class definition
var KTCustomersExport = function () {
var element;
var submitButton;
var cancelButton;
var closeButton;
var validator;
var form;
var modal;
// Init form inputs
var handleForm = function () {
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
validator = FormValidation.formValidation(
form,
{
fields: {
'date': {
validators: {
notEmpty: {
message: 'Date range is required'
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
// Action buttons
submitButton.addEventListener('click', function (e) {
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable submit button whilst loading
submitButton.disabled = true;
setTimeout(function() {
submitButton.removeAttribute('data-kt-indicator');
Swal.fire({
text: "Customer list has been successfully exported!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
}).then(function (result) {
if (result.isConfirmed) {
modal.hide();
// Enable submit button after loading
submitButton.disabled = false;
}
});
//form.submit(); // Submit form
}, 2000);
} else {
Swal.fire({
text: "Sorry, looks like there are some errors detected, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
});
}
});
cancelButton.addEventListener('click', function (e) {
e.preventDefault();
Swal.fire({
text: "Are you sure you would like to cancel?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, cancel it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
form.reset(); // Reset form
modal.hide(); // Hide modal
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Your form has not been cancelled!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
});
closeButton.addEventListener('click', function(e){
e.preventDefault();
Swal.fire({
text: "Are you sure you would like to cancel?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, cancel it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
form.reset(); // Reset form
modal.hide(); // Hide modal
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Your form has not been cancelled!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
});
}
var initForm = function () {
const datepicker = form.querySelector("[name=date]");
// Handle datepicker range -- For more info on flatpickr plugin, please visit: https://flatpickr.js.org/
$(datepicker).flatpickr({
altInput: true,
altFormat: "F j, Y",
dateFormat: "Y-m-d",
mode: "range"
});
}
return {
// Public functions
init: function () {
// Elements
element = document.querySelector('#kt_customers_export_modal');
modal = new bootstrap.Modal(element);
form = document.querySelector('#kt_customers_export_form');
submitButton = form.querySelector('#kt_customers_export_submit');
cancelButton = form.querySelector('#kt_customers_export_cancel');
closeButton = element.querySelector('#kt_customers_export_close');
handleForm();
initForm();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTCustomersExport.init();
});

242
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/customers/listing/listing.js Normal file
View File

@@ -0,0 +1,242 @@
"use strict";
// Class definition
var KTCustomersList = function () {
// Define shared variables
var datatable;
var filterMonth;
var filterPayment;
var table
// Private functions
var initCustomerList = function () {
// Set date data order
const tableRows = table.querySelectorAll('tbody tr');
tableRows.forEach(row => {
const dateRow = row.querySelectorAll('td');
const realDate = moment(dateRow[5].innerHTML, "DD MMM YYYY, LT").format(); // select date from 5th column in table
dateRow[5].setAttribute('data-order', realDate);
});
// Init datatable --- more info on datatables: https://datatables.net/manual/
datatable = $(table).DataTable({
"info": false,
'order': [],
'columnDefs': [
{ orderable: false, targets: 0 }, // Disable ordering on column 0 (checkbox)
{ orderable: false, targets: 6 }, // Disable ordering on column 6 (actions)
]
});
// Re-init functions on every table re-draw -- more info: https://datatables.net/reference/event/draw
datatable.on('draw', function () {
initToggleToolbar();
handleDeleteRows();
toggleToolbars();
});
}
// Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
var handleSearchDatatable = () => {
const filterSearch = document.querySelector('[data-kt-customer-table-filter="search"]');
filterSearch.addEventListener('keyup', function (e) {
datatable.search(e.target.value).draw();
});
}
// Delete customer
var handleDeleteRows = () => {
// Select all delete buttons
const deleteButtons = table.querySelectorAll('[data-kt-customer-table-filter="delete_row"]');
deleteButtons.forEach(d => {
// Delete button on click
d.addEventListener('click', function (e) {
e.preventDefault();
// Select parent row
const parent = e.target.closest('tr');
// Get customer name
const customerName = parent.querySelectorAll('td')[1].innerText;
// SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
Swal.fire({
text: "Are you sure you want to delete " + customerName + "?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, delete!",
cancelButtonText: "No, cancel",
customClass: {
confirmButton: "btn fw-bold btn-danger",
cancelButton: "btn fw-bold btn-active-light-primary"
}
}).then(function (result) {
if (result.value) {
Swal.fire({
text: "You have deleted " + customerName + "!.",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-primary",
}
}).then(function () {
// Remove current row
datatable.row($(parent)).remove().draw();
});
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: customerName + " was not deleted.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-primary",
}
});
}
});
})
});
}
// Handle status filter dropdown
var handleStatusFilter = () => {
const filterStatus = document.querySelector('[data-kt-ecommerce-order-filter="status"]');
$(filterStatus).on('change', e => {
let value = e.target.value;
if (value === 'all') {
value = '';
}
datatable.column(3).search(value).draw();
});
}
// Init toggle toolbar
var initToggleToolbar = () => {
// Toggle selected action toolbar
// Select all checkboxes
const checkboxes = table.querySelectorAll('[type="checkbox"]');
// Select elements
const deleteSelected = document.querySelector('[data-kt-customer-table-select="delete_selected"]');
// Toggle delete selected toolbar
checkboxes.forEach(c => {
// Checkbox on click event
c.addEventListener('click', function () {
setTimeout(function () {
toggleToolbars();
}, 50);
});
});
// Deleted selected rows
deleteSelected.addEventListener('click', function () {
// SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
Swal.fire({
text: "Are you sure you want to delete selected customers?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, delete!",
cancelButtonText: "No, cancel",
customClass: {
confirmButton: "btn fw-bold btn-danger",
cancelButton: "btn fw-bold btn-active-light-primary"
}
}).then(function (result) {
if (result.value) {
Swal.fire({
text: "You have deleted all selected customers!.",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-primary",
}
}).then(function () {
// Remove all selected customers
checkboxes.forEach(c => {
if (c.checked) {
datatable.row($(c.closest('tbody tr'))).remove().draw();
}
});
// Remove header checked box
const headerCheckbox = table.querySelectorAll('[type="checkbox"]')[0];
headerCheckbox.checked = false;
});
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Selected customers was not deleted.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-primary",
}
});
}
});
});
}
// Toggle toolbars
const toggleToolbars = () => {
// Define variables
const toolbarBase = document.querySelector('[data-kt-customer-table-toolbar="base"]');
const toolbarSelected = document.querySelector('[data-kt-customer-table-toolbar="selected"]');
const selectedCount = document.querySelector('[data-kt-customer-table-select="selected_count"]');
// Select refreshed checkbox DOM elements
const allCheckboxes = table.querySelectorAll('tbody [type="checkbox"]');
// Detect checkboxes state & count
let checkedState = false;
let count = 0;
// Count checked boxes
allCheckboxes.forEach(c => {
if (c.checked) {
checkedState = true;
count++;
}
});
// Toggle toolbars
if (checkedState) {
selectedCount.innerHTML = count;
toolbarBase.classList.add('d-none');
toolbarSelected.classList.remove('d-none');
} else {
toolbarBase.classList.remove('d-none');
toolbarSelected.classList.add('d-none');
}
}
// Public methods
return {
init: function () {
table = document.querySelector('#kt_customers_table');
if (!table) {
return;
}
initCustomerList();
initToggleToolbar();
handleSearchDatatable();
handleDeleteRows();
handleStatusFilter();
}
}
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTCustomersList.init();
});

136
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/reports/customer-orders/customer-orders.js Normal file
View File

@@ -0,0 +1,136 @@
"use strict";
// Class definition
var KTAppEcommerceReportCustomerOrders = function () {
// Shared variables
var table;
var datatable;
// Private functions
var initDatatable = function () {
// Set date data order
const tableRows = table.querySelectorAll('tbody tr');
tableRows.forEach(row => {
const dateRow = row.querySelectorAll('td');
const realDate = moment(dateRow[3].innerHTML, "DD MMM YYYY, LT").format(); // select date from 4th column in table
dateRow[3].setAttribute('data-order', realDate);
});
// Init datatable --- more info on datatables: https://datatables.net/manual/
datatable = $(table).DataTable({
"info": false,
'order': [],
'pageLength': 10,
});
}
// Init daterangepicker
var initDaterangepicker = () => {
var start = moment().subtract(29, "days");
var end = moment();
var input = $("#kt_ecommerce_report_customer_orders_daterangepicker");
function cb(start, end) {
input.html(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));
}
input.daterangepicker({
startDate: start,
endDate: end,
ranges: {
"Today": [moment(), moment()],
"Yesterday": [moment().subtract(1, "days"), moment().subtract(1, "days")],
"Last 7 Days": [moment().subtract(6, "days"), moment()],
"Last 30 Days": [moment().subtract(29, "days"), moment()],
"This Month": [moment().startOf("month"), moment().endOf("month")],
"Last Month": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
}
}, cb);
cb(start, end);
}
// Handle status filter dropdown
var handleStatusFilter = () => {
const filterStatus = document.querySelector('[data-kt-ecommerce-order-filter="status"]');
$(filterStatus).on('change', e => {
let value = e.target.value;
if (value === 'all') {
value = '';
}
datatable.column(2).search(value).draw();
});
}
// Hook export buttons
var exportButtons = () => {
const documentTitle = 'Customer Orders Report';
var buttons = new $.fn.dataTable.Buttons(table, {
buttons: [
{
extend: 'copyHtml5',
title: documentTitle
},
{
extend: 'excelHtml5',
title: documentTitle
},
{
extend: 'csvHtml5',
title: documentTitle
},
{
extend: 'pdfHtml5',
title: documentTitle
}
]
}).container().appendTo($('#kt_ecommerce_report_customer_orders_export'));
// Hook dropdown menu click event to datatable export buttons
const exportButtons = document.querySelectorAll('#kt_ecommerce_report_customer_orders_export_menu [data-kt-ecommerce-export]');
exportButtons.forEach(exportButton => {
exportButton.addEventListener('click', e => {
e.preventDefault();
// Get clicked export value
const exportValue = e.target.getAttribute('data-kt-ecommerce-export');
const target = document.querySelector('.dt-buttons .buttons-' + exportValue);
// Trigger click event on hidden datatable export buttons
target.click();
});
});
}
// Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
var handleSearchDatatable = () => {
const filterSearch = document.querySelector('[data-kt-ecommerce-order-filter="search"]');
filterSearch.addEventListener('keyup', function (e) {
datatable.search(e.target.value).draw();
});
}
// Public methods
return {
init: function () {
table = document.querySelector('#kt_ecommerce_report_customer_orders_table');
if (!table) {
return;
}
initDatatable();
initDaterangepicker();
exportButtons();
handleSearchDatatable();
handleStatusFilter();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTAppEcommerceReportCustomerOrders.init();
});

123
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/reports/returns/returns.js Normal file
View File

@@ -0,0 +1,123 @@
"use strict";
// Class definition
var KTAppEcommerceReportReturns = function () {
// Shared variables
var table;
var datatable;
// Private functions
var initDatatable = function () {
// Set date data order
const tableRows = table.querySelectorAll('tbody tr');
tableRows.forEach(row => {
const dateRow = row.querySelectorAll('td');
const realDate = moment(dateRow[0].innerHTML, "MMM DD, YYYY").format(); // select date from 4th column in table
dateRow[0].setAttribute('data-order', realDate);
});
// Init datatable --- more info on datatables: https://datatables.net/manual/
datatable = $(table).DataTable({
"info": false,
'order': [],
'pageLength': 10,
});
}
// Init daterangepicker
var initDaterangepicker = () => {
var start = moment().subtract(29, "days");
var end = moment();
var input = $("#kt_ecommerce_report_returns_daterangepicker");
function cb(start, end) {
input.html(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));
}
input.daterangepicker({
startDate: start,
endDate: end,
ranges: {
"Today": [moment(), moment()],
"Yesterday": [moment().subtract(1, "days"), moment().subtract(1, "days")],
"Last 7 Days": [moment().subtract(6, "days"), moment()],
"Last 30 Days": [moment().subtract(29, "days"), moment()],
"This Month": [moment().startOf("month"), moment().endOf("month")],
"Last Month": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
}
}, cb);
cb(start, end);
}
// Hook export buttons
var exportButtons = () => {
const documentTitle = 'Returns Report';
var buttons = new $.fn.dataTable.Buttons(table, {
buttons: [
{
extend: 'copyHtml5',
title: documentTitle
},
{
extend: 'excelHtml5',
title: documentTitle
},
{
extend: 'csvHtml5',
title: documentTitle
},
{
extend: 'pdfHtml5',
title: documentTitle
}
]
}).container().appendTo($('#kt_ecommerce_report_returns_export'));
// Hook dropdown menu click event to datatable export buttons
const exportButtons = document.querySelectorAll('#kt_ecommerce_report_returns_export_menu [data-kt-ecommerce-export]');
exportButtons.forEach(exportButton => {
exportButton.addEventListener('click', e => {
e.preventDefault();
// Get clicked export value
const exportValue = e.target.getAttribute('data-kt-ecommerce-export');
const target = document.querySelector('.dt-buttons .buttons-' + exportValue);
// Trigger click event on hidden datatable export buttons
target.click();
});
});
}
// Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
var handleSearchDatatable = () => {
const filterSearch = document.querySelector('[data-kt-ecommerce-order-filter="search"]');
filterSearch.addEventListener('keyup', function (e) {
datatable.search(e.target.value).draw();
});
}
// Public methods
return {
init: function () {
table = document.querySelector('#kt_ecommerce_report_returns_table');
if (!table) {
return;
}
initDatatable();
initDaterangepicker();
exportButtons();
handleSearchDatatable();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTAppEcommerceReportReturns.init();
});

124
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/reports/sales/sales.js Normal file
View File

@@ -0,0 +1,124 @@
"use strict";
// Class definition
var KTAppEcommerceReportSales = function () {
// Shared variables
var table;
var datatable;
// Private functions
var initDatatable = function () {
// Set date data order
const tableRows = table.querySelectorAll('tbody tr');
tableRows.forEach(row => {
const dateRow = row.querySelectorAll('td');
const realDate = moment(dateRow[0].innerHTML, "MMM DD, YYYY").format(); // select date from 4th column in table
dateRow[0].setAttribute('data-order', realDate);
});
// Init datatable --- more info on datatables: https://datatables.net/manual/
datatable = $(table).DataTable({
"info": false,
'order': [],
'pageLength': 10,
});
}
// Init daterangepicker
var initDaterangepicker = () => {
var start = moment().subtract(29, "days");
var end = moment();
var input = $("#kt_ecommerce_report_sales_daterangepicker");
function cb(start, end) {
input.html(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));
}
input.daterangepicker({
startDate: start,
endDate: end,
ranges: {
"Today": [moment(), moment()],
"Yesterday": [moment().subtract(1, "days"), moment().subtract(1, "days")],
"Last 7 Days": [moment().subtract(6, "days"), moment()],
"Last 30 Days": [moment().subtract(29, "days"), moment()],
"This Month": [moment().startOf("month"), moment().endOf("month")],
"Last Month": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
}
}, cb);
cb(start, end);
}
// Hook export buttons
var exportButtons = () => {
const documentTitle = 'Sales Report';
var buttons = new $.fn.dataTable.Buttons(table, {
buttons: [
{
extend: 'copyHtml5',
title: documentTitle
},
{
extend: 'excelHtml5',
title: documentTitle
},
{
extend: 'csvHtml5',
title: documentTitle
},
{
extend: 'pdfHtml5',
title: documentTitle
}
]
}).container().appendTo($('#kt_ecommerce_report_sales_export'));
// Hook dropdown menu click event to datatable export buttons
const exportButtons = document.querySelectorAll('#kt_ecommerce_report_sales_export_menu [data-kt-ecommerce-export]');
exportButtons.forEach(exportButton => {
exportButton.addEventListener('click', e => {
e.preventDefault();
// Get clicked export value
const exportValue = e.target.getAttribute('data-kt-ecommerce-export');
const target = document.querySelector('.dt-buttons .buttons-' + exportValue);
// Trigger click event on hidden datatable export buttons
target.click();
});
});
}
// Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
var handleSearchDatatable = () => {
const filterSearch = document.querySelector('[data-kt-ecommerce-order-filter="search"]');
filterSearch.addEventListener('keyup', function (e) {
datatable.search(e.target.value).draw();
});
}
// Public methods
return {
init: function () {
table = document.querySelector('#kt_ecommerce_report_sales_table');
if (!table) {
return;
}
initDatatable();
initDaterangepicker();
exportButtons();
handleSearchDatatable();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTAppEcommerceReportSales.init();
});

137
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/reports/shipping/shipping.js Normal file
View File

@@ -0,0 +1,137 @@
"use strict";
// Class definition
var KTAppEcommerceReportShipping = function () {
// Shared variables
var table;
var datatable;
// Private functions
var initDatatable = function () {
// Set date data order
const tableRows = table.querySelectorAll('tbody tr');
tableRows.forEach(row => {
const dateRow = row.querySelectorAll('td');
const realDate = moment(dateRow[0].innerHTML, "MMM DD, YYYY").format(); // select date from 4th column in table
dateRow[0].setAttribute('data-order', realDate);
});
// Init datatable --- more info on datatables: https://datatables.net/manual/
datatable = $(table).DataTable({
"info": false,
'order': [],
'pageLength': 10,
});
}
// Init daterangepicker
var initDaterangepicker = () => {
var start = moment().subtract(29, "days");
var end = moment();
var input = $("#kt_ecommerce_report_shipping_daterangepicker");
function cb(start, end) {
input.html(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));
}
input.daterangepicker({
startDate: start,
endDate: end,
ranges: {
"Today": [moment(), moment()],
"Yesterday": [moment().subtract(1, "days"), moment().subtract(1, "days")],
"Last 7 Days": [moment().subtract(6, "days"), moment()],
"Last 30 Days": [moment().subtract(29, "days"), moment()],
"This Month": [moment().startOf("month"), moment().endOf("month")],
"Last Month": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
}
}, cb);
cb(start, end);
}
// Handle status filter dropdown
var handleStatusFilter = () => {
const filterStatus = document.querySelector('[data-kt-ecommerce-order-filter="status"]');
$(filterStatus).on('change', e => {
let value = e.target.value;
if (value === 'all') {
value = '';
}
datatable.column(3).search(value).draw();
});
}
// Hook export buttons
var exportButtons = () => {
const documentTitle = 'Shipping Report';
var buttons = new $.fn.dataTable.Buttons(table, {
buttons: [
{
extend: 'copyHtml5',
title: documentTitle
},
{
extend: 'excelHtml5',
title: documentTitle
},
{
extend: 'csvHtml5',
title: documentTitle
},
{
extend: 'pdfHtml5',
title: documentTitle
}
]
}).container().appendTo($('#kt_ecommerce_report_shipping_export'));
// Hook dropdown menu click event to datatable export buttons
const exportButtons = document.querySelectorAll('#kt_ecommerce_report_shipping_export_menu [data-kt-ecommerce-export]');
exportButtons.forEach(exportButton => {
exportButton.addEventListener('click', e => {
e.preventDefault();
// Get clicked export value
const exportValue = e.target.getAttribute('data-kt-ecommerce-export');
const target = document.querySelector('.dt-buttons .buttons-' + exportValue);
// Trigger click event on hidden datatable export buttons
target.click();
});
});
}
// Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
var handleSearchDatatable = () => {
const filterSearch = document.querySelector('[data-kt-ecommerce-order-filter="search"]');
filterSearch.addEventListener('keyup', function (e) {
datatable.search(e.target.value).draw();
});
}
// Public methods
return {
init: function () {
table = document.querySelector('#kt_ecommerce_report_shipping_table');
if (!table) {
return;
}
initDatatable();
initDaterangepicker();
exportButtons();
handleSearchDatatable();
handleStatusFilter();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTAppEcommerceReportShipping.init();
});

127
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/reports/views/views.js Normal file
View File

@@ -0,0 +1,127 @@
"use strict";
// Class definition
var KTAppEcommerceReportViews = function () {
// Shared variables
var table;
var datatable;
// Private functions
var initDatatable = function () {
// Init datatable --- more info on datatables: https://datatables.net/manual/
datatable = $(table).DataTable({
"info": false,
'order': [],
'pageLength': 10,
});
}
// Init daterangepicker
var initDaterangepicker = () => {
var start = moment().subtract(29, "days");
var end = moment();
var input = $("#kt_ecommerce_report_views_daterangepicker");
function cb(start, end) {
input.html(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));
}
input.daterangepicker({
startDate: start,
endDate: end,
ranges: {
"Today": [moment(), moment()],
"Yesterday": [moment().subtract(1, "days"), moment().subtract(1, "days")],
"Last 7 Days": [moment().subtract(6, "days"), moment()],
"Last 30 Days": [moment().subtract(29, "days"), moment()],
"This Month": [moment().startOf("month"), moment().endOf("month")],
"Last Month": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
}
}, cb);
cb(start, end);
}
// Handle rating filter dropdown
var handleStatusFilter = () => {
const filterStatus = document.querySelector('[data-kt-ecommerce-order-filter="rating"]');
$(filterStatus).on('change', e => {
let value = e.target.value;
if (value === 'all') {
value = '';
}
datatable.column(2).search(value).draw();
});
}
// Hook export buttons
var exportButtons = () => {
const documentTitle = 'Product Views Report';
var buttons = new $.fn.dataTable.Buttons(table, {
buttons: [
{
extend: 'copyHtml5',
title: documentTitle
},
{
extend: 'excelHtml5',
title: documentTitle
},
{
extend: 'csvHtml5',
title: documentTitle
},
{
extend: 'pdfHtml5',
title: documentTitle
}
]
}).container().appendTo($('#kt_ecommerce_report_views_export'));
// Hook dropdown menu click event to datatable export buttons
const exportButtons = document.querySelectorAll('#kt_ecommerce_report_views_export_menu [data-kt-ecommerce-export]');
exportButtons.forEach(exportButton => {
exportButton.addEventListener('click', e => {
e.preventDefault();
// Get clicked export value
const exportValue = e.target.getAttribute('data-kt-ecommerce-export');
const target = document.querySelector('.dt-buttons .buttons-' + exportValue);
// Trigger click event on hidden datatable export buttons
target.click();
});
});
}
// Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
var handleSearchDatatable = () => {
const filterSearch = document.querySelector('[data-kt-ecommerce-order-filter="search"]');
filterSearch.addEventListener('keyup', function (e) {
datatable.search(e.target.value).draw();
});
}
// Public methods
return {
init: function () {
table = document.querySelector('#kt_ecommerce_report_views_table');
if (!table) {
return;
}
initDatatable();
initDaterangepicker();
exportButtons();
handleSearchDatatable();
handleStatusFilter();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTAppEcommerceReportViews.init();
});

181
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/sales/listing.js Normal file
View File

@@ -0,0 +1,181 @@
"use strict";
// Class definition
var KTAppEcommerceSalesListing = function () {
// Shared variables
var table;
var datatable;
var flatpickr;
var minDate, maxDate;
// Private functions
var initDatatable = function () {
// Init datatable --- more info on datatables: https://datatables.net/manual/
datatable = $(table).DataTable({
"info": false,
'order': [],
'pageLength': 10,
'columnDefs': [
{ orderable: false, targets: 0 }, // Disable ordering on column 0 (checkbox)
{ orderable: false, targets: 7 }, // Disable ordering on column 7 (actions)
]
});
// Re-init functions on datatable re-draws
datatable.on('draw', function () {
handleDeleteRows();
});
}
// Init flatpickr --- more info :https://flatpickr.js.org/getting-started/
var initFlatpickr = () => {
const element = document.querySelector('#kt_ecommerce_sales_flatpickr');
flatpickr = $(element).flatpickr({
altInput: true,
altFormat: "d/m/Y",
dateFormat: "Y-m-d",
mode: "range",
onChange: function (selectedDates, dateStr, instance) {
handleFlatpickr(selectedDates, dateStr, instance);
},
});
}
// Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
var handleSearchDatatable = () => {
const filterSearch = document.querySelector('[data-kt-ecommerce-order-filter="search"]');
filterSearch.addEventListener('keyup', function (e) {
datatable.search(e.target.value).draw();
});
}
// Handle status filter dropdown
var handleStatusFilter = () => {
const filterStatus = document.querySelector('[data-kt-ecommerce-order-filter="status"]');
$(filterStatus).on('change', e => {
let value = e.target.value;
if (value === 'all') {
value = '';
}
datatable.column(3).search(value).draw();
});
}
// Handle flatpickr --- more info: https://flatpickr.js.org/events/
var handleFlatpickr = (selectedDates, dateStr, instance) => {
minDate = selectedDates[0] ? new Date(selectedDates[0]) : null;
maxDate = selectedDates[1] ? new Date(selectedDates[1]) : null;
// Datatable date filter --- more info: https://datatables.net/extensions/datetime/examples/integration/datatables.html
// Custom filtering function which will search data in column four between two values
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var min = minDate;
var max = maxDate;
var dateAdded = new Date(moment($(data[5]).text(), 'DD/MM/YYYY'));
var dateModified = new Date(moment($(data[6]).text(), 'DD/MM/YYYY'));
if (
(min === null && max === null) ||
(min === null && max >= dateModified) ||
(min <= dateAdded && max === null) ||
(min <= dateAdded && max >= dateModified)
) {
return true;
}
return false;
}
);
datatable.draw();
}
// Handle clear flatpickr
var handleClearFlatpickr = () => {
const clearButton = document.querySelector('#kt_ecommerce_sales_flatpickr_clear');
clearButton.addEventListener('click', e => {
flatpickr.clear();
});
}
// Delete cateogry
var handleDeleteRows = () => {
// Select all delete buttons
const deleteButtons = table.querySelectorAll('[data-kt-ecommerce-order-filter="delete_row"]');
deleteButtons.forEach(d => {
// Delete button on click
d.addEventListener('click', function (e) {
e.preventDefault();
// Select parent row
const parent = e.target.closest('tr');
// Get category name
const orderID = parent.querySelector('[data-kt-ecommerce-order-filter="order_id"]').innerText;
// SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
Swal.fire({
text: "Are you sure you want to delete order: " + orderID + "?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, delete!",
cancelButtonText: "No, cancel",
customClass: {
confirmButton: "btn fw-bold btn-danger",
cancelButton: "btn fw-bold btn-active-light-primary"
}
}).then(function (result) {
if (result.value) {
Swal.fire({
text: "You have deleted " + orderID + "!.",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-primary",
}
}).then(function () {
// Remove current row
datatable.row($(parent)).remove().draw();
});
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: orderID + " was not deleted.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-primary",
}
});
}
});
})
});
}
// Public methods
return {
init: function () {
table = document.querySelector('#kt_ecommerce_sales_table');
if (!table) {
return;
}
initDatatable();
initFlatpickr();
handleSearchDatatable();
handleStatusFilter();
handleDeleteRows();
handleClearFlatpickr();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTAppEcommerceSalesListing.init();
});

338
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/sales/save-order.js Normal file
View File

@@ -0,0 +1,338 @@
"use strict";
// Class definition
var KTAppEcommerceSalesSaveOrder = function () {
// Shared variables
var table;
var datatable;
// Private functions
const initSaveOrder = () => {
// Init flatpickr
$('#kt_ecommerce_edit_order_date').flatpickr({
altInput: true,
altFormat: "d F, Y",
dateFormat: "Y-m-d",
});
// Init select2 country options
// Format options
const optionFormat = (item) => {
if ( !item.id ) {
return item.text;
}
var span = document.createElement('span');
var template = '';
template += '<img src="' + item.element.getAttribute('data-kt-select2-country') + '" class="rounded-circle h-20px me-2" alt="image"/>';
template += item.text;
span.innerHTML = template;
return $(span);
}
// Init Select2 --- more info: https://select2.org/
$('#kt_ecommerce_edit_order_billing_country').select2({
placeholder: "Select a country",
minimumResultsForSearch: Infinity,
templateSelection: optionFormat,
templateResult: optionFormat
});
$('#kt_ecommerce_edit_order_shipping_country').select2({
placeholder: "Select a country",
minimumResultsForSearch: Infinity,
templateSelection: optionFormat,
templateResult: optionFormat
});
// Init datatable --- more info on datatables: https://datatables.net/manual/
table = document.querySelector('#kt_ecommerce_edit_order_product_table');
datatable = $(table).DataTable({
'order': [],
"scrollY": "400px",
"scrollCollapse": true,
"paging": false,
"info": false,
'columnDefs': [
{ orderable: false, targets: 0 }, // Disable ordering on column 0 (checkbox)
]
});
}
// Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
var handleSearchDatatable = () => {
const filterSearch = document.querySelector('[data-kt-ecommerce-edit-order-filter="search"]');
filterSearch.addEventListener('keyup', function (e) {
datatable.search(e.target.value).draw();
});
}
// Handle shipping form
const handleShippingForm = () => {
// Select elements
const element = document.getElementById('kt_ecommerce_edit_order_shipping_form');
const checkbox = document.getElementById('same_as_billing');
// Show/hide shipping form
checkbox.addEventListener('change', e => {
if (e.target.checked) {
element.classList.add('d-none');
} else {
element.classList.remove('d-none');
}
});
}
// Handle product select
const handleProductSelect = () => {
// Define variables
const checkboxes = table.querySelectorAll('[type="checkbox"]');
const target = document.getElementById('kt_ecommerce_edit_order_selected_products');
const totalPrice = document.getElementById('kt_ecommerce_edit_order_total_price');
// Loop through all checked products
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', e => {
// Select parent row element
const parent = checkbox.closest('tr');
// Clone parent element as variable
const product = parent.querySelector('[data-kt-ecommerce-edit-order-filter="product"]').cloneNode(true);
// Create inner wrapper
const innerWrapper = document.createElement('div');
// Store inner content
const innerContent = product.innerHTML;
// Add & remove classes on parent wrapper
const wrapperClassesAdd = ['col', 'my-2'];
const wrapperClassesRemove = ['d-flex', 'align-items-center'];
// Define additional classes
const additionalClasses = ['border', 'border-dashed', 'rounded', 'p-3', 'bg-body'];
// Update parent wrapper classes
product.classList.remove(...wrapperClassesRemove);
product.classList.add(...wrapperClassesAdd);
// Remove parent default content
product.innerHTML = '';
// Update inner wrapper classes
innerWrapper.classList.add(...wrapperClassesRemove);
innerWrapper.classList.add(...additionalClasses);
// Apply stored inner content into new inner wrapper
innerWrapper.innerHTML = innerContent;
// Append new inner wrapper to parent wrapper
product.appendChild(innerWrapper);
// Get product id
const productId = product.getAttribute('data-kt-ecommerce-edit-order-id');
if (e.target.checked) {
// Add product to selected product wrapper
target.appendChild(product);
} else {
// Remove product from selected product wrapper
const selectedProduct = target.querySelector('[data-kt-ecommerce-edit-order-id="' + productId + '"]');
if (selectedProduct) {
target.removeChild(selectedProduct);
}
}
// Trigger empty message logic
detectEmpty();
});
});
// Handle empty list message
const detectEmpty = () => {
// Select elements
const message = target.querySelector('span');
const products = target.querySelectorAll('[data-kt-ecommerce-edit-order-filter="product"]');
// Detect if element is empty
if (products.length < 1) {
// Show message
message.classList.remove('d-none');
// Reset price
totalPrice.innerText = '0.00';
} else {
// Hide message
message.classList.add('d-none');
// Calculate price
calculateTotal(products);
}
}
// Calculate total cost
const calculateTotal = (products) => {
let countPrice = 0;
// Loop through all selected prodcucts
products.forEach(product => {
// Get product price
const price = parseFloat(product.querySelector('[data-kt-ecommerce-edit-order-filter="price"]').innerText);
// Add to total
countPrice = parseFloat(countPrice + price);
});
// Update total price
totalPrice.innerText = countPrice.toFixed(2);
}
}
// Submit form handler
const handleSubmit = () => {
// Define variables
let validator;
// Get elements
const form = document.getElementById('kt_ecommerce_edit_order_form');
const submitButton = document.getElementById('kt_ecommerce_edit_order_submit');
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
validator = FormValidation.formValidation(
form,
{
fields: {
'payment_method': {
validators: {
notEmpty: {
message: 'Payment method is required'
}
}
},
'shipping_method': {
validators: {
notEmpty: {
message: 'Shipping method is required'
}
}
},
'order_date': {
validators: {
notEmpty: {
message: 'Order date is required'
}
}
},
'billing_order_address_1': {
validators: {
notEmpty: {
message: 'Address line 1 is required'
}
}
},
'billing_order_postcode': {
validators: {
notEmpty: {
message: 'Postcode is required'
}
}
},
'billing_order_state': {
validators: {
notEmpty: {
message: 'State is required'
}
}
},
'billing_order_country': {
validators: {
notEmpty: {
message: 'Country is required'
}
}
}
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
// Handle submit button
submitButton.addEventListener('click', e => {
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable submit button whilst loading
submitButton.disabled = true;
setTimeout(function () {
submitButton.removeAttribute('data-kt-indicator');
Swal.fire({
text: "Form has been successfully submitted!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
}).then(function (result) {
if (result.isConfirmed) {
// Enable submit button after loading
submitButton.disabled = false;
// Redirect to customers list page
window.location = form.getAttribute("data-kt-redirect");
}
});
}, 2000);
} else {
Swal.fire({
html: "Sorry, looks like there are some errors detected, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
});
}
})
}
// Public methods
return {
init: function () {
initSaveOrder();
handleSearchDatatable();
handleShippingForm();
handleProductSelect();
handleSubmit();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTAppEcommerceSalesSaveOrder.init();
});

188
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/ecommerce/settings/settings.js Normal file
View File

@@ -0,0 +1,188 @@
"use strict";
// Class definition
var KTAppEcommerceSettings = function () {
// Shared variables
// Private functions
const initForms = () => {
const forms = [
'kt_ecommerce_settings_general_form',
'kt_ecommerce_settings_general_store',
'kt_ecommerce_settings_general_localization',
'kt_ecommerce_settings_general_products',
'kt_ecommerce_settings_general_customers',
];
// Init all forms
forms.forEach(formId => {
// Select form
const form = document.getElementById(formId);
if(!form){
return;
}
// Dynamically create validation non-empty rule
const requiredFields = form.querySelectorAll('.required');
var detectedField;
var validationFields = {
fields: {},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
// Detect required fields
requiredFields.forEach(el => {
const input = el.closest('.row').querySelector('input');
if (input) {
detectedField = input;
}
const textarea = el.closest('.row').querySelector('textarea');
if (textarea) {
detectedField = textarea;
}
const select = el.closest('.row').querySelector('select');
if (select) {
detectedField = select;
}
// Add validation rule
const name = detectedField.getAttribute('name');
validationFields.fields[name] = {
validators: {
notEmpty: {
message: el.innerText + ' is required'
}
}
}
});
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
form,
validationFields
);
// Submit button handler
const submitButton = form.querySelector('[data-kt-ecommerce-settings-type="submit"]');
submitButton.addEventListener('click', function (e) {
// Prevent default button action
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
// Show loading indication
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable button to avoid multiple click
submitButton.disabled = true;
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
setTimeout(function () {
// Remove loading indication
submitButton.removeAttribute('data-kt-indicator');
// Enable button
submitButton.disabled = false;
// Show popup confirmation
Swal.fire({
text: "Form has been successfully submitted!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
//form.submit(); // Submit form
}, 2000);
} else {
// Show popup error
Swal.fire({
text: "Oops! There are some error(s) detected.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
});
}
});
});
}
// Init Tagify
const initTagify = () => {
// Get tagify elements
const elements = document.querySelectorAll('[data-kt-ecommerce-settings-type="tagify"]');
// Init tagify
elements.forEach(element => {
new Tagify(element);
});
}
// Init Select2 with flags
const initSelect2Flags = () => {
// Format options
const optionFormat = (item) => {
if ( !item.id ) {
return item.text;
}
var span = document.createElement('span');
var template = '';
template += '<img src="' + item.element.getAttribute('data-kt-select2-country') + '" class="rounded-circle h-20px me-2" alt="image"/>';
template += item.text;
span.innerHTML = template;
return $(span);
}
// Init Select2 --- more info: https://select2.org/
$('[data-kt-ecommerce-settings-type="select2_flags"]').select2({
placeholder: "Select a country",
minimumResultsForSearch: Infinity,
templateSelection: optionFormat,
templateResult: optionFormat
});
}
// Public methods
return {
init: function () {
initForms();
initTagify();
initSelect2Flags();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTAppEcommerceSettings.init();
});

939
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/file-manager/list.js Normal file
View File

@@ -0,0 +1,939 @@
"use strict";
// Class definition
var KTFileManagerList = function () {
// Define shared variables
var datatable;
var table
// Define template element variables
var uploadTemplate;
var renameTemplate;
var actionTemplate;
var checkboxTemplate;
// Private functions
const initTemplates = () => {
uploadTemplate = document.querySelector('[data-kt-filemanager-template="upload"]');
renameTemplate = document.querySelector('[data-kt-filemanager-template="rename"]');
actionTemplate = document.querySelector('[data-kt-filemanager-template="action"]');
checkboxTemplate = document.querySelector('[data-kt-filemanager-template="checkbox"]');
}
const initDatatable = () => {
// Set date data order
const tableRows = table.querySelectorAll('tbody tr');
tableRows.forEach(row => {
const dateRow = row.querySelectorAll('td');
const dateCol = dateRow[3]; // select date from 4th column in table
const realDate = moment(dateCol.innerHTML, "DD MMM YYYY, LT").format();
dateCol.setAttribute('data-order', realDate);
});
const foldersListOptions = {
"info": false,
'order': [],
"scrollY": "700px",
"scrollCollapse": true,
"paging": false,
'ordering': false,
'columns': [
{ data: 'checkbox' },
{ data: 'name' },
{ data: 'size' },
{ data: 'date' },
{ data: 'action' },
],
'language': {
emptyTable: `<div class="d-flex flex-column flex-center">
<img src="${hostUrl}media/illustrations/sketchy-1/5.png" class="mw-400px" />
<div class="fs-1 fw-bolder text-dark">No items found.</div>
<div class="fs-6">Start creating new folders or uploading a new file!</div>
</div>`
}
};
const filesListOptions = {
"info": false,
'order': [],
'pageLength': 10,
"lengthChange": false,
'ordering': false,
'columns': [
{ data: 'checkbox' },
{ data: 'name' },
{ data: 'size' },
{ data: 'date' },
{ data: 'action' },
],
'language': {
emptyTable: `<div class="d-flex flex-column flex-center">
<img src="${hostUrl}media/illustrations/sketchy-1/5.png" class="mw-400px" />
<div class="fs-1 fw-bolder text-dark mb-4">No items found.</div>
<div class="fs-6">Start creating new folders or uploading a new file!</div>
</div>`
},
conditionalPaging: true
};
// Define datatable options to load
var loadOptions;
if (table.getAttribute('data-kt-filemanager-table') === 'folders') {
loadOptions = foldersListOptions;
} else {
loadOptions = filesListOptions;
}
// Init datatable --- more info on datatables: https://datatables.net/manual/
datatable = $(table).DataTable(loadOptions);
// Re-init functions on every table re-draw -- more info: https://datatables.net/reference/event/draw
datatable.on('draw', function () {
initToggleToolbar();
handleDeleteRows();
toggleToolbars();
resetNewFolder();
KTMenu.createInstances();
initCopyLink();
countTotalItems();
handleRename();
});
}
// Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
const handleSearchDatatable = () => {
const filterSearch = document.querySelector('[data-kt-filemanager-table-filter="search"]');
filterSearch.addEventListener('keyup', function (e) {
datatable.search(e.target.value).draw();
});
}
// Delete customer
const handleDeleteRows = () => {
// Select all delete buttons
const deleteButtons = table.querySelectorAll('[data-kt-filemanager-table-filter="delete_row"]');
deleteButtons.forEach(d => {
// Delete button on click
d.addEventListener('click', function (e) {
e.preventDefault();
// Select parent row
const parent = e.target.closest('tr');
// Get customer name
const fileName = parent.querySelectorAll('td')[1].innerText;
// SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
Swal.fire({
text: "Are you sure you want to delete " + fileName + "?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, delete!",
cancelButtonText: "No, cancel",
customClass: {
confirmButton: "btn fw-bold btn-danger",
cancelButton: "btn fw-bold btn-active-light-primary"
}
}).then(function (result) {
if (result.value) {
Swal.fire({
text: "You have deleted " + fileName + "!.",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-primary",
}
}).then(function () {
// Remove current row
datatable.row($(parent)).remove().draw();
});
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: customerName + " was not deleted.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-primary",
}
});
}
});
})
});
}
// Init toggle toolbar
const initToggleToolbar = () => {
// Toggle selected action toolbar
// Select all checkboxes
var checkboxes = table.querySelectorAll('[type="checkbox"]');
if (table.getAttribute('data-kt-filemanager-table') === 'folders') {
checkboxes = document.querySelectorAll('#kt_file_manager_list_wrapper [type="checkbox"]');
}
// Select elements
const deleteSelected = document.querySelector('[data-kt-filemanager-table-select="delete_selected"]');
// Toggle delete selected toolbar
checkboxes.forEach(c => {
// Checkbox on click event
c.addEventListener('click', function () {
console.log(c);
setTimeout(function () {
toggleToolbars();
}, 50);
});
});
// Deleted selected rows
deleteSelected.addEventListener('click', function () {
// SweetAlert2 pop up --- official docs reference: https://sweetalert2.github.io/
Swal.fire({
text: "Are you sure you want to delete selected files or folders?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, delete!",
cancelButtonText: "No, cancel",
customClass: {
confirmButton: "btn fw-bold btn-danger",
cancelButton: "btn fw-bold btn-active-light-primary"
}
}).then(function (result) {
if (result.value) {
Swal.fire({
text: "You have deleted all selected files or folders!.",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-primary",
}
}).then(function () {
// Remove all selected customers
checkboxes.forEach(c => {
if (c.checked) {
datatable.row($(c.closest('tbody tr'))).remove().draw();
}
});
// Remove header checked box
const headerCheckbox = table.querySelectorAll('[type="checkbox"]')[0];
headerCheckbox.checked = false;
});
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Selected files or folders was not deleted.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-primary",
}
});
}
});
});
}
// Toggle toolbars
const toggleToolbars = () => {
// Define variables
const toolbarBase = document.querySelector('[data-kt-filemanager-table-toolbar="base"]');
const toolbarSelected = document.querySelector('[data-kt-filemanager-table-toolbar="selected"]');
const selectedCount = document.querySelector('[data-kt-filemanager-table-select="selected_count"]');
// Select refreshed checkbox DOM elements
const allCheckboxes = table.querySelectorAll('tbody [type="checkbox"]');
// Detect checkboxes state & count
let checkedState = false;
let count = 0;
// Count checked boxes
allCheckboxes.forEach(c => {
if (c.checked) {
checkedState = true;
count++;
}
});
// Toggle toolbars
if (checkedState) {
selectedCount.innerHTML = count;
toolbarBase.classList.add('d-none');
toolbarSelected.classList.remove('d-none');
} else {
toolbarBase.classList.remove('d-none');
toolbarSelected.classList.add('d-none');
}
}
// Handle new folder
const handleNewFolder = () => {
// Select button
const newFolder = document.getElementById('kt_file_manager_new_folder');
// Handle click action
newFolder.addEventListener('click', e => {
e.preventDefault();
// Ignore if input already exist
if (table.querySelector('#kt_file_manager_new_folder_row')) {
return;
}
// Add new blank row to datatable
const tableBody = table.querySelector('tbody');
const rowElement = uploadTemplate.cloneNode(true); // Clone template markup
tableBody.prepend(rowElement);
// Define template interactive elements
const rowForm = rowElement.querySelector('#kt_file_manager_add_folder_form');
const rowButton = rowElement.querySelector('#kt_file_manager_add_folder');
const cancelButton = rowElement.querySelector('#kt_file_manager_cancel_folder');
const folderIcon = rowElement.querySelector('.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": "toastr-top-right",
"preventDuplicates": false,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
toastr.success(rowInput.value + ' was created!');
// Disable indicator
rowButton.removeAttribute("data-kt-indicator");
// Reset input
rowInput.value = '';
datatable.draw(false);
}, 2000);
} else {
// Disable indicator
rowButton.removeAttribute("data-kt-indicator");
}
});
}
});
// Handle cancel new folder button
cancelButton.addEventListener('click', e => {
e.preventDefault();
// Activate indicator
cancelButton.setAttribute("data-kt-indicator", "on");
setTimeout(function () {
// Disable indicator
cancelButton.removeAttribute("data-kt-indicator");
// Toggle toastr
toastr.options = {
"closeButton": true,
"debug": false,
"newestOnTop": false,
"progressBar": false,
"positionClass": "toastr-top-right",
"preventDuplicates": false,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
toastr.error('Cancelled new folder creation');
resetNewFolder();
}, 1000);
});
});
}
// Reset add new folder input
const resetNewFolder = () => {
const newFolderRow = table.querySelector('#kt_file_manager_new_folder_row');
if (newFolderRow) {
newFolderRow.parentNode.removeChild(newFolderRow);
}
}
// Handle rename file or folder
const handleRename = () => {
const renameButton = table.querySelectorAll('[data-kt-filemanager-table="rename"]');
renameButton.forEach(button => {
button.addEventListener('click', renameCallback);
});
}
// Rename callback
const renameCallback = (e) => {
e.preventDefault();
// Define shared value
let nameValue;
// Stop renaming if there's an input existing
if (table.querySelectorAll('#kt_file_manager_rename_input').length > 0) {
Swal.fire({
text: "Unsaved input detected. Please save or cancel the current item",
icon: "warning",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-danger"
}
});
return;
}
// Select parent row
const parent = e.target.closest('tr');
// Get name column
const nameCol = parent.querySelectorAll('td')[1];
const colIcon = nameCol.querySelector('.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": "toastr-top-right",
"preventDuplicates": false,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
toastr.error('Cancelled rename function');
}, 1000);
});
}
// Init dropzone
const initDropzone = () => {
// set the dropzone container id
const id = "#kt_modal_upload_dropzone";
const dropzone = document.querySelector(id);
// set the preview element template
var previewNode = dropzone.querySelector(".dropzone-item");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
var myDropzone = new Dropzone(id, { // Make the whole body a dropzone
url: "path/to/your/server", // Set the url for your upload script location
parallelUploads: 10,
previewTemplate: previewTemplate,
maxFilesize: 1, // Max filesize in MB
autoProcessQueue: false, // Stop auto upload
autoQueue: false, // Make sure the files aren't queued until manually added
previewsContainer: id + " .dropzone-items", // Define the container to display the previews
clickable: id + " .dropzone-select" // Define the element that should be used as click trigger to select files.
});
myDropzone.on("addedfile", function (file) {
// Hook each start button
file.previewElement.querySelector(id + " .dropzone-start").onclick = function () {
// myDropzone.enqueueFile(file); -- default dropzone function
// Process simulation for demo only
const progressBar = file.previewElement.querySelector('.progress-bar');
progressBar.style.opacity = "1";
var width = 1;
var timer = setInterval(function () {
if (width >= 100) {
myDropzone.emit("success", file);
myDropzone.emit("complete", file);
clearInterval(timer);
} else {
width++;
progressBar.style.width = width + '%';
}
}, 20);
};
const dropzoneItems = dropzone.querySelectorAll('.dropzone-item');
dropzoneItems.forEach(dropzoneItem => {
dropzoneItem.style.display = '';
});
dropzone.querySelector('.dropzone-upload').style.display = "inline-block";
dropzone.querySelector('.dropzone-remove-all').style.display = "inline-block";
});
// Hide the total progress bar when nothing's uploading anymore
myDropzone.on("complete", function (file) {
const progressBars = dropzone.querySelectorAll('.dz-complete');
setTimeout(function () {
progressBars.forEach(progressBar => {
progressBar.querySelector('.progress-bar').style.opacity = "0";
progressBar.querySelector('.progress').style.opacity = "0";
progressBar.querySelector('.dropzone-start').style.opacity = "0";
});
}, 300);
});
// Setup the buttons for all transfers
dropzone.querySelector(".dropzone-upload").addEventListener('click', function () {
// myDropzone.processQueue(); --- default dropzone process
// Process simulation for demo only
myDropzone.files.forEach(file => {
const progressBar = file.previewElement.querySelector('.progress-bar');
progressBar.style.opacity = "1";
var width = 1;
var timer = setInterval(function () {
if (width >= 100) {
myDropzone.emit("success", file);
myDropzone.emit("complete", file);
clearInterval(timer);
} else {
width++;
progressBar.style.width = width + '%';
}
}, 20);
});
});
// Setup the button for remove all files
dropzone.querySelector(".dropzone-remove-all").addEventListener('click', function () {
Swal.fire({
text: "Are you sure you would like to remove all files?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, remove it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
dropzone.querySelector('.dropzone-upload').style.display = "none";
dropzone.querySelector('.dropzone-remove-all').style.display = "none";
myDropzone.removeAllFiles(true);
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Your files was not removed!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
});
// On all files completed upload
myDropzone.on("queuecomplete", function (progress) {
const uploadIcons = dropzone.querySelectorAll('.dropzone-upload');
uploadIcons.forEach(uploadIcon => {
uploadIcon.style.display = "none";
});
});
// On all files removed
myDropzone.on("removedfile", function (file) {
if (myDropzone.files.length < 1) {
dropzone.querySelector('.dropzone-upload').style.display = "none";
dropzone.querySelector('.dropzone-remove-all').style.display = "none";
}
});
}
// Init copy link
const initCopyLink = () => {
// Select all copy link elements
const elements = table.querySelectorAll('[data-kt-filemanger-table="copy_link"]');
elements.forEach(el => {
// Define elements
const button = el.querySelector('button');
const generator = el.querySelector('[data-kt-filemanger-table="copy_link_generator"]');
const result = el.querySelector('[data-kt-filemanger-table="copy_link_result"]');
const input = el.querySelector('input');
// Click action
button.addEventListener('click', e => {
e.preventDefault();
// Reset toggle
generator.classList.remove('d-none');
result.classList.add('d-none');
var linkTimeout;
clearTimeout(linkTimeout);
linkTimeout = setTimeout(() => {
generator.classList.add('d-none');
result.classList.remove('d-none');
input.select();
}, 2000);
});
});
}
// Handle move to folder
const handleMoveToFolder = () => {
const element = document.querySelector('#kt_modal_move_to_folder');
const form = element.querySelector('#kt_modal_move_to_folder_form');
const saveButton = form.querySelector('#kt_modal_move_to_folder_submit');
const moveModal = new bootstrap.Modal(element);
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
form,
{
fields: {
'move_to_folder': {
validators: {
notEmpty: {
message: 'Please select a folder.'
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
saveButton.addEventListener('click', e => {
e.preventDefault();
saveButton.setAttribute("data-kt-indicator", "on");
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
// Simulate process for demo only
setTimeout(function () {
Swal.fire({
text: "Are you sure you would like to move to this folder",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, move it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.isConfirmed) {
form.reset(); // Reset form
moveModal.hide(); // Hide modal
toastr.options = {
"closeButton": true,
"debug": false,
"newestOnTop": false,
"progressBar": false,
"positionClass": "toastr-top-right",
"preventDuplicates": false,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
};
toastr.success('1 item has been moved.');
saveButton.removeAttribute("data-kt-indicator");
} else {
Swal.fire({
text: "Your action has been cancelled!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
saveButton.removeAttribute("data-kt-indicator");
}
});
}, 500);
} else {
saveButton.removeAttribute("data-kt-indicator");
}
});
}
});
}
// Count total number of items
const countTotalItems = () => {
const counter = document.getElementById('kt_file_manager_items_counter');
// Count total number of elements in datatable --- more info: https://datatables.net/reference/api/count()
counter.innerText = datatable.rows().count() + ' items';
}
// Public methods
return {
init: function () {
table = document.querySelector('#kt_file_manager_list');
if (!table) {
return;
}
initTemplates();
initDatatable();
initToggleToolbar();
handleSearchDatatable();
handleDeleteRows();
handleNewFolder();
initDropzone();
initCopyLink();
handleRename();
handleMoveToFolder();
countTotalItems();
KTMenu.createInstances();
}
}
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTFileManagerList.init();
});

55
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/file-manager/settings.js Normal file
View File

@@ -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();
});

294
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/inbox/compose.js Normal file
View File

@@ -0,0 +1,294 @@
"use strict";
// Class definition
var KTAppInboxCompose = function () {
// Private functions
// Init reply form
const initForm = () => {
// Set variables
const form = document.querySelector('#kt_inbox_compose_form');
const allTagify = form.querySelectorAll('[data-kt-inbox-form="tagify"]');
// Handle CC and BCC
handleCCandBCC(form);
// Handle submit form
handleSubmit(form);
// Init tagify
allTagify.forEach(tagify => {
initTagify(tagify);
});
// Init quill editor
initQuill(form);
// Init dropzone
initDropzone(form);
}
// Handle CC and BCC toggle
const handleCCandBCC = (el) => {
// Get elements
const ccElement = el.querySelector('[data-kt-inbox-form="cc"]');
const ccButton = el.querySelector('[data-kt-inbox-form="cc_button"]');
const ccClose = el.querySelector('[data-kt-inbox-form="cc_close"]');
const bccElement = el.querySelector('[data-kt-inbox-form="bcc"]');
const bccButton = el.querySelector('[data-kt-inbox-form="bcc_button"]');
const bccClose = el.querySelector('[data-kt-inbox-form="bcc_close"]');
// Handle CC button click
ccButton.addEventListener('click', e => {
e.preventDefault();
ccElement.classList.remove('d-none');
ccElement.classList.add('d-flex');
});
// Handle CC close button click
ccClose.addEventListener('click', e => {
e.preventDefault();
ccElement.classList.add('d-none');
ccElement.classList.remove('d-flex');
});
// Handle BCC button click
bccButton.addEventListener('click', e => {
e.preventDefault();
bccElement.classList.remove('d-none');
bccElement.classList.add('d-flex');
});
// Handle CC close button click
bccClose.addEventListener('click', e => {
e.preventDefault();
bccElement.classList.add('d-none');
bccElement.classList.remove('d-flex');
});
}
// Handle submit form
const handleSubmit = (el) => {
const submitButton = el.querySelector('[data-kt-inbox-form="send"]');
// Handle button click event
submitButton.addEventListener("click", function () {
// Activate indicator
submitButton.setAttribute("data-kt-indicator", "on");
// Disable indicator after 3 seconds
setTimeout(function () {
submitButton.removeAttribute("data-kt-indicator");
}, 3000);
});
}
// Init tagify
const initTagify = (el) => {
var inputElm = el;
const usersList = [
{ value: 1, name: 'Emma Smith', avatar: 'avatars/300-6.jpg', email: 'e.smith@kpmg.com.au' },
{ value: 2, name: 'Max Smith', avatar: 'avatars/300-1.jpg', email: 'max@kt.com' },
{ value: 3, name: 'Sean Bean', avatar: 'avatars/300-5.jpg', email: 'sean@dellito.com' },
{ value: 4, name: 'Brian Cox', avatar: 'avatars/300-25.jpg', email: 'brian@exchange.com' },
{ value: 5, name: 'Francis Mitcham', avatar: 'avatars/300-9.jpg', email: 'f.mitcham@kpmg.com.au' },
{ value: 6, name: 'Dan Wilson', avatar: 'avatars/300-23.jpg', email: 'dam@consilting.com' },
{ value: 7, name: 'Ana Crown', avatar: 'avatars/300-12.jpg', email: 'ana.cf@limtel.com' },
{ value: 8, name: 'John Miller', avatar: 'avatars/300-13.jpg', email: 'miller@mapple.com' }
];
function tagTemplate(tagData) {
return `
<tag title="${(tagData.title || tagData.email)}"
contenteditable='false'
spellcheck='false'
tabIndex="-1"
class="${this.settings.classNames.tag} ${tagData.class ? tagData.class : ""}"
${this.getAttributes(tagData)}>
<x title='' class='tagify__tag__removeBtn' role='button' aria-label='remove tag'></x>
<div class="d-flex align-items-center">
<div class='tagify__tag__avatar-wrap ps-0'>
<img onerror="this.style.visibility='hidden'" class="rounded-circle w-25px me-2" src="${hostUrl}media/${tagData.avatar}">
</div>
<span class='tagify__tag-text'>${tagData.name}</span>
</div>
</tag>
`
}
function suggestionItemTemplate(tagData) {
return `
<div ${this.getAttributes(tagData)}
class='tagify__dropdown__item d-flex align-items-center ${tagData.class ? tagData.class : ""}'
tabindex="0"
role="option">
${tagData.avatar ? `
<div class='tagify__dropdown__item__avatar-wrap me-2'>
<img onerror="this.style.visibility='hidden'" class="rounded-circle w-50px me-2" src="${hostUrl}media/${tagData.avatar}">
</div>` : ''
}
<div class="d-flex flex-column">
<strong>${tagData.name}</strong>
<span>${tagData.email}</span>
</div>
</div>
`
}
// initialize Tagify on the above input node reference
var tagify = new Tagify(inputElm, {
tagTextProp: 'name', // very important since a custom template is used with this property as text. allows typing a "value" or a "name" to match input with whitelist
enforceWhitelist: true,
skipInvalid: true, // do not remporarily add invalid tags
dropdown: {
closeOnSelect: false,
enabled: 0,
classname: 'users-list',
searchKeys: ['name', 'email'] // very important to set by which keys to search for suggesttions when typing
},
templates: {
tag: tagTemplate,
dropdownItem: suggestionItemTemplate
},
whitelist: usersList
})
tagify.on('dropdown:show dropdown:updated', onDropdownShow)
tagify.on('dropdown:select', onSelectSuggestion)
var addAllSuggestionsElm;
function onDropdownShow(e) {
var dropdownContentElm = e.detail.tagify.DOM.dropdown.content;
if (tagify.suggestedListItems.length > 1) {
addAllSuggestionsElm = getAddAllSuggestionsElm();
// insert "addAllSuggestionsElm" as the first element in the suggestions list
dropdownContentElm.insertBefore(addAllSuggestionsElm, dropdownContentElm.firstChild)
}
}
function onSelectSuggestion(e) {
if (e.detail.elm == addAllSuggestionsElm)
tagify.dropdown.selectAll.call(tagify);
}
// create a "add all" custom suggestion element every time the dropdown changes
function getAddAllSuggestionsElm() {
// suggestions items should be based on "dropdownItem" template
return tagify.parseTemplate('dropdownItem', [{
class: "addAll",
name: "Add all",
email: tagify.settings.whitelist.reduce(function (remainingSuggestions, item) {
return tagify.isTagDuplicate(item.value) ? remainingSuggestions : remainingSuggestions + 1
}, 0) + " Members"
}]
)
}
}
// Init quill editor
const initQuill = (el) => {
var quill = new Quill('#kt_inbox_form_editor', {
modules: {
toolbar: [
[{
header: [1, 2, false]
}],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Type your text here...',
theme: 'snow' // or 'bubble'
});
// Customize editor
const toolbar = el.querySelector('.ql-toolbar');
if (toolbar) {
const classes = ['px-5', 'border-top-0', 'border-start-0', 'border-end-0'];
toolbar.classList.add(...classes);
}
}
// Init dropzone
const initDropzone = (el) => {
// set the dropzone container id
const id = '[data-kt-inbox-form="dropzone"]';
const dropzone = el.querySelector(id);
const uploadButton = el.querySelector('[data-kt-inbox-form="dropzone_upload"]');
// set the preview element template
var previewNode = dropzone.querySelector(".dropzone-item");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
var myDropzone = new Dropzone(id, { // Make the whole body a dropzone
url: "https://preview.keenthemes.com/api/dropzone/void.php", // Set the url for your upload script location
parallelUploads: 20,
maxFilesize: 1, // Max filesize in MB
previewTemplate: previewTemplate,
previewsContainer: id + " .dropzone-items", // Define the container to display the previews
clickable: uploadButton // Define the element that should be used as click trigger to select files.
});
myDropzone.on("addedfile", function (file) {
// Hookup the start button
const dropzoneItems = dropzone.querySelectorAll('.dropzone-item');
dropzoneItems.forEach(dropzoneItem => {
dropzoneItem.style.display = '';
});
});
// Update the total progress bar
myDropzone.on("totaluploadprogress", function (progress) {
const progressBars = dropzone.querySelectorAll('.progress-bar');
progressBars.forEach(progressBar => {
progressBar.style.width = progress + "%";
});
});
myDropzone.on("sending", function (file) {
// Show the total progress bar when upload starts
const progressBars = dropzone.querySelectorAll('.progress-bar');
progressBars.forEach(progressBar => {
progressBar.style.opacity = "1";
});
});
// Hide the total progress bar when nothing"s uploading anymore
myDropzone.on("complete", function (progress) {
const progressBars = dropzone.querySelectorAll('.dz-complete');
setTimeout(function () {
progressBars.forEach(progressBar => {
progressBar.querySelector('.progress-bar').style.opacity = "0";
progressBar.querySelector('.progress').style.opacity = "0";
});
}, 300);
});
}
// Public methods
return {
init: function () {
initForm();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTAppInboxCompose.init();
});

58
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/inbox/listing.js Normal file
View File

@@ -0,0 +1,58 @@
"use strict";
// Class definition
var KTAppInboxListing = function () {
var table;
var datatable;
// Private functions
var initDatatable = function () {
// Init datatable --- more info on datatables: https://datatables.net/manual/
datatable = $(table).DataTable({
"info": false,
'order': [],
// 'paging': false,
// 'pageLength': false,
});
datatable.on('draw', function () {
handleDatatableFooter();
});
}
// Handle datatable footer spacings
var handleDatatableFooter = () => {
const footerElement = document.querySelector('#kt_inbox_listing_wrapper > .row');
const spacingClasses = ['px-9', 'pt-3', 'pb-5'];
footerElement.classList.add(...spacingClasses);
}
// Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
var handleSearchDatatable = () => {
const filterSearch = document.querySelector('[data-kt-inbox-listing-filter="search"]');
filterSearch.addEventListener('keyup', function (e) {
datatable.search(e.target.value).draw();
});
}
// Public methods
return {
init: function () {
table = document.querySelector('#kt_inbox_listing');
if (!table) {
return;
}
initDatatable();
handleSearchDatatable();
handleDatatableFooter();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTAppInboxListing.init();
});

323
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/inbox/reply.js Normal file
View File

@@ -0,0 +1,323 @@
"use strict";
// Class definition
var KTAppInboxReply = function () {
// Private functions
const handlePreviewText = () => {
// Get all messages
const accordions = document.querySelectorAll('[data-kt-inbox-message="message_wrapper"]');
accordions.forEach(accordion => {
// Set variables
const header = accordion.querySelector('[data-kt-inbox-message="header"]');
const previewText = accordion.querySelector('[data-kt-inbox-message="preview"]');
const details = accordion.querySelector('[data-kt-inbox-message="details"]');
const message = accordion.querySelector('[data-kt-inbox-message="message"]');
// Init bootstrap collapse -- more info: https://getbootstrap.com/docs/5.1/components/collapse/#via-javascript
const collapse = new bootstrap.Collapse(message, { toggle: false });
// Handle header click action
header.addEventListener('click', e => {
// Return if KTMenu or buttons are clicked
if (e.target.closest('[data-kt-menu-trigger="click"]') || e.target.closest('.btn')) {
return;
} else {
previewText.classList.toggle('d-none');
details.classList.toggle('d-none');
collapse.toggle();
}
});
});
}
// Init reply form
const initForm = () => {
// Set variables
const form = document.querySelector('#kt_inbox_reply_form');
const allTagify = form.querySelectorAll('[data-kt-inbox-form="tagify"]');
// Handle CC and BCC
handleCCandBCC(form);
// Handle submit form
handleSubmit(form);
// Init tagify
allTagify.forEach(tagify => {
initTagify(tagify);
});
// Init quill editor
initQuill(form);
// Init dropzone
initDropzone(form);
}
// Handle CC and BCC toggle
const handleCCandBCC = (el) => {
// Get elements
const ccElement = el.querySelector('[data-kt-inbox-form="cc"]');
const ccButton = el.querySelector('[data-kt-inbox-form="cc_button"]');
const ccClose = el.querySelector('[data-kt-inbox-form="cc_close"]');
const bccElement = el.querySelector('[data-kt-inbox-form="bcc"]');
const bccButton = el.querySelector('[data-kt-inbox-form="bcc_button"]');
const bccClose = el.querySelector('[data-kt-inbox-form="bcc_close"]');
// Handle CC button click
ccButton.addEventListener('click', e => {
e.preventDefault();
ccElement.classList.remove('d-none');
ccElement.classList.add('d-flex');
});
// Handle CC close button click
ccClose.addEventListener('click', e => {
e.preventDefault();
ccElement.classList.add('d-none');
ccElement.classList.remove('d-flex');
});
// Handle BCC button click
bccButton.addEventListener('click', e => {
e.preventDefault();
bccElement.classList.remove('d-none');
bccElement.classList.add('d-flex');
});
// Handle CC close button click
bccClose.addEventListener('click', e => {
e.preventDefault();
bccElement.classList.add('d-none');
bccElement.classList.remove('d-flex');
});
}
// Handle submit form
const handleSubmit = (el) => {
const submitButton = el.querySelector('[data-kt-inbox-form="send"]');
// Handle button click event
submitButton.addEventListener("click", function () {
// Activate indicator
submitButton.setAttribute("data-kt-indicator", "on");
// Disable indicator after 3 seconds
setTimeout(function () {
submitButton.removeAttribute("data-kt-indicator");
}, 3000);
});
}
// Init tagify
const initTagify = (el) => {
var inputElm = el;
const usersList = [
{ value: 1, name: 'Emma Smith', avatar: 'avatars/300-6.jpg', email: 'e.smith@kpmg.com.au' },
{ value: 2, name: 'Max Smith', avatar: 'avatars/300-1.jpg', email: 'max@kt.com' },
{ value: 3, name: 'Sean Bean', avatar: 'avatars/300-5.jpg', email: 'sean@dellito.com' },
{ value: 4, name: 'Brian Cox', avatar: 'avatars/300-25.jpg', email: 'brian@exchange.com' },
{ value: 5, name: 'Francis Mitcham', avatar: 'avatars/300-9.jpg', email: 'f.mitcham@kpmg.com.au' },
{ value: 6, name: 'Dan Wilson', avatar: 'avatars/300-23.jpg', email: 'dam@consilting.com' },
{ value: 7, name: 'Ana Crown', avatar: 'avatars/300-12.jpg', email: 'ana.cf@limtel.com' },
{ value: 8, name: 'John Miller', avatar: 'avatars/300-13.jpg', email: 'miller@mapple.com' }
];
function tagTemplate(tagData) {
return `
<tag title="${(tagData.title || tagData.email)}"
contenteditable='false'
spellcheck='false'
tabIndex="-1"
class="${this.settings.classNames.tag} ${tagData.class ? tagData.class : ""}"
${this.getAttributes(tagData)}>
<x title='' class='tagify__tag__removeBtn' role='button' aria-label='remove tag'></x>
<div class="d-flex align-items-center">
<div class='tagify__tag__avatar-wrap ps-0'>
<img onerror="this.style.visibility='hidden'" class="rounded-circle w-25px me-2" src="${hostUrl}media/${tagData.avatar}">
</div>
<span class='tagify__tag-text'>${tagData.name}</span>
</div>
</tag>
`
}
function suggestionItemTemplate(tagData) {
return `
<div ${this.getAttributes(tagData)}
class='tagify__dropdown__item d-flex align-items-center ${tagData.class ? tagData.class : ""}'
tabindex="0"
role="option">
${tagData.avatar ? `
<div class='tagify__dropdown__item__avatar-wrap me-2'>
<img onerror="this.style.visibility='hidden'" class="rounded-circle w-50px me-2" src="${hostUrl}media/${tagData.avatar}">
</div>` : ''
}
<div class="d-flex flex-column">
<strong>${tagData.name}</strong>
<span>${tagData.email}</span>
</div>
</div>
`
}
// initialize Tagify on the above input node reference
var tagify = new Tagify(inputElm, {
tagTextProp: 'name', // very important since a custom template is used with this property as text. allows typing a "value" or a "name" to match input with whitelist
enforceWhitelist: true,
skipInvalid: true, // do not remporarily add invalid tags
dropdown: {
closeOnSelect: false,
enabled: 0,
classname: 'users-list',
searchKeys: ['name', 'email'] // very important to set by which keys to search for suggesttions when typing
},
templates: {
tag: tagTemplate,
dropdownItem: suggestionItemTemplate
},
whitelist: usersList
})
tagify.on('dropdown:show dropdown:updated', onDropdownShow)
tagify.on('dropdown:select', onSelectSuggestion)
var addAllSuggestionsElm;
function onDropdownShow(e) {
var dropdownContentElm = e.detail.tagify.DOM.dropdown.content;
if (tagify.suggestedListItems.length > 1) {
addAllSuggestionsElm = getAddAllSuggestionsElm();
// insert "addAllSuggestionsElm" as the first element in the suggestions list
dropdownContentElm.insertBefore(addAllSuggestionsElm, dropdownContentElm.firstChild)
}
}
function onSelectSuggestion(e) {
if (e.detail.elm == addAllSuggestionsElm)
tagify.dropdown.selectAll.call(tagify);
}
// create a "add all" custom suggestion element every time the dropdown changes
function getAddAllSuggestionsElm() {
// suggestions items should be based on "dropdownItem" template
return tagify.parseTemplate('dropdownItem', [{
class: "addAll",
name: "Add all",
email: tagify.settings.whitelist.reduce(function (remainingSuggestions, item) {
return tagify.isTagDuplicate(item.value) ? remainingSuggestions : remainingSuggestions + 1
}, 0) + " Members"
}]
)
}
}
// Init quill editor
const initQuill = (el) => {
var quill = new Quill('#kt_inbox_form_editor', {
modules: {
toolbar: [
[{
header: [1, 2, false]
}],
['bold', 'italic', 'underline'],
['image', 'code-block']
]
},
placeholder: 'Type your text here...',
theme: 'snow' // or 'bubble'
});
// Customize editor
const toolbar = el.querySelector('.ql-toolbar');
if (toolbar) {
const classes = ['px-5', 'border-top-0', 'border-start-0', 'border-end-0'];
toolbar.classList.add(...classes);
}
}
// Init dropzone
const initDropzone = (el) => {
// set the dropzone container id
const id = '[data-kt-inbox-form="dropzone"]';
const dropzone = el.querySelector(id);
const uploadButton = el.querySelector('[data-kt-inbox-form="dropzone_upload"]');
// set the preview element template
var previewNode = dropzone.querySelector(".dropzone-item");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);
var myDropzone = new Dropzone(id, { // Make the whole body a dropzone
url: "https://preview.keenthemes.com/api/dropzone/void.php", // Set the url for your upload script location
parallelUploads: 20,
maxFilesize: 1, // Max filesize in MB
previewTemplate: previewTemplate,
previewsContainer: id + " .dropzone-items", // Define the container to display the previews
clickable: uploadButton // Define the element that should be used as click trigger to select files.
});
myDropzone.on("addedfile", function (file) {
// Hookup the start button
const dropzoneItems = dropzone.querySelectorAll('.dropzone-item');
dropzoneItems.forEach(dropzoneItem => {
dropzoneItem.style.display = '';
});
});
// Update the total progress bar
myDropzone.on("totaluploadprogress", function (progress) {
const progressBars = dropzone.querySelectorAll('.progress-bar');
progressBars.forEach(progressBar => {
progressBar.style.width = progress + "%";
});
});
myDropzone.on("sending", function (file) {
// Show the total progress bar when upload starts
const progressBars = dropzone.querySelectorAll('.progress-bar');
progressBars.forEach(progressBar => {
progressBar.style.opacity = "1";
});
});
// Hide the total progress bar when nothing"s uploading anymore
myDropzone.on("complete", function (progress) {
const progressBars = dropzone.querySelectorAll('.dz-complete');
setTimeout(function () {
progressBars.forEach(progressBar => {
progressBar.querySelector('.progress-bar').style.opacity = "0";
progressBar.querySelector('.progress').style.opacity = "0";
});
}, 300);
});
}
// Public methods
return {
init: function () {
handlePreviewText();
initForm();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTAppInboxReply.init();
});

111
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/invoices/create.js Normal file
View File

@@ -0,0 +1,111 @@
"use strict";
// Class definition
var KTAppInvoicesCreate = function () {
var form;
// Private functions
var updateTotal = function() {
var items = [].slice.call(form.querySelectorAll('[data-kt-element="items"] [data-kt-element="item"]'));
var grandTotal = 0;
var format = wNumb({
//prefix: '$ ',
decimals: 2,
thousand: ','
});
items.map(function (item) {
var quantity = item.querySelector('[data-kt-element="quantity"]');
var price = item.querySelector('[data-kt-element="price"]');
var priceValue = format.from(price.value);
priceValue = (!priceValue || priceValue < 0) ? 0 : priceValue;
var quantityValue = parseInt(quantity.value);
quantityValue = (!quantityValue || quantityValue < 0) ? 1 : quantityValue;
price.value = format.to(priceValue);
quantity.value = quantityValue;
item.querySelector('[data-kt-element="total"]').innerText = format.to(priceValue * quantityValue);
grandTotal += priceValue * quantityValue;
});
form.querySelector('[data-kt-element="sub-total"]').innerText = format.to(grandTotal);
form.querySelector('[data-kt-element="grand-total"]').innerText = format.to(grandTotal);
}
var handleEmptyState = function() {
if (form.querySelectorAll('[data-kt-element="items"] [data-kt-element="item"]').length === 0) {
var item = form.querySelector('[data-kt-element="empty-template"] tr').cloneNode(true);
form.querySelector('[data-kt-element="items"] tbody').appendChild(item);
} else {
KTUtil.remove(form.querySelector('[data-kt-element="items"] [data-kt-element="empty"]'));
}
}
var handeForm = function (element) {
// Add item
form.querySelector('[data-kt-element="items"] [data-kt-element="add-item"]').addEventListener('click', function(e) {
e.preventDefault();
var item = form.querySelector('[data-kt-element="item-template"] tr').cloneNode(true);
form.querySelector('[data-kt-element="items"] tbody').appendChild(item);
handleEmptyState();
updateTotal();
});
// Remove item
KTUtil.on(form, '[data-kt-element="items"] [data-kt-element="remove-item"]', 'click', function(e) {
e.preventDefault();
KTUtil.remove(this.closest('[data-kt-element="item"]'));
handleEmptyState();
updateTotal();
});
// Handle price and quantity changes
KTUtil.on(form, '[data-kt-element="items"] [data-kt-element="quantity"], [data-kt-element="items"] [data-kt-element="price"]', 'change', function(e) {
e.preventDefault();
updateTotal();
});
}
var initForm = function(element) {
// Due date. For more info, please visit the official plugin site: https://flatpickr.js.org/
var invoiceDate = $(form.querySelector('[name="invoice_date"]'));
invoiceDate.flatpickr({
enableTime: false,
dateFormat: "d, M Y",
});
// Due date. For more info, please visit the official plugin site: https://flatpickr.js.org/
var dueDate = $(form.querySelector('[name="invoice_due_date"]'));
dueDate.flatpickr({
enableTime: false,
dateFormat: "d, M Y",
});
}
// Public methods
return {
init: function(element) {
form = document.querySelector('#kt_invoice_form');
handeForm();
initForm();
updateTotal();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTAppInvoicesCreate.init();
});

79
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/projects/list/list.js Normal file
View File

@@ -0,0 +1,79 @@
"use strict";
// Class definition
var KTProjectList = function () {
var initChart = function () {
// init chart
var element = document.getElementById("kt_project_list_chart");
if (!element) {
return;
}
var config = {
type: 'doughnut',
data: {
datasets: [{
data: [30, 45, 25],
backgroundColor: ['#00A3FF', '#50CD89', '#E4E6EF']
}],
labels: ['Active', 'Completed', 'Yet to start']
},
options: {
chart: {
fontFamily: 'inherit'
},
borderWidth: 0,
cutout: '75%',
cutoutPercentage: 65,
responsive: true,
maintainAspectRatio: false,
title: {
display: false
},
animation: {
animateScale: true,
animateRotate: true
},
stroke: {
width: 0
},
tooltips: {
enabled: true,
intersect: false,
mode: 'nearest',
bodySpacing: 5,
yPadding: 10,
xPadding: 10,
caretPadding: 0,
displayColors: false,
backgroundColor: '#20D489',
titleFontColor: '#ffffff',
cornerRadius: 4,
footerSpacing: 0,
titleSpacing: 0
},
plugins: {
legend: {
display: false
}
}
}
};
var ctx = element.getContext('2d');
var myDoughnut = new Chart(ctx, config);
}
// Public methods
return {
init: function () {
initChart();
}
}
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTProjectList.init();
});

316
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/projects/project/project.js Normal file
View File

@@ -0,0 +1,316 @@
"use strict";
// Class definition
var KTProjectOverview = function () {
// Colors
var primary = KTUtil.getCssVariableValue('--bs-primary');
var lightPrimary = KTUtil.getCssVariableValue('--bs-primary-light');
var success = KTUtil.getCssVariableValue('--bs-success');
var lightSuccess = KTUtil.getCssVariableValue('--bs-success-light');
var gray200 = KTUtil.getCssVariableValue('--bs-gray-200');
var gray500 = KTUtil.getCssVariableValue('--bs-gray-500');
// Private functions
var initChart = function () {
// init chart
var element = document.getElementById("project_overview_chart");
if (!element) {
return;
}
var config = {
type: 'doughnut',
data: {
datasets: [{
data: [30, 45, 25],
backgroundColor: ['#00A3FF', '#50CD89', '#E4E6EF']
}],
labels: ['Active', 'Completed', 'Yet to start']
},
options: {
chart: {
fontFamily: 'inherit'
},
cutoutPercentage: 75,
responsive: true,
maintainAspectRatio: false,
cutout: '75%',
title: {
display: false
},
animation: {
animateScale: true,
animateRotate: true
},
tooltips: {
enabled: true,
intersect: false,
mode: 'nearest',
bodySpacing: 5,
yPadding: 10,
xPadding: 10,
caretPadding: 0,
displayColors: false,
backgroundColor: '#20D489',
titleFontColor: '#ffffff',
cornerRadius: 4,
footerSpacing: 0,
titleSpacing: 0
},
plugins: {
legend: {
display: false
}
}
}
};
var ctx = element.getContext('2d');
var myDoughnut = new Chart(ctx, config);
}
var initGraph = function () {
var element = document.getElementById("kt_project_overview_graph");
var height = parseInt(KTUtil.css(element, 'height'));
if (!element) {
return;
}
var options = {
series: [{
name: 'Incomplete',
data: [70, 70, 80, 80, 75, 75, 75]
}, {
name: 'Complete',
data: [55, 55, 60, 60, 55, 55, 60]
}],
chart: {
type: 'area',
height: height,
toolbar: {
show: false
}
},
plotOptions: {
},
legend: {
show: false
},
dataLabels: {
enabled: false
},
fill: {
type: 'solid',
opacity: 1
},
stroke: {
curve: 'smooth',
show: true,
width: 3,
colors: [primary, success]
},
xaxis: {
categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'],
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
style: {
colors: gray500,
fontSize: '12px'
}
},
crosshairs: {
position: 'front',
stroke: {
color: primary,
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: true,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px'
}
}
},
yaxis: {
labels: {
style: {
colors: gray500,
fontSize: '12px',
}
}
},
states: {
normal: {
filter: {
type: 'none',
value: 0
}
},
hover: {
filter: {
type: 'none',
value: 0
}
},
active: {
allowMultipleDataPointsSelection: false,
filter: {
type: 'none',
value: 0
}
}
},
tooltip: {
style: {
fontSize: '12px',
},
y: {
formatter: function (val) {
return val + " tasks"
}
}
},
colors: [lightPrimary, lightSuccess],
grid: {
borderColor: gray200,
strokeDashArray: 4,
yaxis: {
lines: {
show: true
}
}
},
markers: {
//size: 5,
colors: [lightPrimary, lightSuccess],
strokeColor: [primary, success],
strokeWidth: 3
}
};
var chart = new ApexCharts(element, options);
chart.render();
}
var initTable = function () {
var table = document.querySelector('#kt_profile_overview_table');
if (!table) {
return;
}
// Set date data order
const tableRows = table.querySelectorAll('tbody tr');
tableRows.forEach(row => {
const dateRow = row.querySelectorAll('td');
const realDate = moment(dateRow[1].innerHTML, "MMM D, YYYY").format();
dateRow[1].setAttribute('data-order', realDate);
});
// Init datatable --- more info on datatables: https://datatables.net/manual/
const datatable = $(table).DataTable({
"info": false,
'order': []
});
// Filter dropdown elements
const filterOrders = document.getElementById('kt_filter_orders');
const filterYear = document.getElementById('kt_filter_year');
// Filter by order status --- official docs reference: https://datatables.net/reference/api/search()
filterOrders.addEventListener('change', function (e) {
datatable.column(3).search(e.target.value).draw();
});
// Filter by date --- official docs reference: https://momentjs.com/docs/
var minDate;
var maxDate;
filterYear.addEventListener('change', function (e) {
const value = e.target.value;
switch (value) {
case 'thisyear': {
minDate = moment().startOf('year').format();
maxDate = moment().endOf('year').format();
datatable.draw();
break;
}
case 'thismonth': {
minDate = moment().startOf('month').format();
maxDate = moment().endOf('month').format();
datatable.draw();
break;
}
case 'lastmonth': {
minDate = moment().subtract(1, 'months').startOf('month').format();
maxDate = moment().subtract(1, 'months').endOf('month').format();
datatable.draw();
break;
}
case 'last90days': {
minDate = moment().subtract(30, 'days').format();
maxDate = moment().format();
datatable.draw();
break;
}
default: {
minDate = moment().subtract(100, 'years').startOf('month').format();
maxDate = moment().add(1, 'months').endOf('month').format();
datatable.draw();
break;
}
}
});
// Date range filter --- offical docs reference: https://datatables.net/examples/plug-ins/range_filtering.html
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var min = minDate;
var max = maxDate;
var date = parseFloat(moment(data[1]).format()) || 0; // use data for the age column
if ((isNaN(min) && isNaN(max)) ||
(isNaN(min) && date <= max) ||
(min <= date && isNaN(max)) ||
(min <= date && date <= max)) {
return true;
}
return false;
}
);
// Search --- official docs reference: https://datatables.net/reference/api/search()
var filterSearch = document.getElementById('kt_filter_search');
filterSearch.addEventListener('keyup', function (e) {
datatable.search(e.target.value).draw();
});
}
// Public methods
return {
init: function () {
initChart();
initGraph();
initTable();
}
}
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTProjectOverview.init();
});

104
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/projects/settings/settings.js Normal file
View File

@@ -0,0 +1,104 @@
"use strict";
// Class definition
var KTProjectSettings = function () {
// Private functions
var handleForm = function () {
// Init Datepicker --- For more info, please check Flatpickr's official documentation: https://flatpickr.js.org/
$("#kt_datepicker_1").flatpickr();
// Form validation
var validation;
var _form = document.getElementById('kt_project_settings_form');
var submitButton = _form.querySelector('#kt_project_settings_submit');
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
validation = FormValidation.formValidation(
_form,
{
fields: {
name: {
validators: {
notEmpty: {
message: 'Project name is required'
}
}
},
type: {
validators: {
notEmpty: {
message: 'Project type is required'
}
}
},
description: {
validators: {
notEmpty: {
message: 'Project Description is required'
}
}
},
date: {
validators: {
notEmpty: {
message: 'Due Date is required'
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
submitButton: new FormValidation.plugins.SubmitButton(),
//defaultSubmit: new FormValidation.plugins.DefaultSubmit(), // Uncomment this line to enable normal button submit after form validation
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row'
})
}
}
);
submitButton.addEventListener('click', function (e) {
e.preventDefault();
validation.validate().then(function (status) {
if (status == 'Valid') {
swal.fire({
text: "Thank you! You've updated your project settings",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-light-primary"
}
});
} else {
swal.fire({
text: "Sorry, looks like there are some errors detected, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn fw-bold btn-light-primary"
}
});
}
});
});
}
// Public methods
return {
init: function () {
handleForm();
}
}
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTProjectSettings.init();
});

38
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/projects/targets/targets.js Normal file
View File

@@ -0,0 +1,38 @@
"use strict";
// Class definition
var KTProjectTargets = function () {
var initDatatable = function () {
const table = document.getElementById('kt_profile_overview_table');
// set date data order
const tableRows = table.querySelectorAll('tbody tr');
tableRows.forEach(row => {
const dateRow = row.querySelectorAll('td');
const realDate = moment(dateRow[1].innerHTML, "MMM D, YYYY").format();
dateRow[1].setAttribute('data-order', realDate);
});
// init datatable --- more info on datatables: https://datatables.net/manual/
const datatable = $(table).DataTable({
"info": false,
'order': [],
"paging": false,
});
}
// Public methods
return {
init: function () {
initDatatable();
}
}
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTProjectTargets.init();
});

52
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/projects/users/users.js Normal file
View File

@@ -0,0 +1,52 @@
"use strict";
// Class definition
var KTProjectUsers = function () {
var initTable = function () {
// Set date data order
const table = document.getElementById('kt_project_users_table');
if (!table) {
return;
}
const tableRows = table.querySelectorAll('tbody tr');
tableRows.forEach(row => {
const dateRow = row.querySelectorAll('td');
const realDate = moment(dateRow[1].innerHTML, "MMM D, YYYY").format();
dateRow[1].setAttribute('data-order', realDate);
});
// Init datatable --- more info on datatables: https://datatables.net/manual/
const datatable = $(table).DataTable({
"info": false,
'order': [],
"columnDefs": [{
"targets": 4,
"orderable": false
}]
});
// Search --- official docs reference: https://datatables.net/reference/api/search()
var filterSearch = document.getElementById('kt_filter_search');
if (filterSearch) {
filterSearch.addEventListener('keyup', function (e) {
datatable.search(e.target.value).draw();
});
}
}
// Public methods
return {
init: function () {
initTable();
}
}
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTProjectUsers.init();
});

126
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/subscriptions/add/advanced.js Normal file
View File

@@ -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();
});

85
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/subscriptions/add/customer-select.js Normal file
View File

@@ -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();
});

157
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/subscriptions/add/products.js Normal file
View File

@@ -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();
});

189
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/subscriptions/list/export.js Normal file
View File

@@ -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();
});

277
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/subscriptions/list/list.js Normal file
View File

@@ -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();
});

74
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/support-center/general.js Normal file
View File

@@ -0,0 +1,74 @@
"use strict";
var KTSupportCenterGeneral = function() {
var menuWrapper;
var initInstance = function(element) {
var elements = element;
if ( typeof elements === 'undefined' ) {
elements = document.querySelectorAll('.highlight');
}
if ( elements && elements.length > 0 ) {
for ( var i = 0; i < elements.length; ++i ) {
var highlight = elements[i];
var copy = highlight.querySelector('.highlight-copy');
if ( copy ) {
var clipboard = new ClipboardJS(copy, {
target: function(trigger) {
var highlight = trigger.closest('.highlight');
var el = highlight.querySelector('.tab-pane.active');
if ( el == null ) {
el = highlight.querySelector('.highlight-code');
}
return el;
}
});
clipboard.on('success', function(e) {
var caption = e.trigger.innerHTML;
e.trigger.innerHTML = 'copied';
e.clearSelection();
setTimeout(function() {
e.trigger.innerHTML = caption;
}, 2000);
});
}
}
}
}
var handleMenuScroll = function() {
var menuActiveItem = menuWrapper.querySelector(".menu-link.active");
if ( !menuActiveItem ) {
return;
}
if ( KTUtil.isVisibleInContainer(menuActiveItem, menuWrapper) === true) {
return;
}
menuWrapper.scroll({
top: KTUtil.getRelativeTopPosition(menuActiveItem, menuWrapper),
behavior: 'smooth'
});
}
return {
init: function() {
initInstance();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function() {
KTSupportCenterGeneral.init();
});

219
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/support-center/tickets/create.js Normal file
View File

@@ -0,0 +1,219 @@
"use strict";
// Class definition
var KTModalNewTicket = function () {
var submitButton;
var cancelButton;
var validator;
var form;
var modal;
var modalEl;
// Init form inputs
var initForm = function() {
// Ticket attachments
// For more info about Dropzone plugin visit: https://www.dropzonejs.com/#usage
var myDropzone = new Dropzone("#kt_modal_create_ticket_attachments", {
url: "https://keenthemes.com/scripts/void.php", // Set the url for your upload script location
paramName: "file", // The name that will be used to transfer the file
maxFiles: 10,
maxFilesize: 10, // MB
addRemoveLinks: true,
accept: function(file, done) {
if (file.name == "justinbieber.jpg") {
done("Naha, you don't.");
} else {
done();
}
}
});
// Due date. For more info, please visit the official plugin site: https://flatpickr.js.org/
var dueDate = $(form.querySelector('[name="due_date"]'));
dueDate.flatpickr({
enableTime: true,
dateFormat: "d, M Y, H:i",
});
// Ticket user. For more info, plase visit the official plugin site: https://select2.org/
$(form.querySelector('[name="user"]')).on('change', function() {
// Revalidate the field when an option is chosen
validator.revalidateField('user');
});
// Ticket status. For more info, plase visit the official plugin site: https://select2.org/
$(form.querySelector('[name="status"]')).on('change', function() {
// Revalidate the field when an option is chosen
validator.revalidateField('status');
});
}
// Handle form validation and submittion
var handleForm = function() {
// Stepper custom navigation
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
validator = FormValidation.formValidation(
form,
{
fields: {
subject: {
validators: {
notEmpty: {
message: 'Ticket subject is required'
}
}
},
user: {
validators: {
notEmpty: {
message: 'Ticket user is required'
}
}
},
due_date: {
validators: {
notEmpty: {
message: 'Ticket due date is required'
}
}
},
description: {
validators: {
notEmpty: {
message: 'Target description is required'
}
}
},
'notifications[]': {
validators: {
notEmpty: {
message: 'Please select at least one notifications method'
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
// Action buttons
submitButton.addEventListener('click', function (e) {
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable button to avoid multiple click
submitButton.disabled = true;
setTimeout(function() {
submitButton.removeAttribute('data-kt-indicator');
// Enable button
submitButton.disabled = false;
// Show success message. For more info check the plugin's official documentation: https://sweetalert2.github.io/
Swal.fire({
text: "Form has been successfully submitted!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
}).then(function (result) {
if (result.isConfirmed) {
modal.hide();
}
});
//form.submit(); // Submit form
}, 2000);
} else {
// Show error message.
Swal.fire({
text: "Sorry, looks like there are some errors detected, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
});
}
});
cancelButton.addEventListener('click', function (e) {
e.preventDefault();
Swal.fire({
text: "Are you sure you would like to cancel?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, cancel it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
form.reset(); // Reset form
modal.hide(); // Hide modal
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Your form has not been cancelled!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
});
}
return {
// Public functions
init: function () {
// Elements
modalEl = document.querySelector('#kt_modal_new_ticket');
if (!modalEl) {
return;
}
modal = new bootstrap.Modal(modalEl);
form = document.querySelector('#kt_modal_new_ticket_form');
submitButton = document.getElementById('kt_modal_new_ticket_submit');
cancelButton = document.getElementById('kt_modal_new_ticket_cancel');
initForm();
handleForm();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTModalNewTicket.init();
});

166
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/permissions/add-permission.js Normal file
View File

@@ -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();
});

117
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/permissions/list.js Normal file
View File

@@ -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();
});

166
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/permissions/update-permission.js Normal file
View File

@@ -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();
});

185
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/roles/list/add.js Normal file
View File

@@ -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();
});

183
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/roles/list/update-role.js Normal file
View File

@@ -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();
});

183
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/roles/view/update-role.js Normal file
View File

@@ -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();
});

225
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/roles/view/view.js Normal file
View File

@@ -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();
});

183
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/users/list/add.js Normal file
View File

@@ -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();
});

170
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/users/list/export-users.js Normal file
View File

@@ -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();
});

315
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/users/list/table.js Normal file
View File

@@ -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();
});

81
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/users/view/add-auth-app.js Normal file
View File

@@ -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();
});

173
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/users/view/add-one-time-password.js Normal file
View File

@@ -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();
});

223
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/users/view/add-schedule.js Normal file
View File

@@ -0,0 +1,223 @@
"use strict";
// Class definition
var KTUsersAddSchedule = function () {
// Shared variables
const element = document.getElementById('kt_modal_add_schedule');
const form = element.querySelector('#kt_modal_add_schedule_form');
const modal = new bootstrap.Modal(element);
// Init add schedule modal
var initAddSchedule = () => {
// Init flatpickr -- for more info: https://flatpickr.js.org/
$("#kt_modal_add_schedule_datepicker").flatpickr({
enableTime: true,
dateFormat: "Y-m-d H:i",
});
// Init tagify -- for more info: https://yaireo.github.io/tagify/
const tagifyInput = form.querySelector('#kt_modal_add_schedule_tagify');
new Tagify(tagifyInput, {
whitelist: ["sean@dellito.com", "brian@exchange.com", "mikaela@pexcom.com", "f.mitcham@kpmg.com.au", "olivia@corpmail.com", "owen.neil@gmail.com", "dam@consilting.com", "emma@intenso.com", "ana.cf@limtel.com", "robert@benko.com", "lucy.m@fentech.com", "ethan@loop.com.au"],
maxTags: 10,
dropdown: {
maxItems: 20, // <- mixumum allowed rendered suggestions
classname: "tagify__inline__suggestions", // <- custom classname for this dropdown, so it could be targeted
enabled: 0, // <- show suggestions on focus
closeOnSelect: false // <- do not hide the suggestions dropdown once an item has been selected
}
});
// Init form validation rules. For more info check the FormValidation plugin's official documentation:https://formvalidation.io/
var validator = FormValidation.formValidation(
form,
{
fields: {
'event_datetime': {
validators: {
notEmpty: {
message: 'Event date & time is required'
}
}
},
'event_name': {
validators: {
notEmpty: {
message: 'Event name is required'
}
}
},
'event_org': {
validators: {
notEmpty: {
message: 'Event organiser is required'
}
}
},
'event_invitees': {
validators: {
notEmpty: {
message: 'Event invitees is required'
}
}
},
},
plugins: {
trigger: new FormValidation.plugins.Trigger(),
bootstrap: new FormValidation.plugins.Bootstrap5({
rowSelector: '.fv-row',
eleInvalidClass: '',
eleValidClass: ''
})
}
}
);
// Revalidate country field. For more info, plase visit the official plugin site: https://select2.org/
$(form.querySelector('[name="event_invitees"]')).on('change', function () {
// Revalidate the field when an option is chosen
validator.revalidateField('event_invitees');
});
// Close button handler
const closeButton = element.querySelector('[data-kt-users-modal-action="close"]');
closeButton.addEventListener('click', e => {
e.preventDefault();
Swal.fire({
text: "Are you sure you would like to cancel?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, cancel it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
form.reset(); // Reset form
modal.hide(); // Hide modal
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Your form has not been cancelled!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
});
// Cancel button handler
const cancelButton = element.querySelector('[data-kt-users-modal-action="cancel"]');
cancelButton.addEventListener('click', e => {
e.preventDefault();
Swal.fire({
text: "Are you sure you would like to cancel?",
icon: "warning",
showCancelButton: true,
buttonsStyling: false,
confirmButtonText: "Yes, cancel it!",
cancelButtonText: "No, return",
customClass: {
confirmButton: "btn btn-primary",
cancelButton: "btn btn-active-light"
}
}).then(function (result) {
if (result.value) {
form.reset(); // Reset form
modal.hide(); // Hide modal
} else if (result.dismiss === 'cancel') {
Swal.fire({
text: "Your form has not been cancelled!.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary",
}
});
}
});
});
// Submit button handler
const submitButton = element.querySelector('[data-kt-users-modal-action="submit"]');
submitButton.addEventListener('click', function (e) {
// Prevent default button action
e.preventDefault();
// Validate form before submit
if (validator) {
validator.validate().then(function (status) {
console.log('validated!');
if (status == 'Valid') {
// Show loading indication
submitButton.setAttribute('data-kt-indicator', 'on');
// Disable button to avoid multiple click
submitButton.disabled = true;
// Simulate form submission. For more info check the plugin's official documentation: https://sweetalert2.github.io/
setTimeout(function() {
// Remove loading indication
submitButton.removeAttribute('data-kt-indicator');
// Enable button
submitButton.disabled = false;
// Show popup confirmation
Swal.fire({
text: "Form has been successfully submitted!",
icon: "success",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
}).then(function (result) {
if (result.isConfirmed) {
modal.hide();
}
});
//form.submit(); // Submit form
}, 2000);
} else {
// Show popup warning. For more info check the plugin's official documentation: https://sweetalert2.github.io/
Swal.fire({
text: "Sorry, looks like there are some errors detected, please try again.",
icon: "error",
buttonsStyling: false,
confirmButtonText: "Ok, got it!",
customClass: {
confirmButton: "btn btn-primary"
}
});
}
});
}
});
}
return {
// Public functions
init: function () {
initAddSchedule();
}
};
}();
// On document ready
KTUtil.onDOMContentLoaded(function () {
KTUsersAddSchedule.init();
});

324
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/users/view/add-task.js Normal file
View File

@@ -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();
});

132
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/users/view/update-details.js Normal file
View File

@@ -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();
});

166
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/users/view/update-email.js Normal file
View File

@@ -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();
});

194
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/users/view/update-password.js Normal file
View File

@@ -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();
});

132
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/users/view/update-role.js Normal file
View File

@@ -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();
});

234
think-backend.greaterchiangmai.com/public/assets/js/custom/apps/user-management/users/view/view.js Normal file
View File

@@ -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();
});