From 383fff7b2c9c27e592dcc46e8d78eef35fe23bad Mon Sep 17 00:00:00 2001
From: Favour Olayinka <csskfaves@gmail.com>
Date: Tue, 2 Jul 2024 14:15:59 +0100
Subject: [PATCH] Fdcde undo/redo upgrade (#475)

* fix password reset bug

* implement popover and keyboard shortcuts
---
 client/components/open/editors/UndoRedo.vue | 69 ++++++++++++++++-----
 1 file changed, 55 insertions(+), 14 deletions(-)

diff --git a/client/components/open/editors/UndoRedo.vue b/client/components/open/editors/UndoRedo.vue
index ac5d8abb..3c42860a 100644
--- a/client/components/open/editors/UndoRedo.vue
+++ b/client/components/open/editors/UndoRedo.vue
@@ -3,20 +3,24 @@
     size="sm"
     orientation="horizontal"
   >
-    <UButton
-      :disabled="!canUndo"
-      color="white"
-      icon="i-material-symbols-undo"
-      class="disabled:text-gray-500"
-      @click="undo"
-    />
-    <UButton
-      :disabled="!canRedo"
-      icon="i-material-symbols-redo"
-      color="white"
-      class="disabled:text-gray-500"
-      @click="redo"
-    />
+    <UTooltip text="Undo" :shortcuts="undoShortcut" :popper="{ placement: 'left' }">
+      <UButton
+        :disabled="!canUndo"
+        color="white"
+        icon="i-material-symbols-undo"
+        class="disabled:text-gray-500"
+        @click="undo"
+      />
+    </UTooltip>
+    <UTooltip text="Redo" :shortcuts="redoShortcut" :popper="{ placement: 'right' }">
+      <UButton
+        :disabled="!canRedo"
+        icon="i-material-symbols-redo"
+        color="white"
+        class="disabled:text-gray-500"
+        @click="redo"
+      />
+    </UTooltip>
   </UButtonGroup>
 </template>
 
@@ -26,7 +30,44 @@ const workingFormStore = useWorkingFormStore()
 const { undo, redo, clearHistory } = workingFormStore
 const { canUndo, canRedo } = storeToRefs(workingFormStore)
 
+defineShortcuts({
+  meta_z: {
+    whenever: [canUndo],
+    handler: () => {
+      undo()
+    }
+  },
+  meta_shift_z: {
+    whenever: [canRedo],
+    handler: () => {
+      redo()
+    }
+  }
+})
+
+const undoShortcut = computed(() => {
+  return getOS() == 'macOS' ? ['⌘', 'Z'] : ['Ctrl', 'Z']
+})
+
+const redoShortcut = computed(() => {
+  return getOS() == 'macOS' ? ['⌘', 'Shift', 'Z'] : ['Ctrl', 'Shift', 'Z']
+})
+
 onMounted(() => {
   setTimeout(() => { clearHistory() }, 500)
 })
+
+const  getOS = ()=> {
+  if (navigator.userAgentData) {
+    // Modern method
+    return navigator.userAgentData.platform;
+  } else {
+    // Fallback for older browsers
+    const userAgent = navigator.userAgent.toLowerCase();
+    if (userAgent.indexOf("mac") > -1) return "macOS";
+    if (userAgent.indexOf("win") > -1) return "Windows";
+    if (userAgent.indexOf("linux") > -1) return "Linux";
+    return "Unknown";
+  }
+}
 </script>