sam/admin-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add author data to messages in chat show

Browse source
This commit is contained in:
Mary Kate 2020-09-10 11:07:32 -05:00 committed by Angelina Filippova
parent 410ae72b9e
commit d65c5a1d29
4 changed files with 50 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/components/ChatMessage/index.vue
View file

@ -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>

4
src/store/modules/chat.js
View file

@ -4,8 +4,7 @@ const chat = {
state: {
fetchedChat: {},
fetchedChatMessages: {},
loading: false,
chatAuthor: {}
loading: false
},
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)
}

37
src/views/chats/show.vue
View file

@ -15,19 +15,33 @@
<h1>
{{ $t('chats.chatHistory') }}
</h1>
<!-- <img v-if="propertyExists(chat.account, 'avatar')" :src="chat.account.avatar" class="chat-avatar-img">
<span v-if="propertyExists(chat.account, 'username')" class="chat-account-name">{{ chat.account.username }}</span>
<span v-else>
<span v-if="propertyExists(chat.account, 'username')" class="chat-account-name">
{{ chat.account.username }}
</span>
<span v-else class="chat-account-name deactivated">({{ $t('users.invalidNickname') }})</span>
</span> -->
<div class="chat-card-participants">
<div class="chat-particiants-sender">
<img v-if="propertyExists(chat.sender, 'avatar')" :src="chat.sender.avatar" class="chat-avatar-img">
<span v-if="propertyExists(chat.sender, 'username')" class="chat-account-name">{{ chat.sender.username }}</span>
<span v-else>
<span v-if="propertyExists(chat.sender, 'username')" class="chat-account-name">
{{ chat.sender.username }}
</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
}
}
}

8
src/views/users/show.vue
View file

@ -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">
<span v-if="propertyExists(chat.account, 'username')" class="chat-account-name">{{ chat.account.username }}</span>
<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.account, 'username')" class="chat-account-name">
{{ chat.account.username }}
<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>