Enable to paginate on mobile page

Author: Hironsan

frontend/components/containers/annotation/BottomNavigator.vue

@@ -0,0 +1,97 @@
+<template>
+  <v-bottom-navigation
+    absolute
+    hide-on-scroll
+    background-color="transparent"
+    class="elevation-0"
+  >
+    <v-btn @click="prevPage">
+      <span>Prev</span>
+      <v-icon>mdi-chevron-left</v-icon>
+    </v-btn>
+
+    <!-- <v-btn @click="approveDocument">
+      <span>Done</span>
+      <v-icon v-if="approved">
+        mdi-check
+      </v-icon>
+      <v-icon v-else>
+        mdi-close
+      </v-icon>
+    </v-btn>
+
+    <v-btn value="guide">
+      <span>Guideline</span>
+      <v-icon>mdi-book-open-outline</v-icon>
+    </v-btn> -->
+
+    <v-btn @click="nextPage">
+      <span>Next</span>
+      <v-icon>mdi-chevron-right</v-icon>
+    </v-btn>
+  </v-bottom-navigation>
+</template>
+
+<script>
+import { mapState, mapActions, mapMutations } 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
+    }
+  },
+
+  watch: {
+    page() {
+      const checkpoint = {}
+      checkpoint[this.$route.params.id] = this.page
+      localStorage.setItem('checkpoint', JSON.stringify(checkpoint))
+    },
+    offset() {
+      this.updateSearchOptions({
+        limit: this.limit,
+        offset: this.offset
+      })
+      this.getDocumentList({
+        projectId: this.$route.params.id
+      })
+    },
+    current() {
+      this.setCurrent(this.current)
+    }
+  },
+
+  created() {
+    const checkpoint = JSON.parse(localStorage.getItem('checkpoint'))
+    this.page = checkpoint[this.$route.params.id] ? checkpoint[this.$route.params.id] : 1
+    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)
+    }
+  }
+}
+</script>

frontend/components/organisms/annotation/BottomNavigator.vue

@@ -43,7 +43,7 @@ import ApproveButton from '@/components/containers/annotation/ApproveButton'
 import GuidelineButton from '@/components/containers/annotation/GuidelineButton'
 import FilterButton from '@/components/containers/annotation/FilterButton'
 import MetadataBox from '@/components/organisms/annotation/MetadataBox'
-import BottomNavigator from '@/components/organisms/annotation/BottomNavigator'
+import BottomNavigator from '@/components/containers/annotation/BottomNavigator'
 
 export default {
   layout: 'annotation',

frontend/pages/projects/_id/sequence-labeling/index.vue

@@ -35,7 +35,7 @@ import Seq2seqContainer from '~/components/containers/annotation/Seq2seqContaine
 import Paginator from '~/components/containers/annotation/Paginator'
 import GuidelineButton from '@/components/containers/annotation/GuidelineButton'
 import MetadataBox from '@/components/organisms/annotation/MetadataBox'
-import BottomNavigator from '@/components/organisms/annotation/BottomNavigator'
+import BottomNavigator from '@/components/containers/annotation/BottomNavigator'
 
 export default {
   layout: 'annotation',

frontend/pages/projects/_id/sequence-to-sequence/index.vue

@@ -35,7 +35,7 @@ import TextClassification from '~/components/containers/annotation/TextClassific
 import Paginator from '~/components/containers/annotation/Paginator'
 import GuidelineButton from '@/components/containers/annotation/GuidelineButton'
 import MetadataBox from '@/components/organisms/annotation/MetadataBox'
-import BottomNavigator from '@/components/organisms/annotation/BottomNavigator'
+import BottomNavigator from '@/components/containers/annotation/BottomNavigator'
 
 export default {
   layout: 'annotation',

frontend/pages/projects/_id/text-classification/index.vue

@@ -21,7 +21,11 @@ export const getters = {
     return state.selected.length > 0
   },
   approved(state) {
-    return state.items[state.current].annotation_approver !== null
+    if (state.items[state.current]) {
+      return state.items[state.current].annotation_approver !== null
+    } else {
+      return false
+    }
   },
   currentDoc(state) {
     return state.items[state.current]