Add slug to User component, fix #1486

webapp/components/User/User.story.js

@@ -0,0 +1,74 @@
+import { storiesOf } from '@storybook/vue'
+import { withA11y } from '@storybook/addon-a11y'
+import User from '~/components/User/User.vue'
+import helpers from '~/storybook/helpers'
+
+helpers.init()
+
+const user = {
+  id: 'u6',
+  slug: 'louie',
+  name: 'Louie',
+  avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/designervzm/128.jpg',
+  about:
+    'Illum in et velit soluta voluptatem architecto consequuntur enim placeat. Eum excepturi est ratione rerum in voluptatum corporis. Illum consequatur minus. Modi incidunt velit.',
+  disabled: false,
+  deleted: false,
+  locationName: null,
+  location: null,
+  createdAt: '2019-09-18T14:16:01.695Z',
+  badges: [],
+  badgesCount: 0,
+  shoutedCount: 1,
+  commentedCount: 2,
+  contributionsCount: 5,
+  followingCount: 1,
+  following: [
+    {
+      id: 'u3',
+      slug: 'jenny-rostock',
+      name: 'Jenny Rostock',
+      avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/bowbrick/128.jpg',
+      disabled: false,
+      deleted: false,
+      followedByCount: 2,
+      followedByCurrentUser: false,
+      contributionsCount: 1,
+      commentedCount: 3,
+      badges: [
+        {
+          id: 'indiegogo_en_bear',
+          icon: '/img/badges/indiegogo_en_bear.svg',
+        },
+      ],
+      location: {
+        name: 'Paris',
+      },
+    },
+  ],
+  followedByCount: 0,
+  followedByCurrentUser: false,
+  isBlocked: false,
+  followedBy: [],
+  socialMedia: [],
+}
+
+storiesOf('User', module)
+  .addDecorator(withA11y)
+  .addDecorator(helpers.layout)
+  .add('available user', () => ({
+    components: { User },
+    store: helpers.store,
+    data: () => ({
+      user,
+    }),
+    template: '<user :user="user" :trunc="35" :date-time="new Date()" />',
+  }))
+  .add('anonymous user', () => ({
+    components: { User },
+    store: helpers.store,
+    data: () => ({
+      user: null,
+    }),
+    template: '<user :user="user" :trunc="35" :date-time="new Date()" />',
+  }))

webapp/components/User/User.vue

@@ -14,14 +14,15 @@
             <b class="username">{{ userName | truncate(18) }}</b>
           </div>
           <!-- Time -->
-          <div v-if="dateTime" style="display: inline;">
-            <ds-text align="left" size="small" color="soft">
+          <ds-text align="right" size="small" color="soft">
+            <span class="slug">{{ userSlug }}</span>
+            <div v-if="dateTime" style="display: inline;">
               <ds-icon name="clock" />
               <client-only>
                 <hc-relative-date-time :date-time="dateTime" />
               </client-only>
-            </ds-text>
-          </div>
+            </div>
+          </ds-text>
         </div>
       </nuxt-link>
     </template>
@@ -126,6 +127,10 @@ export default {
       if (!(id && slug)) return ''
       return { name: 'profile-id-slug', params: { slug, id } }
     },
+    userSlug() {
+      const { slug } = this.user || {}
+      return slug && `@${slug}`
+    },
     userName() {
       const { name } = this.user || {}
       return name || this.$t('profile.userAnonym')

webapp/storybook/helpers.js

@@ -3,6 +3,7 @@ import Vuex from 'vuex'
 import vuexI18n from 'vuex-i18n/dist/vuex-i18n.umd.js'
 import Styleguide from '@human-connection/styleguide'
 import Filters from '~/plugins/vue-filters'
+import VTooltip from '~/plugins/v-tooltip'
 import layout from './layout.vue'
 
 const helpers = {
@@ -25,6 +26,9 @@ const helpers = {
       auth: {
         namespaced: true,
         getters: {
+          isModerator() {
+            return false
+          },
           user(state) {
             return { id: 1, name: 'admin' }
           },