From e0797983b94b93f0f778771a0bde2c8c731d80fb Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Mon, 2 Dec 2019 15:21:18 +0900
Subject: [PATCH] Fix #261

---
 .../containers/annotation/Paginator.vue       | 55 +++++++++++++++++--
 frontend/store/pagination.js                  |  4 ++
 2 files changed, 53 insertions(+), 6 deletions(-)

diff --git a/frontend/components/containers/annotation/Paginator.vue b/frontend/components/containers/annotation/Paginator.vue
index bf8c541d..fcd60402 100644
--- a/frontend/components/containers/annotation/Paginator.vue
+++ b/frontend/components/containers/annotation/Paginator.vue
@@ -1,8 +1,27 @@
 <template>
   <div class="v-data-footer">
-    <span>
-      {{ page }} of {{ total }}
-    </span>
+    <v-edit-dialog
+      large
+      persistent
+      @save="changePage"
+    >
+      <span>{{ page }} of {{ total }}</span>
+      <template v-slot:input>
+        <div class="mt-4 title">
+          Move Page
+        </div>
+      </template>
+      <template v-slot:input>
+        <v-text-field
+          v-model="newPage"
+          :rules="rules"
+          label="Edit"
+          single-line
+          counter
+          autofocus
+        />
+      </template>
+    </v-edit-dialog>
     <v-tooltip bottom>
       <template v-slot:activator="{ on }">
         <v-btn
@@ -46,9 +65,27 @@ import { mapState, mapActions, mapMutations, mapGetters } from 'vuex'
 Vue.use(require('vue-shortkey'))
 
 export default {
+  data() {
+    return {
+      editedPage: null,
+      rules: [
+        value => (value && parseInt(value, 10) > 0 && parseInt(value, 10) <= this.total) || 'Invalid page number!'
+      ]
+    }
+  },
+
   computed: {
     ...mapState('documents', ['items', 'total']),
-    ...mapGetters('pagination', ['current', 'limit', 'offset', 'page'])
+    ...mapGetters('pagination', ['current', 'limit', 'offset', 'page']),
+    newPage: {
+      get: function () {
+        return this.page
+      },
+      set: function (newValue) {
+        const value = parseInt(newValue, 10)
+        this.editedPage = value
+      }
+    }
   },
 
   watch: {
@@ -77,8 +114,14 @@ export default {
 
   methods: {
     ...mapActions('documents', ['getDocumentList']),
-    ...mapActions('pagination', ['prevPage', 'nextPage', 'initPage']),
-    ...mapMutations('documents', ['setCurrent', 'updateSearchOptions'])
+    ...mapActions('pagination', ['prevPage', 'nextPage', 'initPage', 'movePage']),
+    ...mapMutations('documents', ['setCurrent', 'updateSearchOptions']),
+    changePage() {
+      if (!this.editedPage || this.editedPage < 0 || this.editedPage > this.total) {
+        return
+      }
+      this.movePage(this.editedPage)
+    }
   }
 }
 </script>
diff --git a/frontend/store/pagination.js b/frontend/store/pagination.js
index 9c41940a..b292175b 100644
--- a/frontend/store/pagination.js
+++ b/frontend/store/pagination.js
@@ -48,6 +48,10 @@ export const actions = {
     commit('updatePage', page)
     commit('savePage')
   },
+  movePage({ commit }, newPage) {
+    commit('updatePage', newPage)
+    commit('savePage')
+  },
   initPage({ commit }, payload) {
     commit('setProjectId', payload.projectId)
     commit('loadPage')