diff --git a/src/views/moderation_log/LogEntryMessage.vue b/src/views/moderation_log/LogEntryMessage.vue deleted file mode 100644 index b0e3a6e889e642fe3d9738c846fdf048e58b239f..0000000000000000000000000000000000000000 --- a/src/views/moderation_log/LogEntryMessage.vue +++ /dev/null @@ -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> diff --git a/src/views/moderation_log/index.vue b/src/views/moderation_log/index.vue index 283bf4d298e71cdb2c2b6a6cc1b22698b36f6965..c8c350c4e4e16fe004f1fa801e79d7cbf5478f21 100644 --- a/src/views/moderation_log/index.vue +++ b/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"/> - <span v-else>{{ logEntry.message }}</span> + <component :is="processedMessage(logEntry)"/> </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; }