Refactor mixin with computed property

@ulfgebhardt I refactored the mixin because it's not enough code to
justify the additional complexity. If it's just two lines of code, I
find it the best solution to use a computed property.

You can use components and computed properties excessively, they tend to
be easier to maintain in the long run.

webapp/components/User/index.vue

@@ -38,7 +38,7 @@
           >
             <ds-avatar
               :image="user.avatar"
-              :name="userName(user.name)"
+              :name="userName"
               style="display: inline-block; vertical-align: middle;"
               size="32px"
             />
@@ -47,7 +47,7 @@
             <b
               class="username"
               style="vertical-align: middle;"
-            >{{ userName(user.name) | truncate(18) }}</b>
+            >{{ userName | truncate(18) }}</b>
           </div>
           <!-- Time -->
           <div
@@ -144,7 +144,6 @@ import HcRelativeDateTime from '~/components/RelativeDateTime'
 import HcFollowButton from '~/components/FollowButton'
 import HcBadges from '~/components/Badges'
 import Dropdown from '~/components/Dropdown'
-import userName from '~/mixins/userName'
 
 export default {
   name: 'HcUser',
@@ -154,7 +153,6 @@ export default {
     HcBadges,
     Dropdown
   },
-  mixins: [userName],
   props: {
     user: { type: Object, default: null },
     trunc: { type: Number, default: null },
@@ -175,6 +173,10 @@ export default {
       const { id, slug } = this.user
       if (!(id && slug)) return ''
       return { name: 'profile-id-slug', params: { slug, id } }
+    },
+    userName() {
+      const { name } = this.user || {}
+      return name || this.$t('profile.userAnonym')
     }
   }
 }

webapp/layouts/default.vue

@@ -62,7 +62,7 @@
                 >
                   <div class="avatar-menu-popover">
                     {{ $t('login.hello') }}
-                    <b>{{ userName(user.name) }}</b>
+                    <b>{{ userName }}</b>
                     <template v-if="user.role !== 'user'">
                       <ds-text
                         color="softer"
@@ -124,7 +124,6 @@ import Modal from '~/components/Modal'
 import NotificationMenu from '~/components/notifications/NotificationMenu'
 import Dropdown from '~/components/Dropdown'
 import seo from '~/mixins/seo'
-import userName from '~/mixins/userName'
 
 export default {
   components: {
@@ -135,7 +134,7 @@ export default {
     LocaleSwitch,
     NotificationMenu
   },
-  mixins: [seo, userName],
+  mixins: [seo],
   data() {
     return {
       mobileSearchVisible: false
@@ -150,6 +149,10 @@ export default {
       quickSearchResults: 'search/quickResults',
       quickSearchPending: 'search/quickPending'
     }),
+    userName() {
+      const { name } = this.user || {}
+      return name || this.$t('profile.userAnonym')
+    },
     routes() {
       if (!this.user.slug) {
         return []

webapp/mixins/userName.js

@@ -1,8 +0,0 @@
-export default {
-  methods: {
-    userName(userName) {
-      // Return Anonymous if no Username is given else return full Username
-      return userName ? userName : this.$t('profile.userAnonym')
-    }
-  }
-}

webapp/pages/profile/_id/_slug.vue

@@ -16,7 +16,7 @@
         >
           <ds-avatar
             :image="user.avatar"
-            :name="userName(user.name)"
+            :name="userName"
             class="profile-avatar"
             size="120px"
           />
@@ -34,7 +34,7 @@
               align="center"
               no-margin
             >
-              {{ userName(user.name) }}
+              {{ userName }}
             </ds-heading>
             <ds-text
               v-if="user.location"
@@ -122,7 +122,7 @@
               tag="h5"
               color="soft"
             >
-              Wem folgt {{ userName(user.name) | truncate(15) }}?
+              Wem folgt {{ userName | truncate(15) }}?
             </ds-text>
           </ds-space>
           <template v-if="user.following && user.following.length">
@@ -153,7 +153,7 @@
           </template>
           <template v-else>
             <p style="text-align: center; opacity: .5;">
-              {{ userName(user.name) }} folgt niemandem
+              {{ userName }} folgt niemandem
             </p>
           </template>
         </ds-card>
@@ -167,7 +167,7 @@
               tag="h5"
               color="soft"
             >
-              Wer folgt {{ userName(user.name) | truncate(15) }}?
+              Wer folgt {{ userName | truncate(15) }}?
             </ds-text>
           </ds-space>
           <template v-if="user.followedBy && user.followedBy.length">
@@ -198,7 +198,7 @@
           </template>
           <template v-else>
             <p style="text-align: center; opacity: .5;">
-              niemand folgt {{ userName(user.name) }}
+              niemand folgt {{ userName }}
             </p>
           </template>
         </ds-card>
@@ -326,7 +326,6 @@ import HcBadges from '~/components/Badges.vue'
 import HcLoadMore from '~/components/LoadMore.vue'
 import HcEmpty from '~/components/Empty.vue'
 import ContentMenu from '~/components/ContentMenu'
-import userName from '~/mixins/userName'
 
 export default {
   components: {
@@ -339,7 +338,6 @@ export default {
     HcEmpty,
     ContentMenu
   },
-  mixins: [userName],
   transition: {
     name: 'slide-up',
     mode: 'out-in'
@@ -390,6 +388,10 @@ export default {
         const username = url.split('/').pop()
         return { url, username, favicon }
       })
+    },
+    userName() {
+      const { name } = this.user || {}
+      return name || this.$t('profile.userAnonym')
     }
   },
   watch: {