Update paginator

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() {

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>

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>