forked from AkkomaGang/admin-fe
Implement pagination
This commit is contained in:
parent
4dd550a0cf
commit
6e2ebd0519
4 changed files with 34 additions and 42 deletions
|
@ -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({
|
return await request({
|
||||||
baseURL: baseName(authHost),
|
baseURL: baseName(authHost),
|
||||||
url: `/api/pleroma/admin/reports?limit=${limit}&max_id=${max_id}`,
|
url,
|
||||||
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}`,
|
|
||||||
method: 'get',
|
method: 'get',
|
||||||
headers: authHeaders(token)
|
headers: authHeaders(token)
|
||||||
})
|
})
|
||||||
|
|
|
@ -1,10 +1,12 @@
|
||||||
import { changeState, changeStatusScope, deleteStatus, fetchReports, filterReports } from '@/api/reports'
|
import { changeState, changeStatusScope, deleteStatus, fetchReports } from '@/api/reports'
|
||||||
|
|
||||||
const reports = {
|
const reports = {
|
||||||
state: {
|
state: {
|
||||||
fetchedReports: [],
|
fetchedReports: [],
|
||||||
|
totalReportsCount: 0,
|
||||||
|
currentPage: 1,
|
||||||
|
pageSize: 1,
|
||||||
groupReports: true,
|
groupReports: true,
|
||||||
idOfLastReport: '',
|
|
||||||
stateFilter: '',
|
stateFilter: '',
|
||||||
loading: true
|
loading: true
|
||||||
},
|
},
|
||||||
|
@ -15,9 +17,15 @@ const reports = {
|
||||||
SET_LOADING: (state, status) => {
|
SET_LOADING: (state, status) => {
|
||||||
state.loading = status
|
state.loading = status
|
||||||
},
|
},
|
||||||
|
SET_PAGE: (state, page) => {
|
||||||
|
state.currentPage = page
|
||||||
|
},
|
||||||
SET_REPORTS: (state, reports) => {
|
SET_REPORTS: (state, reports) => {
|
||||||
state.fetchedReports = reports
|
state.fetchedReports = reports
|
||||||
},
|
},
|
||||||
|
SET_REPORTS_COUNT: (state, total) => {
|
||||||
|
state.totalReportsCount = total
|
||||||
|
},
|
||||||
SET_REPORTS_FILTER: (state, filter) => {
|
SET_REPORTS_FILTER: (state, filter) => {
|
||||||
state.stateFilter = filter
|
state.stateFilter = filter
|
||||||
},
|
},
|
||||||
|
@ -26,30 +34,29 @@ const reports = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
async ChangeReportState({ commit, getters, state }, { reportState, reportId }) {
|
async ChangeReportState({ dispatch, getters, state }, { reportState, reportId }) {
|
||||||
const { data } = await changeState(reportState, reportId, getters.authHost, getters.token)
|
await changeState(reportState, reportId, getters.authHost, getters.token)
|
||||||
const updatedReports = state.fetchedReports.map(report => report.id === reportId ? data : report)
|
dispatch('FetchReports', state.currentPage)
|
||||||
commit('SET_REPORTS', updatedReports)
|
|
||||||
},
|
},
|
||||||
async ChangeStatusScope({ dispatch, getters }, { statusId, isSensitive, visibility }) {
|
async ChangeStatusScope({ dispatch, getters, state }, { statusId, isSensitive, visibility }) {
|
||||||
await changeStatusScope(statusId, isSensitive, visibility, getters.authHost, getters.token)
|
await changeStatusScope(statusId, isSensitive, visibility, getters.authHost, getters.token)
|
||||||
dispatch('FetchReports')
|
dispatch('FetchReports', state.currentPage)
|
||||||
},
|
},
|
||||||
ClearFetchedReports({ commit }) {
|
ClearFetchedReports({ commit }) {
|
||||||
commit('SET_REPORTS', [])
|
commit('SET_REPORTS', [])
|
||||||
commit('SET_LAST_REPORT_ID', '')
|
commit('SET_LAST_REPORT_ID', '')
|
||||||
},
|
},
|
||||||
async DeleteStatus({ dispatch, getters }, { statusId }) {
|
async DeleteStatus({ dispatch, getters, state }, { statusId }) {
|
||||||
deleteStatus(statusId, getters.authHost, getters.token)
|
await deleteStatus(statusId, getters.authHost, getters.token)
|
||||||
dispatch('FetchReports')
|
dispatch('FetchReports', state.currentPage)
|
||||||
},
|
},
|
||||||
async FetchReports({ commit, getters, state }) {
|
async FetchReports({ commit, getters, state }, page) {
|
||||||
commit('SET_LOADING', true)
|
commit('SET_LOADING', true)
|
||||||
const { data } = state.stateFilter.length === 0
|
const { data } = await fetchReports(state.stateFilter, page, state.pageSize, getters.authHost, getters.token)
|
||||||
? await fetchReports(state.page_limit, state.idOfLastReport, getters.authHost, getters.token)
|
|
||||||
: await filterReports(state.stateFilter, state.page_limit, state.idOfLastReport, getters.authHost, getters.token)
|
|
||||||
|
|
||||||
commit('SET_REPORTS', data.reports)
|
commit('SET_REPORTS', data.reports)
|
||||||
|
commit('SET_REPORTS_COUNT', data.total)
|
||||||
|
commit('SET_PAGE', page)
|
||||||
commit('SET_LOADING', false)
|
commit('SET_LOADING', false)
|
||||||
},
|
},
|
||||||
SetFilter({ commit }, filter) {
|
SetFilter({ commit }, filter) {
|
||||||
|
|
|
@ -44,7 +44,7 @@ export default {
|
||||||
toggleFilters() {
|
toggleFilters() {
|
||||||
this.$store.dispatch('SetFilter', this.$data.filter)
|
this.$store.dispatch('SetFilter', this.$data.filter)
|
||||||
this.$store.dispatch('ClearFetchedReports')
|
this.$store.dispatch('ClearFetchedReports')
|
||||||
this.$store.dispatch('FetchReports')
|
this.$store.dispatch('FetchReports', 1)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -225,27 +225,18 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.$store.dispatch('FetchReports')
|
this.$store.dispatch('FetchReports', 1)
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
window.addEventListener('scroll', this.handleScroll)
|
window.addEventListener('scroll', this.handleScroll)
|
||||||
},
|
},
|
||||||
// destroyed() {
|
|
||||||
// window.removeEventListener('scroll', this.handleScroll)
|
|
||||||
// },
|
|
||||||
methods: {
|
methods: {
|
||||||
handlePageChange(page) {
|
handlePageChange(page) {
|
||||||
this.$store.dispatch('FetchReports', { page })
|
this.$store.dispatch('FetchReports', page)
|
||||||
},
|
},
|
||||||
toggleReportsGrouping() {
|
toggleReportsGrouping() {
|
||||||
this.$store.dispatch('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>
|
</script>
|
||||||
|
@ -274,6 +265,10 @@ export default {
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.reports-pagination {
|
||||||
|
margin: 25px 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
@media
|
@media
|
||||||
only screen and (max-width: 760px),
|
only screen and (max-width: 760px),
|
||||||
(min-device-width: 768px) and (max-device-width: 1024px) {
|
(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 {
|
#app > div > div.main-container > section > div > div.block > ul {
|
||||||
margin: 45px 45px 5px 19px;
|
margin: 45px 45px 5px 19px;
|
||||||
}
|
}
|
||||||
.reports-pagination {
|
|
||||||
margin: 25px 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue