Extract Report content into a separate component and reuse it in single report component
This commit is contained in:
Angelina Filippova
parent
3f31748e08
commit
855f8640b2
3 changed files with 190 additions and 148 deletions
|
|
@ -28,83 +28,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<el-divider class="divider"/>
|
||||
<div class="report-account-container">
|
||||
<span class="report-row-key">{{ $t('reports.account') }}:</span>
|
||||
<div class="report-account">
|
||||
<router-link
|
||||
v-if="propertyExists(report.account, 'id')"
|
||||
:to="{ name: 'UsersShow', params: { id: report.account.id }}"
|
||||
class="router-link">
|
||||
<img
|
||||
v-if="propertyExists(report.account, 'avatar')"
|
||||
:src="report.account.avatar"
|
||||
alt="avatar"
|
||||
class="avatar-img">
|
||||
<span v-if="propertyExists(report.account, 'nickname')" class="report-account-name">{{ report.account.nickname }}</span>
|
||||
<span v-else class="report-account-name deactivated">({{ $t('users.invalidNickname') }})</span>
|
||||
</router-link>
|
||||
<span v-else class="report-account-name deactivated">({{ $t('users.invalidNickname') }})</span>
|
||||
<a v-if="propertyExists(report.account, 'url')" :href="report.account.url" target="_blank" class="account">
|
||||
{{ $t('userProfile.openAccountInInstance') }}
|
||||
<i class="el-icon-top-right"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="report.content && report.content.length > 0">
|
||||
<el-divider class="divider"/>
|
||||
<span class="report-row-key">{{ $t('reports.content') }}:
|
||||
<span>{{ report.content }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<el-divider class="divider"/>
|
||||
<div :style="showStatuses(report.statuses) ? '' : 'margin-bottom:15px'" class="report-account-container">
|
||||
<span class="report-row-key">{{ $t('reports.actor') }}:</span>
|
||||
<div class="report-account">
|
||||
<router-link
|
||||
v-if="propertyExists(report.actor, 'id')"
|
||||
:to="{ name: 'UsersShow', params: { id: report.actor.id }}"
|
||||
class="router-link">
|
||||
<img
|
||||
v-if="propertyExists(report.actor, 'avatar')"
|
||||
:src="report.actor.avatar"
|
||||
alt="avatar"
|
||||
class="avatar-img">
|
||||
<span v-if="propertyExists(report.actor, 'nickname')" class="report-account-name">{{ report.actor.nickname }}</span>
|
||||
<span v-else class="report-account-name deactivated">({{ $t('users.invalidNickname') }})</span>
|
||||
</router-link>
|
||||
<span v-else class="report-account-name deactivated">({{ $t('users.invalidNickname') }})</span>
|
||||
<a v-if="propertyExists(report.actor, 'url')" :href="report.actor.url" target="_blank" class="account">
|
||||
{{ $t('userProfile.openAccountInInstance') }}
|
||||
<i class="el-icon-top-right"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showStatuses(report.statuses)" class="reported-statuses">
|
||||
<el-collapse>
|
||||
<el-collapse-item :title="getStatusesTitle(report.statuses)">
|
||||
<div v-for="status in report.statuses" :key="status.id">
|
||||
<status :status="status" :account="status.account.nickname ? status.account : report.account" :show-checkbox="false" :page="currentPage"/>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
<div class="report-notes">
|
||||
<el-collapse>
|
||||
<el-collapse-item :title="getNotesTitle(report.notes)">
|
||||
<note-card v-for="(note, index) in report.notes" :key="index" :note="note" :report="report"/>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
<div class="report-note-form">
|
||||
<el-input
|
||||
v-model="notes[report.id]"
|
||||
:placeholder="$t('reports.leaveNote')"
|
||||
type="textarea"
|
||||
rows="2"/>
|
||||
<div class="report-post-note">
|
||||
<el-button @click="handleNewNote(report.id)">{{ $t('reports.postNote') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<report-content :report="report"/>
|
||||
</el-card>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
|
|
@ -123,24 +47,18 @@
|
|||
|
||||
<script>
|
||||
import moment from 'moment'
|
||||
import NoteCard from './NoteCard'
|
||||
import Status from '@/components/Status'
|
||||
import ModerateUserDropdown from './ModerateUserDropdown'
|
||||
import ReportContent from './ReportContent'
|
||||
|
||||
export default {
|
||||
name: 'Report',
|
||||
components: { Status, ModerateUserDropdown, NoteCard },
|
||||
components: { ModerateUserDropdown, ReportContent },
|
||||
props: {
|
||||
reports: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
notes: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
loading() {
|
||||
return this.$store.state.reports.loading
|
||||
|
|
@ -172,16 +90,6 @@ export default {
|
|||
return 'primary'
|
||||
}
|
||||
},
|
||||
getStatusesTitle(statuses = []) {
|
||||
return `Reported statuses: ${statuses.length} item(s)`
|
||||
},
|
||||
getNotesTitle(notes = []) {
|
||||
return `Notes: ${notes.length} item(s)`
|
||||
},
|
||||
handleNewNote(reportID) {
|
||||
this.$store.dispatch('CreateReportNote', { content: this.notes[reportID], reportID })
|
||||
this.notes[reportID] = ''
|
||||
},
|
||||
handlePageChange(page) {
|
||||
this.$store.dispatch('FetchReports', page)
|
||||
},
|
||||
|
|
@ -193,9 +101,6 @@ export default {
|
|||
return account[property] && account[_secondProperty]
|
||||
}
|
||||
return account[property]
|
||||
},
|
||||
showStatuses(statuses = []) {
|
||||
return statuses.length > 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -206,25 +111,9 @@ export default {
|
|||
margin: 0;
|
||||
height: 17px;
|
||||
}
|
||||
.account {
|
||||
line-height: 26px;
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
}
|
||||
.account:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.avatar-img {
|
||||
vertical-align: bottom;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
.divider {
|
||||
margin: 15px 0;
|
||||
}
|
||||
.deactivated {
|
||||
color: gray;
|
||||
}
|
||||
.el-card__body {
|
||||
padding: 17px;
|
||||
}
|
||||
|
|
@ -279,35 +168,9 @@ export default {
|
|||
height: 40px;
|
||||
}
|
||||
}
|
||||
.report-account {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
flex-grow: 2;
|
||||
}
|
||||
.report-account-container {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
.report-account-name {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.report-row-key {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.report-title {
|
||||
margin: 0;
|
||||
}
|
||||
.report-note-form {
|
||||
margin: 15px 0 0 0;
|
||||
}
|
||||
.report-post-note {
|
||||
margin: 5px 0 0 0;
|
||||
text-align: right;
|
||||
}
|
||||
.reports-pagination {
|
||||
margin: 25px 0;
|
||||
text-align: center;
|
||||
|
|
@ -316,12 +179,6 @@ export default {
|
|||
margin: 30px 45px 45px 19px;
|
||||
padding: 0px;
|
||||
}
|
||||
.router-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
.reported-statuses {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.submit-button {
|
||||
display: block;
|
||||
margin: 7px 0 17px auto;
|
||||
|
|
|
|||
182
src/views/reports/components/ReportContent.vue
Normal file
182
src/views/reports/components/ReportContent.vue
Normal file
|
|
@ -0,0 +1,182 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="report-account-container">
|
||||
<span class="report-row-key">{{ $t('reports.account') }}:</span>
|
||||
<div class="report-account">
|
||||
<router-link
|
||||
v-if="propertyExists(report.account, 'id')"
|
||||
:to="{ name: 'UsersShow', params: { id: report.account.id }}"
|
||||
class="router-link">
|
||||
<img
|
||||
v-if="propertyExists(report.account, 'avatar')"
|
||||
:src="report.account.avatar"
|
||||
alt="avatar"
|
||||
class="avatar-img">
|
||||
<span v-if="propertyExists(report.account, 'nickname')" class="report-account-name">{{ report.account.nickname }}</span>
|
||||
<span v-else class="report-account-name deactivated">({{ $t('users.invalidNickname') }})</span>
|
||||
</router-link>
|
||||
<span v-else class="report-account-name deactivated">({{ $t('users.invalidNickname') }})</span>
|
||||
<a v-if="propertyExists(report.account, 'url')" :href="report.account.url" target="_blank" class="account">
|
||||
{{ $t('userProfile.openAccountInInstance') }}
|
||||
<i class="el-icon-top-right"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="report.content && report.content.length > 0">
|
||||
<el-divider class="divider"/>
|
||||
<span class="report-row-key">{{ $t('reports.content') }}:
|
||||
<span>{{ report.content }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<el-divider class="divider"/>
|
||||
<div :style="showStatuses(report.statuses) ? '' : 'margin-bottom:15px'" class="report-account-container">
|
||||
<span class="report-row-key">{{ $t('reports.actor') }}:</span>
|
||||
<div class="report-account">
|
||||
<router-link
|
||||
v-if="propertyExists(report.actor, 'id')"
|
||||
:to="{ name: 'UsersShow', params: { id: report.actor.id }}"
|
||||
class="router-link">
|
||||
<img
|
||||
v-if="propertyExists(report.actor, 'avatar')"
|
||||
:src="report.actor.avatar"
|
||||
alt="avatar"
|
||||
class="avatar-img">
|
||||
<span v-if="propertyExists(report.actor, 'nickname')" class="report-account-name">{{ report.actor.nickname }}</span>
|
||||
<span v-else class="report-account-name deactivated">({{ $t('users.invalidNickname') }})</span>
|
||||
</router-link>
|
||||
<span v-else class="report-account-name deactivated">({{ $t('users.invalidNickname') }})</span>
|
||||
<a v-if="propertyExists(report.actor, 'url')" :href="report.actor.url" target="_blank" class="account">
|
||||
{{ $t('userProfile.openAccountInInstance') }}
|
||||
<i class="el-icon-top-right"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showStatuses(report.statuses)" class="reported-statuses">
|
||||
<el-collapse>
|
||||
<el-collapse-item :title="getStatusesTitle(report.statuses)">
|
||||
<div v-for="status in report.statuses" :key="status.id">
|
||||
<status :status="status" :account="status.account.nickname ? status.account : report.account" :show-checkbox="false" :page="currentPage"/> // check why it's currentPage here
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
<div>
|
||||
<el-collapse>
|
||||
<el-collapse-item :title="getNotesTitle(report.notes)">
|
||||
<note-card v-for="(note, index) in report.notes" :key="index" :note="note" :report="report"/>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
<div class="report-note-form">
|
||||
<el-input
|
||||
v-model="notes[report.id]"
|
||||
:placeholder="$t('reports.leaveNote')"
|
||||
type="textarea"
|
||||
rows="2"/>
|
||||
<div class="report-post-note">
|
||||
<el-button @click="handleNewNote(report.id)">{{ $t('reports.postNote') }}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NoteCard from './NoteCard'
|
||||
import Status from '@/components/Status'
|
||||
|
||||
export default {
|
||||
name: 'ReportContent',
|
||||
components: { NoteCard, Status },
|
||||
props: {
|
||||
report: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
notes: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentPage() {
|
||||
return this.$store.state.reports.currentPage
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getNotesTitle(notes = []) {
|
||||
return `Notes: ${notes.length} item(s)`
|
||||
},
|
||||
getStatusesTitle(statuses = []) {
|
||||
return `Reported statuses: ${statuses.length} item(s)`
|
||||
},
|
||||
handleNewNote(reportID) {
|
||||
this.$store.dispatch('CreateReportNote', { content: this.notes[reportID], reportID })
|
||||
this.notes[reportID] = ''
|
||||
},
|
||||
propertyExists(account, property, _secondProperty) {
|
||||
if (_secondProperty) {
|
||||
return account[property] && account[_secondProperty]
|
||||
}
|
||||
return account[property]
|
||||
},
|
||||
showStatuses(statuses = []) {
|
||||
return statuses.length > 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style rel='stylesheet/scss' lang='scss'>
|
||||
.account {
|
||||
line-height: 26px;
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
}
|
||||
.account:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.avatar-img {
|
||||
vertical-align: bottom;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
.deactivated {
|
||||
color: gray;
|
||||
}
|
||||
.divider {
|
||||
margin: 15px 0;
|
||||
}
|
||||
.report-account {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
flex-grow: 2;
|
||||
}
|
||||
.report-account-container {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
.report-account-name {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
.report-note-form {
|
||||
margin: 15px 0 0 0;
|
||||
}
|
||||
.report-post-note {
|
||||
margin: 5px 0 0 0;
|
||||
text-align: right;
|
||||
}
|
||||
.report-row-key {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.reported-statuses {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.router-link {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -15,16 +15,19 @@
|
|||
</div>
|
||||
<reboot-button/>
|
||||
</header>
|
||||
<el-card class="report"/>
|
||||
<el-card class="report">
|
||||
<report-content :report="report"/>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RebootButton from '@/components/RebootButton'
|
||||
import ReportContent from './components/ReportContent'
|
||||
|
||||
export default {
|
||||
name: 'ReportsShow',
|
||||
components: { RebootButton },
|
||||
components: { RebootButton, ReportContent },
|
||||
computed: {
|
||||
loading() {
|
||||
return this.$store.state.reports.loading
|
||||
|
|
|
|||
Loading…
Reference in a new issue