diff --git a/src/lang/en.js b/src/lang/en.js index 276f6a450a92e482cb70f132d4498977be7d4488..41d7f54a7fbb4fb16e87cdee2236bfa1ce058731 100644 --- a/src/lang/en.js +++ b/src/lang/en.js @@ -262,7 +262,8 @@ export default { deleteCompleted: 'Delete comleted', deleteCanceled: 'Delete canceled', noNotes: 'No notes to display', - changeState: 'Change report state', + changeState: "Change report's state", + changeAllReports: 'Change all reports', changeScope: 'Change scope', moderateUser: 'Moderate user', resolve: 'Resolve', diff --git a/src/views/reports/components/GroupedReport.vue b/src/views/reports/components/GroupedReport.vue index ef2dc6ceb2987ef946b8ee2fbe41496ff82e0e2c..1e6cc8fa116370213299380a0408ab04ef819143 100644 --- a/src/views/reports/components/GroupedReport.vue +++ b/src/views/reports/components/GroupedReport.vue @@ -5,6 +5,14 @@ <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> @@ -59,8 +67,8 @@ export default { } }, methods: { - changeMultipleReportsState(reportState, groupOfReports) { - // this.$store.dispatch('ChangeReportState', { reportState, reportId }) + changeAllReports(reportState, groupOfReports) { + console.log(groupOfReports) } } } diff --git a/src/views/reports/components/ReportCard.vue b/src/views/reports/components/ReportCard.vue index 62fa1945d077ddd92627ea2e7a54c5a189e4228b..823244f5da9d2dd9cae159203904e4620ed5b409 100644 --- a/src/views/reports/components/ReportCard.vue +++ b/src/views/reports/components/ReportCard.vue @@ -12,6 +12,17 @@ @{{ report.actor.acct }} </a> </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> + </div> </div> </div> <div class="report-body"> @@ -34,6 +45,22 @@ export default { } }, methods: { + capitalizeFirstLetter(str) { + return str.charAt(0).toUpperCase() + str.slice(1) + }, + changeReportState(reportState, reportId) { + this.$store.dispatch('ChangeReportState', { reportState, reportId }) + }, + 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') } @@ -45,6 +72,15 @@ export default { 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; @@ -78,6 +114,11 @@ export default { .el-card__header { padding: 10px 17px; } + .report-header { + display: flex; + flex-direction: column; + height: 80px; + } .report-actor-container { margin-bottom: 5px; }