From b316b93a8e30b5244d286a9d8a15e40ca4eb5cfe Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Thu, 29 Aug 2019 15:31:49 +0200
Subject: [PATCH] See #890: added form / display of moderator notes
---
.../components/manage/moderation/NoteForm.vue | 60 +++++++++++++++++++
.../manage/moderation/NotesThread.vue | 56 +++++++++++++++++
.../manage/moderation/ReportCard.vue | 23 ++++++-
front/src/style/_main.scss | 2 +-
4 files changed, 138 insertions(+), 3 deletions(-)
create mode 100644 front/src/components/manage/moderation/NoteForm.vue
create mode 100644 front/src/components/manage/moderation/NotesThread.vue
diff --git a/front/src/components/manage/moderation/NoteForm.vue b/front/src/components/manage/moderation/NoteForm.vue
new file mode 100644
index 00000000..bef54977
--- /dev/null
+++ b/front/src/components/manage/moderation/NoteForm.vue
@@ -0,0 +1,60 @@
+<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>
diff --git a/front/src/components/manage/moderation/NotesThread.vue b/front/src/components/manage/moderation/NotesThread.vue
new file mode 100644
index 00000000..45379d0f
--- /dev/null
+++ b/front/src/components/manage/moderation/NotesThread.vue
@@ -0,0 +1,56 @@
+<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>
diff --git a/front/src/components/manage/moderation/ReportCard.vue b/front/src/components/manage/moderation/ReportCard.vue
index f2bf1d92..3c0570e6 100644
--- a/front/src/components/manage/moderation/ReportCard.vue
+++ b/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>
diff --git a/front/src/style/_main.scss b/front/src/style/_main.scss
index cd863cb1..708d6d94 100644
--- a/front/src/style/_main.scss
+++ b/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";
--
GitLab