Add ability to filter reports

src/api/reports.js

@@ -11,7 +11,13 @@ export async function fetchReports(limit, max_id, authHost, token) {
   })
 }
 
-export async function toggleReportsFilter(authHost, token, filters) {
+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',
+    headers: authHeaders(token)
+  })
 }
 
 const authHeaders = (token) => token ? { 'Authorization': `Bearer ${getToken()}` } : {}

src/store/modules/reports.js

-import { fetchReports, toggleReportsFilter } from '@/api/reports'
+import { fetchReports, filterReports } from '@/api/reports'
 
 const reports = {
   state: {
     fetchedReports: [],
     idOfLastReport: '',
     page_limit: 5,
+    stateFilter: '',
     loading: true
   },
   mutations: {
-    SET_REPORTS: (state, reports) => {
-      state.fetchedReports = state.fetchedReports.concat(reports)
-    },
-    SET_REPORT: (state, { index, report }) => {
-      state.fetchedReports[index] = report
+    SET_LAST_REPORT_ID: (state, id) => {
+      state.idOfLastReport = id
     },
     SET_LOADING: (state, status) => {
       state.loading = status
     },
-    SET_LAST_REPORT_ID: (state, id) => {
-      state.idOfLastReport = id
+    SET_REPORTS: (state, reports) => {
+      state.fetchedReports = reports
+    },
+    SET_REPORTS_FILTER: (state, filter) => {
+      state.stateFilter = filter
     }
+    // SET_REPORT: (state, { index, report }) => {
+    //   state.fetchedReports[index] = report
+    // },
   },
   actions: {
     async FetchReports({ commit, state, getters }) {
       commit('SET_LOADING', true)
       const response = await fetchReports(state.page_limit, state.idOfLastReport, getters.authHost, getters.token)
-      const reports = response.data.reports
+      const reports = state.fetchedReports.concat(response.data.reports)
       const id = reports.length > 0 ? reports[reports.length - 1].id : state.idOfLastReport
 
       commit('SET_REPORTS', reports)
       commit('SET_LAST_REPORT_ID', id)
       commit('SET_LOADING', false)
     },
-    async ToggleReportsFilter({ getters }, filters) {
-      const response = await toggleReportsFilter(getters.authHost, getters.token, filters)
-      return response.data
+    async ToggleReportsFilter({ commit, dispatch, getters, state }, filter) {
+      commit('SET_REPORTS', [])
+      commit('SET_LAST_REPORT_ID', '')
+
+      if (filter.length === 0) {
+        dispatch('FetchReports')
+      } else {
+        commit('SET_REPORTS_FILTER', filter)
+        commit('SET_LOADING', true)
+
+        const response = await filterReports(state.stateFilter, state.page_limit, state.idOfLastReport, getters.authHost, getters.token)
+        const reports = state.fetchedReports.concat(response.data.reports)
+        const id = reports.length > 0 ? reports[reports.length - 1].id : state.idOfLastReport
+
+        commit('SET_REPORTS', reports)
+        commit('SET_LAST_REPORT_ID', id)
+        commit('SET_LOADING', false)
+      }
     }
     // async AddNote({ commit, state, getters }, { reportId, note }) {
     //   const report = state.fetchedReports.find(report => report.id === reportId)

src/views/reports/components/ReportsFilter.vue

 <template>
   <el-select
-    v-model="value"
-    :clearable="isDesktop"
+    v-model="filter"
     :placeholder="$t('reportsFilter.inputPlaceholder')"
-    multiple
+    clearable
     class="select-field"
     @change="toggleFilters">
     <el-option value="open">{{ $t('reportsFilter.open') }}</el-option>
@@ -16,18 +15,12 @@
 export default {
   data() {
     return {
-      value: []
-    }
-  },
-  computed: {
-    isDesktop() {
-      return this.$store.state.app.device === 'desktop'
+      filter: []
     }
   },
   methods: {
     toggleFilters() {
-      const currentFilters = this.$data.value.reduce((acc, filter) => ({ ...acc, [filter]: true }), {})
-      this.$store.dispatch('ToggleReportsFilter', currentFilters)
+      this.$store.dispatch('ToggleReportsFilter', this.$data.filter)
     }
   }
 }