Make Challenge Owner's Name Clickable (#9283)

website/client/components/challenges/challengeDetail.vue

@@ -9,8 +9,8 @@
       .col-12.col-md-6
         h1(v-markdown='challenge.name')
         div
-          strong(v-once) {{$t('createdBy')}}:
-          span(v-if='challenge.leader && challenge.leader.profile') {{challenge.leader.profile.name}}
+          strong.float-left(v-once) {{ $t('createdBy') }}:
+          user-link.mx-1.float-left(:user="challenge.leader")
           // @TODO: make challenge.author a variable inside the createdBy string (helps with RTL languages)
           // @TODO: Implement in V2 strong.margin-left(v-once)
             .svg-icon.calendar-icon(v-html="icons.calendarIcon")
@@ -180,7 +180,7 @@ import challengeMemberProgressModal from './challengeMemberProgressModal';
 import challengeMemberSearchMixin from 'client/mixins/challengeMemberSearch';
 import leaveChallengeModal from './leaveChallengeModal';
 import sidebarSection from '../sidebarSection';
-
+import userLink from '../userLink';
 import taskDefaults from 'common/script/libs/taskDefaults';
 
 import gemIcon from 'assets/svg/gem.svg';
@@ -202,6 +202,7 @@ export default {
     sidebarSection,
     TaskColumn: Column,
     TaskModal,
+    userLink,
   },
   data () {
     return {

website/client/components/challenges/groupChallenges.vue

@@ -122,7 +122,7 @@ div
     computed: {
       ...mapState({user: 'user.data'}),
     },
-    data() {
+    data () {
       return {
         challenges: [],
         icons: Object.freeze({
@@ -136,24 +136,24 @@ div
     directives: {
       markdown: markdownDirective,
     },
-    mounted() {
+    mounted () {
       this.loadChallenges();
     },
     watch: {
-      async groupId() {
+      async groupId () {
         this.loadChallenges();
       },
     },
     methods: {
-      async loadChallenges() {
+      async loadChallenges () {
         this.groupIdForChallenges = this.groupId;
         if (this.groupId === 'party' && this.user.party._id) this.groupIdForChallenges = this.user.party._id;
         this.challenges = await this.$store.dispatch('challenges:getGroupChallenges', {groupId: this.groupIdForChallenges});
       },
-      createChallenge() {
+      createChallenge () {
         this.$root.$emit('bv::show::modal', 'challenge-modal');
       },
-      challengeCreated(challenge) {
+      challengeCreated (challenge) {
         if (challenge.group._id !== this.groupIdForChallenges) return;
         this.challenges.push(challenge);
       },

website/client/components/groups/group.vue

@@ -9,8 +9,8 @@
     .row
       .col-12.col-md-6.title-details
         h1 {{group.name}}
-        strong.float-left(v-once) {{$t('groupLeader')}}
-        span.leader.float-left(v-if='group.leader.profile', @click='showMemberProfile(group.leader)') : {{group.leader.profile.name}}
+        strong.float-left(v-once) {{$t('groupLeader')}}:
+        user-link.mx-1.float-left(:user="group.leader")
       .col-12.col-md-6
         .row.icon-row
           .col-4.offset-4(v-bind:class="{ 'offset-8': isParty }")
@@ -93,10 +93,6 @@
     color: $purple-200;
   }
 
-  .leader:hover {
-    cursor: pointer;
-  }
-
   .button-container {
     margin-bottom: 1em;
 
@@ -281,6 +277,7 @@ import questSidebarSection from 'client/components/groups/questSidebarSection';
 import markdownDirective from 'client/directives/markdown';
 import communityGuidelines from './communityGuidelines';
 import sidebarSection from '../sidebarSection';
+import userLink from '../userLink';
 
 import deleteIcon from 'assets/svg/delete.svg';
 import copyIcon from 'assets/svg/copy.svg';
@@ -310,6 +307,7 @@ export default {
     questSidebarSection,
     communityGuidelines,
     sidebarSection,
+    userLink
   },
   directives: {
     markdown: markdownDirective,
@@ -624,13 +622,6 @@ export default {
       }
       // $rootScope.$state.go('options.inventory.quests');
     },
-    async showMemberProfile (leader) {
-      let heroDetails = await this.$store.dispatch('members:fetchMember', { memberId: leader._id });
-      this.$root.$emit('habitica:show-profile', {
-        user: heroDetails.data.data,
-        startingPage: 'profile',
-      });
-    },
     showGroupGems () {
       this.$root.$emit('bv::show::modal', 'group-gems-modal');
     },

website/client/components/sidebarSection.vue

@@ -81,7 +81,7 @@
         icons: {
           upIcon,
           downIcon,
-          information: informationIcon
+          information: informationIcon,
         },
       };
     },

website/client/components/userLink.vue

@@ -0,0 +1,21 @@
+<template lang="pug">
+  b-link(
+    v-if='user && user.profile',
+    @click.prevent='showProfile(user)'
+    ) {{user.profile.name}}
+</template>
+
+<script>
+  export default {
+    props: ['user'],
+    methods: {
+      async showProfile (user) {
+        let heroDetails = await this.$store.dispatch('members:fetchMember', { memberId: user._id });
+        this.$root.$emit('habitica:show-profile', {
+          user: heroDetails.data.data,
+          startingPage: 'profile',
+        });
+      },
+    },
+  };
+</script>