Fetch reports after changing and deleting status

This commit is contained in:
Angelina Filippova 2019-09-28 01:24:51 +03:00
parent c9e9b62955
commit 6ccffd9728
3 changed files with 27 additions and 41 deletions

View file

@ -28,33 +28,17 @@ const reports = {
const updatedReports = state.fetchedReports.map(report => report.id === reportId ? data : report)
commit('SET_REPORTS', updatedReports)
},
async ChangeStatusScope({ commit, getters, state }, { statusId, isSensitive, visibility, reportId }) {
const { data } = await changeStatusScope(statusId, isSensitive, visibility, getters.authHost, getters.token)
const updatedReports = state.fetchedReports.map(report => {
if (report.id === reportId) {
const statuses = report.statuses.map(status => status.id === statusId ? data : status)
return { ...report, statuses }
} else {
return report
}
})
commit('SET_REPORTS', updatedReports)
async ChangeStatusScope({ dispatch, getters }, { statusId, isSensitive, visibility }) {
await changeStatusScope(statusId, isSensitive, visibility, getters.authHost, getters.token)
dispatch('FetchReports')
},
ClearFetchedReports({ commit }) {
commit('SET_REPORTS', [])
commit('SET_LAST_REPORT_ID', '')
},
async DeleteStatus({ commit, getters, state }, { statusId, reportId }) {
async DeleteStatus({ dispatch, getters }, { statusId }) {
deleteStatus(statusId, getters.authHost, getters.token)
const updatedReports = state.fetchedReports.map(report => {
if (report.id === reportId) {
const statuses = report.statuses.filter(status => status.id !== statusId)
return { ...report, statuses }
} else {
return report
}
})
commit('SET_REPORTS', updatedReports)
dispatch('FetchReports')
},
async FetchReports({ commit, getters, state }) {
commit('SET_LOADING', true)

View file

@ -49,7 +49,9 @@
</div>
<div v-if="report.statuses.length > 0" class="statuses">
<el-collapse>
<statuses :report="report"/>
<el-collapse-item :title="getStatusesTitle(report.statuses)">
<statuses :statuses="report.statuses" />
</el-collapse-item>
</el-collapse>
</div>
</el-card>
@ -87,6 +89,9 @@ export default {
return 'primary'
}
},
getStatusesTitle(statuses) {
return `Reported statuses: ${statuses.length} item(s)`
},
parseTimestamp(timestamp) {
return moment(timestamp).format('L HH:mm')
}

View file

@ -1,6 +1,6 @@
<template>
<el-collapse-item :title="getStatusesTitle(report.statuses)">
<el-card v-for="status in report.statuses" :key="status.id" class="status-card">
<div>
<el-card v-for="status in statuses" :key="status.id" class="status-card">
<div slot="header">
<div class="status-header">
<div class="status-account-container">
@ -22,31 +22,31 @@
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-if="!status.sensitive"
@click.native="changeStatus(status.id, true, status.visibility, report.id)">
@click.native="changeStatus(status.id, true, status.visibility)">
{{ $t('reports.addSensitive') }}
</el-dropdown-item>
<el-dropdown-item
v-if="status.sensitive"
@click.native="changeStatus(status.id, false, status.visibility, report.id)">
@click.native="changeStatus(status.id, false, status.visibility)">
{{ $t('reports.removeSensitive') }}
</el-dropdown-item>
<el-dropdown-item
v-if="status.visibility !== 'public'"
@click.native="changeStatus(status.id, status.sensitive, 'public', report.id)">
@click.native="changeStatus(status.id, status.sensitive, 'public')">
{{ $t('reports.public') }}
</el-dropdown-item>
<el-dropdown-item
v-if="status.visibility !== 'private'"
@click.native="changeStatus(status.id, status.sensitive, 'private', report.id)">
@click.native="changeStatus(status.id, status.sensitive, 'private')">
{{ $t('reports.private') }}
</el-dropdown-item>
<el-dropdown-item
v-if="status.visibility !== 'unlisted'"
@click.native="changeStatus(status.id, status.sensitive, 'unlisted', report.id)">
@click.native="changeStatus(status.id, status.sensitive, 'unlisted')">
{{ $t('reports.unlisted') }}
</el-dropdown-item>
<el-dropdown-item
@click.native="deleteStatus(status.id, report.id)">
@click.native="deleteStatus(status.id)">
{{ $t('reports.deleteStatus') }}
</el-dropdown-item>
</el-dropdown-menu>
@ -61,7 +61,7 @@
</a>
</div>
</el-card>
</el-collapse-item>
</div>
</template>
<script>
@ -70,8 +70,8 @@ import moment from 'moment'
export default {
name: 'Statuses',
props: {
report: {
type: Object,
statuses: {
type: Array,
required: true
}
},
@ -79,16 +79,16 @@ export default {
capitalizeFirstLetter(str) {
return str.charAt(0).toUpperCase() + str.slice(1)
},
changeStatus(statusId, isSensitive, visibility, reportId) {
this.$store.dispatch('ChangeStatusScope', { statusId, isSensitive, visibility, reportId })
changeStatus(statusId, isSensitive, visibility) {
this.$store.dispatch('ChangeStatusScope', { statusId, isSensitive, visibility })
},
deleteStatus(statusId, reportId) {
deleteStatus(statusId) {
this.$confirm('Are you sure you want to delete this status?', 'Warning', {
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
type: 'warning'
}).then(() => {
this.$store.dispatch('DeleteStatus', { statusId, reportId })
this.$store.dispatch('DeleteStatus', { statusId })
this.$message({
type: 'success',
message: 'Delete completed'
@ -100,9 +100,6 @@ export default {
})
})
},
getStatusesTitle(statuses) {
return `Reported statuses: ${statuses.length} item(s)`
},
parseTimestamp(timestamp) {
return moment(timestamp).format('YYYY-MM-DD HH:mm')
}
@ -152,7 +149,7 @@ export default {
}
.status-card {
.el-card__header {
padding: 10px 17px
padding: 10px 17px;
}
.el-tag {
margin: 3px 4px 3px 0;