Ocelot-Social/webapp/components/PostCard/index.vue

<template>
  <ds-card
    :header="post.title"
    :image="post.image"
    :class="{'post-card': true, 'disabled-content': post.disabled}"
  >
    <nuxt-link
      class="post-link"
      :to="{ name: 'post-id-slug', params: { id: post.id, slug: post.slug } }"
    >
      {{ post.title }}
    </nuxt-link>
    <!-- eslint-disable vue/no-v-html -->
    <!-- TODO: replace editor content with tiptap render view -->
    <ds-space margin-bottom="large">
      <div
        class="hc-editor-content"
        v-html="excerpt"
      />
    </ds-space>
    <!-- eslint-enable vue/no-v-html -->
    <ds-space>
      <ds-text
        v-if="post.createdAt"
        align="right"
        size="small"
        color="soft"
      >
        {{ post.createdAt | dateTime('dd. MMMM yyyy HH:mm') }}
      </ds-text>
    </ds-space>
    <ds-space
      margin="small"
      style="position: absolute; bottom: 44px;"
    >
      <!-- TODO: find better solution for rendering errors -->
      <no-ssr>
        <hc-user
          :user="post.author"
          :trunc="35"
        />
      </no-ssr>
    </ds-space>
    <template slot="footer">
      <div style="display: inline-block; opacity: .5;">
        <ds-icon
          v-for="category in post.categories"
          :key="category.id"
          v-tooltip="{content: category.name, placement: 'bottom-start', delay: { show: 500 }}"
          :name="category.icon"
        />&nbsp;
      </div>
      <div style="display: inline-block; float: right">
        <span :style="{ opacity: post.shoutedCount ? 1 : .5 }">
          <ds-icon name="bullhorn" />
          <small>{{ post.shoutedCount }}</small>
        </span>
        &nbsp;
        <span :style="{ opacity: post.commentsCount ? 1 : .5 }">
          <ds-icon name="comments" />
          <small>{{ post.commentsCount }}</small>
        </span>
        <no-ssr>
          <content-menu
            resource-type="contribution"
            :resource="post"
            :callbacks="{ confirmCallback, cancelCallback: null }"
            :is-owner="isAuthor"
          />
        </no-ssr>
      </div>
    </template>
  </ds-card>
</template>

<script>
import HcUser from '~/components/User'
import ContentMenu from '~/components/ContentMenu'
import { randomBytes } from 'crypto'
import { mapGetters } from 'vuex'
import Post from '~/mixins/Post'

export default {
  name: 'HcPostCard',
  components: {
    HcUser,
    ContentMenu
  },
  mixins: [Post],
  props: {
    post: {
      type: Object,
      required: true
    }
  },
  computed: {
    ...mapGetters({
      user: 'auth/user'
    }),
    excerpt() {
      return this.$filters.removeLinks(this.post.contentExcerpt)
    },
    isAuthor() {
      const { author } = this.post
      if (!author) return false
      return this.user.id === this.post.author.id
    }
  }
}
</script>

<style lang="scss">
.post-card {
  cursor: pointer;
  position: relative;
  z-index: 1;

  /*.ds-card-footer {
  }*/

  .content-menu {
    display: inline-block;
    margin-left: $space-xx-small;
    margin-right: -$space-x-small;
  }

  .post-link {
    margin: 15px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-indent: -999999px;
  }
}
</style>