From 12961955c066d594193a297515ad05cd32abbd09 Mon Sep 17 00:00:00 2001
From: Xevion <xevioni@yandex.com>
Date: Wed, 5 Aug 2020 18:28:25 -0500
Subject: [PATCH] fix scenes error, add basic search results panel, move users
 to SearchResults route on typing,

---
 client/src/App.vue                      | 44 +++++++++++++++----------
 client/src/components/Episode.vue       | 14 ++++----
 client/src/components/SearchResults.vue | 28 ++++++++++++++++
 client/src/router.js                    |  6 ++++
 4 files changed, 68 insertions(+), 24 deletions(-)
 create mode 100644 client/src/components/SearchResults.vue

diff --git a/client/src/App.vue b/client/src/App.vue
index 2750a35..2911051 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,29 +1,30 @@
 <template>
     <div id="app">
-        <b-container :fluid="true" class="py-3 px-lg-5 px-md-4">
-            <b-row class="my-3 pl-1">
-                <b-col lg="3" xl="2" md="12">
-                    <ais-instant-search index-name="prod_THEOFFICEQUOTES" :search-client="searchClient">
-                        <ais-search-box placeholder="Search here…"/>
-                    </ais-instant-search>
-                </b-col>
-            </b-row>
-            <b-row>
-                <b-col lg="3" xl="2" md="12">
-                    <SeasonList></SeasonList>
-                </b-col>
-                <b-col class="pt-md-2 pt-lg-0">
-                    <router-view/>
-                </b-col>
-                <b-col md="0" lg="0" xl="2"></b-col>
-            </b-row>
-        </b-container>
+        <ais-instant-search index-name="prod_THEOFFICEQUOTES" :search-client="searchClient">
+            <b-container :fluid="true" class="py-3 px-lg-5 px-md-4">
+                <b-row class="my-3 pl-1">
+                    <b-col lg="3" xl="2" md="12">
+                        <ais-search-box @keydown.native="showResults" placeholder="Search here…"/>
+                    </b-col>
+                </b-row>
+                <b-row>
+                    <b-col lg="3" xl="2" md="12">
+                        <SeasonList></SeasonList>
+                    </b-col>
+                    <b-col class="pt-md-2 pt-lg-0">
+                        <router-view/>
+                    </b-col>
+                    <b-col md="0" lg="0" xl="2"></b-col>
+                </b-row>
+            </b-container>
+        </ais-instant-search>
     </div>
 </template>
 
 <style lang="scss">
     @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');
     @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
     body { background-color: #0a0a0a; font-family: 'Roboto', sans-serif; }
 
     .ais-SearchBox-form {
@@ -65,5 +66,12 @@ export default {
       ),
     };
   },
+  methods: {
+    showResults() {
+      if (this.$route.path !== '/search_results') {
+        this.$router.push({ name: 'SearchResults' });
+      }
+    },
+  },
 };
 </script>
diff --git a/client/src/components/Episode.vue b/client/src/components/Episode.vue
index 20990be..c9b0ab2 100644
--- a/client/src/components/Episode.vue
+++ b/client/src/components/Episode.vue
@@ -6,12 +6,14 @@
                 {{ episode.description }}
             </span>
         </b-card>
-        <b-card v-for="(scene, scene_index) in episode.scenes" :key="`scene-${scene_index}`"
-                class="mb-1" body-class="p-0 py-2">
-            <b-card-text>
-                <QuoteList :quotes="scene.quotes"></QuoteList>
-            </b-card-text>
-        </b-card>
+        <div v-if="episode != null">
+            <b-card v-for="(scene, scene_index) in episode.scenes" :key="`scene-${scene_index}`"
+                    class="mb-1" body-class="p-0 py-2">
+                <b-card-text>
+                    <QuoteList :quotes="scene.quotes"></QuoteList>
+                </b-card-text>
+            </b-card>
+        </div>
     </div>
 </template>
 
diff --git a/client/src/components/SearchResults.vue b/client/src/components/SearchResults.vue
new file mode 100644
index 0000000..409fdf7
--- /dev/null
+++ b/client/src/components/SearchResults.vue
@@ -0,0 +1,28 @@
+<template>
+    <div>
+        <ais-hits>
+            <div slot-scope="{ items }">
+                <b-card v-for="item in items" :key="item.objectID" class="mb-1" body-class="p-0 py-2">
+                    <b-card-text class="p-1 pl-2">
+                        <strong>{{ item.speaker }}</strong>: {{ item.text }}
+                    </b-card-text>
+                </b-card>
+            </div>
+        </ais-hits>
+    </div>
+</template>
+<style>
+    .ais-Hits-item, .ais-InfiniteHits-item, .ais-InfiniteResults-item, .ais-Results-item {
+        /*margin-top: 1rem;*/
+        /*margin-left: 1rem;*/
+        /*padding: 1rem;*/
+        /*width: calc(25% - 1rem);*/
+        border: none;
+        box-shadow: none;
+    }
+</style>
+<script>
+export default {
+  name: 'SearchResults',
+};
+</script>
diff --git a/client/src/router.js b/client/src/router.js
index d368ebd..045ce5e 100644
--- a/client/src/router.js
+++ b/client/src/router.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import Router from 'vue-router';
 import Home from './components/Home.vue';
 import Episode from './components/Episode.vue';
+import SearchResults from './components/SearchResults.vue';
 
 Vue.use(Router);
 
@@ -19,5 +20,10 @@ export default new Router({
       name: 'Episode',
       component: Episode,
     },
+    {
+      path: '/search_results',
+      name: 'SearchResults',
+      component: SearchResults,
+    },
   ],
 });