Add new Vue.js component to handle submit and cancel buttons

1 files changed, 30 insertions, 0 deletions

diff --git a/assets/js/components/submit-cancel.js b/assets/js/components/submit-cancel.js
new file mode 100644
index 00000000..1950c060
--- /dev/null
+++ b/assets/js/components/submit-cancel.js
@@ -0,0 +1,30 @@
+Vue.component('submit-cancel', {
+    props: ['labelButton', 'labelOr', 'labelCancel', 'callback'],
+    template: '<div class="form-actions">' +
+              '<button type="button" class="btn btn-blue" @click="onSubmit" :disabled="isLoading">' +
+              '<span v-show="isLoading"><i class="fa fa-spinner fa-pulse"></i> </span>' +
+              '{{ labelButton }}' +
+              '</button> ' +
+              '{{ labelOr }} <a href="#" v-on:click.prevent="onCancel">{{ labelCancel }}</a>' +
+              '</div>'
+    ,
+    data: function () {
+        return {
+            loading: false
+        };
+    },
+    computed: {
+        isLoading: function () {
+            return this.loading;
+        }
+    },
+    methods: {
+        onSubmit: function () {
+            this.loading = true;
+            this.callback();
+        },
+        onCancel: function () {
+            _KB.get('Popover').close();
+        }
+    }
+});