Vue Comments: Comments ported to Vue + DnD fileupload

* Drag and drop files to comment editor to add a file attachment
* Using Vue to render comments

Since comments now has attachments we need to update the schemas
./manage.py maintenance replace_pillar_node_type_schemas

src/scripts/js/es6/common/vuecomponents/utils/GenericPlaceHolder.js

@@ -0,0 +1,13 @@
+const TEMPLATE =
+`<div class="generic-placeholder" :title="label">
+    <i class="pi-spin spin"/>
+    {{ label }}
+</div>
+`;
+
+Vue.component('generic-placeholder', {
+    template: TEMPLATE,
+    props: {
+        label: String,
+    },
+});

src/scripts/js/es6/common/vuecomponents/utils/MarkdownPreview.js

@@ -0,0 +1,56 @@
+import { debounced } from '../../utils/init'
+import { thenMarkdownToHtml } from '../../api/markdown'
+import { UnitOfWorkTracker } from '../mixins/UnitOfWorkTracker'
+const TEMPLATE = `
+<div class="markdown-preview">
+    <div class="markdown-preview-md"
+        v-html="asHtml"/>
+    <div class="markdown-preview-info">
+        <a
+            title="Handy guide of Markdown syntax"
+            target="_blank"
+            href="http://commonmark.org/help/">
+            <span>markdown cheatsheet</span>
+        </a>
+    </div>
+</div>
+`;
+
+Vue.component('markdown-preview', {
+    template: TEMPLATE,
+    mixins: [UnitOfWorkTracker],
+    props: {
+        markdown: String,
+        attachments: Object
+    },
+    data() {
+        return {
+            asHtml: '',
+        }
+    },
+    created() {
+        this.markdownToHtml(this.markdown, this.attachments);
+        this.debouncedMarkdownToHtml = debounced(this.markdownToHtml);
+    },
+    watch: {
+        markdown(newValue, oldValue) {
+            this.debouncedMarkdownToHtml(newValue, this.attachments);
+        },
+        attachments(newValue, oldValue) {
+            this.debouncedMarkdownToHtml(this.markdown, newValue);
+        }
+    },
+    methods: {
+        markdownToHtml(markdown, attachments) {
+            this.unitOfWork(
+                thenMarkdownToHtml(markdown, attachments)
+                .then((data) => {
+                    this.asHtml = data.content;
+                })
+                .fail((err) => {
+                    toastr.error(xhrErrorResponseMessage(err), 'Parsing failed');
+                })
+            );
+        }
+    }
+});

src/scripts/js/es6/common/vuecomponents/utils/PrettyCreated.js

@@ -0,0 +1,33 @@
+import { prettyDate } from '../../utils/init'
+const TEMPLATE =
+`<div class="pretty-created" :title="'Posted ' + created">
+    {{ prettyCreated }}
+    <span
+        v-if="isEdited"
+        :title="'Updated ' + prettyUpdated"
+    >*</span>
+</div>
+`;
+
+Vue.component('pretty-created', {
+    template: TEMPLATE,
+    props: {
+        created: String,
+        updated: String,
+        detailed: {
+            type: Boolean,
+            default: true
+        }
+    },
+    computed: {
+        prettyCreated() {
+            return prettyDate(this.created, this.detailed);
+        },
+        prettyUpdated() {
+            return prettyDate(this.updated, this.detailed);
+        },
+        isEdited() {
+            return this.updated && (this.created !== this.updated)
+        }
+    }
+});