VueJS code for make buttons that do Ajax Calls

README.md

usage

<ajax-button class="btn btn-outline-primary"
             url="{{ route('test') }}" method="post"
             success-title="Success!"
             success-message="..."
             error-title="Oops, seems there is an error!"
             error-message="more info...">
    test success
</ajax-button>

<ajax-button class="btn btn-primary"
             url="{{ route('test') }}" method="post"
             v-bind:confirm="true">
    With confirm modal
</ajax-button>

requirement

SweetAlert2 : https://github.com/limonte/sweetalert2

sugested

Axios Progress Bar : https://github.com/rikmms/progress-bar-4-axios

AjaxButton.vue

<template>
    <button v-on:click="click">
        <slot></slot>
    </button>
</template>

<script>
    export default {
        props: {
            'url': {type: String},
            'method': {default: 'post', type: String},
            'params': {default: null, type: Array},
            'confirm': {default: false, type: Boolean},

            // Confirm modal
            'confirmType': {default: 'warning', type: String},
            'confirmTitle': {default: 'Are you sure?', type: String},
            'confirmMessage': {default: '', type: String},
            'confirmButton': {default: 'Yes', type: String},
            'cancelButton': {default: 'Cancel', type: String},

            // Success result modal
            'successTitle': {default: '', type: String},
            'successMessage': {default: '', type: String},
            'successType': {default: 'success', type: String},
            'successTitleFromResponse': {default: false, type: Boolean},
            'successMessageFromResponse': {default: false, type: Boolean},
            'refreshWhenClosingSuccessModal': {default: false, type: Boolean},

            // Error result modal
            'errorTitle': {default: '', type: String},
            'errorMessage': {default: '', type: String},
            'errorType': {default: 'error', type: String},

            'showResult': {default: true, type: Boolean},
            'redirectToLocation': {default: false, type: Boolean}
        },

        methods: {
            click: function () {
                if (this.confirm) {
                    this.displayConfirmModal()
                } else {
                    this.doCall()
                }
            },

            displayConfirmModal: function () {
                swal({
                    title: this.confirmTitle,
                    text: this.confirmMessage,
                    type: this.confirmType,
                    showCancelButton: true,
                    confirmButtonText: this.confirmButton,
                    cancelButtonText: this.cancelButton
                }).then((result) => {
                    if (result.value) {
                        this.doCall()
                    }
                })
            },

            doCall: function () {
                let vue = this;
                this.$el.disabled = true;

                axios({
                    method: this.method,
                    url: this.url,
                    data: this.params,
                    maxRedirects: 0
                }).then(function (response) {
                    vue.$el.disabled = false;

                    if (vue.redirectToLocation && response.headers['location']) {
                        window.location.href = response.headers['location'];

                        return;
                    }

                    let title = null ;
                    let message = null ;

                    if (vue.successTitleFromResponse && response.data.data.title) {
                        title = response.data.data.title;
                    }
                    if (vue.successMessageFromResponse && response.data.data.message) {
                        message = response.data.data.message;
                    }

                    if (vue.successTitle || title) {
                        swal({
                            title: title || vue.successTitle,
                            text: message || vue.successMessage,
                            type: vue.successType,
                        }).then(() => {
                            if (vue.refreshWhenClosingSuccessModal) {
                                location.reload();
                            }
                        });

                        return;
                    }

                    if (vue.showResult && response.data) {
                        swal(response.data)
                    }
                }).catch(function (error) {
                    vue.$el.disabled = false;

                    if (vue.errorTitle) {
                        swal({
                            title: vue.errorTitle,
                            text: vue.errorMessage,
                            type: vue.errorType,
                        });

                        return;
                    }

                    console.error(error);
                });
            }
        }
    }
</script>