Refactored search and autocomplete

Now with more icons, much simpler dropdown and a smooth open animation.
Filter is moved to the searchPage instead of baking in the search
dropdown.

src/components/AutocompleteDropdown.vue

@@ -0,0 +1,231 @@
+<template>
+  <transition name="shut">
+    <ul class="dropdown">
+      <li
+        v-for="result in searchResults"
+        @click="openPopup(result)"
+        :class="`result di-${result.index} ${
+          result.index === index ? 'active' : ''
+        }`"
+      >
+        <IconMovie v-if="result.type == 'movie'" class="type-icon" />
+        <IconShow v-if="result.type == 'show'" class="type-icon" />
+        <span>{{ result.title }}</span>
+      </li>
+    </ul>
+  </transition>
+</template>
+
+<script>
+import { mapActions } from "vuex";
+import IconMovie from "src/icons/IconMovie";
+import IconShow from "src/icons/IconShow";
+import IconPerson from "src/icons/IconPerson";
+import { elasticSearchMoviesAndShows } from "@/api";
+
+export default {
+  components: { IconMovie, IconShow, IconPerson },
+  props: {
+    query: {
+      type: String,
+      default: null,
+      required: false
+    },
+    index: {
+      type: Number,
+      default: -1,
+      required: false
+    },
+    results: {
+      type: Array,
+      default: [],
+      required: false
+    }
+  },
+  watch: {
+    query(newQuery) {
+      if (newQuery && newQuery.length > 1) this.fetchAutocompleteResults();
+    }
+  },
+  data() {
+    return {
+      searchResults: [],
+      keyboardNavigationIndex: 0
+    };
+  },
+  methods: {
+    ...mapActions("popup", ["open"]),
+    openPopup(result) {
+      const { id, type } = result;
+      this.open({ id, type });
+    },
+    fetchAutocompleteResults() {
+      this.keyboardNavigationIndex = 0;
+
+      elasticSearchMoviesAndShows(this.query).then(resp => {
+        const data = resp.hits.hits;
+
+        let results = data.map(item => {
+          let index = null;
+          if (item._source.log.file.path.includes("movie")) index = "movie";
+          if (item._source.log.file.path.includes("series")) index = "show";
+
+          if (index === "movie" || index === "show") {
+            return {
+              title: item._source.original_name || item._source.original_title,
+              id: item._source.id,
+              adult: item._source.adult,
+              type: index
+            };
+          }
+        });
+
+        results = this.removeDuplicates(results);
+        results = results.map((el, index) => {
+          return { ...el, index };
+        });
+
+        this.$emit("update:results", results);
+        this.searchResults = results.slice(0, 10);
+      });
+    },
+    removeDuplicates(searchResults) {
+      let filteredResults = [];
+      searchResults.map(result => {
+        if (result === undefined) return;
+        const numberOfDuplicates = filteredResults.filter(
+          filterItem => filterItem.id == result.id
+        );
+        if (numberOfDuplicates.length >= 1) {
+          return null;
+        }
+        filteredResults.push(result);
+      });
+
+      if (this.adult == false) {
+        filteredResults = filteredResults.filter(
+          result => result.adult == false
+        );
+      }
+
+      return filteredResults;
+    }
+  },
+  created() {
+    this.fetchAutocompleteResults();
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./src/scss/variables";
+@import "./src/scss/media-queries";
+@import "./src/scss/main";
+$sizes: 22;
+
+@for $i from 0 through $sizes {
+  .dropdown .di-#{$i} {
+    visibility: visible;
+    transform-origin: top center;
+    animation: scaleZ 200ms calc(50ms * #{$i}) ease-in forwards;
+  }
+}
+
+@keyframes scaleZ {
+  0% {
+    opacity: 0;
+    transform: scale(0);
+  }
+  80% {
+    transform: scale(1.07);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.dropdown {
+  top: var(--header-size);
+  position: relative;
+  height: 100%;
+  width: 100%;
+  max-width: 720px;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  z-index: 5;
+
+  margin-top: -1px;
+  border-top: none;
+  padding: 0;
+
+  @include mobile {
+    position: fixed;
+    left: 0;
+    max-width: 100vw;
+  }
+
+  @include tablet-min {
+    top: unset;
+    --gutter: 1.5rem;
+    max-width: calc(100% - (2 * var(--gutter)));
+    margin: -1px var(--gutter) 0 var(--gutter);
+  }
+
+  @include desktop {
+    max-width: 720px;
+  }
+}
+
+li.result {
+  opacity: 0;
+  height: 56px;
+  width: 100%;
+  visibility: hidden;
+  display: flex;
+  align-items: center;
+  background-color: var(--background-95);
+  color: var(--text-color-50);
+  padding: 0.5rem 2rem;
+
+  font-size: 1.4rem;
+  text-transform: capitalize;
+  list-style: none;
+  cursor: pointer;
+  white-space: nowrap;
+
+  transition: color 0.1s ease, stroke 0.4s ease;
+
+  span {
+    overflow-x: hidden;
+    text-overflow: ellipsis;
+    transition: inherit;
+  }
+
+  &.active,
+  &:hover,
+  &:active {
+    color: var(--text-color);
+    // background-color: var(--background-color-secondary);
+    border-bottom: 2px solid var(--color-green);
+
+    .type-icon {
+      stroke: var(--text-color);
+    }
+  }
+
+  .type-icon {
+    margin-right: 1rem;
+    transition: inherit;
+    stroke: var(--text-color-50);
+  }
+}
+
+.shut-leave-to {
+  height: 0px;
+  transition: height 0.4s ease;
+  flex-wrap: no-wrap;
+  overflow: hidden;
+}
+</style>