Compare commits
3 commits
develop
...
feature/co
Author | SHA1 | Date | |
---|---|---|---|
![]() |
08175617af | ||
![]() |
b07bdfda1d | ||
![]() |
25b9d330eb |
4 changed files with 67 additions and 43 deletions
|
@ -11,21 +11,34 @@
|
||||||
<span v-if="shouldShowSpinner" class="spinner message" />
|
<span v-if="shouldShowSpinner" class="spinner message" />
|
||||||
</li>
|
</li>
|
||||||
</transition>
|
</transition>
|
||||||
<message
|
<div
|
||||||
v-for="message in getReadMessages"
|
v-for="groupedReadMessages in getReadMessages"
|
||||||
:key="message.id"
|
:key="groupedReadMessages.date + '-read'"
|
||||||
:data="message"
|
>
|
||||||
/>
|
<date-separator :date="groupedReadMessages.date"></date-separator>
|
||||||
|
<message
|
||||||
|
v-for="message in groupedReadMessages.messages"
|
||||||
|
:key="message.id"
|
||||||
|
:data="message"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
<li v-show="getUnreadCount != 0" class="unread--toast">
|
<li v-show="getUnreadCount != 0" class="unread--toast">
|
||||||
<span>
|
<span>
|
||||||
{{ getUnreadCount }} UNREAD MESSAGE{{ getUnreadCount > 1 ? 'S' : '' }}
|
{{ getUnreadCount }} UNREAD MESSAGE{{ getUnreadCount > 1 ? 'S' : '' }}
|
||||||
</span>
|
</span>
|
||||||
</li>
|
</li>
|
||||||
<message
|
|
||||||
v-for="message in getUnReadMessages"
|
<div
|
||||||
:key="message.id"
|
v-for="groupedReadMessages in getUnReadMessages"
|
||||||
:data="message"
|
:key="groupedReadMessages.date + '-unread'"
|
||||||
/>
|
>
|
||||||
|
<date-separator :date="groupedReadMessages.date"></date-separator>
|
||||||
|
<message
|
||||||
|
v-for="message in groupedReadMessages.messages"
|
||||||
|
:key="message.id"
|
||||||
|
:data="message"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</ul>
|
</ul>
|
||||||
<ReplyBox
|
<ReplyBox
|
||||||
:conversation-id="currentChat.id"
|
:conversation-id="currentChat.id"
|
||||||
|
@ -38,13 +51,18 @@
|
||||||
/* global bus */
|
/* global bus */
|
||||||
import { mapGetters } from 'vuex';
|
import { mapGetters } from 'vuex';
|
||||||
|
|
||||||
|
import DateHelper from 'shared/helpers/DateHelper';
|
||||||
|
import DateSeparator from 'shared/components/DateSeparator.vue';
|
||||||
import ConversationHeader from './ConversationHeader';
|
import ConversationHeader from './ConversationHeader';
|
||||||
import ReplyBox from './ReplyBox';
|
import ReplyBox from './ReplyBox';
|
||||||
import Message from './Message';
|
import Message from './Message';
|
||||||
import conversationMixin from '../../../mixins/conversations';
|
import conversationMixin from '../../../mixins/conversations';
|
||||||
|
|
||||||
|
const groupBy = require('lodash.groupby');
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
|
DateSeparator,
|
||||||
ConversationHeader,
|
ConversationHeader,
|
||||||
Message,
|
Message,
|
||||||
ReplyBox,
|
ReplyBox,
|
||||||
|
@ -87,30 +105,18 @@ export default {
|
||||||
);
|
);
|
||||||
return chat;
|
return chat;
|
||||||
},
|
},
|
||||||
// Get current FB Page ID
|
|
||||||
getPageId() {
|
|
||||||
let stateInbox;
|
|
||||||
if (this.inboxId) {
|
|
||||||
const inboxId = Number(this.inboxId);
|
|
||||||
[stateInbox] = this.inboxesList.filter(
|
|
||||||
inbox => inbox.channel_id === inboxId
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
[stateInbox] = this.inboxesList;
|
|
||||||
}
|
|
||||||
return !stateInbox ? 0 : stateInbox.page_id;
|
|
||||||
},
|
|
||||||
// Get current FB Page ID link
|
|
||||||
linkToMessage() {
|
|
||||||
return `https://m.me/${this.getPageId}`;
|
|
||||||
},
|
|
||||||
getReadMessages() {
|
getReadMessages() {
|
||||||
const chat = this.getMessages;
|
const chat = this.getMessages;
|
||||||
return chat === undefined ? null : this.readMessages(chat);
|
return chat === undefined
|
||||||
|
? null
|
||||||
|
: this.getGroupedConversation(this.readMessages(chat));
|
||||||
},
|
},
|
||||||
getUnReadMessages() {
|
getUnReadMessages() {
|
||||||
const chat = this.getMessages;
|
const chat = this.getMessages;
|
||||||
return chat === undefined ? null : this.unReadMessages(chat);
|
return chat === undefined
|
||||||
|
? null
|
||||||
|
: this.getGroupedConversation(this.unReadMessages(chat));
|
||||||
},
|
},
|
||||||
shouldShowSpinner() {
|
shouldShowSpinner() {
|
||||||
return (
|
return (
|
||||||
|
@ -132,6 +138,36 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
getGroupedConversation: messages => {
|
||||||
|
const messagesGroupedByDate = groupBy(Object.values(messages), message =>
|
||||||
|
new DateHelper(message.created_at).format()
|
||||||
|
);
|
||||||
|
return Object.keys(messagesGroupedByDate).map(date => {
|
||||||
|
const groupedMessages = messagesGroupedByDate[date].map(
|
||||||
|
(message, index) => {
|
||||||
|
let showAvatar = false;
|
||||||
|
if (index === messagesGroupedByDate[date].length - 1) {
|
||||||
|
showAvatar = true;
|
||||||
|
} else {
|
||||||
|
const nextMessage = messagesGroupedByDate[date][index + 1];
|
||||||
|
const currentSender = message.sender ? message.sender.name : '';
|
||||||
|
const nextSender = nextMessage.sender
|
||||||
|
? nextMessage.sender.name
|
||||||
|
: '';
|
||||||
|
showAvatar =
|
||||||
|
currentSender !== nextSender ||
|
||||||
|
message.message_type !== nextMessage.message_type;
|
||||||
|
}
|
||||||
|
return { showAvatar, ...message };
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
return {
|
||||||
|
date,
|
||||||
|
messages: groupedMessages,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
},
|
||||||
focusLastMessage() {
|
focusLastMessage() {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.attachListner();
|
this.attachListner();
|
||||||
|
|
|
@ -49,10 +49,6 @@ const actions = {
|
||||||
commit(types.default.EMPTY_ALL_CONVERSATION);
|
commit(types.default.EMPTY_ALL_CONVERSATION);
|
||||||
},
|
},
|
||||||
|
|
||||||
clearSelectedState({ commit }) {
|
|
||||||
commit(types.default.CLEAR_CURRENT_CHAT_WINDOW);
|
|
||||||
},
|
|
||||||
|
|
||||||
fetchPreviousMessages: async ({ commit }, data) => {
|
fetchPreviousMessages: async ({ commit }, data) => {
|
||||||
try {
|
try {
|
||||||
const {
|
const {
|
||||||
|
|
|
@ -39,15 +39,12 @@ const getters = {
|
||||||
},
|
},
|
||||||
getUnreadCount(_state) {
|
getUnreadCount(_state) {
|
||||||
const [chat] = getSelectedChatConversation(_state);
|
const [chat] = getSelectedChatConversation(_state);
|
||||||
if (!chat) return [];
|
|
||||||
return chat.messages.filter(
|
return chat.messages.filter(
|
||||||
chatMessage =>
|
chatMessage =>
|
||||||
chatMessage.created_at * 1000 > chat.agent_last_seen_at * 1000 &&
|
chatMessage.created_at * 1000 > chat.agent_last_seen_at * 1000
|
||||||
chatMessage.message_type === 0 &&
|
|
||||||
chatMessage.private !== true
|
|
||||||
).length;
|
).length;
|
||||||
},
|
},
|
||||||
getChatStatusFilter: ({ chatStatusFilter }) => chatStatusFilter,
|
|
||||||
getSelectedInbox: ({ currentInbox }) => currentInbox,
|
getSelectedInbox: ({ currentInbox }) => currentInbox,
|
||||||
getConvTabStats: ({ convTabStats }) => convTabStats,
|
getConvTabStats: ({ convTabStats }) => convTabStats,
|
||||||
};
|
};
|
||||||
|
|
|
@ -60,11 +60,6 @@ const mutations = {
|
||||||
const [chat] = getSelectedChatConversation(_state);
|
const [chat] = getSelectedChatConversation(_state);
|
||||||
Vue.set(chat, 'allMessagesLoaded', false);
|
Vue.set(chat, 'allMessagesLoaded', false);
|
||||||
},
|
},
|
||||||
[types.default.CLEAR_CURRENT_CHAT_WINDOW](_state) {
|
|
||||||
_state.selectedChat.id = null;
|
|
||||||
_state.selectedChat.agentTyping = 'off';
|
|
||||||
},
|
|
||||||
|
|
||||||
[types.default.SET_PREVIOUS_CONVERSATIONS](_state, { id, data }) {
|
[types.default.SET_PREVIOUS_CONVERSATIONS](_state, { id, data }) {
|
||||||
if (data.length) {
|
if (data.length) {
|
||||||
const [chat] = _state.allConversations.filter(c => c.id === id);
|
const [chat] = _state.allConversations.filter(c => c.id === id);
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue