From 4405537fe78a62085b3d3e57b46d8ad2bb3b2e87 Mon Sep 17 00:00:00 2001 From: Angelina Filippova Date: Wed, 12 Aug 2020 03:15:59 +0300 Subject: [PATCH] Implement pagination for banned MediaProxy URLs --- src/api/mediaProxyCache.js | 4 ++-- src/store/modules/mediaProxyCache.js | 19 ++++++++++--------- src/views/mediaProxyCache/index.vue | 28 +++++++++++++++++++++++++++- 3 files changed, 39 insertions(+), 12 deletions(-) diff --git a/src/api/mediaProxyCache.js b/src/api/mediaProxyCache.js index 0822d984..8c19a791 100644 --- a/src/api/mediaProxyCache.js +++ b/src/api/mediaProxyCache.js @@ -2,10 +2,10 @@ import request from '@/utils/request' import { getToken } from '@/utils/auth' import { baseName } from './utils' -export async function listBannedUrls(page, authHost, token) { +export async function listBannedUrls(page, pageSize, authHost, token) { return await request({ baseURL: baseName(authHost), - url: `/api/pleroma/admin/media_proxy_caches?page=${page}`, + url: `/api/pleroma/admin/media_proxy_caches?page=${page}&page_size=${pageSize}`, method: 'get', headers: authHeaders(token) }) diff --git a/src/store/modules/mediaProxyCache.js b/src/store/modules/mediaProxyCache.js index 815c14e4..8e675a44 100644 --- a/src/store/modules/mediaProxyCache.js +++ b/src/store/modules/mediaProxyCache.js @@ -5,16 +5,17 @@ import i18n from '@/lang' const mediaProxyCache = { state: { bannedUrls: [], - bannedUrlsCount: 0, currentPage: 1, - loading: false + loading: false, + pageSize: 50, + totalUrlsCount: 0 }, mutations: { SET_BANNED_URLS: (state, urls) => { state.bannedUrls = urls.map(el => { return { url: el } }) }, - SET_BANNED_URLS_COUNT: (state, count) => { - state.bannedUrlsCount = count + SET_TOTAL_URLS_COUNT: (state, count) => { + state.totalUrlsCount = count }, SET_LOADING: (state, status) => { state.loading = status @@ -24,11 +25,11 @@ const mediaProxyCache = { } }, actions: { - async ListBannedUrls({ commit, getters }, page) { + async ListBannedUrls({ commit, getters, state }, { page }) { commit('SET_LOADING', true) - const response = await listBannedUrls(page, getters.authHost, getters.token) + const response = await listBannedUrls(page, state.pageSize, getters.authHost, getters.token) commit('SET_BANNED_URLS', response.data.urls) - // commit('SET_BANNED_URLS_COUNT', count) + commit('SET_TOTAL_URLS_COUNT', response.data.count) commit('SET_PAGE', page) commit('SET_LOADING', false) }, @@ -40,12 +41,12 @@ const mediaProxyCache = { duration: 5 * 1000 }) if (ban) { - dispatch('ListBannedUrls', state.currentPage) + dispatch('ListBannedUrls', { page: state.currentPage }) } }, async RemoveBannedUrls({ dispatch, getters, state }, urls) { await removeBannedUrls(urls, getters.authHost, getters.token) - dispatch('ListBannedUrls', state.currentPage) + dispatch('ListBannedUrls', { page: state.currentPage }) } } } diff --git a/src/views/mediaProxyCache/index.vue b/src/views/mediaProxyCache/index.vue index 6c37082b..cecfa74e 100644 --- a/src/views/mediaProxyCache/index.vue +++ b/src/views/mediaProxyCache/index.vue @@ -46,6 +46,16 @@ + @@ -66,20 +76,29 @@ export default { bannedUrls() { return this.$store.state.mediaProxyCache.bannedUrls }, + currentPage() { + return this.$store.state.mediaProxyCache.currentPage + }, isDesktop() { return this.$store.state.app.device === 'desktop' }, loading() { return this.$store.state.mediaProxyCache.loading }, + pageSize() { + return this.$store.state.mediaProxyCache.pageSize + }, removeSelectedDisabled() { return this.selectedUrls.length === 0 + }, + urlsCount() { + return this.$store.state.mediaProxyCache.totalUrlsCount } }, mounted() { this.$store.dispatch('GetNodeInfo') this.$store.dispatch('NeedReboot') - this.$store.dispatch('ListBannedUrls', 1) + this.$store.dispatch('ListBannedUrls', { page: 1 }) }, methods: { evictURL() { @@ -87,6 +106,9 @@ export default { this.$store.dispatch('PurgeUrls', { urls, ban: this.ban }) this.urls = '' }, + handlePageChange(page) { + this.$store.dispatch('ListBannedUrls', { page }) + }, handleSelectionChange(value) { this.$data.selectedUrls = value }, @@ -133,6 +155,10 @@ h1 { justify-content: space-between; margin: 10px 15px; } +.pagination { + margin: 25px 0; + text-align: center; +} .remove-url-button { width: 150px; }