update
This commit is contained in:
min.jiang
parent
d699077d45
commit
9b556689b8
@ -4,7 +4,7 @@
|
||||
<div
|
||||
class="information-bar"
|
||||
@click="gotoMessages"
|
||||
:class="{ active: activePath == 'message', unread: unreadCount > 0 }"
|
||||
:class="{ active: activePath == 'message', unread: unreadConversationCount > 0 }"
|
||||
>
|
||||
<img alt="freeleaps logo" src="@/assets/message.png" />
|
||||
</div>
|
||||
@ -94,9 +94,8 @@ export default {
|
||||
name: 'HeaderGuest',
|
||||
components: { LaguageSwitch },
|
||||
computed: {
|
||||
unreadCount() {
|
||||
console.log('unreadCount', this.$store.getters['basic/unreadCount'])
|
||||
return this.$store.getters['basic/unreadCount']
|
||||
unreadConversationCount() {
|
||||
return this.$store.getters['basic/unreadConversationCount']
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import cover_picture from '@/assets/images/lab-translation.png'
|
||||
export default {
|
||||
name: 'LabHome',
|
||||
components: {},
|
||||
@ -31,7 +32,7 @@ export default {
|
||||
title_text: 'Machine Translation',
|
||||
summary_text: 'Translate lanuages leverage AI power',
|
||||
icon_picture: '',
|
||||
cover_picture: 'src/assets/images/lab-translation.png'
|
||||
cover_picture: cover_picture
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
:key="index"
|
||||
class="conversation-container"
|
||||
:class="{
|
||||
selected: selConversation.id === conversation.id
|
||||
selected: selConversation?.id === conversation?.id
|
||||
}"
|
||||
@click="selectConversation(conversation)"
|
||||
>
|
||||
@ -22,9 +22,9 @@
|
||||
}}</span>
|
||||
<!-- <span v-if="unreadCountMapper" class="conversation-unreadcount">{{unreadCountMapper}}</span> -->
|
||||
</div>
|
||||
<!-- <div class="conversation-summary-highlight-container">
|
||||
{{ conversation.summary.last_message?.message_body }}
|
||||
</div> -->
|
||||
<div class="conversation-summary-highlight-container">
|
||||
{{ conversation.last_message?.message_body }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -78,12 +78,13 @@
|
||||
<script>
|
||||
import SvgIcon from '@/components/SvgIcon.vue'
|
||||
import { MessageHubApi, DateUtils } from '@/utils/index'
|
||||
import { userUtils } from '@/utils/store/index'
|
||||
export default {
|
||||
components: { SvgIcon },
|
||||
name: 'MessageHub',
|
||||
props: {},
|
||||
mounted() {
|
||||
this.fetchConversations()
|
||||
// this.fetchConversations()
|
||||
},
|
||||
// watch: {
|
||||
// conversations: {
|
||||
@ -99,39 +100,51 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
userIdentityNote: this.mnx_getUserIdentity(),
|
||||
conversations: [],
|
||||
// conversations: [],
|
||||
selConversation: null,
|
||||
messages: [],
|
||||
writtenMessage: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
unreadCountMapper() {
|
||||
if (this.selConversation) {
|
||||
return this.$store.getters['basic/unreadCountMapper']
|
||||
conversations() {
|
||||
return this.$store.getters['basic/conversations']
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
conversations(n_val) {
|
||||
if (!this.selConversation && n_val[0]) {
|
||||
this.selConversation = n_val[0]
|
||||
this.messages = n_val[0].messages || []
|
||||
this.clearUnreadMessageBy(n_val[0])
|
||||
} else {
|
||||
return 0
|
||||
if (this.selConversation.id === n_val?.[0]?.id) {
|
||||
this.messages = n_val[0].messages || []
|
||||
this.clearUnreadMessageBy(n_val[0])
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
fetchConversations() {
|
||||
MessageHubApi.fetchConversations(new Date('01 Jan 1970 00:00:00 GMT').toISOString())
|
||||
.then((response) => {
|
||||
const conversations = response.data.conversations || []
|
||||
this.conversations = conversations
|
||||
if (conversations.length > 0) {
|
||||
this.selectConversation(conversations[0])
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
this.mnx_backendErrorHandler(error)
|
||||
})
|
||||
},
|
||||
// fetchConversations() {
|
||||
// MessageHubApi.fetchConversations(new Date('01 Jan 1970 00:00:00 GMT').toISOString())
|
||||
// .then((response) => {
|
||||
// const conversations = response.data.conversations || []
|
||||
// this.conversations = conversations
|
||||
// if (conversations.length > 0) {
|
||||
// this.selectConversation(conversations[0])
|
||||
// }
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// this.mnx_backendErrorHandler(error)
|
||||
// })
|
||||
// },
|
||||
fetchMessageForConversation(conversation_id) {
|
||||
const jwt = userUtils.getJwtToken()
|
||||
MessageHubApi.fetchMessages(
|
||||
conversation_id,
|
||||
new Date('01 Jan 1975 00:00:00 GMT').toISOString()
|
||||
new Date('01 Jan 1975 00:00:00 GMT').toISOString(),
|
||||
jwt
|
||||
)
|
||||
.then((response) => {
|
||||
this.messages = response?.data || []
|
||||
@ -147,14 +160,13 @@ export default {
|
||||
this.clearUnreadMessageBy(conversation)
|
||||
},
|
||||
clearUnreadMessageBy(current) {
|
||||
const sender = current.initiator_id
|
||||
if (sender) {
|
||||
console.log('clear unread message by:', current)
|
||||
this.$store.dispatch('basic/readMessageBy', sender)
|
||||
if (current.unread) {
|
||||
this.$store.dispatch('basic/readMessageBy', current.id)
|
||||
}
|
||||
},
|
||||
sendMessage(conversation_id) {
|
||||
MessageHubApi.sendMessageToConversation(conversation_id, this.writtenMessage)
|
||||
const jwt = userUtils.getJwtToken()
|
||||
MessageHubApi.sendMessageToConversation(conversation_id, this.writtenMessage, jwt)
|
||||
.then((response) => {
|
||||
let new_message = response.data
|
||||
this.messages.push({
|
||||
@ -230,6 +242,7 @@ export default {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.conversation-last-update-date {
|
||||
|
||||
@ -688,7 +688,7 @@ export default {
|
||||
return this.$t('Proposals')
|
||||
case projectStatusEnum.PENDING:
|
||||
case projectStatusEnum.REJECTED:
|
||||
return this.$('Issuer')
|
||||
return this.$t('Issuer')
|
||||
case projectStatusEnum.ONGOING:
|
||||
return this.$t('Milestone(s)')
|
||||
default:
|
||||
|
||||
@ -1,13 +1,19 @@
|
||||
/* eslint-disable no-prototype-builtins */
|
||||
import { i18n } from '@/lang'
|
||||
import { WsConnectionFactory } from '@/utils/backend/websocket'
|
||||
import { MessageHubApi } from '@/utils/backend/messageHub'
|
||||
|
||||
const ignoreEventType = ['test']
|
||||
const GWT = new Date('01 Jan 1970 00:00:00 GMT').toISOString()
|
||||
|
||||
const basicStore = {
|
||||
namespaced: true,
|
||||
state() {
|
||||
return {
|
||||
language: 'zh',
|
||||
unreadCountMapper: [],
|
||||
conversations: [],
|
||||
unreadConversationCount: 0,
|
||||
// conversation_update_time: null,
|
||||
downstream_web_socket: null
|
||||
}
|
||||
},
|
||||
@ -29,16 +35,53 @@ const basicStore = {
|
||||
},
|
||||
(e) => {
|
||||
const data = JSON.parse(e.data)
|
||||
let unread = state.unreadCountMapper[data.sender_id]
|
||||
if (unread) {
|
||||
unread++
|
||||
} else {
|
||||
unread = 1
|
||||
// console.log('downstream_web_socket onmessage: ', data)
|
||||
if (ignoreEventType.indexOf(data.event) !== -1) {
|
||||
return
|
||||
}
|
||||
const ucm = Object.assign({}, state.unreadCountMapper)
|
||||
ucm[data.sender_id] = unread
|
||||
state.unreadCountMapper = ucm
|
||||
console.log('downstream_web_socket onmessage: ', data, state.unreadCountMapper)
|
||||
|
||||
if (data.event === 'connected') {
|
||||
// 读取缓存
|
||||
let local_conversations, local_unreadConversationCount
|
||||
try {
|
||||
local_conversations = JSON.parse(localStorage.getItem('conversations'))
|
||||
local_unreadConversationCount = localStorage.getItem('unreadConversationCount')
|
||||
} catch (error) {
|
||||
console.log('local error', error)
|
||||
}
|
||||
if (local_conversations) {
|
||||
state.conversations = local_conversations
|
||||
state.unreadConversationCount = local_unreadConversationCount || 0
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
// event = connected 初始化conversation list
|
||||
// 似乎并不需要在获取conversation list的时候，进行时间戳处理
|
||||
MessageHubApi.fetchConversations(GWT, token).then((response) => {
|
||||
const conversations = response.data.conversations || []
|
||||
// 既然每次都是新消息在第一位，那么只需要对比conversation list的长度，就可以知道是否有新的会话产生。
|
||||
// 消息初始化不做比对
|
||||
let updateLength = 0
|
||||
if (data.event !== 'connected') {
|
||||
updateLength = conversations.length - state.conversations.length
|
||||
if (updateLength === 0) updateLength = 1
|
||||
for (let i = 0; i<updateLength; i++) {
|
||||
conversations[i].unread = true
|
||||
}
|
||||
}
|
||||
const conversation = conversations[0]
|
||||
if (conversation?.id) {
|
||||
MessageHubApi.fetchMessages(conversation.id, conversation.message_update_time ? conversation.message_update_time : GWT, token).then((response) => {
|
||||
conversations[0].messages = response?.data || []
|
||||
conversations[0].message_update_time = new Date().toISOString()
|
||||
state.conversations = conversations
|
||||
state.unreadConversationCount = updateLength
|
||||
localStorage.setItem('conversations', JSON.stringify(conversations))
|
||||
localStorage.setItem('unreadConversationCount', updateLength)
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
() => {
|
||||
console.log('downstream_web_socket error')
|
||||
@ -48,8 +91,17 @@ const basicStore = {
|
||||
}
|
||||
)
|
||||
},
|
||||
readMessageBy(state, sender) {
|
||||
delete state.unreadCountMapper?.[sender]
|
||||
readMessageBy(state, conversation_id) {
|
||||
for (let i = 0; i < state.conversations.length; i ++) {
|
||||
if (conversation_id === state.conversations[i].id) {
|
||||
const nsc = Object.assign([], state.conversations)
|
||||
nsc[i].unread = false
|
||||
state.conversations = nsc
|
||||
if (state.unreadConversationCount > 0) {
|
||||
state.unreadConversationCount = state.unreadConversationCount - 1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
@ -67,17 +119,11 @@ const basicStore = {
|
||||
language(state) {
|
||||
return state.language
|
||||
},
|
||||
unreadCount(state) {
|
||||
let count = 0
|
||||
for (let key in state.unreadCountMapper) {
|
||||
if (state.unreadCountMapper.hasOwnProperty(key)) {
|
||||
count += state.unreadCountMapper[key]
|
||||
}
|
||||
}
|
||||
return count
|
||||
unreadConversationCount(state) {
|
||||
return state.unreadConversationCount
|
||||
},
|
||||
unreadCountMapper(state) {
|
||||
return state.unreadCountMapper
|
||||
conversations(state) {
|
||||
return state.conversations
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { backendAxios } from './axios'
|
||||
import { userUtils } from '../store/index'
|
||||
// import { userUtils } from '../store/index'
|
||||
|
||||
class MessageHubApi {
|
||||
static fetchConversations(last_update_time) {
|
||||
let jwt = userUtils.getJwtToken()
|
||||
static fetchConversations(last_update_time, jwt) {
|
||||
// let jwt = userUtils.getJwtToken()
|
||||
const request = backendAxios.post(
|
||||
'/api/messages/fetch-conversations-for-user',
|
||||
{
|
||||
@ -15,8 +15,8 @@ class MessageHubApi {
|
||||
)
|
||||
return request
|
||||
}
|
||||
static fetchMessages(conversation_id, last_update_time) {
|
||||
let jwt = userUtils.getJwtToken()
|
||||
static fetchMessages(conversation_id, last_update_time, jwt) {
|
||||
// let jwt = userUtils.getJwtToken()
|
||||
const request = backendAxios.post(
|
||||
'/api/messages/fetch-message-thread-for-conversation',
|
||||
{
|
||||
@ -30,8 +30,8 @@ class MessageHubApi {
|
||||
return request
|
||||
}
|
||||
|
||||
static sendMessageToConversation(conversation_id, message) {
|
||||
let jwt = userUtils.getJwtToken()
|
||||
static sendMessageToConversation(conversation_id, message, jwt) {
|
||||
// let jwt = userUtils.getJwtToken()
|
||||
const request = backendAxios.post(
|
||||
'/api/messages/send-message-to-conversation',
|
||||
{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user