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