Add tag with report state and ability to change it to Report Card

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',

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)
     }
   }
 }

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;
     }