Adding first/last page buttons to Annotation page

frontend/components/containers/annotation/Pagination.vue

@@ -22,6 +22,25 @@
         />
       </template>
     </v-edit-dialog>
+    <v-tooltip bottom>
+      <template v-slot:activator="{ on }">
+        <v-btn
+          v-shortkey.once="['shift', 'arrowleft']"
+          :disabled="value===1"
+          text
+          fab
+          small
+          v-on="on"
+          @shortkey="firstPage"
+          @click="firstPage"
+        >
+          <v-icon>mdi-page-first</v-icon>
+        </v-btn>
+      </template>
+      <span>
+        <v-icon>mdi-page-first</v-icon>
+      </span>
+    </v-tooltip>
     <v-tooltip bottom>
       <template v-slot:activator="{ on }">
         <v-btn
@@ -56,6 +75,25 @@
       </template>
       <span>→</span>
     </v-tooltip>
+    <v-tooltip bottom>
+      <template v-slot:activator="{ on }">
+        <v-btn
+          v-shortkey.once="['shift', 'arrowright']"
+          :disabled="value===length || length===0"
+          text
+          fab
+          small
+          v-on="on"
+          @shortkey="lastPage"
+          @click="lastPage"
+        >
+          <v-icon>mdi-page-last</v-icon>
+        </v-btn>
+      </template>
+      <span>
+        <v-icon>mdi-page-last</v-icon>
+      </span>
+    </v-tooltip>
   </div>
 </template>
 
@@ -108,6 +146,12 @@ export default {
     nextPage() {
       const page = Math.min(this.value + 1, this.length)
       this.$emit('input', page)
+    },
+    firstPage() {
+      this.$emit('input', 1)
+    },
+    lastPage() {
+      this.$emit('input', this.length)
     }
   }
 }