Add search bar & Search Page (#46)

* Create search bar & search page

* Fix formatting & styling issues

Co-authored-by: TSL <[email protected]>
Co-authored-by: Phil Sturgeon <[email protected]>

.gitignore

@@ -20,3 +20,5 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw?
+
+# VS Code settings

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.13.0",
+    "algoliasearch": "^4.1.0",
     "core-js": "^3.6.4",
     "vue": "^2.6.11",
     "vue-analytics": "^5.22.1",

src/components/Navigation.vue

@@ -33,6 +33,9 @@
           </li>
         </ul>
         <ul class="flex flex-col lg:flex-row list-none lg:ml-auto">
+          <li class="mr-3">
+            <search-bar v-show="this.$route.path.toLowerCase().indexOf('search') === -1"></search-bar>
+          </li>
           <li>
             <t-dropdown
               text="I am a..."
@@ -105,7 +108,10 @@
 
 <script>
 export default {
-  name: "Navigation"
+  name: "Navigation",
+  components: {
+      SearchBar: () => import('./search/SearchBar')
+  }
 };
 </script>
 

src/components/search/SearchBar.vue

@@ -0,0 +1,52 @@
+<template>
+    <form v-on:submit.prevent="onSubmit">
+        <div class="flex justify-center">
+            <div class="pt-2 relative mx-auto text-gray-600">
+                <input
+                    class="border-2 border-gray-300 bg-white h-8 px-5 pr-16 rounded-md text-sm focus:outline-none"
+                    type="search"
+                    name="search"
+                    placeholder="Search"
+                    v-model="searchTerm"
+                />
+                <button type="submit" class="absolute right-0 top-0 mt-4 mr-4">
+                    <svg
+                        class="text-gray-600 h-4 w-4 fill-current"
+                        xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        version="1.1"
+                        id="Capa_1"
+                        x="0px"
+                        y="0px"
+                        viewBox="0 0 56.966 56.966"
+                        style="enable-background:new 0 0 56.966 56.966;"
+                        xml:space="preserve"
+                        width="512px"
+                        height="512px"
+                    >
+                        <path
+                            d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z"
+                        />
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </form>
+</template>
+
+<script>
+export default {
+    name: 'SearchBar',
+    data: () => ({
+        searchTerm: ''
+    }),
+    methods: {
+        onSubmit() {
+            this.$router.push({
+                name: 'SearchQuery',
+                params: { searchTerm: this.searchTerm }
+            })
+        }
+    }
+}
+</script>

src/router.js

@@ -6,7 +6,7 @@ Vue.use(Router)
 const router = new Router({
   mode: 'history',
   base: process.env.BASE_URL,
-  scrollBehavior: () => ({y: 0}),
+  scrollBehavior: () => ({ y: 0 }),
   routes: [
     {
       path: '/',
@@ -62,6 +62,18 @@ const router = new Router({
       component: () =>
         import(/* webpackChunkName: "CategoryShow" */ './views/categories/Show'),
     },
+    {
+      path: '/search',
+      name: 'SearchIndex',
+      component: () =>
+        import(/* webpackChunkName: "SearchIndex" */ './views/search/Index'),
+    },
+    {
+      path: '/search/:searchTerm',
+      name: 'SearchQuery',
+      component: () =>
+        import(/* webpackChunkName: "SearchQuery" */ './views/search/Query'),
+    },
   ],
 })
 

src/views/search/Index.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class="text-gray-800 antialiased">
+        <navigation />
+
+        <search-main />
+
+        <page-footer />
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'SearchIndex',
+
+    metaInfo() {
+        return {
+            title: `Search for the actions`
+        }
+    },
+
+    components: {
+        Navigation: () => import('./../../components/Navigation'),
+        PageFooter: () => import('./../../components/Footer'),
+        SearchMain: () => import('./SearchMain')
+    },
+
+    data: () => ({
+        publicPath: process.env.BASE_URL
+    })
+}
+</script>

src/views/search/Query.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="text-gray-800 antialiased">
+        <navigation />
+
+        <search-main v-bind:searchTerm="searchTerm" />
+
+        <page-footer />
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'SearchQuery',
+
+    metaInfo() {
+        return {
+            title: `Search results for ${this.searchTerm}`
+        }
+    },
+
+    components: {
+        Navigation: () => import('./../../components/Navigation'),
+        PageFooter: () => import('./../../components/Footer'),
+        SearchMain: () => import('./SearchMain')
+    },
+
+    data: () => ({
+        publicPath: process.env.BASE_URL
+    }),
+
+    computed: {
+        searchTerm: function() { return this.$route.params.searchTerm;}
+    }
+}
+</script>