Implement null term validation in SearchInput

diff --git a/client/partials/SearchInput.vue b/client/partials/SearchInput.vue
index b8107978187a1479081e6f84b79d957ca69986c1..4fa4ddf98c7acd986a88e58cf33030333a6892cf 100644 (file)
--- a/client/partials/SearchInput.vue
+++ b/client/partials/SearchInput.vue
@@ -1,6 +1,10 @@
 <template>
   <form class="flex w-full max-w-[500px]" @submit.prevent="search">
-    <TextInput v-model="searchTerm" placeholder="Search" class="rounded-r-none" />
+    <TextInput
+      v-model="searchTerm"
+      placeholder="Search"
+      class="rounded-r-none"
+    />
     <CustomButton
       :iconPath="mdilMagnify"
       iconSize="1.75em"
@@ -11,20 +15,27 @@
 
 <script setup>
 import { mdilMagnify } from "@mdi/light-js";
-import { useRouter } from "vue-router";
+import { useToast } from "primevue/usetoast";
 import { ref } from "vue";
+import { useRouter } from "vue-router";
 import * as constants from "../constants";
 
 import CustomButton from "../components/CustomButton.vue";
 import TextInput from "../components/TextInput.vue";
+import { getToastOptions } from "../helpers.js";
 
 const router = useRouter();
 const searchTerm = ref("");
+const toast = useToast();
 
 function search() {
-  router.push({
-    name: "search",
-    query: { [constants.params.searchTerm]: searchTerm.value },
-  });
+  if (searchTerm.value) {
+    router.push({
+      name: "search",
+      query: { [constants.params.searchTerm]: searchTerm.value },
+    });
+  } else {
+    toast.add(getToastOptions("Error", "Please enter a search term", true));
+  }
 }
 </script>