From c80f023a1bda02e258262e98725358edaa54cf98 Mon Sep 17 00:00:00 2001
From: Hironsan <light.tree.1.13@gmail.com>
Date: Fri, 27 May 2022 14:06:01 +0900
Subject: [PATCH] Add shortcut dialog

---
 .../tasks/toolbar/ToolbarLaptop.vue           | 12 ++-
 .../buttons/ButtonKeyboardShortcut.vue        | 24 ++++++
 .../toolbar/forms/FormKeyboardShortcut.vue    | 75 +++++++++++++++++++
 3 files changed, 110 insertions(+), 1 deletion(-)
 create mode 100644 frontend/components/tasks/toolbar/buttons/ButtonKeyboardShortcut.vue
 create mode 100644 frontend/components/tasks/toolbar/forms/FormKeyboardShortcut.vue

diff --git a/frontend/components/tasks/toolbar/ToolbarLaptop.vue b/frontend/components/tasks/toolbar/ToolbarLaptop.vue
index 8e59cc4b..381621a6 100644
--- a/frontend/components/tasks/toolbar/ToolbarLaptop.vue
+++ b/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: ''
     }
   },
diff --git a/frontend/components/tasks/toolbar/buttons/ButtonKeyboardShortcut.vue b/frontend/components/tasks/toolbar/buttons/ButtonKeyboardShortcut.vue
new file mode 100644
index 00000000..63da1b87
--- /dev/null
+++ b/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>
diff --git a/frontend/components/tasks/toolbar/forms/FormKeyboardShortcut.vue b/frontend/components/tasks/toolbar/forms/FormKeyboardShortcut.vue
new file mode 100644
index 00000000..a9a5df2d
--- /dev/null
+++ b/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="primary"
+                  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>