From a73a4e248d5b73152023707b0442a1a1330728e1 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Thu, 22 Feb 2018 22:02:32 +0100
Subject: [PATCH] Comment component

---
 front/src/components/discussion/Comment.vue | 49 +++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 front/src/components/discussion/Comment.vue

diff --git a/front/src/components/discussion/Comment.vue b/front/src/components/discussion/Comment.vue
new file mode 100644
index 000000000..c10d13bc0
--- /dev/null
+++ b/front/src/components/discussion/Comment.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="comment">
+    <div class="content">
+      <a class="author">{{ user.username }}</a>
+      <div class="metadata">
+        <div class="date">{{ date | ago }}</div>
+      </div>
+      <div class="text" v-html="comment"></div>
+      </div>
+      <div class="actions">
+        <span
+          @click="collapsed = false"
+          v-if="truncated && collapsed"
+          class="expand">Expand</span>
+        <span
+          @click="collapsed = true"
+          v-if="truncated && !collapsed"
+          class="collapse">Collapse</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    props: {
+      user: {type: Object, required: true},
+      date: {required: true},
+      content: {type: String, required: true}
+    },
+    data () {
+      return {
+        collapsed: true,
+        length: 50
+      }
+    },
+    computed: {
+      comment () {
+        let text = this.content
+        if (this.collapsed) {
+          text = this.$options.filters.truncate(text, this.length)
+        }
+        return this.$options.filters.markdown(text)
+      },
+      truncated () {
+        return this.content.length > this.length
+      }
+    }
+  }
+</script>