diff options
Diffstat (limited to 'src/site/pages/dashboard')
| -rw-r--r-- | src/site/pages/dashboard/index.vue | 124 |
1 files changed, 77 insertions, 47 deletions
diff --git a/src/site/pages/dashboard/index.vue b/src/site/pages/dashboard/index.vue index 0eb9532..6c1b99b 100644 --- a/src/site/pages/dashboard/index.vue +++ b/src/site/pages/dashboard/index.vue @@ -6,27 +6,55 @@ <Sidebar /> </div> <div class="column"> - <h2 class="subtitle">Your uploaded files</h2> + <nav class="level"> + <div class="level-left"> + <div class="level-item"> + <h2 class="subtitle">Your uploaded files</h2> + </div> + </div> + <div class="level-right"> + <div class="level-item"> + <b-field> + <b-input + placeholder="Search" + type="search"/> + <p class="control"> + <button + outlined + class="button is-primary"> + Search + </button> + </p> + </b-field> + </div> + </div> + </nav> <hr> - <Grid v-if="count" - :files="files" - :enableSearch="false" - class="grid" /> + <b-loading :active="images.isLoading" /> - <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" /> + <Grid v-if="totalFiles" + :files="images.files" + :enableSearch="false" + class="grid"> + <template v-slot:pagination> + <b-pagination + v-if="shouldPaginate" + :total="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> @@ -34,6 +62,8 @@ </template> <script> +import { mapState, mapGetters, mapActions } from 'vuex'; + import Sidebar from '~/components/sidebar/Sidebar.vue'; import Grid from '~/components/grid/Grid.vue'; @@ -42,44 +72,34 @@ export default { Sidebar, Grid }, - middleware: 'auth', + middleware: ['auth', ({ store }) => { + store.dispatch('images/fetch'); + }], data() { return { - files: [], - count: 0, - current: 1, - perPage: 30 + current: 1 }; }, + computed: { + ...mapGetters({ + totalFiles: 'images/getTotalFiles', + shouldPaginate: 'images/shouldPaginate', + limit: 'images/getLimit' + }), + ...mapState(['images']) + }, metaInfo() { return { title: 'Uploads' }; }, watch: { - current: 'getFiles' - }, - async asyncData({ $axios, route }) { - const perPage = 30; - const current = 1; // current page - - try { - const response = await $axios.$get(`files`, { params: { page: current, limit: perPage }}); - return { - files: response.files || [], - count: response.count || 0, - current, - perPage - }; - } catch (error) { - console.error(error); - return { files: [] }; - } + current: 'fetchPaginate' }, methods: { - async getFiles() { - // 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; + ...mapActions({ + fetch: 'images/fetch' + }), + fetchPaginate() { + this.fetch(this.current) } } }; @@ -89,4 +109,14 @@ export default { div.grid { margin-bottom: 1rem; } -</style>
\ No newline at end of file + + .pagination-slot { + padding: 1rem 0; + } +</style> + +<style lang="scss"> + .pagination-slot > .pagination-previous, .pagination-slot > .pagination-next { + display: none !important; + } +</style> |