Refactor moderation page

webapp/locales/de.json

@@ -395,8 +395,10 @@
     "reports": {
       "empty": "Glückwunsch, es gibt nichts zu moderieren.",
       "name": "Meldungen",
-      "submitter": "gemeldet von",
-      "disabledBy": "deaktiviert von"
+      "reasonCategory": "Kategorie",
+      "reasonDescription": "Beschreibung",
+      "submitter": "Gemeldet von",
+      "disabledBy": "Deaktiviert von"
     }
   },
   "disable": {

webapp/locales/en.json

@@ -396,8 +396,10 @@
     "reports": {
       "empty": "Congratulations, nothing to moderate.",
       "name": "Reports",
-      "submitter": "reported by",
-      "disabledBy": "disabled by"
+      "reasonCategory": "Category",
+      "reasonDescription": "Description",
+      "submitter": "Reported by",
+      "disabledBy": "Disabled by"
     }
   },
   "disable": {

webapp/pages/moderation/index.vue

@@ -2,7 +2,28 @@
   <ds-card space="small">
     <ds-heading tag="h3">{{ $t('moderation.reports.name') }}</ds-heading>
     <ds-table v-if="Report && Report.length" :data="Report" :fields="fields" condensed>
-      <template slot="name" slot-scope="scope">
+      <!-- Icon -->
+      <template slot="type" slot-scope="scope">
+        <ds-text color="soft">
+          <ds-icon
+            v-if="scope.row.type === 'Post'"
+            v-tooltip="{ content: $t('report.contribution.type'), placement: 'right' }"
+            name="bookmark"
+          />
+          <ds-icon
+            v-else-if="scope.row.type === 'Comment'"
+            v-tooltip="{ content: $t('report.comment.type'), placement: 'right' }"
+            name="comments"
+          />
+          <ds-icon
+            v-else-if="scope.row.type === 'User'"
+            v-tooltip="{ content: $t('report.user.type'), placement: 'right' }"
+            name="user"
+          />
+        </ds-text>
+      </template>
+      <!-- reported user or content -->
+      <template slot="reportedUserContent" slot-scope="scope">
         <div v-if="scope.row.type === 'Post'">
           <nuxt-link
             :to="{
@@ -42,25 +63,15 @@
           </nuxt-link>
         </div>
       </template>
-      <template slot="type" slot-scope="scope">
-        <ds-text color="soft">
-          <ds-icon
-            v-if="scope.row.type === 'Post'"
-            v-tooltip="{ content: $t('report.contribution.type'), placement: 'right' }"
-            name="bookmark"
-          />
-          <ds-icon
-            v-else-if="scope.row.type === 'Comment'"
-            v-tooltip="{ content: $t('report.comment.type'), placement: 'right' }"
-            name="comments"
-          />
-          <ds-icon
-            v-else-if="scope.row.type === 'User'"
-            v-tooltip="{ content: $t('report.user.type'), placement: 'right' }"
-            name="user"
-          />
-        </ds-text>
+      <!-- reasonCategory -->
+      <template slot="reasonCategory" slot-scope="scope">
+        {{ $t('report.reason.category.options.' + scope.row.reasonCategory) }}
       </template>
+      <!-- reasonCategory -->
+      <template slot="reasonDescription" slot-scope="scope">
+        {{ scope.row.reasonDescription }}
+      </template>
+      <!-- submitter -->
       <template slot="submitter" slot-scope="scope">
         <nuxt-link
           :to="{
@@ -71,6 +82,7 @@
           {{ scope.row.submitter.name }}
         </nuxt-link>
       </template>
+      <!-- disabledBy -->
       <template slot="disabledBy" slot-scope="scope">
         <nuxt-link
           v-if="scope.row.type === 'Post' && scope.row.post.disabledBy"
@@ -102,6 +114,7 @@
         >
           <b>{{ scope.row.user.disabledBy.name | truncate(50) }}</b>
         </nuxt-link>
+        <b v-else>—</b>
       </template>
     </ds-table>
     <hc-empty v-else icon="alert" :message="$t('moderation.reports.empty')" />
@@ -125,7 +138,9 @@ export default {
     fields() {
       return {
         type: ' ',
-        name: ' ',
+        reportedUserContent: ' ',
+        reasonCategory: this.$t('moderation.reports.reasonCategory'),
+        reasonDescription: this.$t('moderation.reports.reasonDescription'),
         submitter: this.$t('moderation.reports.submitter'),
         disabledBy: this.$t('moderation.reports.disabledBy'),
         // actions: ' '