See #890: added form / display of moderator notes

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

+<template>
+  <form class="ui form" @submit.prevent="submit()">
+    <div v-if="errors.length > 0" class="ui negative message">
+      <div class="header"><translate translate-context="Content/Moderation/Error message.Title">Error while submitting note</translate></div>
+      <ul class="list">
+        <li v-for="error in errors">{{ error }}</li>
+      </ul>
+    </div>
+    <div class="field">
+      <textarea name="change-summary" required v-model="summary" id="change-summary" rows="3" :placeholder="labels.summaryPlaceholder"></textarea>
+    </div>
+    <button :class="['ui', {'loading': isLoading}, 'right', 'floated', 'button']" type="submit" :disabled="isLoading">
+      <translate translate-context="Content/Moderation/Button.Label/Verb">Add note</translate>
+    </button>
+  </form>
+</template>
+
+<script>
+import axios from 'axios'
+import showdown from 'showdown'
+
+export default {
+  props: {
+    target: {required: true},
+  },
+  data () {
+      return {
+      markdown: new showdown.Converter(),
+      isLoading: false,
+      summary: '',
+      errors: [],
+    }
+  },
+  computed: {
+    labels () {
+      return {
+        summaryPlaceholder: this.$pgettext('Content/Moderation/Placeholder', 'Describe what actions have been taken, or any other related updates…'),
+      }
+    },
+  },
+  methods: {
+    submit () {
+      let self = this
+      this.isLoading = true
+      let payload = {
+        target: this.target,
+        summary: this.summary
+      }
+      axios.post(`manage/moderation/notes/`, payload).then((response) => {
+        self.$emit('created', response.data)
+        self.summary = ''
+        self.isLoading = false
+      }, error => {
+        self.errors = error.backendErrors
+        self.isLoading = false
+      })
+    },
+  }
+}
+</script>

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

+<template>
+  <div class="ui feed">
+    <div class="event" v-for="note in notes" :key="note.uuid">
+      <div class="label">
+        <i class="comment outline icon"></i>
+      </div>
+      <div class="content">
+        <div class="summary">
+          <actor-link :actor="note.author"></actor-link>
+          <div class="date">
+            <human-date :date="note.creation_date"></human-date>
+          </div>
+        </div>
+        <div class="extra text">
+          <expandable-div :content="note.summary">
+            <div v-html="markdown.makeHtml(note.summary)"></div>
+          </expandable-div>
+        </div>
+        <div class="meta">
+          <a role="button" @click.prevent="remove(note)">
+            <i class="trash icon"></i> <translate translate-context="*/*/*/Verb">Delete</translate>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import showdown from 'showdown'
+
+export default {
+  props: {
+    notes: {required: true},
+  },
+  data () {
+      return {
+      markdown: new showdown.Converter(),
+      isLoading: false,
+    }
+  },
+  methods: {
+    remove (obj) {
+      let self = this
+      this.isLoading = true
+      axios.delete(`manage/moderation/notes/${obj.uuid}/`).then((response) => {
+        self.$emit('deleted', obj.uuid)
+        self.isLoading = false
+      }, error => {
+        self.isLoading = false
+      })
+    },
+  }
+}
+</script>

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

@@ -84,7 +84,7 @@
                 </tr>
                 <tr>
                   <td>
-                    <translate translate-context="Content/*/*/Noun">Moderator notes</translate>
+                    <translate translate-context="Content/*/*/Noun">Internal notes</translate>
                   </td>
                   <td>
                     <i class="comment icon"></i>
@@ -156,6 +156,15 @@
           </table>
         </aside>
       </div>
+      <div class="ui stackable two column grid">
+        <div class="column">
+          <h3>
+            <translate translate-context="Content/*/*/Noun">Internal notes</translate>
+          </h3>
+          <notes-thread @deleted="handleRemovedNote($event)" :notes="obj.notes" />
+          <note-form @created="obj.notes.push($event)" :target="{type: 'report', uuid: obj.uuid}" />
+        </div>
+      </div>
     </div>
     <div class="ui bottom attached buttons">
       <button
@@ -187,7 +196,8 @@
 <script>
 import axios from 'axios'
 import { diffWordsWithSpace } from 'diff'
-
+import NoteForm from '@/components/manage/moderation/NoteForm'
+import NotesThread from '@/components/manage/moderation/NotesThread'
 import entities from '@/entities'
 import showdown from 'showdown'
 
@@ -203,6 +213,10 @@ export default {
     obj: {required: true},
     currentState: {required: false}
   },
+  components: {
+    NoteForm,
+    NotesThread,
+  },
   data () {
       return {
       markdown: new showdown.Converter(),
@@ -298,6 +312,11 @@ export default {
         self.isLoading = false
       })
     },
+    handleRemovedNote (uuid) {
+      this.obj.notes = this.obj.notes.filter((note) => {
+        return note.uuid != uuid
+      })
+    }
   }
 }
 </script>

front/src/style/_main.scss

@@ -49,7 +49,7 @@
 // @import "~fomantic-ui-css/components/ad.css";
 @import "~fomantic-ui-css/components/card.css";
 // @import "~fomantic-ui-css/components/comment.css";
-// @import "~fomantic-ui-css/components/feed.css";
+@import "~fomantic-ui-css/components/feed.css";
 @import "~fomantic-ui-css/components/item.css";
 @import "~fomantic-ui-css/components/statistic.css";