Implement URL handling for profile modal (#10844)

* Implement URL handling for profile modal * Fix issue where paths would break when using back button * move tiers import to index
HabitRPG · Feb 7, 2019 · 63f5773 · 63f5773
1 parent 93290ec
commit 63f5773
Show file tree

Hide file tree

Showing 14 changed files with 479 additions and 318 deletions.
diff --git a/website/client/assets/scss/index.scss b/website/client/assets/scss/index.scss
@@ -35,3 +35,4 @@
 @import './pin';
 @import './animals';
 @import './iconalert';
+@import './tiers';
diff --git a/website/client/components/chat/chatCard.vue b/website/client/components/chat/chatCard.vue
@@ -4,14 +4,7 @@ div
   .message-hidden(v-if='msg.flagCount === 1 && user.contributor.admin') Message flagged once, not hidden
   .message-hidden(v-if='msg.flagCount > 1 && user.contributor.admin') Message hidden
   .card-body
-    h3.leader(
-      :class='userLevelStyle(msg)',
-      @click="showMemberModal(msg.uuid)",
-      v-b-tooltip.hover.top="tierTitle",
-      v-if="msg.user"
-    )
-      | {{msg.user}}
-      .svg-icon(v-html="tierIcon")
+    user-link(:userId="msg.uuid", :name="msg.user", :backer="msg.backer", :contributor="msg.contributor")
     p.time
       span.mr-1(v-if="msg.username") @{{ msg.username }}
       span.mr-1(v-if="msg.username") •
@@ -79,22 +72,6 @@ div
   .card-body {
     padding: 0.75rem 1.25rem 0.75rem 1.25rem;
 
-    .leader {
-      margin-bottom: 0;
-    }
-
-    h3 { // this is the user name
-      cursor: pointer;
-      display: inline-block;
-      font-size: 16px;
-
-      .svg-icon {
-        width: 10px;
-        display: inline-block;
-        margin-left: .5em;
-      }
-    }
-
     .time {
       font-size: 12px;
       color: #878190;
@@ -145,29 +122,17 @@ import max from 'lodash/max';
 
 import habiticaMarkdown from 'habitica-markdown';
 import { mapState } from 'client/libs/store';
-import styleHelper from 'client/mixins/styleHelper';
-
-import achievementsLib from '../../../common/script/libs/achievements';
+import userLink from '../userLink';
 
 import deleteIcon from 'assets/svg/delete.svg';
 import copyIcon from 'assets/svg/copy.svg';
 import likeIcon from 'assets/svg/like.svg';
 import likedIcon from 'assets/svg/liked.svg';
 import reportIcon from 'assets/svg/report.svg';
-import tier1 from 'assets/svg/tier-1.svg';
-import tier2 from 'assets/svg/tier-2.svg';
-import tier3 from 'assets/svg/tier-3.svg';
-import tier4 from 'assets/svg/tier-4.svg';
-import tier5 from 'assets/svg/tier-5.svg';
-import tier6 from 'assets/svg/tier-6.svg';
-import tier7 from 'assets/svg/tier-7.svg';
-import tier8 from 'assets/svg/tier-mod.svg';
-import tier9 from 'assets/svg/tier-staff.svg';
-import tierNPC from 'assets/svg/tier-npc.svg';
 
 export default {
   props: ['msg', 'inbox', 'groupId'],
-  mixins: [styleHelper],
+  components: {userLink},
   data () {
     return {
       icons: Object.freeze({
@@ -176,16 +141,6 @@ export default {
         report: reportIcon,
         delete: deleteIcon,
         liked: likedIcon,
-        tier1,
-        tier2,
-        tier3,
-        tier4,
-        tier5,
-        tier6,
-        tier7,
-        tier8,
-        tier9,
-        tierNPC,
       }),
     };
   },
@@ -235,18 +190,6 @@ export default {
       }
       return likeCount;
     },
-    tierIcon () {
-      const message = this.msg;
-      const isNPC = Boolean(message.backer && message.backer.npc);
-      if (isNPC) {
-        return this.icons.tierNPC;
-      }
-      return this.icons[`tier${message.contributor.level}`];
-    },
-    tierTitle () {
-      const message = this.msg;
-      return achievementsLib.getContribText(message.contributor, message.backer) || '';
-    },
   },
   methods: {
     async like () {
@@ -294,9 +237,6 @@ export default {
         chatId: message.id,
       });
     },
-    showMemberModal (memberId) {
-      this.$emit('show-member-modal', memberId);
-    },
     atHighlight (text) {
       const escapedDisplayName = escapeRegExp(this.user.profile.name);
       const escapedUsername = escapeRegExp(this.user.auth.local.username);

diff --git a/website/client/components/chat/chatMessages.vue b/website/client/components/chat/chatMessages.vue
@@ -239,10 +239,7 @@ export default {
 
       // Open the modal only if the data is available
       if (profile && !profile.rejected) {
-        this.$root.$emit('habitica:show-profile', {
-          user: profile,
-          startingPage: 'profile',
-        });
+        this.$router.push({name: 'userProfile', params: {userId: profile._id}});
       }
     },
     messageLiked (message) {

diff --git a/website/client/components/groups/tavern.vue b/website/client/components/groups/tavern.vue
@@ -93,7 +93,7 @@
         .row
           .col-4.staff(v-for='user in staff', :class='{staff: user.type === "Staff", moderator: user.type === "Moderator", bailey: user.name === "It\'s Bailey"}')
             div
-              a.title(@click="viewStaffProfile(user.uuid)") {{user.name}}
+              router-link.title(:to="{'name': 'userProfile', 'params': {'userId': user.uuid}}") {{user.name}}
               .svg-icon.staff-icon(v-html="icons.tierStaff", v-if='user.type === "Staff"')
               .svg-icon.mod-icon(v-html="icons.tierMod", v-if='user.type === "Moderator" && user.name !== "It\'s Bailey"')
               .svg-icon.npc-icon(v-html="icons.tierNPC", v-if='user.name === "It\'s Bailey"')
@@ -542,15 +542,6 @@ export default {
         this.$root.$emit('bv::show::modal', 'world-boss-rage');
       }
     },
-
-    async viewStaffProfile (staffId) {
-      let staffDetails = await this.$store.dispatch('members:fetchMember', { memberId: staffId });
-      this.$root.$emit('habitica:show-profile', {
-        user: staffDetails.data.data,
-        startingPage: 'profile',
-      });
-    },
-
     async fetchRecentMessages () {
       this.group = await this.$store.dispatch('guilds:getGroup', {groupId: TAVERN_ID});
     },

diff --git a/website/client/components/hall/heroes.vue b/website/client/components/hall/heroes.vue
@@ -15,7 +15,7 @@
 
       .row
         .form.col-6(v-if='hero && hero.profile', submit='saveHero(hero)')
-          a(@click='clickMember(hero, true)')
+          router-link(:to="{'name': 'userProfile', 'params': {'userId': msg.uuid}}")
             h3 {{hero.profile.name}}
           .form-group
             input.form-control(type='text', v-model='hero.contributor.text', :placeholder="$t('contribTitle')")
@@ -197,13 +197,6 @@ export default {
       window.scrollTo(0, 200);
       this.loadHero(id, index);
     },
-    async clickMember (hero) {
-      let heroDetails = await this.$store.dispatch('members:fetchMember', { memberId: hero._id });
-      this.$root.$emit('habitica:show-profile', {
-        user: heroDetails.data.data,
-        startingPage: 'profile',
-      });
-    },
   },
 };
 </script>
diff --git a/website/client/components/header/menu.vue b/website/client/components/header/menu.vue
@@ -2,7 +2,7 @@
 div
   inbox-modal
   creator-intro
-  profile
+  profileModal
   b-navbar.topbar.navbar-inverse.static-top.navbar-expand-lg(type="dark", :class="navbarZIndexClass")
     b-navbar-brand.brand
       .logo.svg-icon.d-none.d-xl-block(v-html="icons.logo")
@@ -346,7 +346,7 @@ import logo from 'assets/svg/logo.svg';
 import InboxModal from '../userMenu/inbox.vue';
 import notificationMenu from './notificationsDropdown';
 import creatorIntro from '../creatorIntro';
-import profile from '../userMenu/profile';
+import profileModal from '../userMenu/profileModal';
 import userDropdown from './userDropdown';
 
 export default {
@@ -355,7 +355,7 @@ export default {
     InboxModal,
     notificationMenu,
     creatorIntro,
-    profile,
+    profileModal,
   },
   data () {
     return {

diff --git a/website/client/components/header/notifications/unallocatedStatsPoints.vue b/website/client/components/header/notifications/unallocatedStatsPoints.vue
@@ -35,11 +35,8 @@ export default {
   },
   methods: {
     action () {
-      this.$root.$emit('habitica:show-profile', {
-        user: this.$store.state.user.data,
-        startingPage: 'stats',
-      });
+      this.$router.push({name: 'stats'});
     },
   },
 };
-</script>
+</script>
diff --git a/website/client/components/header/userDropdown.vue b/website/client/components/header/userDropdown.vue
@@ -102,10 +102,7 @@ export default {
       this.$root.$emit('bv::show::modal', 'inbox-modal');
     },
     showProfile (startingPage) {
-      this.$root.$emit('habitica:show-profile', {
-        user: this.user,
-        startingPage,
-      });
+      this.$router.push({name: startingPage});
     },
     showBuyGemsModal (startingPage) {
       this.$store.state.gemModalOptions.startingPage = startingPage;

diff --git a/website/client/components/memberDetails.vue b/website/client/components/memberDetails.vue
@@ -12,7 +12,7 @@
       :hide-class-badge="classBadgePosition !== 'under-avatar'",
     )
   .member-stats(:class="{'col-8': !expanded && !isHeader}")
-    .d-flex.align-items-center
+    .d-flex.align-items-center.profile-first-row
       class-badge(v-if="classBadgePosition === 'next-to-name'", :member-class="member.stats.class")
       .d-flex.flex-column.profile-name-character
         h3.character-name
@@ -95,9 +95,14 @@
     }
   }
 
+  .profile-first-row {
+    margin-bottom: .5em
+  }
+
   .progress-container {
     margin-left: 4px;
     margin-bottom: .5em;
+    height: 24px;
   }
 
   .progress-container > span {
@@ -111,7 +116,6 @@
     width: 24px;
     height: 24px;
     margin-right: 8px;
-    padding-top: 6px;
   }
 
   .progress-container > .progress {
@@ -130,7 +134,7 @@
 
   .progress-container .svg-icon, .progress-container .progress, .progress-container .small-text {
     display: inline-block;
-    vertical-align: bottom;
+    vertical-align: middle;
   }
 
   // Condensed version
@@ -249,10 +253,7 @@ export default {
   methods: {
     percent,
     showMemberModal (member) {
-      this.$root.$emit('habitica:show-profile', {
-        user: member,
-        startingPage: 'profile',
-      });
+      this.$router.push({name: 'userProfile', params: {userId: member._id}});
     },
   },
   computed: {