Added pagination and search to movies page.

assets/components/releases/movie-tile.vue

@@ -179,7 +179,7 @@ export default {
 	}
 }
 
-@media(max-width: $breakpoint) {
+@media(max-width: $breakpoint-kilo) {
 	.movie {
 		height: 12rem;
 	}

assets/components/releases/movies.vue

@@ -1,6 +1,11 @@
 <template>
 	<div class="movies">
 		<div class="content-inner">
+			<Search
+				:search="searchMovies"
+				:placeholder="`Search ${totalCount} movies`"
+			/>
+
 			<div class="tiles">
 				<MovieTile
 					v-for="movie in movies"
@@ -8,6 +13,13 @@
 					:movie="movie"
 				/>
 			</div>
+
+			<Pagination
+				v-if="totalCount > 0"
+				:items-total="totalCount"
+				:items-per-page="limit"
+				class="pagination-bottom"
+			/>
 		</div>
 
 		<Footer />
@@ -16,27 +28,62 @@
 
 <script>
 import MovieTile from './movie-tile.vue';
+import Search from '../search/bar.vue';
+import Pagination from '../pagination/pagination.vue';
+
+async function fetchMovies() {
+	if (this.$route.query.query) {
+		await this.searchMovies();
+		return;
+	}
 
-async function mounted() {
 	const { movies, totalCount } = await this.$store.dispatch('fetchMovies', {
-		limit: 30,
+		limit: this.limit,
+		range: this.$route.params.range,
+		pageNumber: this.$route.params.pageNumber,
 	});
 
 	this.movies = movies;
 	this.totalCount = totalCount;
 }
 
+async function searchMovies() {
+	const movies = await this.$store.dispatch('searchMovies', {
+		query: this.$route.query.query,
+		limit: this.limit,
+	});
+
+	this.movies = movies;
+	this.totalCount = movies.length;
+}
+
+async function mounted() {
+	this.pageTitle = 'Movies';
+
+	await this.fetchMovies();
+}
+
 export default {
 	components: {
 		MovieTile,
+		Search,
+		Pagination,
 	},
 	data() {
 		return {
 			movies: [],
 			totalCount: 0,
+			limit: 30,
 		};
 	},
+	watch: {
+		$route: fetchMovies,
+	},
 	mounted,
+	methods: {
+		fetchMovies,
+		searchMovies,
+	},
 };
 </script>
 
@@ -49,14 +96,22 @@ export default {
 	flex-grow: 1;
 }
 
+.content-inner {
+	padding: 0 1rem;
+}
+
+.search {
+	margin: 1rem 0;
+}
+
 .tiles {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
 	grid-gap: 1rem;
-	padding: 1rem;
+	margin: 0 0 1rem 0;
 }
 
-@media(max-width: $breakpoint) {
+@media(max-width: $breakpoint-kilo) {
 	.tiles {
 		grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
 	}