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') - // } - // } } } @@ -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; - } }