feat: backend pagination

serverLoad++;
userRamUsage--;

src/api/routes/files/filesGET.js

@@ -7,10 +7,23 @@ class filesGET extends Route {
 	}
 
 	async run(req, res, db, user) {
-		// Get all the files from the user
-		const files = await db.table('files')
+		let count = 0;
+
+		let files = db.table('files')
 			.where('userId', user.id)
-			.orderBy('id', 'desc');
+			.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;
+		} else {
+			count = files.length;
+		}
 
 		// For each file, create the public link to be able to display the file
 		for (let file of files) {
@@ -19,7 +32,8 @@ class filesGET extends Route {
 
 		return res.json({
 			message: 'Successfully retrieved files',
-			files
+			files,
+			count
 		});
 	}
 }

src/api/utils/Util.js

@@ -122,7 +122,7 @@ class Util {
 			/*
 				It's funny but if you do i++ the asignment never gets done resulting in an infinite loop
 			*/
-			if (i < 5) return retry(i + 1);
+			if (i < 5) return retry(++i);
 			log.error('Couldnt allocate identifier for album');
 			return null;
 		};

src/site/components/grid/Grid.vue

@@ -17,7 +17,8 @@
 		</div>
 
 		<template v-if="!showList">
-			<Waterfall :gutterWidth="10"
+			<Waterfall v-if="showWaterfall"
+				:gutterWidth="10"
 				:gutterHeight="4">
 				<!--
 					TODO: Implement search based on originalName, albumName and tags
@@ -32,7 +33,6 @@
 				<!-- TODO: Implement pagination -->
 
 				<WaterfallItem v-for="(item, index) in gridFiles"
-					v-if="showWaterfall"
 					:key="index"
 					:width="width"
 					move-class="item-move">

src/site/pages/dashboard/index.vue

@@ -8,15 +8,16 @@
 				<div class="column">
 					<h2 class="subtitle">Your uploaded 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="paginatedFiles"
+					<Grid v-if="count"
+						:files="files"
 						:enableSearch="false"
 						class="grid" />
 
 					<b-pagination
-						v-if="files.length > perPage"
-						:total="files.length"
+						v-if="count > perPage"
+						:total="count"
 						:per-page="perPage"
 						:current.sync="current"
 						class="pagination"
@@ -46,25 +47,26 @@ export default {
 	data() {
 		return {
 			files: [],
+			count: 0,
 			current: 1,
 			perPage: 20
 		};
 	},
-	computed: {
-		paginatedFiles() {
-			return this.files.slice((this.current - 1) * this.perPage, this.current * this.perPage);
-		}
-	},
 	metaInfo() {
 		return { title: 'Uploads' };
 	},
+	watch: {
+		current: 'getFiles'
+	},
 	mounted() {
 		this.getFiles();
 	},
 	methods: {
 		async getFiles() {
-			const response = await this.$axios.$get(`files`);
+			// TODO: Cache a few pages once fetched
+			const response = await this.$axios.$get(`files`, { params: { page: this.current, limit: this.perPage }});
 			this.files = response.files;
+			this.count = response.count;
 		}
 	}
 };

src/site/pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div>
+	<div class="section">
 		<div class="container">
 			<div class="columns">
 				<div class="column is-3 is-offset-2">