From f96d4956127825382f449af936fe2f3c01bcebfd Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 11 Jun 2020 21:20:52 +0300
Subject: [PATCH] Create component for Log Entry Message

---
 src/views/moderation_log/LogEntryMessage.vue | 50 ++++++++++++++++++++
 src/views/moderation_log/index.vue           |  5 +-
 2 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 src/views/moderation_log/LogEntryMessage.vue

diff --git a/src/views/moderation_log/LogEntryMessage.vue b/src/views/moderation_log/LogEntryMessage.vue
new file mode 100644
index 00000000..101b1203
--- /dev/null
+++ b/src/views/moderation_log/LogEntryMessage.vue
@@ -0,0 +1,50 @@
+<template>
+  <span>
+    <router-link
+      v-if="propertyExists(actor, 'id')"
+      :to="{ name: 'UsersShow', params: { id: actor.id }}"
+      class="router-link">
+      <span v-if="propertyExists(actor, 'nickname')">
+        @{{ actor.nickname }}
+      </span>
+    </router-link>
+    <span>{{ logEntryMessage }}</span>
+  </span>
+</template>
+
+<script>
+
+export default {
+  name: 'LogEntryMessage',
+  props: {
+    actor: {
+      type: Object,
+      required: true
+    },
+    message: {
+      type: String,
+      required: true
+    },
+    data: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    logEntryMessage() {
+      return this.message
+    }
+  },
+  methods: {
+    propertyExists(account, property) {
+      return account[property]
+    }
+  }
+}
+</script>
+
+<style rel='stylesheet/scss' lang='scss'>
+ .router-link {
+    text-decoration: none;
+  }
+</style>
diff --git a/src/views/moderation_log/index.vue b/src/views/moderation_log/index.vue
index 5ab2186a..f8e822fe 100644
--- a/src/views/moderation_log/index.vue
+++ b/src/views/moderation_log/index.vue
@@ -43,7 +43,7 @@
         v-for="(logEntry, index) in log"
         :key="index"
         :timestamp="normalizeTimestamp(logEntry.time)">
-        {{ logEntry.message }}
+        <log-entry-message :actor="logEntry.data.actor" :data="logEntry.data" :message="logEntry.message"/>
       </el-timeline-item>
     </el-timeline>
     <div class="pagination">
@@ -64,9 +64,10 @@ import moment from 'moment'
 import _ from 'lodash'
 import debounce from 'lodash.debounce'
 import RebootButton from '@/components/RebootButton'
+import LogEntryMessage from './LogEntryMessage'
 
 export default {
-  components: { RebootButton },
+  components: { RebootButton, LogEntryMessage },
   data() {
     return {
       dateRange: '',