New client tavern fixes (#8967)

* Load chat on sent

* Removed report own message

* Fixed some minor styles

* Removed extra mods

* Hide class badge

* Fixed chat alignment

* Fixed taven autocomplete

website/client/components/avatar.vue

@@ -40,7 +40,7 @@
       span(v-if="member.items.currentMount", :class="'Mount_Head_' + member.items.currentMount")
       // Pet
       span.current-pet(v-if="member.items.currentPet", :class="'Pet-' + member.items.currentPet")
-  .class-badge.d-flex.justify-content-center(v-if="hasClass")
+  .class-badge.d-flex.justify-content-center(v-if="hasClass && !hideClassBadge")
     .align-self-center.svg-icon(v-html="icons[member.stats.class]")
 </template>
 
@@ -105,6 +105,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    hideClassBadge: {
+      type: Boolean,
+      default: false,
+    },
     withBackground: {
       type: Boolean,
     },

website/client/components/chat/autoComplete.vue

@@ -11,8 +11,10 @@ div.autocomplete-selection(v-if='searchResults.length > 0', :style='autocomplete
 </style>
 
 <script>
+import groupBy from 'lodash/groupBy';
+
 export default {
-  props: ['selections', 'text', 'coords', 'groupId'],
+  props: ['selections', 'text', 'coords', 'groupId', 'chat'],
   data () {
     return {
       currentSearch: '',
@@ -47,6 +49,14 @@ export default {
       this.searchActive = true;
       this.currentSearchPosition = newText.length - 1;
     },
+    chat () {
+      let usersThatMessage = groupBy(this.chat, 'user');
+      for (let userName in usersThatMessage) {
+        if (this.tmpSelections.indexOf(userName) === -1) {
+          this.tmpSelections.push(userName);
+        }
+      }
+    },
     async groupId () {
       if (!this.groupId) return;
       let members = await this.$store.dispatch('members:getGroupMembers', {groupId: this.groupId});

website/client/components/chat/chatMessages.vue

@@ -7,16 +7,18 @@
   .row
     .hr.col-12
 
-  .row(v-for="(msg, index) in chat", v-if='chat && Object.keys(cachedProfileData).length > 0')
+  div(v-for="(msg, index) in chat", v-if='chat && Object.keys(cachedProfileData).length > 0')
     // @TODO: is there a different way to do these conditionals? This creates an infinite loop
     //.hr(v-if='displayDivider(msg)')
       .hr-middle(v-once) {{ msg.timestamp }}
+    .row(v-if='user._id !== msg.uuid')
       .col-2
-      avatar(v-if='cachedProfileData[msg.uuid]', :member="cachedProfileData[msg.uuid]", :avatarOnly="true")
+        avatar(v-if='cachedProfileData[msg.uuid]',
-
+          :member="cachedProfileData[msg.uuid]", :avatarOnly="true",
-    .card.col-10
+          :hideClassBadge='true')
+      .card.col-8
         .card-block
-          h3.leader {{msg.user}}
+            h3.leader(:class='userLevelStyle(cachedProfileData[msg.uuid])') {{msg.user}}
             p {{msg.timestamp | timeAgo}}
             .text(v-markdown='msg.text')
             hr
@@ -27,7 +29,7 @@
             span.action( @click='copyAsTodo(msg)')
               .svg-icon(v-html="icons.copy")
               | {{$t('copyAsTodo')}}
-          span.action(v-if='user.contributor.admin || (!msg.sent && user.flags.communityGuidelinesAccepted)', @click='report(msg)')
+            span.action(v-if='user.contributor.admin || (msg.uuid !== user._id && user.flags.communityGuidelinesAccepted)', @click='report(msg)')
               .svg-icon(v-html="icons.report")
               | {{$t('report')}}
             span.action(v-if='msg.uuid === user._id', @click='remove(msg, index)')
@@ -36,6 +38,33 @@
             span.action.float-right
               .svg-icon(v-html="icons.liked")
               | + {{ likeCount(msg) }}
+    .row(v-if='user._id === msg.uuid')
+      .card.col-8.offset-2
+        .card-block
+            h3.leader(:class='userLevelStyle(cachedProfileData[msg.uuid])') {{msg.user}}
+            p {{msg.timestamp | timeAgo}}
+            .text(v-markdown='msg.text')
+            hr
+            .action(@click='like(msg, index)', v-if='msg.likes', :class='{active: msg.likes[user._id]}')
+              .svg-icon(v-html="icons.like")
+              span(v-if='!msg.likes[user._id]') {{ $t('like') }}
+              span(v-if='msg.likes[user._id]') {{ $t('liked') }}
+            span.action( @click='copyAsTodo(msg)')
+              .svg-icon(v-html="icons.copy")
+              | {{$t('copyAsTodo')}}
+            span.action(v-if='user.contributor.admin || (msg.uuid !== user._id && user.flags.communityGuidelinesAccepted)', @click='report(msg)')
+              .svg-icon(v-html="icons.report")
+              | {{$t('report')}}
+            span.action(v-if='msg.uuid === user._id', @click='remove(msg, index)')
+              .svg-icon(v-html="icons.delete")
+              | {{$t('delete')}}
+            span.action.float-right
+              .svg-icon(v-html="icons.liked")
+              | + {{ likeCount(msg) }}
+      .col-2
+        avatar(v-if='cachedProfileData[msg.uuid]',
+          :member="cachedProfileData[msg.uuid]", :avatarOnly="true",
+          :hideClassBadge='true')
 </template>
 
 <style lang="scss" scoped>
@@ -64,7 +93,7 @@
   }
 
   .card {
-    margin-bottom: 1em;
+    margin-bottom: .5em;
   }
 
   .text {
@@ -102,6 +131,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import { mapState } from 'client/libs/store';
 import markdownDirective from 'client/directives/markdown';
 import Avatar from '../avatar';
+import styleHelper from 'client/mixins/styleHelper';
 
 import copyAsTodoModal from './copyAsTodoModal';
 import reportFlagModal from './reportFlagModal';
@@ -114,6 +144,7 @@ import reportIcon from 'assets/svg/report.svg';
 
 export default {
   props: ['chat', 'groupId', 'groupName'],
+  mixins: [styleHelper],
   components: {
     copyAsTodoModal,
     reportFlagModal,

website/client/components/groups/tavern.vue

@@ -11,7 +11,7 @@
 
         .row
           textarea(placeholder="Friendly reminder: this is an all-ages chat, so please keep content and language appropriate! Consult the Community Guidelines in the sidebar if you have questions.", v-model='newMessage', @keydown='updateCarretPosition')
-          autocomplete(:text='newMessage', v-on:select="selectedAutocomplete", :coords='coords', :groupId='groupId')
+          autocomplete(:text='newMessage', v-on:select="selectedAutocomplete", :coords='coords', :groupId='groupId', :chat='group.chat')
           button.btn.btn-secondary.send-chat.float-right(v-once, @click='sendMessage()') {{ $t('send') }}
           button.btn.btn-secondary.float-left(v-once, @click='fetchRecentMessages()') {{ $t('fetchRecentMessages') }}
 
@@ -197,6 +197,7 @@
 
   .grassy-meadow-backdrop {
     background-image: url('~assets/images/tavern_backdrop_web.png');
+    background-size: cover;
     width: 100%;
     height: 246px;
   }
@@ -349,10 +350,10 @@ export default {
           name: 'beffymaroo',
           type: 'Staff',
         },
-        {
+        // {
-          name: 'lefnire',
+        //   name: 'lefnire',
-          type: 'Staff',
+        //   type: 'Staff',
-        },
+        // },
         {
           name: 'Lemoness',
           type: 'Staff',
@@ -397,10 +398,10 @@ export default {
           name: 'Cantras',
           type: 'Moderator',
         },
-        {
+        // {
-          name: 'Daniel the Bard',
+        //   name: 'Daniel the Bard',
-          type: 'Moderator',
+        //   type: 'Moderator',
-        },
+        // },
         {
           name: 'deilann 5.0.5b',
           type: 'Moderator',
@@ -478,6 +479,10 @@ export default {
       });
       this.group.chat.unshift(response.message);
       this.newMessage = '';
+
+      // @TODO: I would like to not reload everytime we send. Realtime/Firebase?
+      let chat = await this.$store.dispatch('chat:getChat', {groupId: this.group._id});
+      this.group.chat = chat;
     },
     async fetchRecentMessages () {
       this.group = await this.$store.dispatch('guilds:getGroup', {groupId: TAVERN_ID});