Added search

Created search funcrionality. Added SearchResults.vue added /search path to index.ts added button to close search overlay removed extraneous log in Gallery.vue added Angle-left.svg
ethanfox · Aug 19, 2024 · 68a6a31 · 68a6a31
1 parent 6f20bb6
commit 68a6a31
Show file tree

Hide file tree

Showing 6 changed files with 350 additions and 14 deletions.
diff --git a/src/assets/Angle-left.svg b/src/assets/Angle-left.svg
diff --git a/src/components/Gallery.vue b/src/components/Gallery.vue
@@ -31,7 +31,6 @@ export default {
     const router = useRouter();
 
     const navigateToArtDetail = (artworkId) => {
-      console.log(artworkId);
       router.push({ name: "ArtDetail", params: { id: artworkId } });
     };
 

diff --git a/src/components/SearchOverlay.vue b/src/components/SearchOverlay.vue
@@ -4,16 +4,29 @@
       <div
         class="bg-neutral-950/50 backdrop fixed inset-0 flex flex-col gap-8 items-center justify-center z-[10] sm:px-8 px-8 md:px-16 lg:px-32 xl:px-64"
       >
+        <button
+          alt="Close"
+          @click="closeButtonClicked"
+          class="bg-[#b50938] text-white hover:bg-[#810032] absolute top-4 right-4 size-14 my-auto rounded-full transition-all p-4"
+        >
+          <img
+            src="../assets/close-menu.svg"
+            alt="Search"
+            class="h-full mx-auto my-auto object-contain rounded-l-sm"
+          />
+        </button>
         <!-- SEARCH -->
         <form
+          @submit.prevent="navigateToSearchResults"
           class="flex gap-4 p-2 bg-white rounded-full glass-shadow border border-neutral-100 w-full"
         >
           <div class="flex flex-col w-full pl-8">
             <label for="search" class="text-sm text-neutral-950 font-semibold"
-              >Artwork</label
+              >Search Artworks</label
             >
             <input
-              placeholder="Search by name"
+              v-model="searchQuery"
+              placeholder="Search by name, artist, year, medium, or style"
               type="text"
               id="search"
               name="search"
@@ -32,19 +45,10 @@
             />
           </button>
         </form>
-        <!-- SEARCH -->
         <!-- EXHIBITIONS -->
         <div class="px-2 w-full">
           <ExhibitionBar :exhibitions="exhibitions" />
-          <!-- <div
-            class="flex gap-4 p-2 bg-white rounded-full glass-shadow border border-neutral-100 w-full"
-          >
-            <p for="search" class="text-sm text-neutral-950 font-semibold">
-              Current Exhibitions
-            </p>
-          </div> -->
         </div>
-        <!-- EXHIBITIONS -->
       </div>
     </div>
   </transition>
@@ -56,6 +60,7 @@ import axios from "axios";
 import ExhibitionBar from "./ExhibitionBar.vue";
 import "vue3-carousel/dist/carousel.css";
 import { Carousel, Slide, Pagination, Navigation } from "vue3-carousel";
+import { useRouter } from "vue-router";
 
 export default {
   components: {
@@ -68,10 +73,18 @@ export default {
   props: {
     showSearchOverlay: Boolean,
   },
+  methods: {
+    closeButtonClicked() {
+      this.$emit("close-button-clicked");
+    },
+  },
+
   setup(props) {
+    const router = useRouter();
     const exhibitionPage = ref(1);
     const loadingExhibitions = ref(true);
     const exhibitions = ref([]);
+    const searchQuery = ref("");
     const fetchExhibitions = async () => {
       loadingExhibitions.value = true;
       try {
@@ -117,6 +130,13 @@ export default {
       }
     };
 
+    const navigateToSearchResults = () => {
+      console.log("searchQuery.value", searchQuery.value);
+      if (searchQuery.value.trim()) {
+        router.push({ name: "SearchResults", query: { q: searchQuery.value } });
+      }
+    };
+
     watchEffect(() => {
       if (props.showSearchOverlay && exhibitions.value.length === 0) {
         fetchExhibitions();
@@ -127,6 +147,8 @@ export default {
     return {
       loadingExhibitions,
       exhibitions,
+      navigateToSearchResults,
+      searchQuery,
     };
   },
 };

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router";
 import HomeView from "../views/HomeView.vue";
-import ArtDetail from "@/views/ArtDetail.vue";
+
+import SearchResults from "../views/SearchResults.vue";
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -23,6 +24,11 @@ const router = createRouter({
       name: "ArtDetail",
       component: () => import("@/views/ArtDetail.vue"),
     },
+    {
+      path: "/search",
+      name: "SearchResults",
+      component: SearchResults,
+    },
   ],
 });
 

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -36,7 +36,10 @@
         />
 
         <Gallery :artworks="artworks" @load-more="loadMoreArtworks" />
-        <SearchOverlay :showSearchOverlay="showSearchOverlay" />
+        <SearchOverlay
+          :showSearchOverlay="showSearchOverlay"
+          @close-button-clicked="showSearchOverlay = !showSearchOverlay"
+        />
         <AboutOverlay
           @close-button-clicked="showAboutOverlay = !showAboutOverlay"
           :showAboutOverlay="showAboutOverlay"