Migrated progress bar and progress editor to vuex.

assets/js/api/book.js

@@ -6,5 +6,18 @@ export default {
             params: {title: searchTitle},
             headers: {'accept': 'application/json'}
         })
+    },
+    bookUpdateProgress(bookId, progress) {
+        console.info(bookId);
+        console.info(progress);
+        return axios.post('/progress/update', {
+            bookId: bookId,
+            progress: progress
+        }, {
+            headers: {
+                'content-type': 'text/json'
+            }
+        })
     }
+
 }

assets/js/files.js

@@ -2,8 +2,9 @@ import Vue from 'vue';
 import Files from "./pages/files";
 import Progressbar from "./pages/progressbar";
 import Progresseditor from "./pages/progresseditor";
+import store from "./store/index";
 
 Vue.component('Files', Files);
 Vue.component('Progressbar', Progressbar);
 Vue.component('Progresseditor', Progresseditor);
-new Vue().$mount('#app');
+new Vue({store}).$mount('#app');

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" role="progressbar" :style="{width:progressPercent+'%'}"></div>
-      <div class="progress-bar bg-secondary bg-opacity-10" role="progressbar" :style="{width:100-progress+'%'}"></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() {
+    ...mapState('bookprogressmodule', ['progress']),
-      return Math.round(this.newProgress / this.totalPages * 100);
+    progressPercent() {
+      return Math.round(this.progress / this.totalPages * 100);
     }
   },
-  mounted() {
-  },
   created() {
-    window.EventBus.$on('updateProgress', (data) => {
+    this.$store.commit('bookprogressmodule/' + UPDATING_PROGRESS_SUCCESS, this.readPages);
-      this.newProgress = data.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);
-    }
+    },
-  },
+    ...mapGetters('bookprogressmodule', ['isEditMode'])
-  mounted() {
   },
   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;
+      this.$store.commit('bookprogressmodule/' + TURN_OFF_EDIT_MODE);
-      axios.post('/progress/update', {
+      this.updateProgress({'bookId': this.bookId, 'progress': this.newProgress});
-        bookId: this.bookId,
-        progress: this.newProgress
-      }, {
-        headers: {
-          'content-type': 'text/json'
-        }
-      }).then(() => {
-        window.EventBus.$emit('updateProgress', {readPages: this.newProgress});
-      })
     }
   }
 }

assets/js/store/index.js

@@ -1,20 +1,14 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import booksmodule from './modules/books';
+import bookprogressmodule from './modules/bookprogress';
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-    state: {
-        count: 0
-    },
-    mutations: {
-        increment(state) {
-            state.count++
-        }
-    },
     modules:{
-        booksmodule
+        booksmodule,
+        bookprogressmodule
     }
 })
 

assets/js/store/modules/bookprogress.js

@@ -0,0 +1,70 @@
+import BookApi from "../../api/book";
+import {
+    UPDATING_PROGRESS,
+    UPDATING_PROGRESS_SUCCESS,
+    UPDATING_PROGRESS_ERROR,
+    TURN_ON_EDIT_MODE,
+    TURN_OFF_EDIT_MODE
+} from '../mutation-types.js'
+
+export default {
+    namespaced: true,
+    state: {
+        isUpdating: false,
+        error: null,
+        progress: null,
+        editMode: false
+    },
+    getters: {
+        isEditMode(state) {
+            return state.editMode;
+        },
+        isUpdating(state) {
+            return state.isUpdating;
+        },
+        hasError(state) {
+            return state.error !== null;
+        },
+        error(state) {
+            return state.error;
+        },
+        progress(state) {
+            return state.progress;
+        },
+    },
+    mutations: {
+        [UPDATING_PROGRESS](state) {
+            state.isUpdating = true;
+            state.error = null;
+            state.progress = null;
+        },
+        [UPDATING_PROGRESS_SUCCESS](state, progress) {
+            state.isLoading = false;
+            state.error = null;
+            state.progress = progress;
+        },
+        [UPDATING_PROGRESS_ERROR](state, error) {
+            state.isLoading = false;
+            state.error = error;
+            state.progress = null;
+        },
+        [TURN_ON_EDIT_MODE](state) {
+            state.editMode = true;
+        },
+        [TURN_OFF_EDIT_MODE](state) {
+            state.editMode = false;
+        }
+    },
+    actions: {
+        async updateProgress({commit}, data) {
+            commit(UPDATING_PROGRESS);
+            try {
+                let response = await BookApi.bookUpdateProgress(data.bookId, data.progress);
+                commit(UPDATING_PROGRESS_SUCCESS, response.data.progress);
+                return response.data;
+            } catch (error) {
+                commit(UPDATING_PROGRESS_ERROR, error);
+            }
+        },
+    }
+};

assets/js/store/modules/books.js

@@ -3,7 +3,9 @@ import BookApi from "../../api/book";
 const
     FETCHING_BOOKS = "FETCHING_BOOKS",
     FETCHING_BOOKS_SUCCESS = "FETCHING_BOOKS_SUCCESS",
-    FETCHING_BOOKS_ERROR = "FETCHING_BOOKS_ERROR";
+    FETCHING_BOOKS_ERROR = "FETCHING_BOOKS_ERROR",
+    SETTING_SEARCH_TERM = "SETTING_SEARCH_TERM"
+;
 
 export default {
     namespaced: true,
@@ -28,9 +30,15 @@ export default {
         },
         books(state) {
             return state.books;
+        },
+        isSearching(state) {
+            return !!state.searchTitle;
         }
     },
     mutations: {
+        [SETTING_SEARCH_TERM](state, searchTitle) {
+            state.searchTitle = searchTitle;
+        },
         [FETCHING_BOOKS](state) {
             state.isLoading = true;
             state.error = null;
@@ -51,8 +59,7 @@ export default {
         async findAll({commit, state}, searchTitle) {
             commit(FETCHING_BOOKS);
             try {
-                state.searchTitle = searchTitle;
+                commit(SETTING_SEARCH_TERM, searchTitle);
-                console.info(state.searchTitle);
                 let response = await BookApi.booksFetch(state.searchTitle);
                 commit(FETCHING_BOOKS_SUCCESS, response.data);
                 return response.data;

assets/js/store/mutation-types.js

@@ -0,0 +1,7 @@
+export const
+    UPDATING_PROGRESS = "UPDATING_PROGRESS",
+    UPDATING_PROGRESS_SUCCESS = "UPDATING_PROGRESS_SUCCESS",
+    UPDATING_PROGRESS_ERROR = "UPDATING_PROGRESS_ERROR",
+    TURN_ON_EDIT_MODE = "TURN_ON_EDIT_MODE",
+    TURN_OFF_EDIT_MODE = "TURN_OFF_EDIT_MODE"
+;