Remove LogEntryMessage component, move it to Mod Log index page

src/views/moderation_log/LogEntryMessage.vue

@@ -1,60 +0,0 @@
-<template>
-  <span>
-    <component :is="processedHtml"/>
-  </span>
-</template>
-
-<script>
-import ReportLink from './ReportLink'
-import UserLink from './UserLink'
-import Vue from 'vue'
-Vue.component('user-link', UserLink)
-Vue.component('report-link', ReportLink)
-
-export default {
-  name: 'LogEntryMessage',
-  props: {
-    actor: {
-      type: Object,
-      required: true
-    },
-    message: {
-      type: String,
-      required: true
-    },
-    subject: {
-      type: [Object, Array],
-      required: false,
-      default: function() {
-        return {}
-      }
-    }
-  },
-  computed: {
-    processedHtml() {
-      const html = [...this.message.matchAll(/\@(?<nickname>([\w-]+))/g)].map(res => res.groups.nickname)
-        .reduce((acc, nickname) => {
-          return acc.replace(`@${nickname}`, `<user-link actor="${nickname}"/>`)
-        }, this.message)
-      if (this.subject.type === 'report' && this.subject.id) {
-        const updatedHtml = [...html.matchAll(/\#(?<reportId>([\w]+))/g)].map(res => res.groups.reportId)
-          .reduce((acc, id) => {
-            return acc.replace(`#${id}`, `<report-link id="${id}"/>`)
-          }, html)
-        return {
-          template: '<div>' + updatedHtml + '</div>'
-        }
-      }
-      return {
-        template: '<div>' + html + '</div>'
-      }
-    }
-  }
-}
-</script>
-
-<style rel='stylesheet/scss' lang='scss'>
- .router-link {
-    text-decoration: none;
-  }
-</style>

src/views/moderation_log/index.vue

@@ -43,8 +43,7 @@
         v-for="(logEntry, index) in log"
         :key="index"
         :timestamp="normalizeTimestamp(logEntry.time)">
-        <log-entry-message v-if="propertyExists(logEntry.data.actor, 'nickname')" :actor="logEntry.data.actor" :message="logEntry.message" :subject="logEntry.data.subject"/>
+        <component :is="processedMessage(logEntry)"/>
-        <span v-else>{{ logEntry.message }}</span>
       </el-timeline-item>
     </el-timeline>
     <div class="pagination">
@@ -65,10 +64,14 @@ import moment from 'moment'
 import _ from 'lodash'
 import debounce from 'lodash.debounce'
 import RebootButton from '@/components/RebootButton'
-import LogEntryMessage from './LogEntryMessage'
+import ReportLink from './ReportLink'
+import UserLink from './UserLink'
+import Vue from 'vue'
+Vue.component('user-link', UserLink)
+Vue.component('report-link', ReportLink)
 
 export default {
-  components: { RebootButton, LogEntryMessage },
+  components: { RebootButton },
   data() {
     return {
       dateRange: '',
@@ -130,6 +133,24 @@ export default {
     normalizeTimestamp(timestamp) {
       return moment(timestamp * 1000).format('YYYY-MM-DD HH:mm')
     },
+    processedMessage(logEntry) {
+      const html = [...logEntry.message.matchAll(/\@(?<nickname>([\w-]+))/g)].map(res => res.groups.nickname)
+        .reduce((acc, nickname) => {
+          return acc.replace(`@${nickname}`, `<user-link actor="${nickname}"/>`)
+        }, logEntry.message)
+      if (this.propertyExists(logEntry.data, 'subject') && logEntry.data.subject.type === 'report') {
+        const updatedHtml = [...html.matchAll(/\#(?<reportId>([\w]+))/g)].map(res => res.groups.reportId)
+          .reduce((acc, id) => {
+            return acc.replace(`#${id}`, `<report-link id="${id}"/>`)
+          }, html)
+        return {
+          template: '<div>' + updatedHtml + '</div>'
+        }
+      }
+      return {
+        template: '<div>' + html + '</div>'
+      }
+    },
     propertyExists(account, property) {
       return account[property]
     }
@@ -173,6 +194,9 @@ h1 {
   margin: 0;
   width: 145px;
 }
+.router-link {
+  text-decoration: none;
+}
 .search-container {
   text-align: right;
 }