Move modal to App.vue and bind keyboard shortcut

diff --git a/client/App.vue b/client/App.vue
index f1ef6be3108c40212b006ad19685e990a2290af8..7138e9013ef559fa65dc73945a549ec21b34964f 100644 (file)
--- a/client/App.vue
+++ b/client/App.vue
@@ -1,27 +1,43 @@
 <template>\r
   <div class="container mx-auto flex h-screen flex-col px-2 py-4">\r
     <PrimeToast />\r
-    <NavBar v-if="showNavBar" :hide-logo="!showNavBarLogo" />\r
+    <SearchModal ref="searchModal" />\r
+    <NavBar\r
+      v-if="showNavBar"\r
+      ref="navBar"\r
+      :hide-logo="!showNavBarLogo"\r
+      @toggleSearchModal="toggleSearchModal"\r
+    />\r
     <RouterView />\r
   </div>\r
 </template>\r
 \r
 <script setup>\r
-import { computed } from "vue";\r
-import { RouterView, useRoute } from "vue-router";\r
+import Mousetrap from "mousetrap";\r
 import { useToast } from "primevue/usetoast";\r
+import { computed, ref } from "vue";\r
+import { RouterView, useRoute } from "vue-router";\r
 \r
 import { getConfig } from "./api.js";\r
+import PrimeToast from "./components/PrimeToast.vue";\r
 import { useGlobalStore } from "./globalStore.js";\r
+import { getUnknownServerErrorToastOptions } from "./helpers.js";\r
 import NavBar from "./partials/NavBar.vue";\r
+import SearchModal from "./partials/SearchModal.vue";\r
 import { loadStoredToken } from "./tokenStorage.js";\r
-import PrimeToast from "./components/PrimeToast.vue";\r
-import { getUnknownServerErrorToastOptions } from "./helpers.js";\r
 \r
 const globalStore = useGlobalStore();\r
+const navBar = ref();\r
 const route = useRoute();\r
+const searchModal = ref();\r
 const toast = useToast();\r
 \r
+// '/' to search\r
+Mousetrap.bind("/", function () {\r
+  toggleSearchModal();\r
+  return false;\r
+});\r
+\r
 getConfig()\r
   .then((data) => {\r
     globalStore.authType = data.authType;\r
@@ -38,4 +54,8 @@ const showNavBar = computed(() => {
 const showNavBarLogo = computed(() => {\r
   return route.name !== "home";\r
 });\r
+\r
+function toggleSearchModal() {\r
+  searchModal.value.toggle();\r
+}\r
 </script>\r

diff --git a/client/partials/NavBar.vue b/client/partials/NavBar.vue
index 85c99beafdf67499b3acb1aecef5d0bb02f771a8..a1fe04d81b00dc2012dbfc53cbe9553d812390e3 100644 (file)
--- a/client/partials/NavBar.vue
+++ b/client/partials/NavBar.vue
@@ -1,6 +1,5 @@
 <template>\r
   <nav class="mb-12 flex justify-between align-top">\r
-    <SearchModal ref="searchModal" />\r
     <RouterLink :to="{ name: 'home' }" v-if="!hideLogo">\r
       <Logo responsive></Logo>\r
     </RouterLink>\r
@@ -19,20 +18,19 @@
 <script setup>\r
 import {\r
   mdilLogout,\r
-  mdilPlusCircle,\r
-  mdilMenu,\r
   mdilMagnify,\r
-  mdilNoteMultiple,\r
+  mdilMenu,\r
   mdilMonitor,\r
+  mdilNoteMultiple,\r
+  mdilPlusCircle,\r
 } from "@mdi/light-js";\r
-import { RouterLink, useRouter } from "vue-router";\r
 import { ref } from "vue";\r
+import { RouterLink, useRouter } from "vue-router";\r
 \r
 import CustomButton from "../components/CustomButton.vue";\r
 import Logo from "../components/Logo.vue";\r
-import { clearStoredToken } from "../tokenStorage.js";\r
 import PrimeMenu from "../components/PrimeMenu.vue";\r
-import SearchModal from "./SearchModal.vue";\r
+import { clearStoredToken } from "../tokenStorage.js";\r
 \r
 const menu = ref();\r
 const router = useRouter();\r
@@ -42,11 +40,13 @@ defineProps({
   hideLogo: Boolean,\r
 });\r
 \r
+const emit = defineEmits(["toggleSearchModal"]);\r
+\r
 const menuItems = [\r
   {\r
     label: "Search",\r
     icon: mdilMagnify,\r
-    command: () => searchModal.value.toggle(),\r
+    command: () => emit("toggleSearchModal"),\r
   },\r
   {\r
     label: "All Notes",\r

diff --git a/client/views/Note.vue b/client/views/Note.vue
index 2e2033536e38fd821bf8848b1f9dc72591f8dfd3..3a6bb943fe5ea0fd1a53b525e26c65b89900883d 100644 (file)
--- a/client/views/Note.vue
+++ b/client/views/Note.vue
@@ -107,7 +107,6 @@ const toastEditor = ref();
 
 // 'e' to edit
 Mousetrap.bind("e", function () {
-  console.log("edit");
   if (editMode.value === false) {
     editHandler();
   }