Added sections and pagination to stash page.

assets/components/stashes/stash.vue

@@ -10,11 +10,11 @@
 			>{{ stash.name }}</h2>
 
 			<span class="header-section">
-				<router-link
+				<RouterLink
 					v-if="stash.user"
 					:to="{ name: 'user', params: { username: stash.user.username } }"
 					class="header-item stash-username nolink"
-				><Icon icon="user3" /><span class="username-name">{{ stash.user.username }}</span></router-link>
+				><Icon icon="user3" /><span class="username-name">{{ stash.user.username }}</span></RouterLink>
 
 				<label
 					v-if="isMine"
@@ -55,15 +55,17 @@
 		</div>
 
 		<div class="content-inner">
+			<FilterBar :ranges="['scenes', 'actors', 'movies']" />
+
 			<Releases
-				v-if="stash.scenes?.length > 0"
+				v-if="$route.params.range === 'scenes' && stash.scenes?.length > 0"
 				:releases="stash.scenes.map(item => item.scene)"
 				class="stash-section stash-scenes"
 				@stash="fetchStash"
 			/>
 
 			<ul
-				v-if="stash.actors?.length > 0"
+				v-if="$route.params.range === 'actors'"
 				class="stash-section stash-actors nolist"
 			>
 				<li
@@ -71,6 +73,26 @@
 					:key="item.id"
 				><Actor :actor="item.actor" /></li>
 			</ul>
+
+			<div
+				v-if="$route.params.range === 'movies'"
+				class="stash-movies"
+			>
+				<Movie
+					v-for="item in stash.movies"
+					:key="`movie-${item.id}`"
+					:movie="item.movie"
+					@stash="fetchStash"
+				/>
+			</div>
+
+			<Pagination
+				:items-total="totalCount"
+				:items-per-page="limit"
+				class="pagination-bottom"
+			/>
+
+			<Footer />
 		</div>
 	</div>
 </template>
@@ -78,12 +100,37 @@
 <script>
 import Actor from '../actors/tile.vue';
 import Releases from '../releases/releases.vue';
+import Movie from '../releases/movie-tile.vue';
 import RemoveStash from './remove.vue';
 import Toggle from '../form/toggle.vue';
+import FilterBar from '../filters/filter-bar.vue';
+import Pagination from '../pagination/pagination.vue';
 
 async function fetchStash() {
-	this.stash = await this.$store.dispatch('fetchStash', this.$route.params.stashId);
+	this.stash = await this.$store.dispatch('fetchStash', {
+		stashId: this.$route.params.stashId,
+		section: this.$route.params.range,
+		pageNumber: this.$route.params.pageNumber || 1,
+		limit: this.limit,
+	});
+
+	console.log(this.stash.movies);
+
 	this.isMine = this.stash.user?.id === this.$store.state.auth.user?.id;
+
+	if (this.$route.params.range === 'scenes') {
+		this.totalCount = this.stash.sceneTotal;
+	}
+
+	if (this.$route.params.range === 'actors') {
+		this.totalCount = this.stash.actorTotal;
+	}
+
+	if (this.$route.params.range === 'movies') {
+		this.totalCount = this.stash.movieTotal;
+	}
+
+	this.pageTitle = this.stash.name;
 }
 
 async function publishStash(isPublic) {
@@ -109,23 +156,32 @@ async function removeStash(removed) {
 }
 
 async function mounted() {
-	this.fetchStash();
+	await this.fetchStash();
 }
 
 export default {
 	components: {
 		Actor,
+		Movie,
 		Releases,
 		RemoveStash,
+		Pagination,
+		FilterBar,
 		Toggle,
 	},
 	data() {
 		return {
 			stash: null,
+			limit: Number(this.$route.query.limit) || 20,
+			pageTitle: null,
 			showRemoveStash: false,
 			isMine: false,
+			totalCount: 0,
 		};
 	},
+	watch: {
+		$route: fetchStash,
+	},
 	mounted,
 	methods: {
 		fetchStash,
@@ -199,21 +255,26 @@ export default {
 	}
 }
 
-.stash-section:not(:last-child) {
-	border-bottom: solid 1px var(--shadow-hint);
-}
-
 .stash-actors {
     display: grid;
     grid-gap: .5rem;
     grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
 	flex-grow: 1;
 	padding: 1rem;
+	border-top: solid 1px var(--shadow-hint);
+}
+
+.stash-movies {
+	display: grid;
+	flex-grow: 1;
+	grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
+	grid-template-rows: min-content;
+	grid-gap: 1rem;
+	padding: 1rem;
+	border-top: solid 1px var(--shadow-hint);
 }
 
 .stash-scenes {
-	flex-grow: 0;
-
 	.tiles {
 		grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
 	}