[Enhancement] keyboard shortcut

frontend/components/tasks/toolbar/ToolbarLaptop.vue

@@ -36,6 +36,11 @@
             @click:cancel="dialogClear = false"
           />
         </v-dialog>
+
+        <button-keyboard-shortcut @click:open="dialogShortcut = true" />
+        <v-dialog v-model="dialogShortcut">
+          <form-keyboard-shortcut @click:close="dialogShortcut = false" />
+        </v-dialog>
       </v-btn-toggle>
       <slot />
       <v-spacer />
@@ -61,10 +66,12 @@ import ButtonFilter from './buttons/ButtonFilter.vue'
 import ButtonGuideline from './buttons/ButtonGuideline.vue'
 import ButtonPagination from './buttons/ButtonPagination.vue'
 import ButtonReview from './buttons/ButtonReview.vue'
+import ButtonKeyboardShortcut from './buttons/ButtonKeyboardShortcut.vue'
 import FormAutoLabeling from './forms/FormAutoLabeling.vue'
 import FormClearLabel from './forms/FormClearLabel.vue'
 import FormComment from './forms/FormComment.vue'
 import FormGuideline from './forms/FormGuideline.vue'
+import FormKeyboardShortcut from './forms/FormKeyboardShortcut.vue'
 
 export default Vue.extend({
   components: {
@@ -73,12 +80,14 @@ export default Vue.extend({
     ButtonComment,
     ButtonFilter,
     ButtonGuideline,
+    ButtonKeyboardShortcut,
     ButtonPagination,
     ButtonReview,
     FormAutoLabeling,
     FormClearLabel,
     FormComment,
-    FormGuideline
+    FormGuideline,
+    FormKeyboardShortcut
   },
 
   props: {
@@ -112,6 +121,7 @@ export default Vue.extend({
       dialogClear: false,
       dialogComment: false,
       dialogGuideline: false,
+      dialogShortcut: false,
       errorMessage: ''
     }
   },

frontend/components/tasks/toolbar/buttons/ButtonKeyboardShortcut.vue

@@ -0,0 +1,24 @@
+<template>
+  <v-tooltip bottom>
+    <template #activator="{ on }">
+      <v-btn icon v-on="on" @click="$emit('click:open')">
+        <v-icon>
+          {{ mdiKeyboardOutline }}
+        </v-icon>
+      </v-btn>
+    </template>
+    <span>Keyboard Shortcut</span>
+  </v-tooltip>
+</template>
+
+<script>
+import { mdiKeyboardOutline } from '@mdi/js'
+
+export default {
+  data() {
+    return {
+      mdiKeyboardOutline
+    }
+  }
+}
+</script>

frontend/components/tasks/toolbar/forms/FormKeyboardShortcut.vue

@@ -0,0 +1,75 @@
+<template>
+  <base-card title="Keyboard Shortcut" :cancel-text="$t('generic.close')" @cancel="close">
+    <template #content>
+      <v-simple-table>
+        <template #default>
+          <thead>
+            <tr>
+              <th class="text-left">Action</th>
+              <th class="text-left">Key</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="item in items" :key="item.name">
+              <td>{{ item.name }}</td>
+              <td>
+                <v-chip
+                  v-for="key in item.key"
+                  :key="key"
+                  color="grey darken-3 white--text"
+                  class="ma-1"
+                  label
+                  small
+                  >{{ key }}</v-chip
+                >
+              </td>
+            </tr>
+          </tbody>
+        </template>
+      </v-simple-table>
+    </template>
+  </base-card>
+</template>
+
+<script>
+import BaseCard from '@/components/utils/BaseCard'
+
+export default {
+  components: {
+    BaseCard
+  },
+
+  data() {
+    return {
+      items: [
+        {
+          name: 'Jump to the first data',
+          key: ['shift', '←']
+        },
+        {
+          name: 'Jump to the last data',
+          key: ['shift', '→']
+        },
+        {
+          name: 'Move to the previous data',
+          key: ['←']
+        },
+        {
+          name: 'Move to the next data',
+          key: ['→']
+        },
+        {
+          name: 'Confirm the data',
+          key: ['enter']
+        }
+      ]
+    }
+  },
+
+  methods: {
+    close() {
+      this.$emit('click:close')
+    }
+  }
+}
+</script>