Migrated progress bar and progress editor to vuex.

assets/js/pages/progresseditor.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <span @click="edit" v-if="!editmode">
+    <span @click="edit" v-if="!isEditMode">
       {{ newProgress }} pages | {{ progress }}%
     </span>
-    <span v-show="editmode">
+    <span v-show="isEditMode">
       <input type="number" @keydown.esc="cancelEdit" @keydown.enter="submit" ref="readPagesInput" min="0"
              :max="totalPages" v-model.number="newProgress"/>
     </span>
@@ -12,7 +12,8 @@
 
 <script>
 import {EventBus} from "../event-bus";
-import axios from "axios";
+import {mapActions, mapGetters} from "vuex";
+import {TURN_ON_EDIT_MODE, TURN_OFF_EDIT_MODE} from '../store/mutation-types'
 
 export default {
   name: 'Progresseditor',
@@ -26,40 +27,32 @@ export default {
   },
   data() {
     return {
-      editmode: false,
       newProgress: this.readPages
     }
   },
   computed: {
     progress() {
       return Math.round(this.newProgress / this.totalPages * 100);
-    }
-  },
-  mounted() {
+    },
+    ...mapGetters('bookprogressmodule', ['isEditMode'])
   },
   created() {
     this.newProgress = this.readPages;
   },
   methods: {
+    ...mapActions('bookprogressmodule', [
+      'updateProgress'
+    ]),
     edit: function () {
-      this.editmode = true;
+      this.$store.commit('bookprogressmodule/' + TURN_ON_EDIT_MODE);
       setTimeout(() => this.$refs.readPagesInput.focus(), 1)
     },
     cancelEdit: function () {
-      this.editmode = false;
+      this.$store.commit('bookprogressmodule/' + TURN_OFF_EDIT_MODE);
     },
     submit: function () {
-      this.editmode = false;
-      axios.post('/progress/update', {
-        bookId: this.bookId,
-        progress: this.newProgress
-      }, {
-        headers: {
-          'content-type': 'text/json'
-        }
-      }).then(() => {
-        window.EventBus.$emit('updateProgress', {readPages: this.newProgress});
-      })
+      this.$store.commit('bookprogressmodule/' + TURN_OFF_EDIT_MODE);
+      this.updateProgress({'bookId': this.bookId, 'progress': this.newProgress});
     }
   }
 }