sam/admin-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Move report rendering and its pagination inside report component

Browse source
This commit is contained in:
Angelina Filippova 2019-09-30 00:22:01 +03:00
parent 6e2ebd0519
commit a0667c1f45
4 changed files with 158 additions and 147 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/store/modules/reports.js
View file

@ -5,8 +5,8 @@ const reports = {
fetchedReports: [],
totalReportsCount: 0,
currentPage: 1,
pageSize: 1,
groupReports: true,
pageSize: 50,
groupReports: false,
stateFilter: '',
loading: true
},

102
src/views/reports/components/GroupedReport.vue
View file

@ -1,55 +1,57 @@
<template>
<el-card>
<div class="header-container">
<div>
<h3 class="report-title">{{ $t('reports.reportsOn') }} {{ group.account.display_name }}</h3>
<el-timeline class="timeline">
<el-card v-for="group in groups" :key="group.id">
<div class="header-container">
<div>
<h3 class="report-title">{{ $t('reports.reportsOn') }} {{ group.account.display_name }}</h3>
</div>
<div>
<el-dropdown trigger="click">
<el-button plain size="small" icon="el-icon-edit">{{ $t('reports.changeAllReports') }}<i class="el-icon-arrow-down el-icon--right"/></el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="changeAllReports('resolved', group.reports)">{{ $t('reports.resolveAll') }}</el-dropdown-item>
<el-dropdown-item @click.native="changeAllReports('open', group.reports)">{{ $t('reports.reopenAll') }}</el-dropdown-item>
<el-dropdown-item @click.native="changeAllReports('closed', group.reports)">{{ $t('reports.closeAll') }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<moderate-user-dropdown :account="group.account"/>
</div>
</div>
<div>
<el-dropdown trigger="click">
<el-button plain size="small" icon="el-icon-edit">{{ $t('reports.changeAllReports') }}<i class="el-icon-arrow-down el-icon--right"/></el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="changeAllReports('resolved', group.reports)">{{ $t('reports.resolveAll') }}</el-dropdown-item>
<el-dropdown-item @click.native="changeAllReports('open', group.reports)">{{ $t('reports.reopenAll') }}</el-dropdown-item>
<el-dropdown-item @click.native="changeAllReports('closed', group.reports)">{{ $t('reports.closeAll') }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<moderate-user-dropdown :account="group.account"/>
</div>
</div>
<div>
<div class="line"/>
<span class="report-row-key">{{ $t('reports.account') }}:</span>
<img
:src="group.account.avatar"
alt="avatar"
class="avatar-img">
<a :href="group.account.url" target="_blank">
<span>{{ group.account.acct }}</span>
</a>
</div>
<div>
<div class="line"/>
<span class="report-row-key">{{ $t('reports.actors') }}:</span>
<span v-for="actor in group.actors" :key="actor.id">
<a :href="actor.url" target="_blank">
<span>{{ actor.acct }}, </span>
<div class="line"/>
<span class="report-row-key">{{ $t('reports.account') }}:</span>
<img
:src="group.account.avatar"
alt="avatar"
class="avatar-img">
<a :href="group.account.url" target="_blank">
<span>{{ group.account.acct }}</span>
</a>
</span>
</div>
<div v-if="group.status">
<div class="line"/>
<span class="report-row-key">{{ $t('reports.reportedStatus') }}:</span>
<statuses :statuses="group.status" class="reported-status"/>
</div>
<div v-if="group.reports">
<div class="line"/>
<el-collapse>
<el-collapse-item :title="$t('reports.reports')">
<report-card :reports="group.reports"/>
</el-collapse-item>
</el-collapse>
</div>
</el-card>
</div>
<div>
<div class="line"/>
<span class="report-row-key">{{ $t('reports.actors') }}:</span>
<span v-for="actor in group.actors" :key="actor.id">
<a :href="actor.url" target="_blank">
<span>{{ actor.acct }}, </span>
</a>
</span>
</div>
<div v-if="group.status">
<div class="line"/>
<span class="report-row-key">{{ $t('reports.reportedStatus') }}:</span>
<statuses :statuses="group.status" class="reported-status"/>
</div>
<div v-if="group.reports">
<div class="line"/>
<el-collapse>
<el-collapse-item :title="$t('reports.reports')">
<report-card :reports="group.reports"/>
</el-collapse-item>
</el-collapse>
</div>
</el-card>
</el-timeline>
</template>
<script>
@ -61,8 +63,8 @@ export default {
name: 'Report',
components: { ModerateUserDropdown, ReportCard, Statuses },
props: {
group: {
type: Object,
groups: {
type: Array,
required: true
}
},

161
src/views/reports/components/Report.vue
View file

@ -1,61 +1,80 @@
<template>
<el-timeline-item :timestamp="parseTimestamp(report.created_at)" placement="top" class="timeline-item-container">
<el-card>
<div class="header-container">
<div>
<h3 class="report-title">{{ $t('reports.reportOn') }} {{ report.account.display_name }}</h3>
<h5 class="id">{{ $t('reports.id') }}: {{ report.id }}</h5>
</div>
<div>
<el-tag :type="getStateType(report.state)" size="large">{{ 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>
<moderate-user-dropdown :account="report.account"/>
</div>
</div>
<div>
<div class="line"/>
<span class="report-row-key">{{ $t('reports.account') }}:</span>
<img
:src="report.account.avatar"
alt="avatar"
class="avatar-img">
<a :href="report.account.url" target="_blank" class="account">
<span>{{ report.account.acct }}</span>
</a>
</div>
<div v-if="report.content.length > 0">
<div class="line"/>
<span class="report-row-key">{{ $t('reports.content') }}:
<span>{{ report.content }}</span>
</span>
</div>
<div>
<div class="line"/>
<span class="report-row-key">{{ $t('reports.actor') }}:</span>
<img
:src="report.actor.avatar"
alt="avatar"
class="avatar-img">
<a :href="report.actor.url" target="_blank" class="account">
<span>{{ report.actor.acct }}</span>
</a>
</div>
<div v-if="report.statuses.length > 0" class="statuses">
<el-collapse>
<el-collapse-item :title="getStatusesTitle(report.statuses)">
<statuses :statuses="report.statuses" />
</el-collapse-item>
</el-collapse>
</div>
</el-card>
</el-timeline-item>
<div>
<el-timeline class="timeline">
<el-timeline-item
v-for="report in reports"
:timestamp="parseTimestamp(report.created_at)"
:key="report.id"
placement="top"
class="timeline-item-container">
<el-card>
<div class="header-container">
<div>
<h3 class="report-title">{{ $t('reports.reportOn') }} {{ report.account.display_name }}</h3>
<h5 class="id">{{ $t('reports.id') }}: {{ report.id }}</h5>
</div>
<div>
<el-tag :type="getStateType(report.state)" size="large">{{ 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>
<moderate-user-dropdown :account="report.account"/>
</div>
</div>
<div>
<div class="line"/>
<span class="report-row-key">{{ $t('reports.account') }}:</span>
<img
:src="report.account.avatar"
alt="avatar"
class="avatar-img">
<a :href="report.account.url" target="_blank" class="account">
<span>{{ report.account.acct }}</span>
</a>
</div>
<div v-if="report.content.length > 0">
<div class="line"/>
<span class="report-row-key">{{ $t('reports.content') }}:
<span>{{ report.content }}</span>
</span>
</div>
<div>
<div class="line"/>
<span class="report-row-key">{{ $t('reports.actor') }}:</span>
<img
:src="report.actor.avatar"
alt="avatar"
class="avatar-img">
<a :href="report.actor.url" target="_blank" class="account">
<span>{{ report.actor.acct }}</span>
</a>
</div>
<div v-if="report.statuses.length > 0" class="statuses">
<el-collapse>
<el-collapse-item :title="getStatusesTitle(report.statuses)">
<statuses :statuses="report.statuses" />
</el-collapse-item>
</el-collapse>
</div>
</el-card>
</el-timeline-item>
</el-timeline>
<div v-if="!loading" class="reports-pagination">
<el-pagination
:total="totalReportsCount"
:current-page="currentPage"
:page-size="pageSize"
background
layout="prev, pager, next"
@current-change="handlePageChange"
/>
</div>
</div>
</template>
<script>
@ -67,11 +86,28 @@ export default {
name: 'Report',
components: { Statuses, ModerateUserDropdown },
props: {
report: {
type: Object,
reports: {
type: Array,
required: true
}
},
computed: {
loading() {
return this.$store.state.reports.loading
},
pageSize() {
return this.$store.state.reports.pageSize
},
totalReportsCount() {
return this.$store.state.reports.totalReportsCount
},
currentPage() {
return this.$store.state.reports.currentPage
}
},
mounted() {
this.$store.dispatch('FetchReports', 1)
},
methods: {
changeReportState(reportState, reportId) {
this.$store.dispatch('ChangeReportState', { reportState, reportId })
@ -92,6 +128,9 @@ export default {
getStatusesTitle(statuses) {
return `Reported statuses: ${statuses.length} item(s)`
},
handlePageChange(page) {
this.$store.dispatch('FetchReports', page)
},
parseTimestamp(timestamp) {
return moment(timestamp).format('L HH:mm')
}
@ -179,6 +218,10 @@ export default {
.report-title {
margin: 0;
}
.reports-pagination {
margin: 25px 0;
text-align: center;
}
.statuses {
margin-top: 15px;
}

38
src/views/reports/index.vue
View file

@ -8,25 +8,11 @@
</el-checkbox>
</div>
<div class="block">
<el-timeline v-if="groupReports" class="timeline">
<grouped-report v-loading="loading" v-for="group in groups" :group="group" :key="group.id"/>
</el-timeline>
<el-timeline v-else class="timeline">
<report v-loading="loading" v-for="report in reports" :report="report" :key="report.id"/>
</el-timeline>
<grouped-report v-loading="loading" v-if="groupReports" :groups="groups"/>
<report v-loading="loading" v-else :reports="reports"/>
<div v-if="reports.length === 0" class="no-reports-message">
<p>There are no reports to display</p>
</div>
<div v-if="!loading" class="reports-pagination">
<el-pagination
:total="totalReportsCount"
:current-page="currentPage"
:page-size="pageSize"
background
layout="prev, pager, next"
@current-change="handlePageChange"
/>
</div>
</div>
</div>
</template>
@ -211,29 +197,14 @@ export default {
loading() {
return this.$store.state.reports.loading
},
pageSize() {
return this.$store.state.reports.pageSize
},
reports() {
return this.$store.state.reports.fetchedReports
},
totalReportsCount() {
return this.$store.state.reports.totalReportsCount
},
currentPage() {
return this.$store.state.reports.currentPage
}
},
mounted() {
this.$store.dispatch('FetchReports', 1)
},
created() {
window.addEventListener('scroll', this.handleScroll)
},
methods: {
handlePageChange(page) {
this.$store.dispatch('FetchReports', page)
},
toggleReportsGrouping() {
this.$store.dispatch('ToggleReportsGrouping')
}
@ -262,13 +233,8 @@ export default {
.no-reports-message {
color: gray;
margin-left: 19px
}
}
.reports-pagination {
margin: 25px 0;
text-align: center;
}
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {