From 9cdbcf9bd3674800c48a05df74c238b2f73606a3 Mon Sep 17 00:00:00 2001
From: Paul Elliott <paul.elliott@kitware.com>
Date: Mon, 9 Oct 2023 17:01:36 -0400
Subject: [PATCH] feat(keyboard-shortcuts): add modal showing keybindings

---
 src/components/App.vue               |  4 ++++
 src/components/KeyboardShortcuts.vue | 32 ++++++++++++++++++++++++++++
 src/components/Settings.vue          | 16 ++++++++++++++
 src/store/keyboard-shortcuts.ts      | 13 +++++++++++
 4 files changed, 65 insertions(+)
 create mode 100644 src/components/KeyboardShortcuts.vue
 create mode 100644 src/store/keyboard-shortcuts.ts

diff --git a/src/components/App.vue b/src/components/App.vue
index 170094057..03e20525c 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -197,6 +197,8 @@
         <closeable-dialog v-model="dataSecurityDialog">
           <data-security-box />
         </closeable-dialog>
+
+        <keyboard-shortcuts />
       </v-app>
       <persistent-overlay
         :disabled="!dragHover"
@@ -254,6 +256,7 @@ import PersistentOverlay from './PersistentOverlay.vue';
 import DataSecurityBox from './DataSecurityBox.vue';
 import VolViewFullLogo from './icons/VolViewFullLogo.vue';
 import VolViewLogo from './icons/VolViewLogo.vue';
+import KeyboardShortcuts from './KeyboardShortcuts.vue';
 import {
   DataSource,
   fileToDataSource,
@@ -349,6 +352,7 @@ export default defineComponent({
     Settings,
     SaveSession,
     PersistentOverlay,
+    KeyboardShortcuts,
   },
 
   setup() {
diff --git a/src/components/KeyboardShortcuts.vue b/src/components/KeyboardShortcuts.vue
new file mode 100644
index 000000000..ea48166ec
--- /dev/null
+++ b/src/components/KeyboardShortcuts.vue
@@ -0,0 +1,32 @@
+<template>
+  <closeable-dialog v-model="keyboardStore.settingsOpen">
+    <v-card>
+      <v-card-title class="d-flex flex-row align-center"
+        >Keyboard Shortcuts</v-card-title
+      >
+      <v-table class="pa-4">
+        <thead>
+          <th class="text-left">Command</th>
+          <th class="text-left">Keybinding</th>
+        </thead>
+        <tbody>
+          <tr v-for="[action, key] in bindings" :key="action">
+            <td>{{ action }}</td>
+            <td>{{ key }}</td>
+          </tr>
+        </tbody>
+      </v-table>
+    </v-card>
+  </closeable-dialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { actionToKey } from '@/src/composables/useKeyboardShortcuts';
+import { useKeyboardShortcutsStore } from '@/src/store/keyboard-shortcuts';
+import CloseableDialog from './CloseableDialog.vue';
+
+const keyboardStore = useKeyboardShortcutsStore();
+
+const bindings = computed(() => Object.entries(actionToKey.value));
+</script>
diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index 35c80669a..016780231 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -19,6 +19,15 @@
         hide-details
       ></v-switch>
 
+      <v-btn
+        class="my-2"
+        @click="openKeyboardShortcuts"
+        prepend-icon="mdi-keyboard"
+        color="secondary"
+      >
+        Keyboard Shortcuts
+      </v-btn>
+
       <v-divider class="mt-2 mb-6"></v-divider>
       <dicom-web-settings />
 
@@ -33,6 +42,7 @@ import { defineComponent, ref, watch } from 'vue';
 import { useTheme } from 'vuetify';
 import { useLocalStorage } from '@vueuse/core';
 
+import { useKeyboardShortcutsStore } from '@/src/store/keyboard-shortcuts';
 import DicomWebSettings from './dicom-web/DicomWebSettings.vue';
 import ServerSettings from './ServerSettings.vue';
 import { DarkTheme, LightTheme, ThemeStorageKey } from '../constants';
@@ -58,10 +68,16 @@ export default defineComponent({
       errorReportingStore.disableReporting = !enabled;
     });
 
+    const keyboardStore = useKeyboardShortcutsStore();
+    const openKeyboardShortcuts = () => {
+      keyboardStore.settingsOpen = true;
+    };
+
     return {
       dark,
       reportingEnabled,
       errorReportingConfigured,
+      openKeyboardShortcuts,
     };
   },
   components: {
diff --git a/src/store/keyboard-shortcuts.ts b/src/store/keyboard-shortcuts.ts
new file mode 100644
index 000000000..93d825c38
--- /dev/null
+++ b/src/store/keyboard-shortcuts.ts
@@ -0,0 +1,13 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+
+export const useKeyboardShortcutsStore = defineStore(
+  'keyboardShortcuts',
+  () => {
+    const settingsOpen = ref(false);
+
+    return {
+      settingsOpen,
+    };
+  }
+);