From 3f4c7d03d0c64ce71df9fc9b366327cf8b965b4a Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Thu, 17 Oct 2019 14:37:34 +0900
Subject: [PATCH] Update paginator

---
 .../components/containers/EntityItemBox.vue   |  9 +++--
 frontend/components/containers/Paginator.vue  | 36 +++++++++++++++----
 .../pages/projects/_id/annotation/index.vue   |  3 +-
 3 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/frontend/components/containers/EntityItemBox.vue b/frontend/components/containers/EntityItemBox.vue
index 80cf2a02..f53a1feb 100644
--- a/frontend/components/containers/EntityItemBox.vue
+++ b/frontend/components/containers/EntityItemBox.vue
@@ -1,6 +1,6 @@
 <template>
   <entity-item-box
-    v-if="currentDoc"
+    v-if="isReady"
     :labels="items"
     :text="currentDoc.text"
     :entities="currentDoc.annotations"
@@ -20,8 +20,11 @@ export default {
   },
 
   computed: {
-    ...mapState('labels', ['items']),
-    ...mapGetters('documents', ['currentDoc'])
+    ...mapState('labels', ['items', 'loading']),
+    ...mapGetters('documents', ['currentDoc']),
+    isReady() {
+      return !!this.currentDoc && !this.loading
+    }
   },
 
   created() {
diff --git a/frontend/components/containers/Paginator.vue b/frontend/components/containers/Paginator.vue
index 17407443..bafe7693 100644
--- a/frontend/components/containers/Paginator.vue
+++ b/frontend/components/containers/Paginator.vue
@@ -1,9 +1,27 @@
 <template>
-  <v-pagination
-    v-model="page"
-    :length="total"
-    :total-visible="7"
-  />
+  <div class="v-data-footer">
+    <span>
+      {{ page }} of {{ total }}
+    </span>
+    <v-btn
+      text
+      :disabled="page===1"
+      fab
+      small
+      @click="prevPage"
+    >
+      <v-icon>mdi-chevron-left</v-icon>
+    </v-btn>
+    <v-btn
+      text
+      :disabled="page===total"
+      fab
+      small
+      @click="nextPage"
+    >
+      <v-icon>mdi-chevron-right</v-icon>
+    </v-btn>
+  </div>
 </template>
 
 <script>
@@ -59,7 +77,13 @@ export default {
 
   methods: {
     ...mapActions('documents', ['getDocumentList']),
-    ...mapMutations('documents', ['setCurrent'])
+    ...mapMutations('documents', ['setCurrent']),
+    prevPage() {
+      this.page -= 1
+    },
+    nextPage() {
+      this.page += 1
+    }
   }
 }
 </script>
diff --git a/frontend/pages/projects/_id/annotation/index.vue b/frontend/pages/projects/_id/annotation/index.vue
index 07232f0d..7093cc96 100644
--- a/frontend/pages/projects/_id/annotation/index.vue
+++ b/frontend/pages/projects/_id/annotation/index.vue
@@ -12,6 +12,8 @@
             <v-card color="transparent elevation-0">
               <v-card-title>
                 <guideline-button />
+                <v-spacer />
+                <paginator />
               </v-card-title>
             </v-card>
             <v-card>
@@ -19,7 +21,6 @@
                 <entity-item-box />
               </v-card-text>
             </v-card>
-            <paginator class="mt-3" />
           </v-flex>
         </v-layout>
       </v-container>