See #890: make report category updatable

front/src/components/manage/moderation/ReportCard.vue

@@ -29,8 +29,10 @@
                     <translate translate-context="*/*/*">Category</translate>
                   </td>
                   <td>
-                    <i class="tag icon"></i>
-                    {{ obj.type }}
+                    <report-category-dropdown
+                      class="field"
+                      :value="obj.type"
+                      @input="update({type: $event})"></report-category-dropdown>
                   </td>
                 </tr>
                 <tr>
@@ -210,9 +212,11 @@ import axios from 'axios'
 import { diffWordsWithSpace } from 'diff'
 import NoteForm from '@/components/manage/moderation/NoteForm'
 import NotesThread from '@/components/manage/moderation/NotesThread'
+import ReportCategoryDropdown from '@/components/moderation/ReportCategoryDropdown'
 import entities from '@/entities'
 import showdown from 'showdown'
 
+
 function castValue (value) {
   if (value === null || value === undefined) {
     return ''
@@ -228,9 +232,10 @@ export default {
   components: {
     NoteForm,
     NotesThread,
+    ReportCategoryDropdown,
   },
   data () {
-      return {
+    return {
       markdown: new showdown.Converter(),
       isLoading: false,
     }
@@ -290,7 +295,7 @@ export default {
       } else {
         return this.obj.target_state._target
       }
-    }
+    },
   },
   methods: {
     remove () {
@@ -306,6 +311,17 @@ export default {
         self.isLoading = false
       })
     },
+    update (payload) {
+      let url = `manage/moderation/reports/${this.obj.uuid}/`
+      let self = this
+      this.isLoading = true
+      axios.patch(url, payload).then((response) => {
+        self.$emit('updated', payload)
+        self.isLoading = false
+      }, error => {
+        self.isLoading = false
+      })
+    },
     resolve (v) {
       let url = `manage/moderation/reports/${this.obj.uuid}/`
       let self = this

front/src/components/mixins/Translations.vue

@@ -39,6 +39,16 @@ export default {
               },
             }
           },
+          report_type: {
+            label: this.$pgettext('*/*/*', 'Category'),
+            choices: {
+              takedown_request: this.$pgettext("Content/Moderation/Dropdown", "Takedown request"),
+              invalid_metadata: this.$pgettext("Content/Moderation/Dropdown", "Invalid metadata"),
+              illegal_content: this.$pgettext("Content/Moderation/Dropdown", "Illegal content"),
+              offensive_content: this.$pgettext("Content/Moderation/Dropdown", "Offensive content"),
+              other: this.$pgettext("Content/Moderation/Dropdown", "Other"),
+            },
+          },
         },
         filters: {
           creation_date: this.$pgettext('Content/*/*/Noun', 'Creation date'),

front/src/components/moderation/ReportCategoryDropdown.vue

+<template>
+  <div>
+    <label v-if="label"><translate translate-context="*/*/*">Category</translate></label>
+    <select class="ui dropdown" :value="value" @change="$emit('input', $event.target.value)">
+      <option :value="option.value" v-for="option in allCategories">{{ option.label }}</option>
+    </select>
+  </div>
+</template>
+
+<script>
+import TranslationsMixin from '@/components/mixins/Translations'
+import lodash from '@/lodash'
+export default {
+  mixins: [TranslationsMixin],
+  props: ['value', 'all', 'label'],
+  computed: {
+    allCategories () {
+      let c = []
+      if (this.all) {
+        c.push(
+          {
+            value: '',
+            label: this.$pgettext('Content/*/Dropdown', 'All')
+          },
+        )
+      }
+      return c.concat(
+        lodash.keys(this.sharedLabels.fields.report_type.choices).sort().map((v) => {
+          return {
+            value: v,
+            label: this.sharedLabels.fields.report_type.choices[v]
+          }
+        })
+      )
+    }
+  }
+}
+</script>

front/src/lodash.js

@@ -2,6 +2,7 @@
 
 export default {
   clone: require('lodash/clone'),
+  keys: require('lodash/keys'),
   debounce: require('lodash/debounce'),
   get: require('lodash/get'),
   merge: require('lodash/merge'),

front/src/views/admin/moderation/ReportsList.vue

@@ -25,6 +25,12 @@
               </option>
             </select>
           </div>
+          <report-category-dropdown
+            class="field"
+            @input="addSearchToken('category', $event)"
+            :all="true"
+            :label="true"
+            :value="getTokenValue('category', '')"></report-category-dropdown>
           <div class="field">
             <label><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering</translate></label>
             <select class="ui dropdown" v-model="ordering">
@@ -130,6 +136,7 @@ import Pagination from '@/components/Pagination'
 import OrderingMixin from '@/components/mixins/Ordering'
 import TranslationsMixin from '@/components/mixins/Translations'
 import ReportCard from '@/components/manage/moderation/ReportCard'
+import ReportCategoryDropdown from '@/components/moderation/ReportCategoryDropdown'
 import {normalizeQuery, parseTokens} from '@/search'
 import SmartSearchMixin from '@/components/mixins/SmartSearch'
 import ActionTable from '@/components/common/ActionTable'
@@ -141,6 +148,7 @@ export default {
     Pagination,
     ActionTable,
     ReportCard,
+    ReportCategoryDropdown,
   },
   props: {
     mode: {default: 'card'},