initial commit

think-backend.greaterchiangmai.com/public/assets/js/custom/apps/customers/view/add-payment.js

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