Update displaying accounts in reports and statuses
This commit is contained in:
Angelina Filippova
parent
66c5a85821
commit
d5e11e279f
7 changed files with 36 additions and 146 deletions
|
|
@ -1,14 +1,14 @@
|
|||
const reports = [
|
||||
{ created_at: '2019-05-21T21:35:33.000Z', account: { acct: 'benj', display_name: 'Benjamin Fame', tags: [] }, actor: { acct: 'admin' }, state: 'open', id: '2', content: 'This is a report', statuses: [] },
|
||||
{ created_at: '2019-05-20T22:45:33.000Z', account: { acct: 'alice', display_name: 'Alice Pool', tags: [] }, actor: { acct: 'admin2' }, state: 'resolved', id: '1', content: 'Please block this user', statuses: [] },
|
||||
{ created_at: '2019-05-18T13:01:33.000Z', account: { acct: 'nick', display_name: 'Nick Keys', tags: [] }, actor: { acct: 'admin' }, state: 'closed', id: '3', content: '', statuses: [] },
|
||||
{ created_at: '2019-05-21T21:35:33.000Z', account: { acct: 'benj', display_name: 'Benjamin Fame', tags: [] }, actor: { acct: 'admin' }, state: 'open', id: '5', content: 'This is a report', statuses: [] },
|
||||
{ created_at: '2019-05-20T22:45:33.000Z', account: { acct: 'alice', display_name: 'Alice Pool', tags: [] }, actor: { acct: 'admin2' }, state: 'resolved', id: '7', content: 'Please block this user', statuses: [
|
||||
{ created_at: '2019-05-21T21:35:33.000Z', account: { display_name: 'Benjamin Fame', tags: [] }, actor: {}, state: 'open', id: '2', content: 'This is a report', statuses: [] },
|
||||
{ created_at: '2019-05-20T22:45:33.000Z', account: { display_name: 'Alice Pool', tags: [] }, actor: {}, state: 'resolved', id: '1', content: 'Please block this user', statuses: [] },
|
||||
{ created_at: '2019-05-18T13:01:33.000Z', account: { display_name: 'Nick Keys', tags: [] }, actor: {}, state: 'closed', id: '3', content: '', statuses: [] },
|
||||
{ created_at: '2019-05-21T21:35:33.000Z', account: { display_name: 'Benjamin Fame', tags: [] }, actor: {}, state: 'open', id: '5', content: 'This is a report', statuses: [] },
|
||||
{ created_at: '2019-05-20T22:45:33.000Z', account: { display_name: 'Alice Pool', tags: [] }, actor: {}, state: 'resolved', id: '7', content: 'Please block this user', statuses: [
|
||||
{ account: { display_name: 'Alice Pool', avatar: '' }, visibility: 'public', sensitive: false, id: '11', content: 'Hey!', url: '', created_at: '2019-05-10T21:35:33.000Z' },
|
||||
{ account: { display_name: 'Alice Pool', avatar: '' }, visibility: 'unlisted', sensitive: true, id: '10', content: 'Bye!', url: '', created_at: '2019-05-10T21:00:33.000Z' }
|
||||
] },
|
||||
{ created_at: '2019-05-18T13:01:33.000Z', account: { acct: 'nick', display_name: 'Nick Keys', tags: [] }, actor: { acct: 'admin' }, state: 'closed', id: '6', content: '', statuses: [] },
|
||||
{ created_at: '2019-05-18T13:01:33.000Z', account: { acct: 'nick', display_name: 'Nick Keys', tags: [] }, actor: { acct: 'admin' }, state: 'closed', id: '4', content: '', statuses: [] }
|
||||
{ created_at: '2019-05-18T13:01:33.000Z', account: { display_name: 'Nick Keys', tags: [] }, actor: {}, state: 'closed', id: '6', content: '', statuses: [] },
|
||||
{ created_at: '2019-05-18T13:01:33.000Z', account: { display_name: 'Nick Keys', tags: [] }, actor: {}, state: 'closed', id: '4', content: '', statuses: [] }
|
||||
]
|
||||
|
||||
export async function fetchReports(filter, page, pageSize, authHost, token) {
|
||||
|
|
|
|||
|
|
@ -5,13 +5,17 @@
|
|||
<div class="status-header">
|
||||
<div class="status-account-container">
|
||||
<div class="status-account">
|
||||
<el-checkbox v-if="showCheckbox" class="status-checkbox" @change="handleStatusSelection(status.account)"/>
|
||||
<img :src="status.account.avatar" class="status-avatar-img">
|
||||
<h3 class="status-account-name">{{ status.account.display_name }}</h3>
|
||||
<el-checkbox v-if="showCheckbox" class="status-checkbox" @change="handleStatusSelection(account)"/>
|
||||
<img :src="account.avatar" class="status-avatar-img">
|
||||
<a v-if="!account.deactivated" :href="account.url" target="_blank" class="account">
|
||||
<h3 class="status-account-name">{{ account.display_name }}</h3>
|
||||
</a>
|
||||
<span v-else>
|
||||
<h3 class="status-account-name">{{ account.display_name }}</h3>
|
||||
<h3 class="status-account-name deactivated"> (deactivated)</h3>
|
||||
</span>
|
||||
</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>
|
||||
|
|
@ -121,6 +125,11 @@ import moment from 'moment'
|
|||
export default {
|
||||
name: 'Status',
|
||||
props: {
|
||||
account: {
|
||||
type: Object,
|
||||
required: false,
|
||||
default: () => { return {} }
|
||||
},
|
||||
fetchStatusesByInstance: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<h3 class="note-actor-name">{{ note.user.display_name }}</h3>
|
||||
</div>
|
||||
<a :href="note.user.url" target="_blank">
|
||||
@{{ note.user.acct }}
|
||||
@{{ note.user.display_name }}
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -33,9 +33,13 @@
|
|||
:src="report.account.avatar"
|
||||
alt="avatar"
|
||||
class="avatar-img">
|
||||
<a :href="report.account.url" target="_blank" class="account">
|
||||
<span>{{ report.account.acct }}</span>
|
||||
<a v-if="!report.account.deactivated" :href="report.account.url" target="_blank" class="account">
|
||||
<span>{{ report.account.display_name }}</span>
|
||||
</a>
|
||||
<span v-else>
|
||||
{{ report.account.display_name }}
|
||||
<span class="deactivated"> (deactivated)</span>
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="report.content.length > 0">
|
||||
<el-divider class="divider"/>
|
||||
|
|
@ -51,14 +55,14 @@
|
|||
alt="avatar"
|
||||
class="avatar-img">
|
||||
<a :href="report.actor.url" target="_blank" class="account">
|
||||
<span>{{ report.actor.acct }}</span>
|
||||
<span>{{ report.actor.display_name }}</span>
|
||||
</a>
|
||||
</div>
|
||||
<div v-if="showStatuses(report.statuses)" class="statuses">
|
||||
<el-collapse>
|
||||
<el-collapse-item :title="getStatusesTitle(report.statuses)">
|
||||
<div v-for="status in report.statuses" :key="status.id">
|
||||
<status :status="status" :show-checkbox="false" :page="currentPage"/>
|
||||
<status :status="status" :account="status.account.display_name ? status.account : report.account" :show-checkbox="false" :page="currentPage"/>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
|
|
@ -183,6 +187,9 @@ export default {
|
|||
.divider {
|
||||
margin: 15px 0;
|
||||
}
|
||||
.deactivated {
|
||||
color: gray;
|
||||
}
|
||||
.el-card__body {
|
||||
padding: 17px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,127 +0,0 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-card v-for="report in reports" :key="report.id" class="report-card">
|
||||
<div slot="header">
|
||||
<div class="report-header">
|
||||
<div class="report-actor-container">
|
||||
<div class="report-actor">
|
||||
<img :src="report.actor.avatar" class="report-avatar-img">
|
||||
<h3 class="report-actor-name">{{ report.actor.display_name }}</h3>
|
||||
</div>
|
||||
<a :href="report.actor.url" target="_blank">
|
||||
@{{ report.actor.acct }}
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<el-tag :type="getStateType(report.state)" size="large" class="report-tag">{{ capitalizeFirstLetter(report.state) }}</el-tag>
|
||||
<el-dropdown trigger="click">
|
||||
<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)">{{ $t('reports.resolve') }}</el-dropdown-item>
|
||||
<el-dropdown-item v-if="report.state !== 'open'" @click.native="changeReportState('open', report.id)">{{ $t('reports.reopen') }}</el-dropdown-item>
|
||||
<el-dropdown-item v-if="report.state !== 'closed'" @click.native="changeReportState('closed', report.id)">{{ $t('reports.close') }}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="report-body">
|
||||
<span class="report-content" v-html="report.content"/>
|
||||
{{ parseTimestamp(report.created_at) }}
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
|
||||
export default {
|
||||
name: 'Statuses',
|
||||
props: {
|
||||
reports: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
capitalizeFirstLetter(str) {
|
||||
return str.charAt(0).toUpperCase() + str.slice(1)
|
||||
},
|
||||
changeReportState(state, id) {
|
||||
this.$store.dispatch('ChangeReportState', [{ state, id }])
|
||||
},
|
||||
getStateType(state) {
|
||||
switch (state) {
|
||||
case 'closed':
|
||||
return 'info'
|
||||
case 'resolved':
|
||||
return 'success'
|
||||
default:
|
||||
return 'primary'
|
||||
}
|
||||
},
|
||||
parseTimestamp(timestamp) {
|
||||
return moment(timestamp).format('YYYY-MM-DD HH:mm')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel='stylesheet/scss' lang='scss'>
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.el-icon-arrow-right {
|
||||
margin-right: 6px;
|
||||
}
|
||||
.report-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
height: 40px;
|
||||
}
|
||||
.report-actor {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.report-actor-name {
|
||||
margin: 0;
|
||||
height: 22px;
|
||||
}
|
||||
.report-avatar-img {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.report-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.report-card {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.report-content {
|
||||
font-size: 15px;
|
||||
}
|
||||
.report-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
@media only screen and (max-width:480px) {
|
||||
.el-card__header {
|
||||
padding: 10px 17px;
|
||||
}
|
||||
.report-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
height: auto;
|
||||
}
|
||||
.report-tag {
|
||||
margin: 3px 0 6px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -40,6 +40,7 @@
|
|||
<div v-for="status in statuses" :key="status.id" class="status-container">
|
||||
<status
|
||||
:status="status"
|
||||
:account="status.account"
|
||||
:show-checkbox="isDesktop"
|
||||
:fetch-statuses-by-instance="true"
|
||||
@status-selection="handleStatusSelection" />
|
||||
|
|
|
|||
|
|
@ -91,7 +91,7 @@
|
|||
</el-checkbox>
|
||||
<el-timeline v-if="!statusesLoading" class="statuses">
|
||||
<el-timeline-item v-for="status in statuses" :key="status.id">
|
||||
<status :status="status" :show-checkbox="false" :user-id="user.id" :godmode="showPrivate"/>
|
||||
<status :status="status" :account="status.account" :show-checkbox="false" :user-id="user.id" :godmode="showPrivate"/>
|
||||
</el-timeline-item>
|
||||
<p v-if="statuses.length === 0" class="no-statuses">{{ $t('userProfile.noStatuses') }}</p>
|
||||
</el-timeline>
|
||||
|
|
|
|||
Loading…
Reference in a new issue