Extract status into separate view
This commit is contained in:
parent
d29cd29941
commit
9f99dea72f
4 changed files with 181 additions and 179 deletions
|
@ -40,7 +40,9 @@
|
||||||
<div v-if="group.status">
|
<div v-if="group.status">
|
||||||
<div class="line"/>
|
<div class="line"/>
|
||||||
<span class="report-row-key">{{ $t('reports.reportedStatus') }}:</span>
|
<span class="report-row-key">{{ $t('reports.reportedStatus') }}:</span>
|
||||||
<statuses :statuses="group.status" class="reported-status"/>
|
<div v-for="status in group.status" :key="status.id">
|
||||||
|
<status :status="status" class="reported-status"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="group.reports">
|
<div v-if="group.reports">
|
||||||
<div class="line"/>
|
<div class="line"/>
|
||||||
|
@ -57,11 +59,11 @@
|
||||||
<script>
|
<script>
|
||||||
import ModerateUserDropdown from './ModerateUserDropdown'
|
import ModerateUserDropdown from './ModerateUserDropdown'
|
||||||
import ReportCard from './ReportCard'
|
import ReportCard from './ReportCard'
|
||||||
import Statuses from './Statuses'
|
import Status from '../../status/Status'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Report',
|
name: 'Report',
|
||||||
components: { ModerateUserDropdown, ReportCard, Statuses },
|
components: { ModerateUserDropdown, ReportCard, Status },
|
||||||
props: {
|
props: {
|
||||||
groups: {
|
groups: {
|
||||||
type: Array,
|
type: Array,
|
||||||
|
|
|
@ -57,7 +57,9 @@
|
||||||
<div v-if="report.statuses.length > 0" class="statuses">
|
<div v-if="report.statuses.length > 0" class="statuses">
|
||||||
<el-collapse>
|
<el-collapse>
|
||||||
<el-collapse-item :title="getStatusesTitle(report.statuses)">
|
<el-collapse-item :title="getStatusesTitle(report.statuses)">
|
||||||
<statuses :statuses="report.statuses" />
|
<div v-for="status in report.statuses" :key="status.id">
|
||||||
|
<status :status="status" />
|
||||||
|
</div>
|
||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
</el-collapse>
|
</el-collapse>
|
||||||
</div>
|
</div>
|
||||||
|
@ -79,12 +81,12 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import moment from 'moment'
|
import moment from 'moment'
|
||||||
import Statuses from './Statuses'
|
import Status from '../../status/Status'
|
||||||
import ModerateUserDropdown from './ModerateUserDropdown'
|
import ModerateUserDropdown from './ModerateUserDropdown'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Report',
|
name: 'Report',
|
||||||
components: { Statuses, ModerateUserDropdown },
|
components: { Status, ModerateUserDropdown },
|
||||||
props: {
|
props: {
|
||||||
reports: {
|
reports: {
|
||||||
type: Array,
|
type: Array,
|
||||||
|
|
|
@ -1,173 +0,0 @@
|
||||||
<template>
|
|
||||||
<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">
|
|
||||||
<div class="status-account">
|
|
||||||
<img :src="status.account.avatar" class="status-avatar-img">
|
|
||||||
<h3 class="status-account-name">{{ status.account.display_name }}</h3>
|
|
||||||
</div>
|
|
||||||
<a :href="status.account.url" target="_blank" class="account">
|
|
||||||
@{{ status.account.acct }}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="status-actions">
|
|
||||||
<el-tag v-if="status.sensitive" type="warning" size="large">{{ $t('reports.sensitive') }}</el-tag>
|
|
||||||
<el-tag size="large">{{ capitalizeFirstLetter(status.visibility) }}</el-tag>
|
|
||||||
<el-dropdown trigger="click">
|
|
||||||
<el-button plain size="small" icon="el-icon-edit" class="status-actions-button">
|
|
||||||
{{ $t('reports.changeScope') }}<i class="el-icon-arrow-down el-icon--right"/>
|
|
||||||
</el-button>
|
|
||||||
<el-dropdown-menu slot="dropdown">
|
|
||||||
<el-dropdown-item
|
|
||||||
v-if="!status.sensitive"
|
|
||||||
@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)">
|
|
||||||
{{ $t('reports.removeSensitive') }}
|
|
||||||
</el-dropdown-item>
|
|
||||||
<el-dropdown-item
|
|
||||||
v-if="status.visibility !== 'public'"
|
|
||||||
@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')">
|
|
||||||
{{ $t('reports.private') }}
|
|
||||||
</el-dropdown-item>
|
|
||||||
<el-dropdown-item
|
|
||||||
v-if="status.visibility !== 'unlisted'"
|
|
||||||
@click.native="changeStatus(status.id, status.sensitive, 'unlisted')">
|
|
||||||
{{ $t('reports.unlisted') }}
|
|
||||||
</el-dropdown-item>
|
|
||||||
<el-dropdown-item
|
|
||||||
@click.native="deleteStatus(status.id)">
|
|
||||||
{{ $t('reports.deleteStatus') }}
|
|
||||||
</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</el-dropdown>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="status-body">
|
|
||||||
<span class="status-content" v-html="status.content"/>
|
|
||||||
<a :href="status.url" target="_blank" class="account">
|
|
||||||
{{ parseTimestamp(status.created_at) }}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</el-card>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import moment from 'moment'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'Statuses',
|
|
||||||
props: {
|
|
||||||
statuses: {
|
|
||||||
type: Array,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
capitalizeFirstLetter(str) {
|
|
||||||
return str.charAt(0).toUpperCase() + str.slice(1)
|
|
||||||
},
|
|
||||||
changeStatus(statusId, isSensitive, visibility) {
|
|
||||||
this.$store.dispatch('ChangeStatusScope', { statusId, isSensitive, visibility })
|
|
||||||
},
|
|
||||||
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 })
|
|
||||||
this.$message({
|
|
||||||
type: 'success',
|
|
||||||
message: 'Delete completed'
|
|
||||||
})
|
|
||||||
}).catch(() => {
|
|
||||||
this.$message({
|
|
||||||
type: 'info',
|
|
||||||
message: 'Delete canceled'
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
parseTimestamp(timestamp) {
|
|
||||||
return moment(timestamp).format('YYYY-MM-DD HH:mm')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style rel='stylesheet/scss' lang='scss'>
|
|
||||||
.account {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
.status-account {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.status-avatar-img {
|
|
||||||
width: 15px;
|
|
||||||
height: 15px;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
.status-account-name {
|
|
||||||
margin: 0;
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
.status-body {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.status-content {
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
.status-card {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
.status-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
@media
|
|
||||||
only screen and (max-width: 760px),
|
|
||||||
(min-device-width: 768px) and (max-device-width: 1024px) {
|
|
||||||
.el-message {
|
|
||||||
min-width: 80%;
|
|
||||||
}
|
|
||||||
.el-message-box {
|
|
||||||
width: 80%;
|
|
||||||
}
|
|
||||||
.status-card {
|
|
||||||
.el-card__header {
|
|
||||||
padding: 10px 17px;
|
|
||||||
}
|
|
||||||
.el-tag {
|
|
||||||
margin: 3px 4px 3px 0;
|
|
||||||
}
|
|
||||||
.status-account-container {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
.status-actions-button {
|
|
||||||
margin: 3px 0 3px;
|
|
||||||
}
|
|
||||||
.status-actions {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.status-header {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
171
src/views/status/Status.vue
Normal file
171
src/views/status/Status.vue
Normal file
|
@ -0,0 +1,171 @@
|
||||||
|
<template>
|
||||||
|
<el-card class="status-card">
|
||||||
|
<div slot="header">
|
||||||
|
<div class="status-header">
|
||||||
|
<div class="status-account-container">
|
||||||
|
<div class="status-account">
|
||||||
|
<img :src="status.account.avatar" class="status-avatar-img">
|
||||||
|
<h3 class="status-account-name">{{ status.account.display_name }}</h3>
|
||||||
|
</div>
|
||||||
|
<a :href="status.account.url" target="_blank" class="account">
|
||||||
|
@{{ status.account.acct }}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="status-actions">
|
||||||
|
<el-tag v-if="status.sensitive" type="warning" size="large">{{ $t('reports.sensitive') }}</el-tag>
|
||||||
|
<el-tag size="large">{{ capitalizeFirstLetter(status.visibility) }}</el-tag>
|
||||||
|
<el-dropdown trigger="click">
|
||||||
|
<el-button plain size="small" icon="el-icon-edit" class="status-actions-button">
|
||||||
|
{{ $t('reports.changeScope') }}<i class="el-icon-arrow-down el-icon--right"/>
|
||||||
|
</el-button>
|
||||||
|
<el-dropdown-menu slot="dropdown">
|
||||||
|
<el-dropdown-item
|
||||||
|
v-if="!status.sensitive"
|
||||||
|
@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)">
|
||||||
|
{{ $t('reports.removeSensitive') }}
|
||||||
|
</el-dropdown-item>
|
||||||
|
<el-dropdown-item
|
||||||
|
v-if="status.visibility !== 'public'"
|
||||||
|
@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')">
|
||||||
|
{{ $t('reports.private') }}
|
||||||
|
</el-dropdown-item>
|
||||||
|
<el-dropdown-item
|
||||||
|
v-if="status.visibility !== 'unlisted'"
|
||||||
|
@click.native="changeStatus(status.id, status.sensitive, 'unlisted')">
|
||||||
|
{{ $t('reports.unlisted') }}
|
||||||
|
</el-dropdown-item>
|
||||||
|
<el-dropdown-item
|
||||||
|
@click.native="deleteStatus(status.id)">
|
||||||
|
{{ $t('reports.deleteStatus') }}
|
||||||
|
</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="status-body">
|
||||||
|
<span class="status-content" v-html="status.content"/>
|
||||||
|
<a :href="status.url" target="_blank" class="account">
|
||||||
|
{{ parseTimestamp(status.created_at) }}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import moment from 'moment'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Statuses',
|
||||||
|
props: {
|
||||||
|
status: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
capitalizeFirstLetter(str) {
|
||||||
|
return str.charAt(0).toUpperCase() + str.slice(1)
|
||||||
|
},
|
||||||
|
changeStatus(statusId, isSensitive, visibility) {
|
||||||
|
this.$store.dispatch('ChangeStatusScope', { statusId, isSensitive, visibility })
|
||||||
|
},
|
||||||
|
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 })
|
||||||
|
this.$message({
|
||||||
|
type: 'success',
|
||||||
|
message: 'Delete completed'
|
||||||
|
})
|
||||||
|
}).catch(() => {
|
||||||
|
this.$message({
|
||||||
|
type: 'info',
|
||||||
|
message: 'Delete canceled'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
parseTimestamp(timestamp) {
|
||||||
|
return moment(timestamp).format('YYYY-MM-DD HH:mm')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style rel='stylesheet/scss' lang='scss'>
|
||||||
|
.account {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.status-account {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.status-avatar-img {
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
.status-account-name {
|
||||||
|
margin: 0;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
.status-body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.status-content {
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
.status-card {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
.status-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
@media
|
||||||
|
only screen and (max-width: 760px),
|
||||||
|
(min-device-width: 768px) and (max-device-width: 1024px) {
|
||||||
|
.el-message {
|
||||||
|
min-width: 80%;
|
||||||
|
}
|
||||||
|
.el-message-box {
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
.status-card {
|
||||||
|
.el-card__header {
|
||||||
|
padding: 10px 17px;
|
||||||
|
}
|
||||||
|
.el-tag {
|
||||||
|
margin: 3px 4px 3px 0;
|
||||||
|
}
|
||||||
|
.status-account-container {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
.status-actions-button {
|
||||||
|
margin: 3px 0 3px;
|
||||||
|
}
|
||||||
|
.status-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.status-header {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in a new issue