Add AutoComplete

vladsosnov · Sep 19, 2020 · 6597798 · 6597798
1 parent 299ad36
commit 6597798
Show file tree

Hide file tree

Showing 8 changed files with 216 additions and 84 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@syncfusion/ej2-vue-dropdowns": "^18.2.58",
     "axios": "^0.20.0",
     "core-js": "^3.6.5",
     "vue": "^2.6.12",

diff --git a/src/App.vue b/src/App.vue
@@ -1,8 +1,11 @@
 <template>
   <div class="app">
-    <app-header @setPathForFetch="fetchSearchMoveis" />
+    <app-header
+      :autoCompleteMoviesTitle="moviesTitleToAutoComplete"
+      @setPathForFetch="fetchSearchMoveis"
+    />
     <search-movie-result
-      :search-movie="allSearchMovies"
+      :movies="allSearchMovies"
       @close-results="isSearchMovesResultVisible"
     />
     <router-view />
@@ -26,15 +29,28 @@ export default {
   },
   data () {
     return {
-      allSearchMovies: {}
+      allSearchMovies: {},
+      moviesTitleToAutoComplete: ''
     }
   },
+  async mounted () {
+    await this.fetchMoviesTitle()
+  },
   computed: {
     searchMovies () {
       return this.$store.getters['searchMovies']
     }
   },
   methods: {
+    async fetchMoviesTitle () {
+      try {
+        const fetchData = await axios.get(`${process.env.VUE_APP_API_URL}/discover/movie?sort_by=popularity.desc&api_key=${process.env.VUE_APP_API_KEY}`)
+        this.moviesTitleToAutoComplete = Object.values(fetchData.data.results).map(item => item.title)
+      }
+      catch (error) {
+        console.log(error)
+      }
+    },
     async fetchSearchMoveis (allPath) {
       try {
         const fetchSeatchData = await axios.get(allPath)

diff --git a/src/components/MovieCard.vue b/src/components/MovieCard.vue
@@ -6,6 +6,12 @@
       :alt="movie.title"
       class="movie-card__poster"
     >
+    <div
+      v-else
+      class="movie-card__un-poster"
+    >
+      Not Found
+    </div>
     <div class="movie-card__detail detail">
       <p class="detail__title">
         {{ movie.title }}
@@ -74,7 +80,7 @@ export default {
   &::before {
     content: '';
     position: absolute;
-    width: 100%;
+    width: 210px;
     max-height: 315px;
     height: 100%;
     background: rgba(0, 0, 0, .8);
@@ -90,15 +96,27 @@ export default {
   }
 
   &__poster {
-    max-width: 210px;
+    width: 210px;
+    height: 315px;
+  }
+
+  &__un-poster {
+    width: 210px;
+    height: 315px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 2rem;
+    font-weight: 600;
+    background-color: #908c8c;
+    color: #fff;
   }
 
   &__detail {
     position: absolute;
     top: 0;
-    width: 100%;
-    height: 100%;
-    max-height: 315px;
+    width: 210px;
+    height: 315px;
     display: flex;
     flex-direction: column;
     align-items: center;

diff --git a/src/components/SearchMovieResult.vue b/src/components/SearchMovieResult.vue
@@ -11,27 +11,11 @@
         Your search result
       </h2>
       <div class="search-movie-result__wrap">
-        <div
-          v-for="searchMovie in searchMovies"
-          :key="searchMovie.id"
-          class="search-movie-result__box-item box-item"
-        >
-          <img
-            v-if="searchMovie.poster_path !== null" 
-            :src="`https://image.tmdb.org/t/p/w1280${searchMovie.poster_path}`" 
-            :alt="searchMovie.title"
-            class="box-item__image"
-          >
-          <div
-            v-else
-            class="box-item__un-image"
-          >
-            Not found
-          </div>
-          <p class="box-item__title">
-            {{ searchMovie.title }}
-          </p>
-        </div>
+        <movie-card
+          v-for="movie in movies"
+          :key="movie.id"
+          :movie="movie"
+        />
       </div>
     </div>
     <div
@@ -54,12 +38,19 @@
 </template>
 
 <script>
+import MovieCard from '../components/MovieCard'
+
 export default {
   name: 'SearchMovieResult',
+  props: {
+    movies: {
+      required: true
+    }
+  },
+  components: {
+    MovieCard
+  },
   computed: {
-    searchMovies () {
-      return { ...this.$store.state.searchMovies }
-    },
     isSectionVisible () {
       return this.$store.state.isSearchMovieResultVisible
     },
@@ -79,7 +70,7 @@ export default {
 .search-movie-result {
   position: relative;
   max-width: 80rem;
-  margin: 0 auto 2rem;
+  margin: 0 auto 2rem auto;
   padding: 0 1rem;
 
   &__content {
@@ -94,40 +85,14 @@ export default {
   }
 
   &__wrap {
+    margin-bottom: 2rem;
     display: grid;
     grid-gap: 2rem;
     grid-template-columns: repeat(5, 1fr);
   }
 
-  &__box-item {
-    display: flex;
-    flex-direction: column;
-
-    .box-item {
-      &__image {
-        max-width: 210px;
-        height: 315px;
-      }
-
-      &__un-image {
-        width: 210px;
-        height: 315px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-size: 2rem;
-        font-weight: 600;
-        background-color: #908c8c;
-        color: #fff;
-      }
-
-      &__title {
-        max-width: 210px;
-      }
-    }
-  }
-
   &__empty-state {
+    padding-bottom: 2rem;
     display: flex;
     flex-direction: column;
     justify-content: center;

diff --git a/src/components/Shared/AppHeader.vue b/src/components/Shared/AppHeader.vue
@@ -3,7 +3,7 @@
     <div class="app-header__container">
       <router-link :to="{ name: 'Main' }">
         <img
-          src="../../assets/images/film-logo.svg"
+          src="@/assets/images/film-logo.svg"
           alt="Logo"
           class="app-header__logo"
         >
@@ -18,6 +18,7 @@
         </router-link>
       </nav>
       <app-search-input
+        :autoCompleteMoviesTitle="autoCompleteMoviesTitle"
         class="app-header__search-box"
         @setSearchQuery="setSearchQuery"
       />
@@ -30,6 +31,11 @@ import AppSearchInput from './AppSearchInput'
 
 export default {
   name: 'AppHeader',
+  props: {
+    autoCompleteMoviesTitle: {
+      required: true
+    }
+  },
   components: {
     AppSearchInput
   },