See #890: Collapse report on resolution instead of reloading the page

front/src/components/common/CollapseLink.vue

@@ -0,0 +1,20 @@
+<template>
+  <a role="button" class="collapse link" @click.prevent="$emit('input', !value)">
+    <translate v-if="isCollapsed" key="1" translate-context="*/*/Button,Label">Expand</translate>
+    <translate v-else key="2" translate-context="*/*/Button,Label">Collapse</translate>
+    <i :class="[{down: !isCollapsed}, {right: isCollapsed}, 'angle', 'icon']"></i>
+  </a>
+</template>
+<script>
+
+export default {
+  props: {
+    value: {type: Boolean, required: true},
+  },
+  computed: {
+    isCollapsed () {
+      return this.value
+    }
+  }
+}
+</script>

front/src/components/globals.js

@@ -51,4 +51,9 @@ Vue.component('empty-state', EmptyState)
 import ExpandableDiv from '@/components/common/ExpandableDiv'
 
 Vue.component('expandable-div', ExpandableDiv)
+
+import CollapseLink from '@/components/common/CollapseLink'
+
+Vue.component('collapse-link', CollapseLink)
+
 export default {}

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

@@ -5,8 +5,10 @@
         <router-link :to="{name: 'manage.moderation.reports.detail', params: {id: obj.uuid}}">
           <translate translate-context="Content/Moderation/Card/Short" :translate-params="{id: obj.uuid.substring(0, 8)}">Report %{ id }</translate>
         </router-link>
+        <collapse-link class="right floated" v-model="isCollapsed"></collapse-link>
       </div>
       <div class="content">
+        <div class="ui hidden divider"></div>
         <div class="ui stackable two column grid">
           <div class="column">
             <table class="ui very basic unstackable table">
@@ -99,7 +101,7 @@
         </div>
       </div>
     </div>
-    <div class="main content">
+    <div class="main content" v-if="!isCollapsed">
       <div class="ui stackable two column grid">
         <div class="column">
           <h3>
@@ -247,6 +249,7 @@ export default {
     return {
       markdown: new showdown.Converter(),
       isLoading: false,
+      isCollapsed: false,
     }
   },
   computed: {
@@ -354,8 +357,10 @@ export default {
       axios.patch(url, {is_handled: v}).then((response) => {
         self.$emit('handled', v)
         self.isLoading = false
+        self.obj.is_handled = v
         let increment
         if (v) {
+          self.isCollapsed = true
           increment = -1
         } else {
           increment = 1

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

@@ -55,7 +55,7 @@
         <empty-state @refresh="fetchData()" :refresh="true"></empty-state>
       </div>
       <div v-else-if="mode === 'card'">
-        <report-card :obj="obj" v-for="obj in result.results" :key="obj.uuid" @handled="fetchData()" @deleted="fetchData()" />
+        <report-card :obj="obj" v-for="obj in result.results" :key="obj.uuid" />
       </div>
       <action-table
         v-else-if="mode === 'table'"