Show fetched reports
This commit is contained in:
Angelina Filippova
parent
8774af3259
commit
180f02f7a2
7 changed files with 80 additions and 44 deletions
|
|
@ -50,6 +50,7 @@
|
|||
"jszip": "3.1.5",
|
||||
"lodash": "^4.17.11",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"moment": "^2.24.0",
|
||||
"normalize.css": "7.0.0",
|
||||
"nprogress": "0.2.0",
|
||||
"screenfull": "4.0.0",
|
||||
|
|
|
|||
|
|
@ -1,14 +1,22 @@
|
|||
import { reports } from './reportsData'
|
||||
import request from '@/utils/request'
|
||||
import { getToken } from '@/utils/auth'
|
||||
import { baseName } from './utils'
|
||||
|
||||
export function fetchReports(index, size) {
|
||||
const response = reports.slice(index, index + size)
|
||||
return response
|
||||
export async function fetchReports(authHost, token) {
|
||||
return await request({
|
||||
baseURL: baseName(authHost),
|
||||
url: `/api/pleroma/admin/reports`,
|
||||
method: 'get',
|
||||
headers: authHeaders(token)
|
||||
})
|
||||
}
|
||||
|
||||
export function deleteNote(reportId, noteId) {
|
||||
const updatedNotes = reports
|
||||
.find(report => report.id === reportId)
|
||||
.notes
|
||||
.filter(note => note.id !== noteId)
|
||||
return updatedNotes
|
||||
}
|
||||
// export function deleteNote(reportId, noteId) {
|
||||
// const updatedNotes = reports
|
||||
// .find(report => report.id === reportId)
|
||||
// .notes
|
||||
// .filter(note => note.id !== noteId)
|
||||
// return updatedNotes
|
||||
// }
|
||||
|
||||
const authHeaders = (token) => token ? { 'Authorization': `Bearer ${getToken()}` } : {}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { fetchReports, deleteNote } from '@/api/reports'
|
||||
import { fetchReports } from '@/api/reports'
|
||||
|
||||
const reports = {
|
||||
state: {
|
||||
|
|
@ -22,27 +22,27 @@ const reports = {
|
|||
}
|
||||
},
|
||||
actions: {
|
||||
async FetchReports({ commit, state, getters }) {
|
||||
async FetchReports({ commit, getters }) {
|
||||
commit('SET_LOADING', true)
|
||||
const response = fetchReports(state.indexOfLastShownReport, state.size)
|
||||
const response = await fetchReports(getters.authHost, getters.token)
|
||||
|
||||
commit('SET_REPORTS', response)
|
||||
commit('SET_REPORTS', response.data.reports)
|
||||
commit('SET_INDEX')
|
||||
commit('SET_LOADING', false)
|
||||
},
|
||||
async AddNote({ commit, state, getters }, { reportId, note }) {
|
||||
const report = state.fetchedReports.find(report => report.id === reportId)
|
||||
report.notes = [...report.notes, note]
|
||||
const reportIndex = state.fetchedReports.findIndex(report => report.id === reportId)
|
||||
commit('SET_REPORT', { reportIndex, report })
|
||||
},
|
||||
async DeleteNote({ commit, state }, { reportId, noteId }) {
|
||||
const response = deleteNote(reportId, noteId)
|
||||
const report = state.fetchedReports.find(report => report.id === reportId)
|
||||
report.notes = response
|
||||
const reportIndex = state.fetchedReports.findIndex(report => report.id === reportId)
|
||||
commit('SET_REPORT', { reportIndex, report })
|
||||
}
|
||||
// async AddNote({ commit, state, getters }, { reportId, note }) {
|
||||
// const report = state.fetchedReports.find(report => report.id === reportId)
|
||||
// report.notes = [...report.notes, note]
|
||||
// const reportIndex = state.fetchedReports.findIndex(report => report.id === reportId)
|
||||
// commit('SET_REPORT', { reportIndex, report })
|
||||
// },
|
||||
// async DeleteNote({ commit, state }, { reportId, noteId }) {
|
||||
// const response = deleteNote(reportId, noteId)
|
||||
// const report = state.fetchedReports.find(report => report.id === reportId)
|
||||
// report.notes = response
|
||||
// const reportIndex = state.fetchedReports.findIndex(report => report.id === reportId)
|
||||
// commit('SET_REPORT', { reportIndex, report })
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -72,9 +72,6 @@ const users = {
|
|||
commit('SWAP_USER', updatedUser)
|
||||
},
|
||||
async FetchUsers({ commit, state, getters }, { page }) {
|
||||
const filters = Object.keys(state.filters).filter(filter => state.filters[filter]).join()
|
||||
const response = await fetchUsers(filters, getters.authHost, getters.token, page)
|
||||
|
||||
commit('SET_LOADING', true)
|
||||
|
||||
const filters = Object.keys(state.filters).filter(filter => state.filters[filter]).join()
|
||||
|
|
|
|||
|
|
@ -1,19 +1,23 @@
|
|||
<template>
|
||||
<el-timeline-item :timestamp="item.timestamp" placement="top" class="timeline-item-container">
|
||||
<el-timeline-item :timestamp="parseTimestamp(report.created_at)" placement="top" class="timeline-item-container">
|
||||
<el-card>
|
||||
<div class="header-container">
|
||||
<h4>{{ item.header }}</h4>
|
||||
<el-button plain size="small" @click="toggleNoteInput">{{ $t('reports.reply') }}</el-button>
|
||||
<h4>Report on {{ report.account.acct }}</h4>
|
||||
<div>
|
||||
<el-tag :type="getStateType(report.state)" size="large">{{ capitalizeFirstLetter(report.state) }}</el-tag>
|
||||
<el-button plain size="small" @click="toggleNoteInput">{{ $t('reports.reply') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<p>{{ item.content }}</p>
|
||||
<h5 class="id">#{{ report.id }}</h5>
|
||||
<p>{{ report.content }}</p>
|
||||
<el-collapse v-model="showNotes">
|
||||
<el-collapse-item :title="$t('reports.showNotes')" name="showNotes">
|
||||
<div v-if="item.notes.length > 0">
|
||||
<div v-for="note in item.notes" :key="note.id">
|
||||
<div v-if="report.statuses.length > 0">
|
||||
<div v-for="note in report.statuses" :key="note.id">
|
||||
<el-card :body-style="{ padding: '6px 14px 0 14px' }" class="note">
|
||||
<div class="header-container">
|
||||
<h4>{{ $t('reports.from') }} {{ note.author }}</h4>
|
||||
<i class="el-icon-close" @click="deleteNote(item.id, note.id)"/>
|
||||
<i class="el-icon-close" @click="deleteNote(report.id, note.id)"/>
|
||||
</div>
|
||||
<p class="timestamp">{{ note.timestamp }}</p>
|
||||
<p>{{ note.text }}</p>
|
||||
|
|
@ -30,7 +34,7 @@
|
|||
<i class="el-icon-close" @click="toggleNoteInput"/>
|
||||
</div>
|
||||
<el-input v-model="note" :rows="2" type="textarea" autofocus/>
|
||||
<el-button class="submit-button" plain size="small" @click="addNewNote(item.id)">{{ $t('reports.submit') }}</el-button>
|
||||
<el-button class="submit-button" plain size="small" @click="addNewNote(report.id)">{{ $t('reports.submit') }}</el-button>
|
||||
</div>
|
||||
</el-collapse>
|
||||
</el-card>
|
||||
|
|
@ -39,11 +43,12 @@
|
|||
|
||||
<script>
|
||||
import i18n from '@/lang'
|
||||
import * as moment from 'moment'
|
||||
|
||||
export default {
|
||||
name: 'TimelineItem',
|
||||
props: {
|
||||
item: {
|
||||
report: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
|
|
@ -56,9 +61,6 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
toggleNoteInput() {
|
||||
this.$data.showNewNoteInput = !this.$data.showNewNoteInput
|
||||
},
|
||||
addNewNote(reportId) {
|
||||
if (this.$data.note.length < 2) {
|
||||
this.$message('Note must contain at least 2 characters')
|
||||
|
|
@ -88,6 +90,25 @@ export default {
|
|||
message: i18n.t('reports.deleteCanceled')
|
||||
})
|
||||
})
|
||||
},
|
||||
capitalizeFirstLetter(str) {
|
||||
return str.charAt(0).toUpperCase() + str.slice(1)
|
||||
},
|
||||
getStateType(state) {
|
||||
switch (state) {
|
||||
case 'closed':
|
||||
return 'info'
|
||||
case 'resolved':
|
||||
return 'success'
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
},
|
||||
parseTimestamp(timestamp) {
|
||||
return moment(timestamp).format('YYYY-MM-DD HH:mm')
|
||||
},
|
||||
toggleNoteInput() {
|
||||
this.$data.showNewNoteInput = !this.$data.showNewNoteInput
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -122,6 +143,10 @@ export default {
|
|||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
}
|
||||
.id {
|
||||
color: gray;
|
||||
margin: 0;
|
||||
}
|
||||
.new-note {
|
||||
p {
|
||||
font-size: 13px;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<h1>{{ $t('reports.reports') }}</h1>
|
||||
<div class="block">
|
||||
<el-timeline class="timeline">
|
||||
<timeline-item v-loading="loading" v-for="item in reports" :item="item" :key="item.id"/>
|
||||
<timeline-item v-loading="loading" v-for="report in reports" :report="report" :key="report.id"/>
|
||||
</el-timeline>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6645,6 +6645,11 @@ mkdirp@0.5.1, mkdirp@0.5.x, mkdirp@0.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@
|
|||
dependencies:
|
||||
minimist "0.0.8"
|
||||
|
||||
moment@^2.24.0:
|
||||
version "2.24.0"
|
||||
resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
|
||||
integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
|
||||
|
||||
move-concurrently@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
|
||||
|
|
|
|||
Loading…
Reference in a new issue