diff options
Diffstat (limited to 'src/site')
| -rw-r--r-- | src/site/components/grid/Grid.vue | 4 | ||||
| -rw-r--r-- | src/site/pages/dashboard/index.vue | 22 | ||||
| -rw-r--r-- | src/site/pages/index.vue | 2 |
3 files changed, 15 insertions, 13 deletions
diff --git a/src/site/components/grid/Grid.vue b/src/site/components/grid/Grid.vue index 4c4bdf4..15ff5fd 100644 --- a/src/site/components/grid/Grid.vue +++ b/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"> diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue index 8a4031b..64f8266 100644 --- a/src/site/pages/dashboard/index.vue +++ b/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; } } }; diff --git a/src/site/pages/index.vue b/src/site/pages/index.vue index da55500..707ae67 100644 --- a/src/site/pages/index.vue +++ b/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"> |