Error msg on empty response & added search params
- On empty search responses Search page show a error message that there where no respones. - For page loads directly to the search page new url query parameters are checked: adult and media_type. These are then used to fetch updated tmdb search parameters. Adult = true disables filtering for adult material and media_type decides if the search is multi, movie, show or person. (Frontend for filtering media_type is not added yet.)
This commit is contained in:
		| @@ -8,10 +8,26 @@ | |||||||
|       <seasoned-button @click="loadMore">load more</seasoned-button> |       <seasoned-button @click="loadMore">load more</seasoned-button> | ||||||
|     </div> |     </div> | ||||||
|  |  | ||||||
|     <loader v-if="!results.length" /> |     <div class="notFound" v-if="results.length == 0 && loading == false"> | ||||||
|  |       <h1 class="notFound-title">No results for search: <b>{{ query }}</b></h1> | ||||||
|  |     </div> | ||||||
|  |  | ||||||
|  |     <loader v-if="loading" /> | ||||||
|   </div> |   </div> | ||||||
| </template> | </template> | ||||||
|  |  | ||||||
|  | <style lang="scss" scoped> | ||||||
|  | .notFound { | ||||||
|  |   display: flex; | ||||||
|  |   justify-content: center; | ||||||
|  |   align-items: center; | ||||||
|  |  | ||||||
|  |   &-title { | ||||||
|  |     font-weight: 400; | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | </style> | ||||||
|  |  | ||||||
| <script> | <script> | ||||||
| import { searchTmdb } from '@/api' | import { searchTmdb } from '@/api' | ||||||
| import ListHeader from '@/components/ListHeader' | import ListHeader from '@/components/ListHeader' | ||||||
| @@ -37,6 +53,8 @@ export default { | |||||||
|       query: String, |       query: String, | ||||||
|       title: String, |       title: String, | ||||||
|       page: Number, |       page: Number, | ||||||
|  |       adult: undefined, | ||||||
|  |       mediaType: null, | ||||||
|       totalPages: 0, |       totalPages: 0, | ||||||
|       results: [], |       results: [], | ||||||
|       totalResults: [] |       totalResults: [] | ||||||
| @@ -50,8 +68,8 @@ export default { | |||||||
|     } |     } | ||||||
|   }, |   }, | ||||||
|   methods: { |   methods: { | ||||||
|     search(query=this.query, page=this.page) { |     search(query=this.query, page=this.page, adult=this.adult, mediaType=this.mediaType) { | ||||||
|       searchTmdb(query, page) |       searchTmdb(query, page, adult, mediaType) | ||||||
|         .then(this.parseResponse) |         .then(this.parseResponse) | ||||||
|     }, |     }, | ||||||
|     parseResponse(data) { |     parseResponse(data) { | ||||||
| @@ -74,14 +92,16 @@ export default { | |||||||
|     } |     } | ||||||
|   }, |   }, | ||||||
|   created() { |   created() { | ||||||
|     const { query, page } = this.$route.query |     const { query, page, adult, media_type } = this.$route.query | ||||||
|  |  | ||||||
|     if (!query) { |     if (!query) { | ||||||
|       // abort |       // abort | ||||||
|       console.error('abort, no query') |       console.error('abort, no query') | ||||||
|     } |     } | ||||||
|     this.query = decodeURIComponent(query) |     this.query = decodeURIComponent(query) | ||||||
|     this.page = page ? page : 1 |     this.page = page || 1 | ||||||
|  |     this.adult = adult || this.adult | ||||||
|  |     this.mediaType = media_type || this.mediaType | ||||||
|     this.title = `Search results: ${this.query}` |     this.title = `Search results: ${this.query}` | ||||||
|  |  | ||||||
|     this.search() |     this.search() | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user