Ocelot-Social/webapp/components/NotificationsTable/NotificationsTable.vue

<template>
  <ds-table
    v-if="notificationsData && notificationsData.length"
    :data="notificationsData"
    :fields="fields"
  >
    <template #icon="scope">
      <base-icon
        v-if="scope.row.report"
        name="balance-scale"
        v-tooltip="{ content: $t('notifications.report.name'), placement: 'right' }"
        :class="{ 'notification-status': scope.row.read }"
      />
      <base-icon
        v-else-if="scope.row.comment"
        name="comment"
        v-tooltip="{ content: $t('notifications.comment'), placement: 'right' }"
        :class="{ 'notification-status': scope.row.read }"
      />
      <base-icon
        v-else
        name="bookmark"
        v-tooltip="{ content: $t('notifications.post'), placement: 'right' }"
        :class="{ 'notification-status': scope.row.read }"
      />
    </template>
    <template #user="scope">
      <ds-space margin-bottom="base">
        <client-only>
          <user-teaser
            :user="scope.row.triggerer"
            :date-time="scope.row.createdAt"
            :class="{ 'notification-status': scope.row.read }"
          />
        </client-only>
      </ds-space>
      <ds-text :class="{ 'notification-status': scope.row.read, reason: true }">
        {{ $t(`notifications.reason.${scope.row.reason}` + scope.row.reasonExtention) }}
      </ds-text>
    </template>
    <template #post="scope">
      <nuxt-link
        data-testid="notification-link"
        class="notification-link-for-test"
        :class="{ 'notification-status': scope.row.read }"
        :to="scope.row.linkTo"
        @click.native="markNotificationAsRead(scope.row.id)"
      >
        <b>{{ scope.row.title | truncate(50) }}</b>
      </nuxt-link>
    </template>
    <template #content="scope">
      <div v-if="scope.row.user" :class="{ 'notification-status': scope.row.read }">
        <user-teaser :user="scope.row.user" />
      </div>
      <div v-else-if="scope.row.contentExcerpt" :class="{ 'notification-status': scope.row.read }">
        <span v-if="scope.row.comment" class="notification-content-header-text">
          {{ $t(`notifications.comment`) }}:
        </span>
        {{ scope.row.contentExcerpt | removeHtml }}
      </div>
      <div v-if="scope.row.report" :class="{ 'notification-status': scope.row.read }">
        <ds-space margin-bottom="x-small" />
        <span class="notification-content-header-text">
          {{ $t(`notifications.report.category`) }}:
        </span>
        {{ $t('report.reason.category.options.' + scope.row.report.reasonCategory) }}
        <br />
        <span class="notification-content-header-text">
          {{ $t(`notifications.report.description`) }}:
        </span>
        <span
          v-if="scope.row.report.reasonDescription && scope.row.report.reasonDescription !== ''"
        >
          {{ scope.row.report.reasonDescription }}
        </span>
        <span v-else>
          —
        </span>
      </div>
    </template>
  </ds-table>
  <hc-empty v-else icon="alert" :message="$t('notifications.empty')" />
</template>
<script>
import { mapGetters } from 'vuex'
import { extractNotificationDataOfCurrentUser } from '~/components/utils/Notifications'
import UserTeaser from '~/components/UserTeaser/UserTeaser'
import HcEmpty from '~/components/Empty/Empty'

export default {
  components: {
    UserTeaser,
    HcEmpty,
  },
  props: {
    notifications: { type: Array, default: () => [] },
  },
  computed: {
    ...mapGetters({
      currentUser: 'auth/user',
    }),
    fields() {
      return {
        icon: {
          label: ' ',
          width: '3%',
        },
        user: {
          label: ' ',
          width: '25%',
        },
        post: {
          label: ' ',
          width: '25%',
        },
        content: {
          label: ' ',
          width: '47%',
        },
      }
    },
    notificationsData() {
      const data = []
      this.notifications.forEach(notification => {
        data.push(extractNotificationDataOfCurrentUser(notification, this.currentUser))
      })
      return data
    },
  },
  methods: {
    markNotificationAsRead(notificationSourceId) {
      this.$emit('markNotificationAsRead', notificationSourceId)
    },
  },
}
</script>
<style lang="scss">
.notification-status {
  opacity: $opacity-soft;
}
.notification-content-header-text {
  font-weight: 700;
  margin-right: 0.1rem;
}
</style>