freeleaps_product/freeleaps_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adding prefix showing who sent the last message

Browse Source
This commit is contained in:
jetli 2024-08-04 17:23:49 -07:00
parent c547e789d2
commit 13f6bc73ab
1 changed files with 20 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
frontend/src/pages/user/messages/Home.vue
View File

@ -3,15 +3,9 @@
<div class="message-hub-conainter">
<template v-if="!receiver_id">
<div v-if="conversations && conversations.length > 0" class="conversation-list-container">
<div
v-for="(conversation, index) in conversations"
:key="index"
class="conversation-container"
:class="{
selected: selConversation?.id === conversation?.id
}"
@click="selectConversation(conversation)"
>
<div v-for="(conversation, index) in conversations" :key="index" class="conversation-container" :class="{
selected: selConversation?.id === conversation?.id
}" @click="selectConversation(conversation)">
<img class="participant-portrait" alt="user portrait" src="@/assets/profile.png" />
<div class="conversation-summary-container">
<div class="conversation-summary-header-container">
@ -23,39 +17,27 @@
}}</span>
</div>
<div class="conversation-summary-highlight-container">
{{ conversation.last_message?.message_body }}
{{ getSenderName(conversation.last_message) }} {{ conversation.last_message?.message_body }}
</div>
</div>
</div>
</div>
<div
v-if="!conversations || conversations.length == 0"
class="conversation-list-empty-container"
>
<div v-if="!conversations || conversations.length == 0" class="conversation-list-empty-container">
{{ $t('Empty conversation') }}
</div>
</template>
<div class="message-panel-container">
<div v-if="messages && messages.length > 0" class="message-thread-container">
<div
v-for="(item, index) in messages"
:key="index"
class="message-item-container"
:class="item.sender_id == userIdentityNote ? 'me' : ''"
>
<div v-for="(item, index) in messages" :key="index" class="message-item-container"
:class="item.sender_id == userIdentityNote ? 'me' : ''">
<div class="message-item-header-container">
<img
class="message-item-sender-portrait"
alt="user portrait"
src="@/assets/profile.png"
/>
<img class="message-item-sender-portrait" alt="user portrait" src="@/assets/profile.png" />
<span class="message-item-sender-fullname">
{{ item.sender_firstname }}
{{ item.sender_lastname }}
</span>
<span class="message-item-create-time">
{{ getDateFromFulltimeString(item.create_time) }}</span
>
{{ getDateFromFulltimeString(item.create_time) }}</span>
</div>
<div class="message-item-message-body">{{ item.message_body }}</div>
</div>
@ -65,12 +47,8 @@
</div>
<div class="message-writing-panel-container">
<svg-icon icon="msg-enter" class-name="writing-message-enter" />
<input
class="writing-message-input"
type="text"
v-model="writtenMessage"
@keypress.enter="sendMessage(selConversation?.id)"
/>
<input class="writing-message-input" type="text" v-model="writtenMessage"
@keypress.enter="sendMessage(selConversation?.id)" />
</div>
</div>
</div>
@ -187,6 +165,15 @@ export default {
getDateFromFulltimeString(fulltime) {
// FromJsonToHMDateString
return DateUtils.FromJsonToDatetimeString(fulltime)
},
// TODO: Further improve, naive version of showing who sent last message
getSenderName(message) {
if (message != null) {
if (message.sender_id == this.mnx_getUserIdentity()) {
return "You:"
}
}
return ''
}
}
}