See #890: added form / display of moderator notes

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>