add clickedCount to PostTeaser

webapp/components/PostTeaser/PostTeaser.vue

@@ -6,9 +6,9 @@
     <base-card
       :lang="post.language"
       :class="{
-        'disabled-content': post.disabled,
+             'disabled-content': post.disabled,
-        '--blur-image': post.image && post.image.sensitive,
+             '--blur-image': post.image && post.image.sensitive,
-      }"
+             }"
       :highlight="isPinned"
     >
       <template v-if="post.image" #heroImage>
@@ -34,6 +34,11 @@
           :count="post.commentsCount"
           :title="$t('contribution.amount-comments', { amount: post.commentsCount })"
         />
+        <counter-icon
+          icon="eye"
+          :count="post.clickedCount"
+          :title="$t('contribution.amount-clicks', { amount: post.clickedCount })"
+        />
         <client-only>
           <content-menu
             resource-type="contribution"
@@ -54,143 +59,143 @@
 </template>
 
 <script>
-import UserTeaser from '~/components/UserTeaser/UserTeaser'
+ import UserTeaser from '~/components/UserTeaser/UserTeaser'
-import ContentMenu from '~/components/ContentMenu/ContentMenu'
+ import ContentMenu from '~/components/ContentMenu/ContentMenu'
-import HcRibbon from '~/components/Ribbon'
+ import HcRibbon from '~/components/Ribbon'
-import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
+ import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
-import { mapGetters } from 'vuex'
+ import { mapGetters } from 'vuex'
-import { postMenuModalsData, deletePostMutation } from '~/components/utils/PostHelpers'
+ import { postMenuModalsData, deletePostMutation } from '~/components/utils/PostHelpers'
 
-export default {
+ export default {
-  name: 'PostTeaser',
+   name: 'PostTeaser',
-  components: {
+   components: {
-    UserTeaser,
+     UserTeaser,
-    HcRibbon,
+     HcRibbon,
-    ContentMenu,
+     ContentMenu,
-    CounterIcon,
+     CounterIcon,
-  },
+   },
-  props: {
+   props: {
-    post: {
+     post: {
-      type: Object,
+       type: Object,
-      required: true,
+       required: true,
-    },
+     },
-    width: {
+     width: {
-      type: Object,
+       type: Object,
-      default: () => {},
+       default: () => {},
-    },
+     },
-  },
+   },
-  mounted() {
+   mounted() {
-    const { image } = this.post
+     const { image } = this.post
-    if (!image) return
+     if (!image) return
-    const width = this.$el.offsetWidth
+     const width = this.$el.offsetWidth
-    const height = Math.min(width / image.aspectRatio, 2000)
+     const height = Math.min(width / image.aspectRatio, 2000)
-    const imageElement = this.$el.querySelector('.hero-image')
+     const imageElement = this.$el.querySelector('.hero-image')
-    if (imageElement) {
+     if (imageElement) {
-      imageElement.style.height = `${height}px`
+       imageElement.style.height = `${height}px`
-    }
+     }
-  },
+   },
-  computed: {
+   computed: {
-    ...mapGetters({
+     ...mapGetters({
-      user: 'auth/user',
+       user: 'auth/user',
-    }),
+     }),
-    excerpt() {
+     excerpt() {
-      return this.$filters.removeLinks(this.post.contentExcerpt)
+       return this.$filters.removeLinks(this.post.contentExcerpt)
-    },
+     },
-    isAuthor() {
+     isAuthor() {
-      const { author } = this.post
+       const { author } = this.post
-      if (!author) return false
+       if (!author) return false
-      return this.user.id === this.post.author.id
+       return this.user.id === this.post.author.id
-    },
+     },
-    menuModalsData() {
+     menuModalsData() {
-      return postMenuModalsData(
+       return postMenuModalsData(
-        // "this.post" may not always be defined at the beginning …
+         // "this.post" may not always be defined at the beginning …
-        this.post ? this.$filters.truncate(this.post.title, 30) : '',
+         this.post ? this.$filters.truncate(this.post.title, 30) : '',
-        this.deletePostCallback,
+         this.deletePostCallback,
-      )
+       )
-    },
+     },
-    isPinned() {
+     isPinned() {
-      return this.post && this.post.pinned
+       return this.post && this.post.pinned
-    },
+     },
-  },
+   },
-  methods: {
+   methods: {
-    async deletePostCallback() {
+     async deletePostCallback() {
-      try {
+       try {
-        const {
+         const {
-          data: { DeletePost },
+           data: { DeletePost },
-        } = await this.$apollo.mutate(deletePostMutation(this.post.id))
+         } = await this.$apollo.mutate(deletePostMutation(this.post.id))
-        this.$toast.success(this.$t('delete.contribution.success'))
+         this.$toast.success(this.$t('delete.contribution.success'))
-        this.$emit('removePostFromList', DeletePost)
+         this.$emit('removePostFromList', DeletePost)
-      } catch (err) {
+       } catch (err) {
-        this.$toast.error(err.message)
+         this.$toast.error(err.message)
-      }
+       }
-    },
+     },
-    pinPost(post) {
+     pinPost(post) {
-      this.$emit('pinPost', post)
+       this.$emit('pinPost', post)
-    },
+     },
-    unpinPost(post) {
+     unpinPost(post) {
-      this.$emit('unpinPost', post)
+       this.$emit('unpinPost', post)
-    },
+     },
-  },
+   },
-}
+ }
 </script>
 <style lang="scss">
-.post-teaser,
+ .post-teaser,
-.post-teaser:hover,
+ .post-teaser:hover,
-.post-teaser:active {
+ .post-teaser:active {
-  position: relative;
+   position: relative;
-  display: block;
+   display: block;
-  height: 100%;
+   height: 100%;
-  color: $text-color-base;
+   color: $text-color-base;
 
-  > .ribbon {
+   > .ribbon {
-    position: absolute;
+     position: absolute;
-    top: 50%;
+     top: 50%;
-    right: -7px;
+     right: -7px;
-  }
+   }
-}
+ }
 
-.post-teaser > .base-card {
+ .post-teaser > .base-card {
-  display: flex;
+   display: flex;
-  flex-direction: column;
+   flex-direction: column;
-  height: 100%;
+   height: 100%;
 
-  &.--blur-image > .hero-image > .image {
+   &.--blur-image > .hero-image > .image {
-    filter: blur($blur-radius);
+     filter: blur($blur-radius);
-  }
+   }
 
-  > .content {
+   > .content {
-    flex-grow: 1;
+     flex-grow: 1;
-    margin-bottom: $space-small;
+     margin-bottom: $space-small;
-  }
+   }
 
-  > .footer {
+   > .footer {
-    display: flex;
+     display: flex;
-    justify-content: space-between;
+     justify-content: space-between;
-    align-items: center;
+     align-items: center;
 
-    > .categories-placeholder {
+     > .categories-placeholder {
-      flex-grow: 1;
+       flex-grow: 1;
-    }
+     }
 
-    > .counter-icon {
+     > .counter-icon {
-      display: block;
+       display: block;
-      margin-right: $space-small;
+       margin-right: $space-small;
-      opacity: $opacity-disabled;
+       opacity: $opacity-disabled;
-    }
+     }
 
-    > .content-menu {
+     > .content-menu {
-      position: relative;
+       position: relative;
-      z-index: $z-index-post-teaser-link;
+       z-index: $z-index-post-teaser-link;
-    }
+     }
 
-    .ds-tag {
+     .ds-tag {
-      margin: 0;
+       margin: 0;
-      margin-right: $space-xx-small;
+       margin-right: $space-xx-small;
-    }
+     }
-  }
+   }
 
-  .user-teaser {
+   .user-teaser {
-    margin-bottom: $space-small;
+     margin-bottom: $space-small;
-  }
+   }
-}
+ }
 </style>

webapp/graphql/Fragments.js

@@ -67,6 +67,7 @@ export const postCountsFragment = gql`
     shoutedCount
     shoutedByCurrentUser
     emotionsCount
+    clickedCount
   }
 `
 

webapp/locales/de.json

@@ -174,6 +174,7 @@
     }
   },
   "contribution": {
+    "amount-clicks": "{amount} clicks",
     "amount-comments": "{amount} comments",
     "amount-shouts": "{amount} recommendations",
     "categories": {

webapp/locales/en.json

@@ -174,6 +174,7 @@
     }
   },
   "contribution": {
+    "amount-clicks": "{amount} clicks",
     "amount-comments": "{amount} comments",
     "amount-shouts": "{amount} recommendations",
     "categories": {