From e9ef148d7498b7068274a4141d5591cc8a64016e Mon Sep 17 00:00:00 2001
From: Zephyrrus <krisztian1997@gmail.com>
Date: Wed, 1 Jul 2020 20:40:10 +0300
Subject: feat: backend pagination for albums

---
 src/api/routes/albums/albumFullGET.js   | 22 +++++++++++++++--
 src/api/routes/files/filesGET.js        | 13 ++++++----
 src/site/pages/dashboard/albums/_id.vue | 43 +++++++++++++++++++++++++++++----
 3 files changed, 66 insertions(+), 12 deletions(-)

(limited to 'src')

diff --git a/src/api/routes/albums/albumFullGET.js b/src/api/routes/albums/albumFullGET.js
index 93b56ce..cf434e4 100644
--- a/src/api/routes/albums/albumFullGET.js
+++ b/src/api/routes/albums/albumFullGET.js
@@ -13,12 +13,29 @@ class albumGET extends Route {
 		const album = await db.table('albums').where({ id, userId: user.id }).first();
 		if (!album) return res.status(404).json({ message: 'Album not found' });
 
-		const files = await db.table('albumsFiles')
+		let count = 0;
+
+		let files = db.table('albumsFiles')
 			.where({ albumId: id })
 			.join('files', 'albumsFiles.fileId', 'files.id')
 			.select('files.id', 'files.name')
 			.orderBy('files.id', 'desc');
 
+		const { page, limit = 100 } = req.query;
+		if (page && page >= 0) {
+			files = await files.offset((page - 1) * limit).limit(limit);
+
+			const dbRes = await db.table('albumsFiles')
+				.count('* as count')
+				.where({ albumId: id })
+				.first();
+
+			count = dbRes.count;
+		} else {
+			files = await files; // execute the query
+			count = files.length;
+		}
+
 		for (let file of files) {
 			file = Util.constructFilePublicLink(file);
 		}
@@ -26,7 +43,8 @@ class albumGET extends Route {
 		return res.json({
 			message: 'Successfully retrieved album',
 			name: album.name,
-			files
+			files,
+			count
 		});
 	}
 }
diff --git a/src/api/routes/files/filesGET.js b/src/api/routes/files/filesGET.js
index 07dc1f7..9e90633 100644
--- a/src/api/routes/files/filesGET.js
+++ b/src/api/routes/files/filesGET.js
@@ -10,18 +10,21 @@ class filesGET extends Route {
 		let count = 0;
 
 		let files = db.table('files')
-			.where('userId', user.id)
+			.where({ userId: user.id })
 			.orderBy('createdAt', 'desc');
 
 		const { page, limit = 100 } = req.query;
 		if (page && page >= 0) {
 			files = await files.offset((page - 1) * limit).limit(limit);
 
-			count = (await db.table('files')
-				.count('id as count')
-				.where('userId', user.id)
-				.first()).count;
+			const dbRes = await db.table('files')
+				.count('* as count')
+				.where({ userId: user.id })
+				.first();
+
+			count = dbRes.count;
 		} else {
+			files = await files; // execute the query
 			count = files.length;
 		}
 
diff --git a/src/site/pages/dashboard/albums/_id.vue b/src/site/pages/dashboard/albums/_id.vue
index e716b37..47e7057 100644
--- a/src/site/pages/dashboard/albums/_id.vue
+++ b/src/site/pages/dashboard/albums/_id.vue
@@ -12,9 +12,23 @@
 				<div class="column">
 					<h2 class="subtitle">Files</h2>
 					<hr>
-					<!-- TODO: Add a list view so the user can see the files that don't have thumbnails, like text documents -->
+
 					<Grid v-if="files.length"
 						:files="files" />
+
+					<b-pagination
+						v-if="count > perPage"
+						:total="count"
+						:per-page="perPage"
+						:current.sync="current"
+						class="pagination"
+						icon-prev="icon-interface-arrow-left"
+						icon-next="icon-interface-arrow-right"
+						icon-pack="icon"
+						aria-next-label="Next page"
+						aria-previous-label="Previous page"
+						aria-page-label="Page"
+						aria-current-label="Current page" />
 				</div>
 			</div>
 		</div>
@@ -34,22 +48,41 @@ export default {
 	data() {
 		return {
 			name: null,
-			files: []
+			files: [],
+			count: 0,
+			current: 1,
+			perPage: 30
 		};
 	},
 	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`);
+			const response = await $axios.$get(`album/${route.params.id}/full`, { params: { page: current, limit: perPage }});
 			return {
-				files: response.files ? response.files : []
+				files: response.files || [],
+				count: response.count || 0,
+				current,
+				perPage
 			};
 		} catch (error) {
 			console.error(error);
 			return { files: [] };
 		}
-	}
+	},
+	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;
+		}
+	},
 };
 </script>
-- 
cgit v1.2.3