feat: refactor single album page to use vuex

2 files changed, 79 insertions, 48 deletions

diff --git a/src/site/pages/dashboard/albums/_id.vue b/src/site/pages/dashboard/albums/_id.vue
index c082b63..0d3bd68 100644
--- a/src/site/pages/dashboard/albums/_id.vue
+++ b/src/site/pages/dashboard/albums/_id.vue
@@ -13,7 +13,14 @@
 					<nav class="level">
 						<div class="level-left">
 							<div class="level-item">
-								<h2 class="subtitle">Files</h2>
+								<h1 class="title is-3">
+									{{ name }}
+								</h1>
+							</div>
+							<div class="level-item">
+								<h2 class="subtitle is-5">
+									({{ totalFiles }} files)
+								</h2>
 							</div>
 						</div>
 						<div class="level-right">
@@ -21,7 +28,7 @@
 								<b-field>
 									<b-input
 										placeholder="Search"
-										type="search"/>
+										type="search" />
 									<p class="control">
 										<button
 											outlined
@@ -36,14 +43,15 @@
 
 					<hr>
 
-					<Grid v-if="files.length"
-						:files="files"
-						:total="count">
+					<Grid
+						v-if="totalFiles"
+						:files="album.files"
+						:total="totalFiles">
 						<template v-slot:pagination>
 							<b-pagination
-								v-if="count > perPage"
-								:total="count"
-								:per-page="perPage"
+								v-if="shouldPaginate"
+								:total="totalFiles"
+								:per-page="limit"
 								:current.sync="current"
 								range-before="2"
 								range-after="2"
@@ -64,53 +72,65 @@
 </template>
 
 <script>
+import { mapState, mapGetters, mapActions } from 'vuex';
+
 import Sidebar from '~/components/sidebar/Sidebar.vue';
 import Grid from '~/components/grid/Grid.vue';
 
 export default {
 	components: {
 		Sidebar,
-		Grid
+		Grid,
 	},
-	middleware: 'auth',
+	middleware: ['auth', ({ route, store }) => {
+		store.dispatch('album/fetchById', { id: route.params.id });
+	}],
 	data() {
 		return {
-			name: null,
-			files: [],
-			count: 0,
 			current: 1,
-			perPage: 30
 		};
 	},
+	computed: {
+		...mapGetters({
+			totalFiles: 'album/getTotalFiles',
+			shouldPaginate: 'album/shouldPaginate',
+			limit: 'album/getLimit',
+			name: 'album/getName',
+		}),
+		...mapState(['album']),
+		id() {
+			return this.$route.params.id;
+		},
+	},
 	metaInfo() {
 		return { title: 'Album' };
 	},
 	watch: {
-		current: 'getFiles'
-	},
-	async asyncData({ $axios, route }) {
-		const perPage = 30;
-		const current = 1; // current page
-
-		try {
-			const response = await $axios.$get(`album/${route.params.id}/full`, { params: { page: current, limit: perPage }});
-			return {
-				files: response.files || [],
-				count: response.count || 0,
-				current,
-				perPage
-			};
-		} catch (error) {
-			console.error(error);
-			return { files: [] };
-		}
+		current: 'fetchPaginate',
 	},
 	methods: {
-		async getFiles() {
-			const response = await this.$axios.$get(`album/${this.$route.params.id}/full`, { params: { page: this.current, limit: this.perPage }});
-			this.files = response.files;
-			this.count = response.count;
-		}
+		...mapActions({
+			fetch: 'album/fetchById',
+		}),
+		fetchPaginate() {
+			this.fetch({ id: this.id, page: this.current });
+		},
 	},
 };
 </script>
+
+<style lang="scss" scoped>
+	div.grid {
+		margin-bottom: 1rem;
+	}
+
+	.pagination-slot {
+		padding: 1rem 0;
+	}
+</style>
+
+<style lang="scss">
+	.pagination-slot > .pagination-previous, .pagination-slot > .pagination-next {
+		display: none !important;
+	}
+</style>
diff --git a/src/site/pages/dashboard/albums/index.vue b/src/site/pages/dashboard/albums/index.vue
index a010254..a2ba522 100644
--- a/src/site/pages/dashboard/albums/index.vue
+++ b/src/site/pages/dashboard/albums/index.vue
@@ -7,26 +7,33 @@
 						<Sidebar />
 					</div>
 					<div class="column">
-						<h2 class="subtitle">Manage your albums</h2>
+						<h2 class="subtitle">
+							Manage your albums
+						</h2>
 						<hr>
 
 						<div class="search-container">
 							<b-field>
-								<b-input v-model="newAlbumName"
+								<b-input
+									v-model="newAlbumName"
 									placeholder="Album name..."
 									type="text"
 									@keyup.enter.native="createAlbum" />
 								<p class="control">
-									<button outlined
+									<button
+										outlined
 										class="button is-black"
 										:disabled="isCreatingAlbum"
-										@click="createAlbum">Create album</button>
+										@click="createAlbum">
+										Create album
+									</button>
 								</p>
 							</b-field>
 						</div>
 
 						<div class="view-container">
-							<AlbumEntry v-for="album in albums.list"
+							<AlbumEntry
+								v-for="album in albums.list"
 								:key="album.id"
 								:album="album" />
 						</div>
@@ -45,15 +52,19 @@ import AlbumEntry from '~/components/album/AlbumEntry.vue';
 export default {
 	components: {
 		Sidebar,
-		AlbumEntry
+		AlbumEntry,
 	},
 	middleware: ['auth', ({ store }) => {
-		store.dispatch('albums/fetch');
+		try {
+			store.dispatch('albums/fetch');
+		} catch (e) {
+			this.alert({ text: e.message, error: true });
+		}
 	}],
 	data() {
 		return {
 			newAlbumName: null,
-			isCreatingAlbum: false
+			isCreatingAlbum: false,
 		};
 	},
 	computed: mapState(['config', 'albums']),
@@ -62,7 +73,7 @@ export default {
 	},
 	methods: {
 		...mapActions({
-			'alert': 'alert/set'
+			'alert': 'alert/set',
 		}),
 		async createAlbum() {
 			if (!this.newAlbumName || this.newAlbumName === '') return;
@@ -78,8 +89,8 @@ export default {
 				this.isCreatingAlbum = false;
 				this.newAlbumName = null;
 			}
-		}
-	}
+		},
+	},
 };
 </script>