feat(usernames): show in party header, profiles, inbox convo list

website/client/components/userMenu/inbox.vue

@@ -30,8 +30,11 @@
           .conversation(v-for='conversation in filtersConversations', @click='selectConversation(conversation.key)',
             :class="{active: selectedConversation.key === conversation.key}")
             div
-             span(:class="userLevelStyle(conversation)") {{conversation.name}}
-             span.timeago {{conversation.date | timeAgo}}
+              h3(:class="userLevelStyle(conversation)") {{ conversation.name }}
+                .svg-icon(v-html="tierIcon(conversation)")
+            .time
+              span.mr-1 @{{ conversation.username }} •
+              span {{ conversation.date | timeAgo }}
             div {{conversation.lastMessageText ? conversation.lastMessageText.substring(0, 30) : ''}}
       .col-8.messages.d-flex.flex-column.justify-content-between
         .empty-messages.text-center(v-if='!selectedConversation.key')
@@ -41,7 +44,7 @@
         .empty-messages.text-center(v-if='selectedConversation.key && selectedConversationMessages.length === 0')
           p {{ $t('beginningOfConversation', {userName: selectedConversation.name})}}
         chat-messages.message-scroll(
-          v-if="selectedConversation.messages && selectedConversationMessages.length > 0", 
+          v-if="selectedConversation.messages && selectedConversationMessages.length > 0",
           :chat='selectedConversationMessages',
           :inbox='true',
           @message-removed='messageRemoved',
@@ -63,6 +66,7 @@
 
 <style lang="scss" scoped>
   @import '~client/assets/scss/colors.scss';
+  @import '~client/assets/scss/tiers.scss';
 
   .header-wrap {
     padding: 0.5em;
@@ -73,6 +77,16 @@
     }
   }
 
+  h3 {
+    margin: 0rem;
+
+    .svg-icon {
+      width: 10px;
+      display: inline-block;
+      margin-left: .5em;
+    }
+  }
+
   .envelope {
     color: $gray-400 !important;
     margin: 0;
@@ -180,11 +194,6 @@
   .conversation {
     padding: 1.5em;
     background: $white;
-    height: 80px;
-
-    .timeago {
-      margin-left: 1em;
-    }
   }
 
   .conversation.active {
@@ -194,6 +203,12 @@
   .conversation:hover {
     cursor: pointer;
   }
+
+  .time {
+    font-size: 12px;
+    color: $gray-200;
+    margin-bottom: 0.5rem;
+  }
 </style>
 
 <script>
@@ -207,9 +222,19 @@ import styleHelper from 'client/mixins/styleHelper';
 import toggleSwitch from 'client/components/ui/toggleSwitch';
 import axios from 'axios';
 
-import messageIcon from 'assets/svg/message.svg';
 import chatMessages from '../chat/chatMessages';
+import messageIcon from 'assets/svg/message.svg';
 import svgClose from 'assets/svg/close.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 {
   mixins: [styleHelper],
@@ -252,6 +277,16 @@ export default {
       icons: Object.freeze({
         messageIcon,
         svgClose,
+        tier1,
+        tier2,
+        tier3,
+        tier4,
+        tier5,
+        tier6,
+        tier7,
+        tier8,
+        tier9,
+        tierNPC,
       }),
       displayCreate: true,
       selectedConversation: {},
@@ -279,6 +314,7 @@ export default {
           id: '',
           text: '',
           user: this.initiatedConversation.user,
+          username: this.initiatedConversation.username,
           uuid: this.initiatedConversation.uuid,
           timestamp: new Date(),
         }];
@@ -296,8 +332,12 @@ export default {
           if (newChat.sent) {
             newChat.toUUID = newChat.uuid;
             newChat.toUser = newChat.user;
+            newChat.toUserName = newChat.username;
+            newChat.toUserContributor = newChat.contributor;
+            newChat.toUserBacker = newChat.backer;
             newChat.uuid = this.user._id;
             newChat.user = this.user.profile.name;
+            newChat.username = this.user.auth.local.username;
             newChat.contributor = this.user.contributor;
             newChat.backer = this.user.backer;
           }
@@ -309,11 +349,14 @@ export default {
         if (!recentMessage.text) newChatModels.splice(newChatModels.length - 1, 1);
 
         const convoModel = {
-          name: recentMessage.toUser ? recentMessage.toUser : recentMessage.user, // Handles case where from user sent the only message or the to user sent the only message
+          backer: recentMessage.toUserBacker ? recentMessage.toUserBacker : recentMessage.backer,
+          contributor: recentMessage.toUserContributor ? recentMessage.toUserContributor : recentMessage.contributor,
           key: recentMessage.toUUID ? recentMessage.toUUID : recentMessage.uuid,
-          messages: newChatModels,
-          lastMessageText: recentMessage.text,
+          name: recentMessage.toUser ? recentMessage.toUser : recentMessage.user, // Handles case where from user sent the only message or the to user sent the only message
+          username: recentMessage.toUserName ? recentMessage.toUserName : recentMessage.username,
           date: recentMessage.timestamp,
+          lastMessageText: recentMessage.text,
+          messages: newChatModels,
         };
 
         convos.push(convoModel);
@@ -444,6 +487,13 @@ export default {
     close () {
       this.$root.$emit('bv::hide::modal', 'inbox-modal');
     },
+    tierIcon (message) {
+      const isNPC = Boolean(message.backer && message.backer.npc);
+      if (isNPC) {
+        return this.icons.tierNPC;
+      }
+      return this.icons[`tier${message.contributor.level}`];
+    },
   },
 };
 </script>