qbism/qb-admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

Implement pagination

Browse source
This commit is contained in:
Angelina Filippova 2019-09-29 22:43:24 +03:00
parent 4dd550a0cf
commit 6e2ebd0519
4 changed files with 34 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/api/reports.js
View file

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

37
src/store/modules/reports.js
View file

@ -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) {

2
src/views/reports/components/ReportsFilter.vue
View file

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

21
src/views/reports/index.vue
View file

@ -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>