Added search page

diff --git a/client/partials/SearchInput.vue b/client/partials/SearchInput.vue
index ed008c88f92760473af8feedf29309db51abd572..b8107978187a1479081e6f84b79d957ca69986c1 100644 (file)
--- a/client/partials/SearchInput.vue
+++ b/client/partials/SearchInput.vue
@@ -1,6 +1,6 @@
 <template>
   <form class="flex w-full max-w-[500px]" @submit.prevent="search">
-    <TextInput placeholder="Search" class="rounded-r-none" />
+    <TextInput v-model="searchTerm" placeholder="Search" class="rounded-r-none" />
     <CustomButton
       :iconPath="mdilMagnify"
       iconSize="1.75em"
@@ -11,11 +11,20 @@
 
 <script setup>
 import { mdilMagnify } from "@mdi/light-js";
+import { useRouter } from "vue-router";
+import { ref } from "vue";
+import * as constants from "../constants";
 
 import CustomButton from "../components/CustomButton.vue";
 import TextInput from "../components/TextInput.vue";
 
+const router = useRouter();
+const searchTerm = ref("");
+
 function search() {
-  console.log("searching..."); // TODO: Implement search functionality
+  router.push({
+    name: "search",
+    query: { [constants.params.searchTerm]: searchTerm.value },
+  });
 }
 </script>

diff --git a/client/router.js b/client/router.js
index 6ddb090d5abfbf4d470e9014cd0e1f8f14cc5aa8..16649af8607f08f6ea008763a96afe027cdff431 100644 (file)
--- a/client/router.js
+++ b/client/router.js
@@ -14,7 +14,7 @@ const router = createRouter({
       path: "/login",\r
       name: "login",\r
       component: () => import("./views/LogIn.vue"),\r
-      props: (route) => ({ [constants.params.redirect]: route.query.redirect }),\r
+      props: (route) => ({ redirect: route.query[constants.params.redirect] }),\r
     },\r
     {\r
       path: "/note/:title",\r
@@ -22,6 +22,14 @@ const router = createRouter({
       component: () => import("./views/Note.vue"),\r
       props: true,\r
     },\r
+    {\r
+      path: "/search",\r
+      name: "search",\r
+      component: () => import("./views/Search.vue"),\r
+      props: (route) => ({\r
+        searchTerm: route.query[constants.params.searchTerm],\r
+      }),\r
+    },\r
   ],\r
 });\r
 \r

diff --git a/client/views/Search.vue b/client/views/Search.vue
new file mode 100644 (file)
index 0000000..8acc67b
--- /dev/null
+++ b/client/views/Search.vue
@@ -0,0 +1,7 @@
+<template>
+  <div>{{ searchTerm }}</div>
+</template>
+
+<script setup>
+defineProps({ searchTerm: String });
+</script>