IT4Change/gradido
3
0
Fork 0
mirror of https://github.com/IT4Change/gradido.git synced 2025-12-13 07:45:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

change linkify to computed

Browse Source
This commit is contained in:
ogerly 2022-10-15 07:54:58 +02:00
parent 50a1b67a70
commit cb39745b23
2 changed files with 18 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.vue
View File

@ -1,21 +1,24 @@
<template>
<div class="contribution-messages-list-item">
<div v-if="message.isModerator" class="text-right is-moderator">
<b-avatar square :text="initialLetters" variant="warning"></b-avatar>
<b-avatar square variant="warning"></b-avatar>
<span class="ml-2 mr-2">{{ message.userFirstName }} {{ message.userLastName }}</span>
<span class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</span>
<small class="ml-4 text-success">{{ $t('moderator') }}</small>
<div class="mt-2">{{ message.message }}</div>
<div class="mt-2" v-html="linkify"></div>
</div>
<div v-else class="text-left is-not-moderator">
<b-avatar :text="initialLetters" variant="info"></b-avatar>
<b-avatar variant="info"></b-avatar>
<span class="ml-2 mr-2">{{ message.userFirstName }} {{ message.userLastName }}</span>
<span class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</span>
<div class="mt-2">{{ message.message }}</div>
<div class="mt-2" v-html="linkify"></div>
</div>
</div>
</template>
<script>
const PATTERN =
/(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*))/gi
export default {
name: 'ContributionMessagesListItem',
props: {
@ -24,26 +27,11 @@ export default {
required: true,
},
},
data() {
return {
pattern:
// eslint-disable-next-line no-useless-escape
/(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*))/gi,
messageObject: this.message,
}
},
methods: {
linkify(inputText) {
// console.log(inputText.match(this.pattern))
this.messageObject.message = inputText.replace(
this.pattern,
"<i><a href='$1' target='_blank'>$1</a></i>",
)
computed: {
linkify() {
return this.message.message.replace(PATTERN, "<i><a href='$1' target='_blank'>$1</a></i>")
},
},
created() {
this.linkify(this.messageObject.message)
},
}
</script>
<style>

26
frontend/src/components/ContributionMessages/ContributionMessagesListItem.vue
View File

@ -1,22 +1,24 @@
<template>
<div class="contribution-messages-list-item">
<div v-if="isNotModerator" class="is-not-moderator text-right">
<b-avatar :text="initialLetters" variant="info"></b-avatar>
<b-avatar variant="info"></b-avatar>
<span class="ml-2 mr-2">{{ message.userFirstName }} {{ message.userLastName }}</span>
<span class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</span>
<div class="mt-2">{{ message.message }}</div>
<div class="mt-2" v-html="linkify"></div>
</div>
<div v-else class="is-moderator text-left">
<b-avatar square :text="initialLetters" variant="warning"></b-avatar>
<b-avatar square variant="warning"></b-avatar>
<span class="ml-2 mr-2">{{ message.userFirstName }} {{ message.userLastName }}</span>
<span class="ml-2">{{ $d(new Date(message.createdAt), 'short') }}</span>
<small class="ml-4 text-success">{{ $t('community.moderator') }}</small>
<div class="mt-2">{{ message.message }}</div>
<div class="mt-2" v-html="linkify"></div>
</div>
</div>
</template>
<script>
const PATTERN = /(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*))/gi
export default {
name: 'ContributionMessagesListItem',
props: {
@ -27,9 +29,6 @@ export default {
},
data() {
return {
// eslint-disable-next-line no-useless-escape
pattern: /(https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*))/gi,
messageObject: this.message,
storeName: `${this.$store.state.firstName} ${this.$store.state.lastName}`,
moderationName: `${this.message.userFirstName} ${this.message.userLastName}`,
}
@ -38,19 +37,10 @@ export default {
isNotModerator() {
return this.storeName === this.moderationName
},
},
methods: {
linkify(inputText) {
// console.log(inputText.match(this.pattern))
this.messageObject.message = inputText.replace(
this.pattern,
"<i><a href='$1' target='_blank'>$1</a></i>",
)
linkify() {
return this.message.message.replace(PATTERN, "<i><a href='$1' target='_blank'>$1</a></i>")
},
},
created() {
this.linkify(this.messageObject.message)
},
}
</script>
<style>