Add ability to change state of reports

src/api/reports.js

@@ -2,6 +2,16 @@ import request from '@/utils/request'
 import { getToken } from '@/utils/auth'
 import { baseName } from './utils'
 
+export async function changeState(state, id, authHost, token) {
+  return await request({
+    baseURL: baseName(authHost),
+    url: `/api/pleroma/admin/reports/${id}`,
+    method: 'put',
+    headers: authHeaders(token),
+    data: { state }
+  })
+}
+
 export async function fetchReports(limit, max_id, authHost, token) {
   return await request({
     baseURL: baseName(authHost),

src/lang/en.js

@@ -212,7 +212,8 @@ export default {
     cancel: 'Cancel',
     deleteCompleted: 'Delete comleted',
     deleteCanceled: 'Delete canceled',
-    noNotes: 'No notes to display'
+    noNotes: 'No notes to display',
+    changeState: 'Change state'
   },
   reportsFilter: {
     inputPlaceholder: 'Select filter',

src/store/modules/reports.js

-import { fetchReports, filterReports } from '@/api/reports'
+import { changeState, fetchReports, filterReports } from '@/api/reports'
 
 const reports = {
   state: {
@@ -15,18 +15,23 @@ const reports = {
     SET_LOADING: (state, status) => {
       state.loading = status
     },
+    SET_REPORT: (state, { reportIndex, data }) => {
+      state.fetchedReports[reportIndex] = data
+    },
     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 }) {
+    async ChangeReportState({ commit, getters, state }, { reportState, reportId }) {
+      const { data } = await changeState(reportState, reportId, getters.authHost, getters.token)
+      const reportIndex = state.fetchedReports.findIndex(report => report.id === reportId)
+      commit('SET_REPORT', { reportIndex, data })
+    },
+    async FetchReports({ commit, getters, state }) {
       commit('SET_LOADING', true)
       const response = await fetchReports(state.page_limit, state.idOfLastReport, getters.authHost, getters.token)
       const reports = state.fetchedReports.concat(response.data.reports)

src/views/reports/components/TimelineItem.vue

@@ -4,7 +4,15 @@
       <div class="header-container">
         <h3 class="report-title">Report on {{ report.account.display_name }}</h3>
         <div>
-          <el-tag :type="getStateType(report.state)" size="large">{{ capitalizeFirstLetter(report.state) }}</el-tag>
+          <el-tag :type="getStateType(report.state)" :key="report.state" size="large">{{ capitalizeFirstLetter(report.state) }}</el-tag>
+          <el-dropdown>
+            <el-button plain size="small" icon="el-icon-edit">{{ $t('reports.changeState') }}<i class="el-icon-arrow-down el-icon--right"/></el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item v-if="report.state !== 'resolved'" @click.native="changeReportState('resolved', report.id)">Resolve</el-dropdown-item>
+              <el-dropdown-item v-if="report.state !== 'open'" @click.native="changeReportState('open', report.id)">Open</el-dropdown-item>
+              <el-dropdown-item v-if="report.state !== 'closed'" @click.native="changeReportState('closed', report.id)">Close</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
           <!-- <el-button plain size="small" @click="toggleNoteInput">{{ $t('reports.reply') }}</el-button> -->
         </div>
       </div>
@@ -121,6 +129,9 @@ export default {
         this.$data.note = ''
       }
     },
+    changeReportState(reportState, reportId) {
+      this.$store.dispatch('ChangeReportState', { reportState, reportId })
+    },
     deleteNote(reportId, noteId) {
       this.$confirm(i18n.t('reports.confirmMsg'), {
         confirmButtonText: i18n.t('reports.delete'),