From 6e2ebd051948163c18dc8b500bfdcf16f3d22289 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Sun, 29 Sep 2019 22:43:24 +0300
Subject: [PATCH] Implement pagination
---
src/api/reports.js | 16 +++-----
src/store/modules/reports.js | 37 +++++++++++--------
.../reports/components/ReportsFilter.vue | 2 +-
src/views/reports/index.vue | 21 +++--------
4 files changed, 34 insertions(+), 42 deletions(-)
diff --git a/src/api/reports.js b/src/api/reports.js
index c84a5bfd..9bad8f86 100644
--- a/src/api/reports.js
+++ b/src/api/reports.js
@@ -31,19 +31,13 @@ export async function deleteStatus(id, authHost, token) {
})
}
-export async function fetchReports(limit, max_id, authHost, token) {
+export async function fetchReports(filter, page, pageSize, authHost, token) {
+ const url = filter.length > 0
+ ? `/api/pleroma/admin/reports?state=${filter}&page=${page}&page_size=${pageSize}`
+ : `/api/pleroma/admin/reports?page=${page}&page_size=${pageSize}`
return await request({
baseURL: baseName(authHost),
- url: `/api/pleroma/admin/reports?limit=${limit}&max_id=${max_id}`,
- method: 'get',
- headers: authHeaders(token)
- })
-}
-
-export async function filterReports(filter, limit, max_id, authHost, token) {
- return await request({
- baseURL: baseName(authHost),
- url: `/api/pleroma/admin/reports?state=${filter}&limit=${limit}&max_id=${max_id}`,
+ url,
method: 'get',
headers: authHeaders(token)
})
diff --git a/src/store/modules/reports.js b/src/store/modules/reports.js
index b5321847..5d1cdb69 100644
--- a/src/store/modules/reports.js
+++ b/src/store/modules/reports.js
@@ -1,10 +1,12 @@
-import { changeState, changeStatusScope, deleteStatus, fetchReports, filterReports } from '@/api/reports'
+import { changeState, changeStatusScope, deleteStatus, fetchReports } from '@/api/reports'
const reports = {
state: {
fetchedReports: [],
+ totalReportsCount: 0,
+ currentPage: 1,
+ pageSize: 1,
groupReports: true,
- idOfLastReport: '',
stateFilter: '',
loading: true
},
@@ -15,9 +17,15 @@ const reports = {
SET_LOADING: (state, status) => {
state.loading = status
},
+ SET_PAGE: (state, page) => {
+ state.currentPage = page
+ },
SET_REPORTS: (state, reports) => {
state.fetchedReports = reports
},
+ SET_REPORTS_COUNT: (state, total) => {
+ state.totalReportsCount = total
+ },
SET_REPORTS_FILTER: (state, filter) => {
state.stateFilter = filter
},
@@ -26,30 +34,29 @@ const reports = {
}
},
actions: {
- async ChangeReportState({ commit, getters, state }, { reportState, reportId }) {
- const { data } = await changeState(reportState, reportId, getters.authHost, getters.token)
- const updatedReports = state.fetchedReports.map(report => report.id === reportId ? data : report)
- commit('SET_REPORTS', updatedReports)
+ async ChangeReportState({ dispatch, getters, state }, { reportState, reportId }) {
+ await changeState(reportState, reportId, getters.authHost, getters.token)
+ dispatch('FetchReports', state.currentPage)
},
- async ChangeStatusScope({ dispatch, getters }, { statusId, isSensitive, visibility }) {
+ async ChangeStatusScope({ dispatch, getters, state }, { statusId, isSensitive, visibility }) {
await changeStatusScope(statusId, isSensitive, visibility, getters.authHost, getters.token)
- dispatch('FetchReports')
+ dispatch('FetchReports', state.currentPage)
},
ClearFetchedReports({ commit }) {
commit('SET_REPORTS', [])
commit('SET_LAST_REPORT_ID', '')
},
- async DeleteStatus({ dispatch, getters }, { statusId }) {
- deleteStatus(statusId, getters.authHost, getters.token)
- dispatch('FetchReports')
+ async DeleteStatus({ dispatch, getters, state }, { statusId }) {
+ await deleteStatus(statusId, getters.authHost, getters.token)
+ dispatch('FetchReports', state.currentPage)
},
- async FetchReports({ commit, getters, state }) {
+ async FetchReports({ commit, getters, state }, page) {
commit('SET_LOADING', true)
- const { data } = state.stateFilter.length === 0
- ? await fetchReports(state.page_limit, state.idOfLastReport, getters.authHost, getters.token)
- : await filterReports(state.stateFilter, state.page_limit, state.idOfLastReport, getters.authHost, getters.token)
+ const { data } = await fetchReports(state.stateFilter, page, state.pageSize, getters.authHost, getters.token)
commit('SET_REPORTS', data.reports)
+ commit('SET_REPORTS_COUNT', data.total)
+ commit('SET_PAGE', page)
commit('SET_LOADING', false)
},
SetFilter({ commit }, filter) {
diff --git a/src/views/reports/components/ReportsFilter.vue b/src/views/reports/components/ReportsFilter.vue
index 40c23216..da1fd782 100644
--- a/src/views/reports/components/ReportsFilter.vue
+++ b/src/views/reports/components/ReportsFilter.vue
@@ -44,7 +44,7 @@ export default {
toggleFilters() {
this.$store.dispatch('SetFilter', this.$data.filter)
this.$store.dispatch('ClearFetchedReports')
- this.$store.dispatch('FetchReports')
+ this.$store.dispatch('FetchReports', 1)
}
}
}
diff --git a/src/views/reports/index.vue b/src/views/reports/index.vue
index f35ab2e3..fc7617f9 100644
--- a/src/views/reports/index.vue
+++ b/src/views/reports/index.vue
@@ -225,27 +225,18 @@ export default {
}
},
mounted() {
- this.$store.dispatch('FetchReports')
+ this.$store.dispatch('FetchReports', 1)
},
created() {
window.addEventListener('scroll', this.handleScroll)
},
- // destroyed() {
- // window.removeEventListener('scroll', this.handleScroll)
- // },
methods: {
handlePageChange(page) {
- this.$store.dispatch('FetchReports', { page })
+ this.$store.dispatch('FetchReports', page)
},
toggleReportsGrouping() {
this.$store.dispatch('ToggleReportsGrouping')
}
- // handleScroll(reports) {
- // const bottomOfWindow = document.documentElement.scrollHeight - document.documentElement.scrollTop === document.documentElement.clientHeight
- // if (bottomOfWindow) {
- // this.$store.dispatch('FetchReports')
- // }
- // }
}
}
</script>
@@ -274,6 +265,10 @@ export default {
}
}
+.reports-pagination {
+ margin: 25px 0;
+ text-align: center;
+}
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
@@ -288,9 +283,5 @@ only screen and (max-width: 760px),
#app > div > div.main-container > section > div > div.block > ul {
margin: 45px 45px 5px 19px;
}
- .reports-pagination {
- margin: 25px 0;
- text-align: center;
- }
}
</style>
--
GitLab