From fb3b4c8f7d2d8af49bbf0735a75df0796b9ff423 Mon Sep 17 00:00:00 2001
From: KevinMidboe <kevin.midboe@gmail.com>
Date: Sat, 11 Jan 2025 13:38:06 +0100
Subject: [PATCH] updated elastic autocomplete to include persons, also adds
 debounce & clearer handling of response

---
 src/api.ts                                    | 69 ++++++++++----
 .../header/AutocompleteDropdown.vue           | 93 ++++++++++++-------
 src/components/header/SearchInput.vue         | 25 ++++-
 src/interfaces/IAutocompleteSearch.ts         | 24 +++++
 4 files changed, 155 insertions(+), 56 deletions(-)

diff --git a/src/api.ts b/src/api.ts
index 0d67b87..898b19e 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -4,7 +4,7 @@ import type {
   IRequestSubmitResponse
 } from "./interfaces/IRequestResponse";
 
-const { ELASTIC, ELASTIC_INDEX } = process.env;
+const { ELASTIC, ELASTIC_INDEX, ELASTIC_APIKEY } = process.env;
 const API_HOSTNAME = window.location.origin;
 
 // - - - TMDB - - -
@@ -430,9 +430,13 @@ const unlinkPlexAccount = () => {
 
 // - - - User graphs - - -
 
-const fetchGraphData = (urlPath, days, chartType) => {
+const fetchGraphData = async (
+  urlPath: string,
+  days: number,
+  chartType: string
+) => {
   const url = new URL(`/api/v1/user/${urlPath}`, API_HOSTNAME);
-  url.searchParams.append("days", days);
+  url.searchParams.append("days", String(days));
   url.searchParams.append("y_axis", chartType);
 
   return fetch(url.href).then(resp => {
@@ -447,7 +451,7 @@ const fetchGraphData = (urlPath, days, chartType) => {
 
 // - - - Random emoji - - -
 
-const getEmoji = () => {
+const getEmoji = async () => {
   const url = new URL("/api/v1/emoji", API_HOSTNAME);
 
   return fetch(url.href)
@@ -468,33 +472,58 @@ const getEmoji = () => {
  * @param {string} query
  * @returns {object} List of movies and shows matching query
  */
-const elasticSearchMoviesAndShows = (query, count = 22) => {
+const elasticSearchMoviesAndShows = (query: string, count = 22) => {
   const url = new URL(`${ELASTIC_INDEX}/_search`, ELASTIC);
 
   const body = {
     sort: [{ popularity: { order: "desc" } }, "_score"],
+    size: count,
     query: {
-      bool: {
-        should: [
-          {
-            match_phrase_prefix: {
-              original_name: query
-            }
-          },
-          {
-            match_phrase_prefix: {
-              original_title: query
-            }
-          }
-        ]
+      multi_match: {
+        query,
+        fields: ["name", "original_title", "original_name"],
+        type: "phrase_prefix",
+        tie_breaker: 0.3
       }
     },
-    size: count
+    suggest: {
+      text: query,
+      "person-suggest": {
+        prefix: query,
+        completion: {
+          field: "name.completion",
+          fuzzy: {
+            fuzziness: "AUTO"
+          }
+        }
+      },
+      "movie-suggest": {
+        prefix: query,
+        completion: {
+          field: "original_title.completion",
+          fuzzy: {
+            fuzziness: "AUTO"
+          }
+        }
+      },
+      "show-suggest": {
+        prefix: query,
+        completion: {
+          field: "original_name.completion",
+          fuzzy: {
+            fuzziness: "AUTO"
+          }
+        }
+      }
+    }
   };
 
   const options = {
     method: "POST",
-    headers: { "Content-Type": "application/json" },
+    headers: {
+      Authorization: `ApiKey ${ELASTIC_APIKEY}`,
+      "Content-Type": "application/json"
+    },
     body: JSON.stringify(body)
   };
 
diff --git a/src/components/header/AutocompleteDropdown.vue b/src/components/header/AutocompleteDropdown.vue
index c9bc5fa..4383055 100644
--- a/src/components/header/AutocompleteDropdown.vue
+++ b/src/components/header/AutocompleteDropdown.vue
@@ -10,6 +10,7 @@
       >
         <IconMovie v-if="result.type == 'movie'" class="type-icon" />
         <IconShow v-if="result.type == 'show'" class="type-icon" />
+        <IconPerson v-if="result.type == 'person'" class="type-icon" />
         <span class="title">{{ result.title }}</span>
       </li>
 
@@ -23,18 +24,25 @@
   </transition>
 </template>
 
+<!--
+Searches Elasticsearch for results based on changes to `query`.
+-->
+
 <script setup lang="ts">
   import { ref, watch } from "vue";
   import { useStore } from "vuex";
   import IconMovie from "@/icons/IconMovie.vue";
   import IconShow from "@/icons/IconShow.vue";
+  import IconPerson from "@/icons/IconPerson.vue";
   import type { Ref } from "vue";
   import { elasticSearchMoviesAndShows } from "../../api";
   import { MediaTypes } from "../../interfaces/IList";
-  import { Index } from "../../interfaces/IAutocompleteSearch";
   import type {
     IAutocompleteResult,
-    IAutocompleteSearchResults
+    IAutocompleteSearchResults,
+    Hit,
+    Option,
+    Source
   } from "../../interfaces/IAutocompleteSearch";
 
   interface Props {
@@ -48,6 +56,7 @@
   }
 
   const numberOfResults = 10;
+  let timeoutId = null;
   const props = defineProps<Props>();
   const emit = defineEmits<Emit>();
   const store = useStore();
@@ -55,23 +64,9 @@
   const searchResults: Ref<Array<IAutocompleteResult>> = ref([]);
   const keyboardNavigationIndex: Ref<number> = ref(0);
 
-  watch(
-    () => props.query,
-    newQuery => {
-      if (newQuery?.length > 0)
-        fetchAutocompleteResults(); /* eslint-disable-line no-use-before-define */
-    }
-  );
-
-  function openPopup(result) {
-    if (!result.id || !result.type) return;
-
-    store.dispatch("popup/open", { ...result });
-  }
-
-  function removeDuplicates(_searchResults) {
+  function removeDuplicates(_searchResults: Array<IAutocompleteResult>) {
     const filteredResults = [];
-    _searchResults.forEach(result => {
+    _searchResults.forEach((result: IAutocompleteResult) => {
       if (result === undefined) return;
       const numberOfDuplicates = filteredResults.filter(
         filterItem => filterItem.id === result.id
@@ -86,34 +81,43 @@
     return filteredResults;
   }
 
-  function elasticIndexToMediaType(index: Index): MediaTypes {
-    if (index === Index.Movies) return MediaTypes.Movie;
-    if (index === Index.Shows) return MediaTypes.Show;
+  function convertMediaType(type: string | null): MediaTypes | null {
+    if (type === "movie") return MediaTypes.Movie;
+
+    if (type === "tv_series") return MediaTypes.Show;
+
+    if (type === "person") return MediaTypes.Person;
 
     return null;
   }
 
   function parseElasticResponse(elasticResponse: IAutocompleteSearchResults) {
-    const data = elasticResponse.hits.hits;
+    const elasticResults = elasticResponse.hits.hits;
+    const suggestResults = elasticResponse.suggest["movie-suggest"][0].options;
+
+    let data: Array<Source> = elasticResults.map((el: Hit) => el._source);
+    data = data.concat(suggestResults.map((el: Option) => el._source));
+
+    //    data = data.concat(elasticResponse['suggest']['person-suggest'][0]['options'])
+    //    data = data.concat(elasticResponse['suggest']['show-suggest'][0]['options'])
+    data = data.sort((a, b) => (a.popularity < b.popularity ? 1 : -1));
 
     const results: Array<IAutocompleteResult> = [];
 
     data.forEach(item => {
-      if (!Object.values(Index).includes(item._index)) {
-        return;
-      }
-
       results.push({
-        title: item._source?.original_name || item._source.original_title,
-        id: item._source.id,
-        adult: item._source.adult,
-        type: elasticIndexToMediaType(item._index)
+        title: item?.original_name || item?.original_title || item?.name,
+        id: item.id,
+        adult: item.adult,
+        type: convertMediaType(item?.type)
       });
     });
 
-    return removeDuplicates(results).map((el, index) => {
-      return { ...el, index };
-    });
+    return removeDuplicates(results)
+      .map((el, index) => {
+        return { ...el, index };
+      })
+      .slice(0, 10);
   }
 
   function fetchAutocompleteResults() {
@@ -123,11 +127,34 @@
     elasticSearchMoviesAndShows(props.query, numberOfResults)
       .then(elasticResponse => parseElasticResponse(elasticResponse))
       .then(_searchResults => {
+        console.log(_searchResults);
         emit("update:results", _searchResults);
         searchResults.value = _searchResults;
       });
   }
 
+  const debounce = (callback: () => void, wait: number) => {
+    window.clearTimeout(timeoutId);
+    timeoutId = window.setTimeout(() => {
+      callback();
+    }, wait);
+  };
+
+  watch(
+    () => props.query,
+    newQuery => {
+      if (newQuery?.length > 0) {
+        debounce(fetchAutocompleteResults, 150);
+      }
+    }
+  );
+
+  function openPopup(result: IAutocompleteResult) {
+    if (!result.id || !result.type) return;
+
+    store.dispatch("popup/open", { ...result });
+  }
+
   // on load functions
   fetchAutocompleteResults();
   // end on load functions
diff --git a/src/components/header/SearchInput.vue b/src/components/header/SearchInput.vue
index be050d6..c577eea 100644
--- a/src/components/header/SearchInput.vue
+++ b/src/components/header/SearchInput.vue
@@ -42,6 +42,18 @@
   </div>
 </template>
 
+<!-- Handles constructing markup and state for dropdown.
+
+Markup:
+Consist of: search icon, input & close button.
+
+State:
+State is passing input variable `query` to dropdown and carrying state
+of selected dropdown element as variable `index`. This is because
+index is manipulated based on arrow key events from same input as
+the `query`.
+-->
+
 <script setup lang="ts">
   import { ref, computed } from "vue";
   import { useStore } from "vuex";
@@ -51,6 +63,7 @@
   import IconClose from "@/icons/IconClose.vue";
   import type { Ref } from "vue";
   import type { MediaTypes } from "../../interfaces/IList";
+import { IAutocompleteResult } from "../../interfaces/IAutocompleteSearch";
 
   interface ISearchResult {
     title: string;
@@ -66,7 +79,7 @@
   const query: Ref<string> = ref(null);
   const disabled: Ref<boolean> = ref(false);
   const dropdownIndex: Ref<number> = ref(-1);
-  const dropdownResults: Ref<ISearchResult[]> = ref([]);
+  const dropdownResults: Ref<IAutocompleteResult[]> = ref([]);
   const inputIsActive: Ref<boolean> = ref(false);
   const inputElement: Ref<HTMLInputElement> = ref(null);
 
@@ -85,8 +98,13 @@
     query.value = decodeURIComponent(params.get("query"));
   }
 
-  const { ELASTIC } = process.env;
-  if (ELASTIC === undefined || ELASTIC === "") {
+  const { ELASTIC, ELASTIC_APIKEY } = process.env;
+  if (
+    ELASTIC === undefined ||
+    ELASTIC === "" ||
+    ELASTIC_APIKEY === undefined ||
+    ELASTIC_APIKEY === ""
+  ) {
     disabled.value = true;
   }
 
@@ -145,6 +163,7 @@
   function handleSubmit() {
     if (!query.value || query.value.length === 0) return;
 
+    // if index is set, navigation has happened. Open popup else search
     if (dropdownIndex.value >= 0) {
       const resultItem = dropdownResults.value[dropdownIndex.value];
 
diff --git a/src/interfaces/IAutocompleteSearch.ts b/src/interfaces/IAutocompleteSearch.ts
index 6a33d22..cb0ee39 100644
--- a/src/interfaces/IAutocompleteSearch.ts
+++ b/src/interfaces/IAutocompleteSearch.ts
@@ -13,6 +13,7 @@ export interface IAutocompleteSearchResults {
   timed_out: boolean;
   _shards: Shards;
   hits: Hits;
+  suggest: Suggest;
 }
 
 export interface Shards {
@@ -37,6 +38,27 @@ export interface Hit {
   sort: number[];
 }
 
+export interface Suggest {
+  "movie-suggest": SuggestOptions[];
+  "person-suggest": SuggestOptions[];
+  "show-suggest": SuggestOptions[];
+}
+
+export interface SuggestOptions {
+  text: string;
+  offset: number;
+  length: number;
+  options: Option[];
+}
+
+export interface Option {
+  text: string;
+  _index: string;
+  _id: string;
+  _score: number;
+  _source: Source;
+}
+
 export enum Index {
   Movies = "movies",
   Shows = "shows"
@@ -57,6 +79,8 @@ export interface Source {
   agent: Agent;
   original_title: string;
   original_name?: string;
+  name?: string;
+  type?: MediaTypes;
 }
 
 export interface Agent {