tiptab editor > Disable button whens saving blog

components/editor/index.vue

@@ -4,6 +4,7 @@
       <template #saveButton>
         <button
           @click="emitUpdate"
+          :disabled="isSaving"
           class="button is-success button-save">
           Save
         </button>
@@ -51,6 +52,12 @@ export default {
     BubbleMenu,
     BasicMenu
   },
+  props: {
+    isSaving: {
+      required: false,
+      default: false
+    }
+  },
   data(){
     return {
       editor: null

pages/instructor/blog/_id/edit.vue

@@ -51,6 +51,7 @@
         <editor
           @editorMounted="initBlogContent"
           @editorUpdated="updateBlog"
+          :isSaving="isSaving"
         />
       </div>
     </div>
@@ -68,7 +69,8 @@ export default {
   },
   computed : {
     ...mapState({
-      blog: ({instructor}) => instructor.blog.item
+      blog: ({instructor}) => instructor.blog.item,
+      isSaving: ({instructor}) => instructor.blog.isSaving
     })
   },
   async fetch({params, store}){
@@ -81,15 +83,16 @@ export default {
     //   }
     // }
     initBlogContent(initContent) {
-      debugger
       if (this.blog && this.blog.content) {
         initContent(this.blog.content)
       }
     },
     async updateBlog(blogData) {
       try{
-        await this.$store.dispatch('instructor/blog/updateBlog', {data: blogData, id: this.blog._id})
-        this.$toasted.success('Blog Updated!', {duration: 2000})
+        if (!this.isSaving) {
+          await this.$store.dispatch('instructor/blog/updateBlog', {data: blogData, id: this.blog._id})
+          this.$toasted.success('Blog Updated!', {duration: 2000})
+        }
       }catch(error){
         this.$toasted.error('Blog cannot be saved!', {duration: 2000})
       }

store/instructor/blog.js

@@ -1,15 +1,19 @@
 export const state = () => ({
-  item: {}
+  item: {},
+  isSaving: false
 })
 
 export const actions = {
   async createBlog(_, blogData) {
     try {
+      commit('setIsSaving', true)
       console.log('instructor/blog.js actions createBlog call axios.$post->blogData')
       const blog = await this.$axios.$post('/api/v1/blogs', blogData)
       console.log('instructor/blog.js actions createBlog done axios.$post->blogData')
+      commit('setIsSaving', false)
       return blog
     } catch (error) {
+      commit('setIsSaving', false)
       return error
     }
   },
@@ -43,5 +47,8 @@ export const actions = {
 export const mutations = {
   setBlog(state, blog) {
     state.item = blog
+  },
+  setIsSaving(state, isSaving) {
+    state.isSaving = isSaving
   }
 }