Chatwoot/app/javascript/dashboard/components/ChatList.vue
2021-10-29 19:06:14 +05:30

321 lines
8.6 KiB
Vue

<template>
<div class="conversations-list-wrap">
<slot></slot>
<div class="chat-list__top">
<h1 class="page-title text-truncate" :title="pageTitle">
{{ pageTitle }}
</h1>
<button class="btn-filter" @click="onToggleAdvanceFiltersModal">
<i class="icon ion-funnel" />
</button>
</div>
<chat-type-tabs
:items="assigneeTabItems"
:active-tab="activeAssigneeTab"
class="tab--chat-type"
@chatTabChange="updateAssigneeTab"
/>
<p v-if="!chatListLoading && !conversationList.length" class="content-box">
{{ $t('CHAT_LIST.LIST.404') }}
</p>
<div ref="activeConversation" class="conversations-list">
<conversation-card
v-for="chat in conversationList"
:key="chat.id"
:active-label="label"
:team-id="teamId"
:chat="chat"
:show-assignee="showAssigneeInConversationCard"
/>
<div v-if="chatListLoading" class="text-center">
<span class="spinner"></span>
</div>
<woot-button
v-if="!hasCurrentPageEndReached && !chatListLoading"
variant="clear"
size="expanded"
@click="fetchConversations"
>
{{ $t('CHAT_LIST.LOAD_MORE_CONVERSATIONS') }}
</woot-button>
<p
v-if="
conversationList.length &&
hasCurrentPageEndReached &&
!chatListLoading
"
class="text-center text-muted end-of-list-text"
>
{{ $t('CHAT_LIST.EOF') }}
</p>
</div>
<woot-modal
:show.sync="showAdvancedFilters"
:on-close="onToggleAdvanceFiltersModal"
>
<chat-advanced-filter
v-if="showAdvancedFilters"
:on-close="onToggleAdvanceFiltersModal"
/>
</woot-modal>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import ChatAdvancedFilter from './widgets/conversation/ChatAdvancedFilter';
import ChatTypeTabs from './widgets/ChatTypeTabs';
import ConversationCard from './widgets/conversation/ConversationCard';
import timeMixin from '../mixins/time';
import eventListenerMixins from 'shared/mixins/eventListenerMixins';
import conversationMixin from '../mixins/conversations';
import wootConstants from '../constants';
import {
hasPressedAltAndJKey,
hasPressedAltAndKKey,
} from 'shared/helpers/KeyboardHelpers';
export default {
components: {
ChatTypeTabs,
ConversationCard,
ChatAdvancedFilter,
},
mixins: [timeMixin, conversationMixin, eventListenerMixins],
props: {
conversationInbox: {
type: [String, Number],
default: 0,
},
teamId: {
type: [String, Number],
default: 0,
},
label: {
type: String,
default: '',
},
},
data() {
return {
activeAssigneeTab: wootConstants.ASSIGNEE_TYPE.ME,
activeStatus: wootConstants.STATUS_TYPE.OPEN,
showAdvancedFilters: false,
};
},
computed: {
...mapGetters({
currentChat: 'getSelectedChat',
chatLists: 'getAllConversations',
mineChatsList: 'getMineChats',
allChatList: 'getAllStatusChats',
unAssignedChatsList: 'getUnAssignedChats',
chatListLoading: 'getChatListLoadingStatus',
currentUserID: 'getCurrentUserID',
activeInbox: 'getSelectedInbox',
conversationStats: 'conversationStats/getStats',
}),
assigneeTabItems() {
return this.$t('CHAT_LIST.ASSIGNEE_TYPE_TABS').map(item => {
const count = this.conversationStats[item.COUNT_KEY] || 0;
return {
key: item.KEY,
name: item.NAME,
count,
};
});
},
showAssigneeInConversationCard() {
return this.activeAssigneeTab === wootConstants.ASSIGNEE_TYPE.ALL;
},
inbox() {
return this.$store.getters['inboxes/getInbox'](this.activeInbox);
},
currentPage() {
return this.$store.getters['conversationPage/getCurrentPageFilter'](
this.activeAssigneeTab
);
},
hasCurrentPageEndReached() {
return this.$store.getters['conversationPage/getHasEndReached'](
this.activeAssigneeTab
);
},
conversationFilters() {
return {
inboxId: this.conversationInbox ? this.conversationInbox : undefined,
assigneeType: this.activeAssigneeTab,
status: this.activeStatus,
page: this.currentPage + 1,
labels: this.label ? [this.label] : undefined,
teamId: this.teamId ? this.teamId : undefined,
};
},
pageTitle() {
if (this.inbox.name) {
return this.inbox.name;
}
if (this.activeTeam.name) {
return this.activeTeam.name;
}
if (this.label) {
return `#${this.label}`;
}
return this.$t('CHAT_LIST.TAB_HEADING');
},
conversationList() {
let conversationList = [];
const filters = this.conversationFilters;
if (this.activeAssigneeTab === 'me') {
conversationList = [...this.mineChatsList(filters)];
} else if (this.activeAssigneeTab === 'unassigned') {
conversationList = [...this.unAssignedChatsList(filters)];
} else {
conversationList = [...this.allChatList(filters)];
}
return conversationList;
},
activeTeam() {
if (this.teamId) {
return this.$store.getters['teams/getTeam'](this.teamId);
}
return {};
},
},
watch: {
activeTeam() {
this.resetAndFetchData();
},
conversationInbox() {
this.resetAndFetchData();
},
label() {
this.resetAndFetchData();
},
},
mounted() {
this.$store.dispatch('setChatFilter', this.activeStatus);
this.resetAndFetchData();
bus.$on('fetch_conversation_stats', () => {
this.$store.dispatch('conversationStats/get', this.conversationFilters);
});
},
methods: {
onToggleAdvanceFiltersModal() {
this.showAdvancedFilters = !this.showAdvancedFilters;
},
getKeyboardListenerParams() {
const allConversations = this.$refs.activeConversation.querySelectorAll(
'div.conversations-list div.conversation'
);
const activeConversation = this.$refs.activeConversation.querySelector(
'div.conversations-list div.conversation.active'
);
const activeConversationIndex = [...allConversations].indexOf(
activeConversation
);
const lastConversationIndex = allConversations.length - 1;
return {
allConversations,
activeConversation,
activeConversationIndex,
lastConversationIndex,
};
},
handleKeyEvents(e) {
if (hasPressedAltAndJKey(e)) {
const {
allConversations,
activeConversationIndex,
} = this.getKeyboardListenerParams();
if (activeConversationIndex === -1) {
allConversations[0].click();
}
if (activeConversationIndex >= 1) {
allConversations[activeConversationIndex - 1].click();
}
}
if (hasPressedAltAndKKey(e)) {
const {
allConversations,
activeConversationIndex,
lastConversationIndex,
} = this.getKeyboardListenerParams();
if (activeConversationIndex === -1) {
allConversations[lastConversationIndex].click();
} else if (activeConversationIndex < lastConversationIndex) {
allConversations[activeConversationIndex + 1].click();
}
}
},
resetAndFetchData() {
this.$store.dispatch('conversationPage/reset');
this.$store.dispatch('emptyAllConversations');
this.fetchConversations();
},
fetchConversations() {
this.$store
.dispatch('fetchAllConversations', this.conversationFilters)
.then(() => this.$emit('conversation-load'));
},
updateAssigneeTab(selectedTab) {
if (this.activeAssigneeTab !== selectedTab) {
bus.$emit('clearSearchInput');
this.activeAssigneeTab = selectedTab;
if (!this.currentPage) {
this.fetchConversations();
}
}
},
updateStatusType(index) {
if (this.activeStatus !== index) {
this.activeStatus = index;
this.resetAndFetchData();
}
},
},
};
</script>
<style scoped lang="scss">
@import '~dashboard/assets/scss/woot';
.spinner {
margin-top: var(--space-normal);
margin-bottom: var(--space-normal);
}
.conversations-list-wrap {
flex-shrink: 0;
width: 34rem;
@include breakpoint(large up) {
width: 36rem;
}
@include breakpoint(xlarge up) {
width: 35rem;
}
@include breakpoint(xxlarge up) {
width: 38rem;
}
@include breakpoint(xxxlarge up) {
flex-basis: 46rem;
}
}
.btn-filter {
margin-right: var(--space-normal);
cursor: pointer;
i {
font-size: 2rem;
}
}
</style>