Refactor pagination

Author: Hironsan

frontend/components/containers/annotation/BottomNavigator.vue

@@ -24,42 +24,23 @@
       <v-icon>mdi-book-open-outline</v-icon>
     </v-btn> -->
 
-    <v-btn @click="nextPage">
+    <v-btn @click="nextPage(total)">
       <span>Next</span>
       <v-icon>mdi-chevron-right</v-icon>
     </v-btn>
   </v-bottom-navigation>
 </template>
 
 <script>
-import { mapState, mapActions, mapMutations } from 'vuex'
+import { mapState, mapActions, mapMutations, mapGetters } from 'vuex'
 
 export default {
-  data() {
-    return {
-      page: 1,
-      limit: 10
-    }
-  },
-
   computed: {
     ...mapState('documents', ['items', 'total']),
-
-    offset() {
-      return Math.floor((this.page - 1) / this.limit) * this.limit
-    },
-
-    current() {
-      return (this.page - 1) % this.limit
-    }
+    ...mapGetters('pagination', ['current', 'limit', 'offset', 'page'])
   },
 
   watch: {
-    page() {
-      const checkpoint = {}
-      checkpoint[this.$route.params.id] = this.page
-      localStorage.setItem('checkpoint', JSON.stringify(checkpoint))
-    },
     offset() {
       this.updateSearchOptions({
         limit: this.limit,
@@ -75,22 +56,18 @@ export default {
   },
 
   created() {
-    const checkpoint = JSON.parse(localStorage.getItem('checkpoint'))
-    this.page = checkpoint[this.$route.params.id] ? checkpoint[this.$route.params.id] : 1
+    this.initPage({
+      projectId: this.$route.params.id
+    })
     this.getDocumentList({
       projectId: this.$route.params.id
     })
   },
 
   methods: {
     ...mapActions('documents', ['getDocumentList']),
-    ...mapMutations('documents', ['setCurrent', 'updateSearchOptions']),
-    prevPage() {
-      this.page = Math.max(this.page - 1, 1)
-    },
-    nextPage() {
-      this.page = Math.min(this.page + 1, this.total)
-    }
+    ...mapActions('pagination', ['prevPage', 'nextPage', 'initPage']),
+    ...mapMutations('documents', ['setCurrent', 'updateSearchOptions'])
   }
 }
 </script>

frontend/components/containers/annotation/Paginator.vue

@@ -29,8 +29,8 @@
           fab
           small
           v-on="on"
-          @shortkey="nextPage"
-          @click="nextPage"
+          @shortkey="nextPage(total)"
+          @click="nextPage(total)"
         >
           <v-icon>mdi-chevron-right</v-icon>
         </v-btn>
@@ -42,35 +42,16 @@
 
 <script>
 import Vue from 'vue'
-import { mapState, mapActions, mapMutations } from 'vuex'
+import { mapState, mapActions, mapMutations, mapGetters } from 'vuex'
 Vue.use(require('vue-shortkey'))
 
 export default {
-  data() {
-    return {
-      page: 1,
-      limit: 10
-    }
-  },
-
   computed: {
     ...mapState('documents', ['items', 'total']),
-
-    offset() {
-      return Math.floor((this.page - 1) / this.limit) * this.limit
-    },
-
-    current() {
-      return (this.page - 1) % this.limit
-    }
+    ...mapGetters('pagination', ['current', 'limit', 'offset', 'page'])
   },
 
   watch: {
-    page() {
-      const checkpoint = {}
-      checkpoint[this.$route.params.id] = this.page
-      localStorage.setItem('checkpoint', JSON.stringify(checkpoint))
-    },
     offset() {
       this.updateSearchOptions({
         limit: this.limit,
@@ -86,22 +67,18 @@ export default {
   },
 
   created() {
-    const checkpoint = JSON.parse(localStorage.getItem('checkpoint'))
-    this.page = checkpoint[this.$route.params.id] ? checkpoint[this.$route.params.id] : 1
+    this.initPage({
+      projectId: this.$route.params.id
+    })
     this.getDocumentList({
       projectId: this.$route.params.id
     })
   },
 
   methods: {
     ...mapActions('documents', ['getDocumentList']),
-    ...mapMutations('documents', ['setCurrent', 'updateSearchOptions']),
-    prevPage() {
-      this.page = Math.max(this.page - 1, 1)
-    },
-    nextPage() {
-      this.page = Math.min(this.page + 1, this.total)
-    }
+    ...mapActions('pagination', ['prevPage', 'nextPage', 'initPage']),
+    ...mapMutations('documents', ['setCurrent', 'updateSearchOptions'])
   }
 }
 </script>

frontend/store/pagination.js

@@ -0,0 +1,55 @@
+export const state = () => ({
+  limit: 10,
+  page: 1,
+  projectId: null
+})
+
+export const getters = {
+  offset(state) {
+    return Math.floor((state.page - 1) / state.limit) * state.limit
+  },
+  current(state) {
+    return (state.page - 1) % state.limit
+  },
+  page(state) {
+    return state.page
+  },
+  limit(state) {
+    return state.limit
+  }
+}
+
+export const mutations = {
+  updatePage(state, page) {
+    state.page = page
+  },
+  savePage(state) {
+    const checkpoint = {}
+    checkpoint[state.projectId] = state.page
+    localStorage.setItem('checkpoint', JSON.stringify(checkpoint))
+  },
+  loadPage(state) {
+    const checkpoint = JSON.parse(localStorage.getItem('checkpoint'))
+    state.page = checkpoint[state.projectId] ? checkpoint[state.projectId] : 1
+  },
+  setProjectId(state, projectId) {
+    state.projectId = projectId
+  }
+}
+
+export const actions = {
+  prevPage({ commit, state }) {
+    const page = Math.max(state.page - 1, 1)
+    commit('updatePage', page)
+    commit('savePage')
+  },
+  nextPage({ commit, state }, total) {
+    const page = Math.min(state.page + 1, total)
+    commit('updatePage', page)
+    commit('savePage')
+  },
+  initPage({ commit }, payload) {
+    commit('setProjectId', payload.projectId)
+    commit('loadPage')
+  }
+}