diff --git a/front/src/components/manage/moderation/NoteForm.vue b/front/src/components/manage/moderation/NoteForm.vue new file mode 100644 index 0000000000000000000000000000000000000000..bef549771a09767d39e00697f153fd4b1e85633a --- /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 0000000000000000000000000000000000000000..45379d0fea3d1c4550d6491e83c58eaf1f53189f --- /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 f2bf1d9230dcfbf31c13e44456b0d42555f572fb..3c0570e61d8e1a8eb1addf50f13c8f92a48b2aa2 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 cd863cb1743bde96e4401f9fd9de3d60b52d920a..708d6d94605d21f32f18c52ea1518706b8af8cd1 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";