321 lines
8.6 KiB
Vue
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>
|