Verified Commit b316b93a authored by Eliot Berriot's avatar Eliot Berriot
Browse files

See #890: added form / display of moderator notes

parent 2ad5b9e9
<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>
<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>
......@@ -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>
......@@ -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";
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment