feat: add pagination to user files in admin view

src/api/routes/admin/userGET.js

@@ -15,10 +15,27 @@ class usersGET extends Route {
 				.select('id', 'username', 'enabled', 'createdAt', 'editedAt', 'apiKeyEditedAt', 'isAdmin')
 				.where({ id })
 				.first();
-			const files = await db.table('files')
+
+			let count = 0;
+			let files = db.table('files')
 				.where({ userId: user.id })
 				.orderBy('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('files')
+					.count('* as count')
+					.where({ userId: user.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 usersGET extends Route {
 			return res.json({
 				message: 'Successfully retrieved user',
 				user,
-				files
+				files,
+				count
 			});
 		} catch (error) {
 			return super.error(res, error);

src/site/pages/dashboard/admin/user/_id.vue

@@ -61,7 +61,24 @@
 
 					<Grid
 						v-if="user.files.length"
-						:files="user.files" />
+						:files="user.files">
+						<template v-slot:pagination>
+							<b-pagination
+								:total="user.totalFiles"
+								:per-page="limit"
+								:current.sync="current"
+								range-before="2"
+								range-after="2"
+								class="pagination-slot"
+								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" />
+						</template>
+					</Grid>
 				</div>
 			</div>
 		</div>
@@ -69,7 +86,7 @@
 </template>
 
 <script>
-import { mapState } from 'vuex';
+import { mapState, mapGetters, mapActions } from 'vuex';
 import Sidebar from '~/components/sidebar/Sidebar.vue';
 import Grid from '~/components/grid/Grid.vue';
 
@@ -80,7 +97,7 @@ export default {
 	},
 	middleware: ['auth', 'admin', ({ route, store }) => {
 		try {
-			store.dispatch('admin/fetchUser', route.params.id);
+			store.dispatch('admin/fetchUser', { id: route.params.id });
 		} catch (e) {
 			// eslint-disable-next-line no-console
 			console.error(e);
@@ -88,13 +105,31 @@ export default {
 	}],
 	data() {
 		return {
-			options: {}
+			options: {},
+			current: 1,
+			isLoading: false
 		};
 	},
-	computed: mapState({
-		user: state => state.admin.user
-	}),
+	computed: {
+		...mapGetters({
+			limit: 'images/getLimit'
+		}),
+		...mapState({
+			user: state => state.admin.user
+		})
+	},
+	watch: {
+		current: 'fetchPaginate'
+	},
 	methods: {
+		...mapActions({
+			fetch: 'admin/fetchUser'
+		}),
+		async fetchPaginate() {
+			this.isLoading = true;
+			await this.fetch({ id: this.$route.params.id, page: this.current });
+			this.isLoading = false;
+		},
 		promptDisableUser() {
 			this.$buefy.dialog.confirm({
 				type: 'is-danger',

src/site/store/admin.js

@@ -35,9 +35,10 @@ export const actions = {
 
 		return response;
 	},
-	async fetchUser({ commit }, id) {
-		const response = await this.$axios.$get(`admin/users/${id}`);
-		commit('setUserInfo', response);
+	async fetchUser({ commit }, { id, page }) {
+		page = page || 1;
+		const response = await this.$axios.$get(`admin/users/${id}`, { params: { limit: 50, page } });
+		commit('setUserInfo', { ...response, page });
 
 		return response;
 	},
@@ -107,9 +108,10 @@ export const mutations = {
 	setUsers(state, { users }) {
 		state.users = users;
 	},
-	setUserInfo(state, { user, files }) {
+	setUserInfo(state, { user, files, count }) {
 		state.user = { ...state.user, ...user };
 		state.user.files = files || [];
+		state.user.totalFiles = count;
 	},
 	setFile(state, { file }) {
 		state.file = file || {};