Ocelot-Social/webapp/components/notifications/Notification/Notification.vue

<template>
  <ds-space :class="{ notification: true, read: notification.read }" margin-bottom="x-small">
    <no-ssr>
      <ds-space margin-bottom="x-small">
        <hc-user
          :user="post.author || comment.author"
          :date-time="post.createdAt || comment.createdAt"
          :trunc="35"
        />
      </ds-space>
      <ds-text color="soft">{{ $t(notificationTextIdents[notification.reason]) }}</ds-text>
    </no-ssr>
    <ds-space margin-bottom="x-small" />
    <nuxt-link
      class="notification-mention-post"
      :to="{ name: 'post-id-slug', params: postParams, ...hashParam }"
      @click.native="$emit('read')"
    >
      <ds-space margin-bottom="x-small">
        <ds-card
          :header="post.title || comment.post.title"
          hover
          space="x-small"
          class="notifications-card"
        >
          <ds-space margin-bottom="x-small" />
          <!-- eslint-disable vue/no-v-html -->
          <div v-html="excerpt" />
          <!-- eslint-enable vue/no-v-html -->
        </ds-card>
      </ds-space>
    </nuxt-link>
  </ds-space>
</template>

<script>
import HcUser from '~/components/User'

export default {
  name: 'Notification',
  components: {
    HcUser,
  },
  props: {
    notification: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      notificationTextIdents: {
        mentioned_in_post: 'notifications.menu.mentionedInPost',
        mentioned_in_comment: 'notifications.menu.mentionedInComment',
        comment_on_your_post: 'notifications.menu.commentedOnPost',
      },
    }
  },
  computed: {
    excerpt() {
      const excerpt = this.post.id ? this.post.contentExcerpt : this.comment.contentExcerpt
      return (
        (!this.post.id ? '<b>Comment: </b>' : '') + excerpt.replace(/<(?:.|\n)*?>/gm, '').trim()
      )
    },
    post() {
      return this.notification.post || {}
    },
    comment() {
      return this.notification.comment || {}
    },
    postParams() {
      return {
        id: this.post.id || this.comment.post.id,
        slug: this.post.slug || this.comment.post.slug,
      }
    },
    hashParam() {
      return this.post.id ? {} : { hash: `#commentId-${this.comment.id}` }
    },
  },
}
</script>

<style>
.notification.read {
  opacity: 0.6; /* Real browsers */
  filter: alpha(opacity = 60); /* MSIE */
}
.notifications-card {
  min-width: 500px;
}
</style>