Applying tag filters to URL.

assets/components/actors/actor.vue

@@ -288,8 +288,19 @@
 					:actor="actor"
 				/>
 
-				<FilterBar :fetch-releases="fetchActor" />
-				<Releases :releases="actor.releases" />
+				<FilterBar
+					:fetch-releases="fetchActor"
+					:items-total="totalCount"
+					:items-per-page="limit"
+				/>
+
+				<Releases :releases="releases" />
+
+				<Pagination
+					:items-total="totalCount"
+					:items-per-page="limit"
+					class="pagination-top"
+				/>
 			</div>
 		</div>
 	</div>
@@ -297,16 +308,23 @@
 
 <script>
 import Photos from './photos.vue';
+import Pagination from '../pagination/pagination.vue';
 import FilterBar from '../header/filter-bar.vue';
 import Releases from '../releases/releases.vue';
 import Gender from './gender.vue';
 import Social from './social.vue';
 
 async function fetchActor() {
-	this.actor = await this.$store.dispatch('fetchActorById', {
+	const { actor, releases, totalCount } = await this.$store.dispatch('fetchActorById', {
 		actorId: Number(this.$route.params.actorId),
+		limit: 10,
+		pageNumber: Number(this.$route.params.pageNumber),
 		range: this.$route.params.range,
 	});
+
+	this.actor = actor;
+	this.releases = releases;
+	this.totalCount = totalCount;
 }
 
 function sfw() {
@@ -328,6 +346,7 @@ async function mounted() {
 export default {
 	components: {
 		FilterBar,
+		Pagination,
 		Photos,
 		Releases,
 		Gender,
@@ -337,6 +356,8 @@ export default {
 		return {
 			actor: null,
 			releases: null,
+			totalCount: 0,
+			limit: 10,
 			pageTitle: null,
 			expanded: false,
 		};
@@ -612,12 +633,9 @@ export default {
 	background: var(--background-dim);
 }
 
-.releases {
-	border-top: solid 1px var(--crease);
-}
-
 .releases {
     flex-grow: 1;
+	border-top: solid 1px var(--crease);
     padding: 1rem;
 }