84 lines
2.0 KiB
Vue
84 lines
2.0 KiB
Vue
<template>
|
|
<section class="app-content columns">
|
|
<chat-list
|
|
:conversation-inbox="inboxId"
|
|
:page-title="$t('CHAT_LIST.TAB_HEADING')"
|
|
>
|
|
</chat-list>
|
|
<conversation-box
|
|
:inbox-id="inboxId"
|
|
:is-contact-panel-open="isContactPanelOpen"
|
|
@contactPanelToggle="onToggleContactPanel"
|
|
>
|
|
</conversation-box>
|
|
<contact-panel v-if="isContactPanelOpen"></contact-panel>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
/* eslint no-console: 0 */
|
|
/* global bus */
|
|
import { mapGetters } from 'vuex';
|
|
|
|
import ChatList from '../../../components/ChatList';
|
|
import ContactPanel from './ContactPanel';
|
|
import ConversationBox from '../../../components/widgets/conversation/ConversationBox';
|
|
|
|
export default {
|
|
components: {
|
|
ChatList,
|
|
ContactPanel,
|
|
ConversationBox,
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
pageTitle: this.$state,
|
|
isContactPanelOpen: false,
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
menuItems: 'getMenuItems',
|
|
chatList: 'getAllConversations',
|
|
}),
|
|
},
|
|
props: ['inboxId', 'conversationId'],
|
|
|
|
mounted() {
|
|
this.$watch('$store.state.route', () => {
|
|
switch (this.$store.state.route.name) {
|
|
case 'inbox_conversation':
|
|
this.setActiveChat();
|
|
break;
|
|
case 'inbox_dashboard':
|
|
if (this.inboxId) {
|
|
this.$store.dispatch('setActiveInbox', this.inboxId);
|
|
}
|
|
break;
|
|
default:
|
|
this.$store.dispatch('setActiveInbox', null);
|
|
break;
|
|
}
|
|
});
|
|
this.$watch('chatList.length', () => {
|
|
this.setActiveChat();
|
|
});
|
|
},
|
|
|
|
methods: {
|
|
setActiveChat() {
|
|
const conversationId = parseInt(this.conversationId, 10);
|
|
const [chat] = this.chatList.filter(c => c.id === conversationId);
|
|
if (!chat) return;
|
|
this.$store.dispatch('setActiveChat', chat).then(() => {
|
|
bus.$emit('scrollToMessage');
|
|
});
|
|
},
|
|
onToggleContactPanel() {
|
|
this.isContactPanelOpen = !this.isContactPanelOpen;
|
|
},
|
|
},
|
|
};
|
|
</script>
|