From 27a4620dba64749e9ec75d2563e17ef64782cd39 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Thu, 3 Dec 2020 02:24:56 +0300
Subject: [PATCH] Remove LogEntryMessage component, move it to Mod Log index
page
---
src/views/moderation_log/LogEntryMessage.vue | 60 --------------------
src/views/moderation_log/index.vue | 32 +++++++++--
2 files changed, 28 insertions(+), 64 deletions(-)
delete mode 100644 src/views/moderation_log/LogEntryMessage.vue
diff --git a/src/views/moderation_log/LogEntryMessage.vue b/src/views/moderation_log/LogEntryMessage.vue
deleted file mode 100644
index b0e3a6e8..00000000
--- 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 283bf4d2..c8c350c4 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;
}
--
GitLab