Implement initial layout of SearchResults view

diff --git a/client/components/Tag.vue b/client/components/Tag.vue
new file mode 100644 (file)
index 0000000..f5520ef
--- /dev/null
+++ b/client/components/Tag.vue
@@ -0,0 +1,11 @@
+<template>
+  <span class="rounded-full bg-theme-brand px-1 text-xs text-white"
+    >#{{ tag }}</span
+  >
+</template>
+
+<script setup>
+defineProps({
+  tag: String,
+});
+</script>

diff --git a/client/router.js b/client/router.js
index 978318e40375d6855f6f7eaa845533e27176480d..2d57e0296d2bf946ef879c66a3b4f79c4d8a6c78 100644 (file)
--- a/client/router.js
+++ b/client/router.js
@@ -25,7 +25,7 @@ const router = createRouter({
     {\r
       path: "/search",\r
       name: "search",\r
-      component: () => import("./views/Search.vue"),\r
+      component: () => import("./views/SearchResults.vue"),\r
       props: (route) => ({\r
         searchTerm: route.query[constants.params.searchTerm],\r
       }),\r

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

diff --git a/client/views/SearchResults.vue b/client/views/SearchResults.vue
new file mode 100644 (file)
index 0000000..96b1449
--- /dev/null
+++ b/client/views/SearchResults.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="max-w-[700px]">
+    <!-- Search Input -->
+    <SearchInput :initialSearchTerm="props.searchTerm" class="mb-8" />
+
+    <!-- Search Results -->
+    <div
+      v-for="result in results"
+      class="mb-4 cursor-pointer rounded px-2 py-1 hover:bg-theme-background-tint"
+    >
+      <RouterLink :to="result.href">
+        <!-- Title and Tags -->
+        <div>
+          <span v-html="result.titleHighlightsOrTitle" class="mr-2"></span>
+          <Tag v-for="tag in result.tagMatches" :tag="tag" class="mr-1" />
+        </div>
+        <!-- Last Modified and Content Highlights -->
+        <div>
+          <span class="text-theme-text-muted">{{
+            result.lastModifiedAsString
+          }}</span>
+          <span v-if="result.contentHighlights"> - </span>
+          <span
+            v-html="result.contentHighlights"
+            class="text-theme-text-muted"
+          ></span>
+        </div>
+      </RouterLink>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useToast } from "primevue/usetoast";
+import { ref, watch } from "vue";
+
+import { getNotes } from "../api.js";
+import { getUnknownServerErrorToastOptions } from "../helpers.js";
+import SearchInput from "../partials/SearchInput.vue";
+import Tag from "../components/Tag.vue";
+
+const props = defineProps({ searchTerm: String });
+
+const results = ref([]);
+const toast = useToast();
+
+function init() {
+  getNotes(props.searchTerm)
+    .then((data) => {
+      results.value = data;
+    })
+    .catch(() => {
+      toast.add(getUnknownServerErrorToastOptions());
+    });
+}
+
+watch(() => props.searchTerm, init, { immediate: true });
+</script>
+
+<style>
+.match {
+  @apply text-theme-brand;
+}
+</style>