sam/admin-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Remove LogEntryMessage component, move it to Mod Log index page

Browse source
This commit is contained in:
Angelina Filippova 2020-12-03 02:24:56 +03:00
parent c9e9775eb1
commit 27a4620dba
2 changed files with 28 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
src/views/moderation_log/LogEntryMessage.vue
View file

@ -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>

32
src/views/moderation_log/index.vue
View file

@ -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;
}