interru/admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
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: [], fetchedReports: [],
totalReportsCount: 0, totalReportsCount: 0,
currentPage: 1, currentPage: 1,
pageSize: 1, pageSize: 50,
groupReports: true, groupReports: false,
stateFilter: '', stateFilter: '',
loading: true loading: true
}, },

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

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

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

@ -1,61 +1,80 @@
<template> <template>
<el-timeline-item :timestamp="parseTimestamp(report.created_at)" placement="top" class="timeline-item-container"> <div>
<el-card> <el-timeline class="timeline">
<div class="header-container"> <el-timeline-item
<div> v-for="report in reports"
<h3 class="report-title">{{ $t('reports.reportOn') }} {{ report.account.display_name }}</h3> :timestamp="parseTimestamp(report.created_at)"
<h5 class="id">{{ $t('reports.id') }}: {{ report.id }}</h5> :key="report.id"
</div> placement="top"
<div> class="timeline-item-container">
<el-tag :type="getStateType(report.state)" size="large">{{ capitalizeFirstLetter(report.state) }}</el-tag> <el-card>
<el-dropdown trigger="click"> <div class="header-container">
<el-button plain size="small" icon="el-icon-edit">{{ $t('reports.changeState') }}<i class="el-icon-arrow-down el-icon--right"/></el-button> <div>
<el-dropdown-menu slot="dropdown"> <h3 class="report-title">{{ $t('reports.reportOn') }} {{ report.account.display_name }}</h3>
<el-dropdown-item v-if="report.state !== 'resolved'" @click.native="changeReportState('resolved', report.id)">{{ $t('reports.resolve') }}</el-dropdown-item> <h5 class="id">{{ $t('reports.id') }}: {{ report.id }}</h5>
<el-dropdown-item v-if="report.state !== 'open'" @click.native="changeReportState('open', report.id)">{{ $t('reports.reopen') }}</el-dropdown-item> </div>
<el-dropdown-item v-if="report.state !== 'closed'" @click.native="changeReportState('closed', report.id)">{{ $t('reports.close') }}</el-dropdown-item> <div>
</el-dropdown-menu> <el-tag :type="getStateType(report.state)" size="large">{{ capitalizeFirstLetter(report.state) }}</el-tag>
</el-dropdown> <el-dropdown trigger="click">
<moderate-user-dropdown :account="report.account"/> <el-button plain size="small" icon="el-icon-edit">{{ $t('reports.changeState') }}<i class="el-icon-arrow-down el-icon--right"/></el-button>
</div> <el-dropdown-menu slot="dropdown">
</div> <el-dropdown-item v-if="report.state !== 'resolved'" @click.native="changeReportState('resolved', report.id)">{{ $t('reports.resolve') }}</el-dropdown-item>
<div> <el-dropdown-item v-if="report.state !== 'open'" @click.native="changeReportState('open', report.id)">{{ $t('reports.reopen') }}</el-dropdown-item>
<div class="line"/> <el-dropdown-item v-if="report.state !== 'closed'" @click.native="changeReportState('closed', report.id)">{{ $t('reports.close') }}</el-dropdown-item>
<span class="report-row-key">{{ $t('reports.account') }}:</span> </el-dropdown-menu>
<img </el-dropdown>
:src="report.account.avatar" <moderate-user-dropdown :account="report.account"/>
alt="avatar" </div>
class="avatar-img"> </div>
<a :href="report.account.url" target="_blank" class="account"> <div>
<span>{{ report.account.acct }}</span> <div class="line"/>
</a> <span class="report-row-key">{{ $t('reports.account') }}:</span>
</div> <img
<div v-if="report.content.length > 0"> :src="report.account.avatar"
<div class="line"/> alt="avatar"
<span class="report-row-key">{{ $t('reports.content') }}: class="avatar-img">
<span>{{ report.content }}</span> <a :href="report.account.url" target="_blank" class="account">
</span> <span>{{ report.account.acct }}</span>
</div> </a>
<div> </div>
<div class="line"/> <div v-if="report.content.length > 0">
<span class="report-row-key">{{ $t('reports.actor') }}:</span> <div class="line"/>
<img <span class="report-row-key">{{ $t('reports.content') }}:
:src="report.actor.avatar" <span>{{ report.content }}</span>
alt="avatar" </span>
class="avatar-img"> </div>
<a :href="report.actor.url" target="_blank" class="account"> <div>
<span>{{ report.actor.acct }}</span> <div class="line"/>
</a> <span class="report-row-key">{{ $t('reports.actor') }}:</span>
</div> <img
<div v-if="report.statuses.length > 0" class="statuses"> :src="report.actor.avatar"
<el-collapse> alt="avatar"
<el-collapse-item :title="getStatusesTitle(report.statuses)"> class="avatar-img">
<statuses :statuses="report.statuses" /> <a :href="report.actor.url" target="_blank" class="account">
</el-collapse-item> <span>{{ report.actor.acct }}</span>
</el-collapse> </a>
</div> </div>
</el-card> <div v-if="report.statuses.length > 0" class="statuses">
</el-timeline-item> <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> </template>
<script> <script>
@ -67,11 +86,28 @@ export default {
name: 'Report', name: 'Report',
components: { Statuses, ModerateUserDropdown }, components: { Statuses, ModerateUserDropdown },
props: { props: {
report: { reports: {
type: Object, type: Array,
required: true 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: { methods: {
changeReportState(reportState, reportId) { changeReportState(reportState, reportId) {
this.$store.dispatch('ChangeReportState', { reportState, reportId }) this.$store.dispatch('ChangeReportState', { reportState, reportId })
@ -92,6 +128,9 @@ export default {
getStatusesTitle(statuses) { getStatusesTitle(statuses) {
return `Reported statuses: ${statuses.length} item(s)` return `Reported statuses: ${statuses.length} item(s)`
}, },
handlePageChange(page) {
this.$store.dispatch('FetchReports', page)
},
parseTimestamp(timestamp) { parseTimestamp(timestamp) {
return moment(timestamp).format('L HH:mm') return moment(timestamp).format('L HH:mm')
} }
@ -179,6 +218,10 @@ export default {
.report-title { .report-title {
margin: 0; margin: 0;
} }
.reports-pagination {
margin: 25px 0;
text-align: center;
}
.statuses { .statuses {
margin-top: 15px; margin-top: 15px;
} }

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

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