add author data to messages in chat show

src/components/ChatMessage/index.vue

@@ -2,6 +2,16 @@
   <el-card v-if="!message.deleted" class="message-card" @click.native="handleRouteChange()">
     <div slot="header">
       <div class="message-header">
+        <div class="chat-particiants-sender">
+          <img v-if="propertyExists(author, 'avatar')" :src="author.avatar" class="chat-avatar-img">
+          <span v-if="propertyExists(author, 'username')" class="chat-account-name">{{ author.username }}</span>
+          <span v-else>
+            <span v-if="propertyExists(author, 'username')" class="chat-account-name">
+              {{ author.username }}
+            </span>
+            <span v-else class="chat-account-name deactivated">({{ $t('users.invalidNickname') }})</span>
+          </span>
+        </div>
         {{ message.created_at }}
       </div>
     </div>
@@ -21,6 +31,10 @@ export default {
       type: Object,
       required: true
     },
+    author: {
+      type: Object,
+      required: true
+    },
     page: {
       type: Number,
       required: false,
@@ -32,6 +46,9 @@ export default {
     }
   },
   methods: {
+    propertyExists(account, property) {
+      return account[property]
+    }
   }
 }
 </script>

src/store/modules/chat.js

@@ -4,8 +4,7 @@ const chat = {
   state: {
     fetchedChat: {},
     fetchedChatMessages: {},
-    loading: false,
+    loading: false
-    chatAuthor: {}
   },
   mutations: {
     SET_LOADING: (state, status) => {
@@ -29,7 +28,6 @@ const chat = {
     async FetchChatMessages({ commit, dispatch, getters, state }, id) {
       commit('SET_LOADING', true)
       const chat = await fetchChatMessages(id, getters.authHost, getters.token)
-
       commit('SET_CHAT_MESSAGES', chat.data)
       commit('SET_LOADING', false)
     }

src/views/chats/show.vue

@@ -15,19 +15,33 @@
         <h1>
           {{ $t('chats.chatHistory') }}
         </h1>
-        <!-- <img v-if="propertyExists(chat.account, 'avatar')" :src="chat.account.avatar" class="chat-avatar-img">
+        <div class="chat-card-participants">
-        <span v-if="propertyExists(chat.account, 'username')" class="chat-account-name">{{ chat.account.username }}</span>
+          <div class="chat-particiants-sender">
-        <span v-else>
+            <img v-if="propertyExists(chat.sender, 'avatar')" :src="chat.sender.avatar" class="chat-avatar-img">
-          <span v-if="propertyExists(chat.account, 'username')" class="chat-account-name">
+            <span v-if="propertyExists(chat.sender, 'username')" class="chat-account-name">{{ chat.sender.username }}</span>
-            {{ chat.account.username }}
+            <span v-else>
-          </span>
+              <span v-if="propertyExists(chat.sender, 'username')" class="chat-account-name">
-          <span v-else class="chat-account-name deactivated">({{ $t('users.invalidNickname') }})</span>
+                {{ chat.sender.username }}
-        </span> -->
+              </span>
+              <span v-else class="chat-account-name deactivated">({{ $t('users.invalidNickname') }})</span>
+            </span>
+          </div>
+          <div class="chat-particiants-receiver">
+            <img v-if="propertyExists(chat.receiver, 'avatar')" :src="chat.receiver.avatar" class="chat-avatar-img">
+            <span v-if="propertyExists(chat.receiver, 'username')" class="chat-account-name">{{ chat.receiver.username }}</span>
+            <span v-else>
+              <span v-if="propertyExists(chat.receiver, 'username')" class="chat-account-name">
+                {{ chat.receiver.username }}
+              </span>
+              <span v-else class="chat-account-name deactivated">({{ $t('users.invalidNickname') }})</span>
+            </span>
+          </div>
+        </div>
       </div>
 
       <div class="chat-messages">
         <div v-for="message in chatMessages" :key="message.id" class="">
-          <chat-message :message="message"/>
+          <chat-message :message="message" :author="getAuthor(message.account_id)"/>
         </div>
       </div>
     </div>
@@ -76,6 +90,11 @@ export default {
   methods: {
     propertyExists(account, property) {
       return account[property]
+    },
+    getAuthor(account_id) {
+      const sender = this.chat.sender
+      const receiver = this.chat.receiver
+      return account_id === sender.id ? sender : receiver
     }
   }
 }

src/views/users/show.vue

@@ -122,11 +122,11 @@
                   <td>
                     <a v-if="propertyExists(chat, 'id')" :href="`/#/chats/${chat.id}/`">
                       <div class="chat-card-header">
-                        <img v-if="propertyExists(chat.account, 'avatar')" :src="chat.account.avatar" class="chat-avatar-img">
+                        <img v-if="propertyExists(chat.receiver, 'avatar')" :src="chat.receiver.avatar" class="chat-avatar-img">
-                        <span v-if="propertyExists(chat.account, 'username')" class="chat-account-name">{{ chat.account.username }}</span>
+                        <span v-if="propertyExists(chat.receiver, 'username')" class="chat-account-name">{{ chat.receiver.username }}</span>
                         <span v-else>
-                          <span v-if="propertyExists(chat.account, 'username')" class="chat-account-name">
+                          <span v-if="propertyExists(chat.receiver, 'username')" class="chat-account-name">
-                            {{ chat.account.username }}
+                            {{ chat.receiver.username }}
                           </span>
                           <span v-else class="chat-account-name deactivated">({{ $t('users.invalidNickname') }})</span>
                         </span>