Implement pagination for banned MediaProxy URLs

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)
   })

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) => {
+    SET_TOTAL_URLS_COUNT: (state, count) => {
-      state.bannedUrlsCount = 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 })
     }
   }
 }

src/views/mediaProxyCache/index.vue

@@ -46,6 +46,16 @@
         </template>
       </el-table-column>
     </el-table>
+    <div v-if="!loading" class="pagination">
+      <el-pagination
+        :total="urlsCount"
+        :current-page="currentPage"
+        :page-size="pageSize"
+        hide-on-single-page
+        layout="prev, pager, next"
+        @current-change="handlePageChange"
+      />
+    </div>
   </div>
 </template>
 
@@ -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;
 }