diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/api/routes/albums/albumFullGET.js | 22 | ||||
| -rw-r--r-- | src/api/routes/files/filesGET.js | 13 | ||||
| -rw-r--r-- | src/site/pages/dashboard/albums/_id.vue | 43 |
3 files changed, 66 insertions, 12 deletions
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> |