From: Adam Dullage <redacted>
Date: Mon, 6 May 2024 16:57:03 +0000 (+0100)
Subject: Move modal to App.vue and bind keyboard shortcut
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=0b1b14c83b0e7cbc609b367c0207a8981e5b7193;p=flatnotes.git

Move modal to App.vue and bind keyboard shortcut
---

diff --git a/client/App.vue b/client/App.vue
index f1ef6be..7138e90 100644
--- a/client/App.vue
+++ b/client/App.vue
@@ -1,27 +1,43 @@
 <template>
   <div class="container mx-auto flex h-screen flex-col px-2 py-4">
     <PrimeToast />
-    <NavBar v-if="showNavBar" :hide-logo="!showNavBarLogo" />
+    <SearchModal ref="searchModal" />
+    <NavBar
+      v-if="showNavBar"
+      ref="navBar"
+      :hide-logo="!showNavBarLogo"
+      @toggleSearchModal="toggleSearchModal"
+    />
     <RouterView />
   </div>
 </template>
 
 <script setup>
-import { computed } from "vue";
-import { RouterView, useRoute } from "vue-router";
+import Mousetrap from "mousetrap";
 import { useToast } from "primevue/usetoast";
+import { computed, ref } from "vue";
+import { RouterView, useRoute } from "vue-router";
 
 import { getConfig } from "./api.js";
+import PrimeToast from "./components/PrimeToast.vue";
 import { useGlobalStore } from "./globalStore.js";
+import { getUnknownServerErrorToastOptions } from "./helpers.js";
 import NavBar from "./partials/NavBar.vue";
+import SearchModal from "./partials/SearchModal.vue";
 import { loadStoredToken } from "./tokenStorage.js";
-import PrimeToast from "./components/PrimeToast.vue";
-import { getUnknownServerErrorToastOptions } from "./helpers.js";
 
 const globalStore = useGlobalStore();
+const navBar = ref();
 const route = useRoute();
+const searchModal = ref();
 const toast = useToast();
 
+// '/' to search
+Mousetrap.bind("/", function () {
+  toggleSearchModal();
+  return false;
+});
+
 getConfig()
   .then((data) => {
     globalStore.authType = data.authType;
@@ -38,4 +54,8 @@ const showNavBar = computed(() => {
 const showNavBarLogo = computed(() => {
   return route.name !== "home";
 });
+
+function toggleSearchModal() {
+  searchModal.value.toggle();
+}
 </script>
diff --git a/client/partials/NavBar.vue b/client/partials/NavBar.vue
index 85c99be..a1fe04d 100644
--- a/client/partials/NavBar.vue
+++ b/client/partials/NavBar.vue
@@ -1,6 +1,5 @@
 <template>
   <nav class="mb-12 flex justify-between align-top">
-    <SearchModal ref="searchModal" />
     <RouterLink :to="{ name: 'home' }" v-if="!hideLogo">
       <Logo responsive></Logo>
     </RouterLink>
@@ -19,20 +18,19 @@
 <script setup>
 import {
   mdilLogout,
-  mdilPlusCircle,
-  mdilMenu,
   mdilMagnify,
-  mdilNoteMultiple,
+  mdilMenu,
   mdilMonitor,
+  mdilNoteMultiple,
+  mdilPlusCircle,
 } from "@mdi/light-js";
-import { RouterLink, useRouter } from "vue-router";
 import { ref } from "vue";
+import { RouterLink, useRouter } from "vue-router";
 
 import CustomButton from "../components/CustomButton.vue";
 import Logo from "../components/Logo.vue";
-import { clearStoredToken } from "../tokenStorage.js";
 import PrimeMenu from "../components/PrimeMenu.vue";
-import SearchModal from "./SearchModal.vue";
+import { clearStoredToken } from "../tokenStorage.js";
 
 const menu = ref();
 const router = useRouter();
@@ -42,11 +40,13 @@ defineProps({
   hideLogo: Boolean,
 });
 
+const emit = defineEmits(["toggleSearchModal"]);
+
 const menuItems = [
   {
     label: "Search",
     icon: mdilMagnify,
-    command: () => searchModal.value.toggle(),
+    command: () => emit("toggleSearchModal"),
   },
   {
     label: "All Notes",
diff --git a/client/views/Note.vue b/client/views/Note.vue
index 2e20335..3a6bb94 100644
--- 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();
   }