Try to implement scrollBehavior for Mentions of User in Comment of a Post

Co-Authored-By: mattwr18 <mattwr18@gmail.com>

webapp/components/Comment.vue

@@ -10,7 +10,7 @@
     </ds-card>
   </div>
   <div v-else :class="{ comment: true, 'disabled-content': comment.deleted || comment.disabled }">
-    <ds-card>
+    <ds-card :id="comment.id">
       <ds-space margin-bottom="small">
         <hc-user :user="author" :date-time="comment.createdAt" />
       </ds-space>
@@ -33,15 +33,19 @@
         v-show="comment.content !== comment.contentExcerpt"
         style="text-align: right;  margin-right: 20px; margin-top: -12px;"
       >
-        <a v-if="isCollapsed" style="padding-left: 40px;" @click="isCollapsed = !isCollapsed">
-          {{ $t('comment.show.more') }}
-        </a>
+        <a
+          v-if="isCollapsed"
+          style="padding-left: 40px;"
+          @click="isCollapsed = !isCollapsed"
+        >{{ $t('comment.show.more') }}</a>
       </div>
       <div v-if="!isCollapsed" v-html="comment.content" style="padding-left: 40px;" />
       <div style="text-align: right;  margin-right: 20px; margin-top: -12px;">
-        <a v-if="!isCollapsed" @click="isCollapsed = !isCollapsed" style="padding-left: 40px; ">
-          {{ $t('comment.show.less') }}
-        </a>
+        <a
+          v-if="!isCollapsed"
+          @click="isCollapsed = !isCollapsed"
+          style="padding-left: 40px; "
+        >{{ $t('comment.show.less') }}</a>
       </div>
       <ds-space margin-bottom="small" />
     </ds-card>

webapp/components/notifications/Notification/index.vue

@@ -2,18 +2,29 @@
   <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" :trunc="35" />
+        <hc-user
+          :user="post.author || comment.author"
+          :date-time="post.createdAt || comment.createdAt"
+          :trunc="35"
+        />
       </ds-space>
-      <ds-text color="soft">{{ $t('notifications.menu.mentioned') }}</ds-text>
+      <ds-text
+        color="soft"
+      >{{ $t('notifications.menu.mentioned', { resource: post.id ? 'post' : 'comment' }) }}</ds-text>
     </no-ssr>
     <ds-space margin-bottom="x-small" />
     <nuxt-link
       class="notification-mention-post"
-      :to="{ name: 'post-id-slug', params: { id: post.id, slug: post.slug } }"
+      :to="{ name: 'post-id', params: postParams, ...queryParams }"
       @click.native="$emit('read')"
     >
       <ds-space margin-bottom="x-small">
-        <ds-card :header="post.title" :image="post.image" hover space="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" />
@@ -40,7 +51,10 @@ export default {
   },
   computed: {
     excerpt() {
-      return this.$filters.removeLinks(this.post.contentExcerpt)
+      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 || {}
@@ -48,6 +62,18 @@ export default {
     comment() {
       return this.notification.comment || {}
     },
+    postParams() {
+      return {
+        id: this.post.id || this.comment.post.id,
+      }
+    },
+    queryParams() {
+      return this.post.id
+        ? {}
+        : {
+            query: { commentId: this.comment.id },
+          }
+    },
   },
 }
 </script>
@@ -57,4 +83,7 @@ export default {
   opacity: 0.6; /* Real browsers */
   filter: alpha(opacity = 60); /* MSIE */
 }
+.notifications-card {
+  min-width: 500px;
+}
 </style>

webapp/components/notifications/NotificationMenu/index.vue

@@ -1,12 +1,13 @@
 <template>
-  <ds-button v-if="totalNotifications <= 0" class="notifications-menu" disabled icon="bell">
-    {{ totalNotifications }}
-  </ds-button>
+  <ds-button
+    v-if="totalNotifications <= 0"
+    class="notifications-menu"
+    disabled
+    icon="bell"
+  >{{ totalNotifications }}</ds-button>
   <dropdown v-else class="notifications-menu" :placement="placement">
     <template slot="default" slot-scope="{ toggleMenu }">
-      <ds-button primary icon="bell" @click.prevent="toggleMenu">
-        {{ totalNotifications }}
-      </ds-button>
+      <ds-button primary icon="bell" @click.prevent="toggleMenu">{{ totalNotifications }}</ds-button>
     </template>
     <template slot="popover">
       <div class="notifications-menu-popover">
@@ -52,6 +53,7 @@ const NOTIFICATIONS = gql`
             name
             disabled
             deleted
+            avatar
           }
         }
         comment {
@@ -66,6 +68,7 @@ const NOTIFICATIONS = gql`
             name
             disabled
             deleted
+            avatar
           }
           post {
             id
@@ -81,6 +84,7 @@ const NOTIFICATIONS = gql`
               name
               disabled
               deleted
+              avatar
             }
           }
         }

webapp/locales/de.json

@@ -107,7 +107,7 @@
   },
   "notifications": {
     "menu": {
-      "mentioned": "hat dich in einem Beitrag erwähnt"
+      "mentioned": "hat dich in einem {resource} erwähnt"
     }
   },
   "search": {

webapp/locales/en.json

@@ -108,7 +108,7 @@
   },
   "notifications": {
     "menu": {
-      "mentioned": "mentioned you in a post"
+      "mentioned": "mentioned you in a {resource}"
     }
   },
   "search": {

webapp/nuxt.config.js

@@ -3,12 +3,11 @@ const envWhitelist = ['NODE_ENV', 'MAINTENANCE', 'MAPBOX_TOKEN']
 const dev = process.env.NODE_ENV !== 'production'
 
 const styleguidePath = '../Nitro-Styleguide'
-const styleguideStyles = process.env.STYLEGUIDE_DEV
-  ? [
-      `${styleguidePath}/src/system/styles/main.scss`,
-      `${styleguidePath}/src/system/styles/shared.scss`,
-    ]
-  : '@human-connection/styleguide/dist/shared.scss'
+const styleguideStyles = process.env.STYLEGUIDE_DEV ? [
+    `${styleguidePath}/src/system/styles/main.scss`,
+    `${styleguidePath}/src/system/styles/shared.scss`,
+  ] :
+  '@human-connection/styleguide/dist/shared.scss'
 
 const buildDir = process.env.NUXT_BUILD || '.nuxt'
 
@@ -51,12 +50,24 @@ module.exports = {
   head: {
     title: 'Human Connection',
     titleTemplate: '%s - Human Connection',
-    meta: [
-      { charset: 'utf-8' },
-      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      { hid: 'description', name: 'description', content: pkg.description },
+    meta: [{
+        charset: 'utf-8'
+      },
+      {
+        name: 'viewport',
+        content: 'width=device-width, initial-scale=1'
+      },
+      {
+        hid: 'description',
+        name: 'description',
+        content: pkg.description
+      },
     ],
-    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
+    link: [{
+      rel: 'icon',
+      type: 'image/x-icon',
+      href: '/favicon.ico'
+    }],
   },
 
   /*
@@ -83,18 +94,37 @@ module.exports = {
   /*
    ** Plugins to load before mounting the App
    */
-  plugins: [
-    {
+  plugins: [{
       src: `~/plugins/styleguide${process.env.STYLEGUIDE_DEV ? '-dev' : ''}.js`,
       ssr: true,
     },
-    { src: '~/plugins/i18n.js', ssr: true },
-    { src: '~/plugins/axios.js', ssr: false },
-    { src: '~/plugins/keep-alive.js', ssr: false },
-    { src: '~/plugins/vue-directives.js', ssr: false },
-    { src: '~/plugins/v-tooltip.js', ssr: false },
-    { src: '~/plugins/izi-toast.js', ssr: false },
-    { src: '~/plugins/vue-filters.js' },
+    {
+      src: '~/plugins/i18n.js',
+      ssr: true
+    },
+    {
+      src: '~/plugins/axios.js',
+      ssr: false
+    },
+    {
+      src: '~/plugins/keep-alive.js',
+      ssr: false
+    },
+    {
+      src: '~/plugins/vue-directives.js',
+      ssr: false
+    },
+    {
+      src: '~/plugins/v-tooltip.js',
+      ssr: false
+    },
+    {
+      src: '~/plugins/izi-toast.js',
+      ssr: false
+    },
+    {
+      src: '~/plugins/vue-filters.js'
+    },
   ],
 
   router: {
@@ -102,7 +132,10 @@ module.exports = {
     linkActiveClass: 'router-link-active',
     linkExactActiveClass: 'router-link-exact-active',
     scrollBehavior: () => {
-      return { x: 0, y: 0 }
+      return {
+        x: 0,
+        y: 0
+      }
     },
   },
 
@@ -110,8 +143,12 @@ module.exports = {
    ** Nuxt.js modules
    */
   modules: [
-    ['@nuxtjs/dotenv', { only: envWhitelist }],
-    ['nuxt-env', { keys: envWhitelist }],
+    ['@nuxtjs/dotenv', {
+      only: envWhitelist
+    }],
+    ['nuxt-env', {
+      keys: envWhitelist
+    }],
     'cookie-universal-nuxt',
     '@nuxtjs/apollo',
     '@nuxtjs/axios',
@@ -149,7 +186,9 @@ module.exports = {
     '/api': {
       // make this configurable (nuxt-dotenv)
       target: process.env.GRAPHQL_URI || 'http://localhost:4000',
-      pathRewrite: { '^/api': '' },
+      pathRewrite: {
+        '^/api': ''
+      },
       toProxy: true, // cloudflare needs that
       headers: {
         Accept: 'application/json',
@@ -218,8 +257,7 @@ module.exports = {
         loader: 'vue-svg-loader',
         options: {
           svgo: {
-            plugins: [
-              {
+            plugins: [{
                 removeViewBox: false,
               },
               {

webapp/pages/post/_id.vue

@@ -80,6 +80,7 @@ export default {
   watch: {
     $route(to, from) {
       if (to.hash === '#comments') {
+        console.log('to: ', to, 'from: ', from)
         window.scroll({
           top: document.getElementById('comments').offsetTop,
           left: 0,
@@ -88,6 +89,11 @@ export default {
       }
     },
   },
+  methods: {
+    scrollBehavior(to, from, savedPosition) {
+      console.log('to: ', to, 'from: ', from)
+    },
+  },
 }
 </script>
 

webapp/pages/post/_id/_slug/index.vue

@@ -93,10 +93,12 @@ export default {
     }
   },
   data() {
+    const { commentId = null } = this.$route.query
     return {
       post: null,
       ready: false,
       title: 'loading',
+      commentId,
     }
   },
   watch: {
@@ -129,6 +131,7 @@ export default {
     }
   },
   mounted() {
+    console.log('this.$router: ', this.$router)
     setTimeout(() => {
       // NOTE: quick fix for jumping flexbox implementation
       // will be fixed in a future update of the styleguide