Migrated progress bar and progress editor to vuex.

assets/js/pages/booklisting.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <input type="text" class="form-control" v-model="searchTerm" @keydown.enter="search"/>
+    <input type="text" class="form-control" placeholder="search by title" v-model="searchTerm" @keydown.enter="search"/>
     <table class="table">
       <thead>
       <tr>
@@ -58,7 +58,6 @@ export default {
       'findAll'
     ]),
     search: function () {
-      this.$store.commit('increment')
       this.updateHistory();
       this.findAll(this.searchTerm);
     },

assets/js/pages/booklistingheader.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
-    <h1 v-if="searchTitle" v-html="'Book search: '+searchTitle"></h1>
+    <h1 v-if="isSearching" v-html="'Book search: '+searchTitle"></h1>
     <h1 v-else>Book list</h1>
   </div>
 </template>
 
 <script>
-import {mapState} from "vuex";
+import {mapGetters, mapState} from "vuex";
 
 export default {
   name: 'BookListingHeader',
@@ -17,6 +17,7 @@ export default {
   },
   computed: {
     ...mapState('booksmodule', ['searchTitle']),
+    ...mapGetters('booksmodule', ['isSearching'])
   },
 }
 </script>

assets/js/pages/progressbar.vue

@@ -1,41 +1,31 @@
 <template>
   <div>
     <div class="progress" style="height: 2px;">
-      <div class="progress-bar" role="progressbar" :style="{width:progress+'%'}"></div>
-      <div class="progress-bar bg-secondary bg-opacity-10" role="progressbar" :style="{width:100-progress+'%'}"></div>
+      <div class="progress-bar" role="progressbar" :style="{width:progressPercent+'%'}"></div>
+      <div class="progress-bar bg-secondary bg-opacity-10" role="progressbar"
+           :style="{width:100-progressPercent+'%'}"></div>
     </div>
   </div>
 </template>
 
 <script>
-import {EventBus} from "../event-bus";
+import {UPDATING_PROGRESS_SUCCESS} from '../store/mutation-types'
+import {mapState} from "vuex";
 
 export default {
   name: 'Progressbar',
-  components: {
-    EventBus
-  },
   props: {
     totalPages: Number,
     readPages: Number
   },
-  data() {
-    return {
-      newProgress: this.readPages
-    }
-  },
   computed: {
-    progress() {
-      return Math.round(this.newProgress / this.totalPages * 100);
+    ...mapState('bookprogressmodule', ['progress']),
+    progressPercent() {
+      return Math.round(this.progress / this.totalPages * 100);
     }
   },
-  mounted() {
-  },
   created() {
-    window.EventBus.$on('updateProgress', (data) => {
-      this.newProgress = data.readPages;
-    });
+    this.$store.commit('bookprogressmodule/' + UPDATING_PROGRESS_SUCCESS, this.readPages);
   },
-  methods: {}
 }
 </script>

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});
     }
   }
 }