Update annotation page to use query parameters

frontend/components/containers/annotation/BottomNavigator.vue

@@ -24,7 +24,7 @@
       <v-icon>mdi-book-open-outline</v-icon>
     </v-btn> -->
 
-    <v-btn @click="nextPage(total)">
+    <v-btn @click="nextPage">
       <span>Next</span>
       <v-icon>mdi-chevron-right</v-icon>
     </v-btn>
@@ -32,42 +32,29 @@
 </template>
 
 <script>
-import { mapState, mapActions, mapMutations, mapGetters } from 'vuex'
-
 export default {
-  computed: {
-    ...mapState('documents', ['items', 'total']),
-    ...mapGetters('pagination', ['current', 'limit', 'offset', 'page'])
-  },
-
-  watch: {
-    offset() {
-      this.updateSearchOptions({
-        limit: this.limit,
-        offset: this.offset
-      })
-      this.getDocumentList({
-        projectId: this.$route.params.id
-      })
+  props: {
+    value: {
+      type: Number,
+      default: 1,
+      required: true
     },
-    current() {
-      this.setCurrent(this.current)
+    length: {
+      type: Number,
+      default: 1,
+      required: true
     }
   },
 
-  created() {
-    this.initPage({
-      projectId: this.$route.params.id
-    })
-    this.getDocumentList({
-      projectId: this.$route.params.id
-    })
-  },
-
   methods: {
-    ...mapActions('documents', ['getDocumentList']),
-    ...mapActions('pagination', ['prevPage', 'nextPage', 'initPage']),
-    ...mapMutations('documents', ['setCurrent', 'updateSearchOptions'])
+    prevPage() {
+      const page = Math.max(this.value - 1, 1)
+      this.$emit('input', page)
+    },
+    nextPage() {
+      const page = Math.min(this.value + 1, this.length)
+      this.$emit('input', page)
+    }
   }
 }
 </script>

frontend/components/containers/annotation/Paginator.vue → frontend/components/containers/annotation/Pagination.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="v-data-footer">
     <v-edit-dialog
-      @save="changePage"
       large
       persistent
+      @save="changePageNumber"
     >
-      <span>{{ page }} of {{ total }}</span>
+      <span>{{ value }} of {{ length }}</span>
       <template v-slot:input>
         <div class="mt-4 title">
           Move Page
@@ -26,13 +26,13 @@
       <template v-slot:activator="{ on }">
         <v-btn
           v-shortkey.once="['arrowleft']"
-          :disabled="page===1"
-          v-on="on"
-          @shortkey="prevPage"
-          @click="prevPage"
+          :disabled="value===1"
           text
           fab
           small
+          v-on="on"
+          @shortkey="prevPage"
+          @click="prevPage"
         >
           <v-icon>mdi-chevron-left</v-icon>
         </v-btn>
@@ -43,13 +43,13 @@
       <template v-slot:activator="{ on }">
         <v-btn
           v-shortkey.once="['arrowright']"
-          :disabled="page===total"
-          v-on="on"
-          @shortkey="nextPage(total)"
-          @click="nextPage(total)"
+          :disabled="value===length"
           text
           fab
           small
+          v-on="on"
+          @shortkey="nextPage"
+          @click="nextPage"
         >
           <v-icon>mdi-chevron-right</v-icon>
         </v-btn>
@@ -60,65 +60,54 @@
 </template>
 
 <script>
-import { mapState, mapActions, mapMutations, mapGetters } from 'vuex'
-
 export default {
+  props: {
+    value: {
+      type: Number,
+      default: 1,
+      required: true
+    },
+    length: {
+      type: Number,
+      default: 1,
+      required: true
+    }
+  },
   data() {
     return {
       editedPage: null,
       rules: [
-        value => (value && parseInt(value, 10) > 0 && parseInt(value, 10) <= this.total) || 'Invalid page number!'
+        v => (v && parseInt(v, 10) > 0 && parseInt(v, 10) <= this.length) || 'Invalid page number!'
       ]
     }
   },
 
   computed: {
-    ...mapState('documents', ['items', 'total']),
-    ...mapGetters('pagination', ['current', 'limit', 'offset', 'page']),
     newPage: {
-      get: function () {
-        return this.page
+      get() {
+        return this.value
       },
-      set: function (newValue) {
+      set(newValue) {
         const value = parseInt(newValue, 10)
         this.editedPage = value
       }
     }
   },
 
-  watch: {
-    offset() {
-      this.updateSearchOptions({
-        limit: this.limit,
-        offset: this.offset
-      })
-      this.getDocumentList({
-        projectId: this.$route.params.id
-      })
-    },
-    current() {
-      this.setCurrent(this.current)
-    }
-  },
-
-  created() {
-    this.initPage({
-      projectId: this.$route.params.id
-    })
-    this.getDocumentList({
-      projectId: this.$route.params.id
-    })
-  },
-
   methods: {
-    ...mapActions('documents', ['getDocumentList']),
-    ...mapActions('pagination', ['prevPage', 'nextPage', 'initPage', 'movePage']),
-    ...mapMutations('documents', ['setCurrent', 'updateSearchOptions']),
-    changePage() {
-      if (!this.editedPage || this.editedPage < 0 || this.editedPage > this.total) {
+    changePageNumber() {
+      if (!this.editedPage || this.editedPage < 0 || this.editedPage > this.length) {
         return
       }
-      this.movePage(this.editedPage)
+      this.$emit('input', this.editedPage)
+    },
+    prevPage() {
+      const page = Math.max(this.value - 1, 1)
+      this.$emit('input', page)
+    },
+    nextPage() {
+      const page = Math.min(this.value + 1, this.length)
+      this.$emit('input', page)
     }
   }
 }

frontend/layouts/annotation.vue

@@ -37,7 +37,10 @@
           </v-col>
           <v-spacer />
           <v-col>
-            <paginator />
+            <pagination
+              v-model="page"
+              :length="total"
+            />
           </v-col>
         </v-row>
         <v-row justify="center">
@@ -54,18 +57,22 @@
       </v-container>
     </v-content>
 
-    <bottom-navigator class="d-flex d-sm-none" />
+    <bottom-navigator
+      v-model="page"
+      :length="total"
+      class="d-flex d-sm-none"
+    />
   </v-app>
 </template>
 
 <script>
-import { mapActions, mapGetters, mapState } from 'vuex'
+import { mapActions, mapGetters, mapState, mapMutations } from 'vuex'
 import BottomNavigator from '@/components/containers/annotation/BottomNavigator'
 import GuidelineButton from '@/components/containers/annotation/GuidelineButton'
 import MetadataBox from '@/components/organisms/annotation/MetadataBox'
 import FilterButton from '@/components/containers/annotation/FilterButton'
 import ApproveButton from '@/components/containers/annotation/ApproveButton'
-import Paginator from '~/components/containers/annotation/Paginator'
+import Pagination from '~/components/containers/annotation/Pagination'
 import TheHeader from '~/components/organisms/layout/TheHeader'
 import TheSideBar from '~/components/organisms/layout/TheSideBar'
 
@@ -76,7 +83,7 @@ export default {
     TheSideBar,
     TheHeader,
     BottomNavigator,
-    Paginator,
+    Pagination,
     GuidelineButton,
     FilterButton,
     ApproveButton,
@@ -84,14 +91,54 @@ export default {
   },
   data() {
     return {
-      drawerLeft: null
+      drawerLeft: null,
+      limit: 10
     }
   },
 
   computed: {
     ...mapGetters('projects', ['getLink', 'getCurrentUserRole']),
-    ...mapState('documents', ['loading']),
-    ...mapGetters('documents', ['currentDoc', 'approved'])
+    ...mapState('documents', ['loading', 'total']),
+    ...mapGetters('documents', ['currentDoc', 'approved']),
+    page: {
+      get() {
+        return parseInt(this.$route.query.page, 10)
+      },
+      set(newValue) {
+        const value = parseInt(newValue, 10)
+        this.$router.push({
+          query: {
+            page: value
+          }
+        })
+      }
+    },
+    offset() {
+      return Math.floor((this.page - 1) / this.limit) * this.limit
+    },
+    current() {
+      return (this.page - 1) % this.limit
+    }
+  },
+
+  watch: {
+    offset: {
+      handler() {
+        this.getDocumentList({
+          projectId: this.$route.params.id,
+          limit: this.limit,
+          offset: this.offset,
+          q: this.$route.query.q
+        })
+      },
+      immediate: true
+    },
+    current: {
+      handler() {
+        this.setCurrent(this.current)
+      },
+      immediate: true
+    }
   },
 
   created() {
@@ -99,11 +146,13 @@ export default {
   },
 
   methods: {
-    ...mapActions('projects', ['setCurrentProject'])
+    ...mapActions('projects', ['setCurrentProject']),
+    ...mapActions('documents', ['getDocumentList']),
+    ...mapMutations('documents', ['setCurrent'])
   },
 
-  validate({ params }) {
-    return /^\d+$/.test(params.id)
+  validate({ params, query }) {
+    return /^\d+$/.test(params.id) && /^\d+$/.test(query.page)
   }
 }
 </script>

frontend/store/pagination.js

@@ -1,6 +1,7 @@
 export const state = () => ({
   limit: 10,
   page: 1,
+  options: {},
   projectId: null
 })
 
@@ -34,6 +35,13 @@ export const mutations = {
   },
   setProjectId(state, projectId) {
     state.projectId = projectId
+  },
+  setOptions(state, limit, offset, q) {
+    state.options = {
+      limit,
+      offset,
+      q
+    }
   }
 }
 
@@ -55,5 +63,8 @@ export const actions = {
   initPage({ commit }, payload) {
     commit('setProjectId', payload.projectId)
     commit('loadPage')
+  },
+  setOptions({ commit }, payload) {
+    commit('setOptions', payload.limit, payload.offset, payload.q)
   }
 }