Enhancement: Paginate conversation calls in tabs (#560)

* Use conversationPage module for pagination

* Load more conversations

* Reset list if conversation status is changed

* Add specs to conversationPage

* Reset filter when page is re-mounted

* Update text

* Update text
This commit is contained in:
Pranav Raj S 2020-02-26 21:15:01 +05:30 committed by GitHub
parent e5bc372a29
commit 0740d4762f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 395 additions and 141 deletions

View file

@ -1,23 +1,18 @@
class ConversationFinder class ConversationFinder
attr_reader :current_user, :current_account, :params attr_reader :current_user, :current_account, :params
ASSIGNEE_TYPES = { me: 0, unassigned: 1, all: 2 }.freeze
ASSIGNEE_TYPES_BY_ID = ASSIGNEE_TYPES.invert
ASSIGNEE_TYPES_BY_ID.default = :me
DEFAULT_STATUS = 'open'.freeze DEFAULT_STATUS = 'open'.freeze
# assumptions # assumptions
# inbox_id if not given, take from all conversations, else specific to inbox # inbox_id if not given, take from all conversations, else specific to inbox
# assignee_type if not given, take 'me' # assignee_type if not given, take 'all'
# conversation_status if not given, take 'open' # conversation_status if not given, take 'open'
# response of this class will be of type # response of this class will be of type
# {conversations: [array of conversations], count: {open: count, resolved: count}} # {conversations: [array of conversations], count: {open: count, resolved: count}}
# params # params
# assignee_type_id, inbox_id, :status # assignee_type, inbox_id, :status
def initialize(current_user, params) def initialize(current_user, params)
@current_user = current_user @current_user = current_user
@ -62,7 +57,7 @@ class ConversationFinder
end end
def set_assignee_type def set_assignee_type
@assignee_type_id = ASSIGNEE_TYPES[ASSIGNEE_TYPES_BY_ID[params[:assignee_type_id].to_i]] @assignee_type = params[:assignee_type]
end end
def find_all_conversations def find_all_conversations
@ -72,12 +67,10 @@ class ConversationFinder
end end
def filter_by_assignee_type def filter_by_assignee_type
if @assignee_type_id == ASSIGNEE_TYPES[:me] if @assignee_type == 'me'
@conversations = @conversations.assigned_to(current_user) @conversations = @conversations.assigned_to(current_user)
elsif @assignee_type_id == ASSIGNEE_TYPES[:unassigned] elsif @assignee_type == 'unassigned'
@conversations = @conversations.unassigned @conversations = @conversations.unassigned
elsif @assignee_type_id == ASSIGNEE_TYPES[:all]
@conversations
end end
@conversations @conversations
end end

View file

@ -6,12 +6,13 @@ class ConversationApi extends ApiClient {
super('conversations'); super('conversations');
} }
get({ inboxId, status, assigneeType }) { get({ inboxId, status, assigneeType, page }) {
return axios.get(this.url, { return axios.get(this.url, {
params: { params: {
inbox_id: inboxId, inbox_id: inboxId,
status, status,
assignee_type_id: assigneeType, assignee_type: assigneeType,
page,
}, },
}); });
} }

View file

@ -129,7 +129,6 @@ $spinner-before-border-color: rgba(255, 255, 255, 0.7);
} }
@mixin scroll-on-hover() { @mixin scroll-on-hover() {
transition: all .4s $ease-in-out-cubic;
overflow: hidden; overflow: hidden;
&:hover { &:hover {

View file

@ -82,6 +82,27 @@
@include flex; @include flex;
flex-direction: column; flex-direction: column;
.load-more-conversations {
color: $color-woot;
cursor: pointer;
font-size: $font-size-small;
padding: $space-normal;
&:hover {
background: $color-background;
}
}
.end-of-list-text {
font-style: italic;
padding: $space-normal;
}
.conversations-list {
@include flex-weight(1);
@include scroll-on-hover;
}
.chat-list__top { .chat-list__top {
@include flex; @include flex;
@include padding($space-normal $zero $space-small $zero); @include padding($space-normal $zero $space-small $zero);
@ -108,10 +129,7 @@
} }
} }
.conversations-list {
@include flex-weight(1);
@include scroll-on-hover;
}
.content-box { .content-box {
text-align: center; text-align: center;

View file

@ -3,40 +3,52 @@
<div class="chat-list__top"> <div class="chat-list__top">
<h1 class="page-title"> <h1 class="page-title">
<woot-sidemenu-icon /> <woot-sidemenu-icon />
{{ inbox.name || pageTitle }} {{ inbox.name || $t('CHAT_LIST.TAB_HEADING') }}
</h1> </h1>
<chat-filter @statusFilterChange="getDataForStatusTab" /> <chat-filter @statusFilterChange="updateStatusType" />
</div> </div>
<chat-type-tabs <chat-type-tabs
:items="assigneeTabItems" :items="assigneeTabItems"
:active-tab-index="activeAssigneeTab" :active-tab="activeAssigneeTab"
class="tab--chat-type" class="tab--chat-type"
@chatTabChange="getDataForTab" @chatTabChange="updateAssigneeTab"
/> />
<p <p v-if="!chatListLoading && !getChatsForTab().length" class="content-box">
v-if="!chatListLoading && !getChatsForTab(activeStatus).length"
class="content-box"
>
{{ $t('CHAT_LIST.LIST.404') }} {{ $t('CHAT_LIST.LIST.404') }}
</p> </p>
<div v-if="chatListLoading" class="text-center"> <div class="conversations-list">
<span class="spinner message"></span>
</div>
<transition-group
name="conversations-list"
tag="div"
class="conversations-list"
>
<conversation-card <conversation-card
v-for="chat in getChatsForTab(activeStatus)" v-for="chat in getChatsForTab()"
:key="chat.id" :key="chat.id"
:chat="chat" :chat="chat"
/> />
</transition-group>
<div v-if="chatListLoading" class="text-center">
<span class="spinner"></span>
</div>
<div
v-if="!hasCurrentPageEndReached && !chatListLoading"
class="text-center load-more-conversations"
@click="fetchConversations"
>
{{ $t('CHAT_LIST.LOAD_MORE_CONVERSATIONS') }}
</div>
<p
v-if="
getChatsForTab().length &&
hasCurrentPageEndReached &&
!chatListLoading
"
class="text-center text-muted end-of-list-text"
>
{{ $t('CHAT_LIST.EOF') }}
</p>
</div>
</div> </div>
</template> </template>
@ -59,11 +71,11 @@ export default {
ChatFilter, ChatFilter,
}, },
mixins: [timeMixin, conversationMixin], mixins: [timeMixin, conversationMixin],
props: ['conversationInbox', 'pageTitle'], props: ['conversationInbox'],
data() { data() {
return { return {
activeAssigneeTab: 0, activeAssigneeTab: wootConstants.ASSIGNEE_TYPE.ME,
activeStatus: 0, activeStatus: wootConstants.STATUS_TYPE.OPEN,
}; };
}, },
computed: { computed: {
@ -78,66 +90,69 @@ export default {
convStats: 'getConvTabStats', convStats: 'getConvTabStats',
}), }),
assigneeTabItems() { assigneeTabItems() {
return this.$t('CHAT_LIST.ASSIGNEE_TYPE_TABS').map((item, index) => ({ return this.$t('CHAT_LIST.ASSIGNEE_TYPE_TABS').map(item => ({
id: index, key: item.KEY,
name: item.NAME, name: item.NAME,
count: this.convStats[item.KEY] || 0, count: this.convStats[item.COUNT_KEY] || 0,
})); }));
}, },
inbox() { inbox() {
return this.$store.getters['inboxes/getInbox'](this.activeInbox); return this.$store.getters['inboxes/getInbox'](this.activeInbox);
}, },
getToggleStatus() { currentPage() {
if (this.toggleType) { return this.$store.getters['conversationPage/getCurrentPage'](
return 'Open'; this.activeAssigneeTab
} );
return 'Resolved'; },
hasCurrentPageEndReached() {
return this.$store.getters['conversationPage/getHasEndReached'](
this.activeAssigneeTab
);
},
},
watch: {
conversationInbox() {
this.resetAndFetchData();
}, },
}, },
mounted() { mounted() {
this.$watch('$store.state.route', () => { this.$store.dispatch('setChatFilter', this.activeStatus);
if (this.$store.state.route.name !== 'inbox_conversation') { this.resetAndFetchData();
this.$store.dispatch('emptyAllConversations');
this.fetchData();
}
});
this.$store.dispatch('emptyAllConversations');
this.fetchData();
this.$store.dispatch('agents/get'); this.$store.dispatch('agents/get');
}, },
methods: { methods: {
fetchData() { resetAndFetchData() {
if (this.chatLists.length === 0) { this.$store.dispatch('conversationPage/reset');
this.fetchConversations(); this.$store.dispatch('emptyAllConversations');
} this.fetchConversations();
}, },
fetchConversations() { fetchConversations() {
this.$store.dispatch('fetchAllConversations', { this.$store.dispatch('fetchAllConversations', {
inboxId: this.conversationInbox ? this.conversationInbox : undefined, inboxId: this.conversationInbox ? this.conversationInbox : undefined,
assigneeType: this.activeAssigneeTab, assigneeType: this.activeAssigneeTab,
status: this.activeStatus ? 'resolved' : 'open', status: this.activeStatus,
page: this.currentPage + 1,
}); });
}, },
getDataForTab(index) { updateAssigneeTab(selectedTab) {
if (this.activeAssigneeTab !== index) { if (this.activeAssigneeTab !== selectedTab) {
this.activeAssigneeTab = index; this.activeAssigneeTab = selectedTab;
this.fetchConversations(); if (!this.currentPage) {
this.fetchConversations();
}
} }
}, },
getDataForStatusTab(index) { updateStatusType(index) {
if (this.activeStatus !== index) { if (this.activeStatus !== index) {
this.activeStatus = index; this.activeStatus = index;
this.fetchConversations(); this.resetAndFetchData();
} }
}, },
getChatsForTab() { getChatsForTab() {
let copyList = []; let copyList = [];
if (this.activeAssigneeTab === wootConstants.ASSIGNEE_TYPE_SLUG.MINE) { if (this.activeAssigneeTab === 'me') {
copyList = this.mineChatsList.slice(); copyList = this.mineChatsList.slice();
} else if ( } else if (this.activeAssigneeTab === 'unassigned') {
this.activeAssigneeTab === wootConstants.ASSIGNEE_TYPE_SLUG.UNASSIGNED
) {
copyList = this.unAssignedChatsList.slice(); copyList = this.unAssignedChatsList.slice();
} else { } else {
copyList = this.allChatList.slice(); copyList = this.allChatList.slice();

View file

@ -16,8 +16,12 @@
/* global bus */ /* global bus */
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import Spinner from 'shared/components/Spinner'; import Spinner from 'shared/components/Spinner';
import wootConstants from '../../constants';
export default { export default {
components: {
Spinner,
},
props: ['conversationId'], props: ['conversationId'],
data() { data() {
return { return {
@ -29,19 +33,23 @@ export default {
currentChat: 'getSelectedChat', currentChat: 'getSelectedChat',
}), }),
currentStatus() { currentStatus() {
const ButtonName = this.currentChat.status === 0 ? 'Resolve' : 'Reopen'; const ButtonName =
this.currentChat.status === wootConstants.STATUS_TYPE.OPEN
? this.$t('CONVERSATION.HEADER.RESOLVE_ACTION')
: this.$t('CONVERSATION.HEADER.REOPEN_ACTION');
return ButtonName; return ButtonName;
}, },
buttonClass() { buttonClass() {
return this.currentChat.status === 0 ? 'success' : 'warning'; return this.currentChat.status === wootConstants.STATUS_TYPE.OPEN
? 'success'
: 'warning';
}, },
buttonIconClass() { buttonIconClass() {
return this.currentChat.status === 0 ? 'ion-checkmark' : 'ion-refresh'; return this.currentChat.status === wootConstants.STATUS_TYPE.OPEN
? 'ion-checkmark'
: 'ion-refresh';
}, },
}, },
components: {
Spinner,
},
methods: { methods: {
toggleStatus() { toggleStatus() {
this.isLoading = true; this.isLoading = true;

View file

@ -1,15 +1,15 @@
<template> <template>
<woot-tabs :index="tabsIndex" @change="onTabChange"> <woot-tabs :index="activeTabIndex" @change="onTabChange">
<woot-tabs-item <woot-tabs-item
v-for="item in items" v-for="item in items"
:key="item.name" :key="item.key"
:name="item.name" :name="item.name"
:count="item.count" :count="item.count"
/> />
</woot-tabs> </woot-tabs>
</template> </template>
<script> <script>
/* eslint no-console: 0 */ import wootConstants from '../../constants';
export default { export default {
props: { props: {
@ -17,24 +17,25 @@ export default {
type: Array, type: Array,
default: () => [], default: () => [],
}, },
activeTabIndex: { activeTab: {
type: Number, type: String,
default: 0, default: wootConstants.ASSIGNEE_TYPE.ME,
}, },
}, },
data() { data() {
return { return {
tabsIndex: 0, tabsIndex: wootConstants.ASSIGNEE_TYPE.ME,
}; };
}, },
created() { computed: {
this.tabsIndex = this.activeTabIndex; activeTabIndex() {
return this.items.findIndex(item => item.key === this.activeTab);
},
}, },
methods: { methods: {
onTabChange(selectedTabIndex) { onTabChange(selectedTabIndex) {
if (selectedTabIndex !== this.tabsIndex) { if (this.items[selectedTabIndex].key !== this.activeTab) {
this.$emit('chatTabChange', selectedTabIndex); this.$emit('chatTabChange', this.items[selectedTabIndex].key);
this.tabsIndex = selectedTabIndex;
} }
}, },
}, },

View file

@ -1,5 +1,5 @@
<template> <template>
<select v-model="activeIndex" class="status--filter" @change="onTabChange()"> <select v-model="activeStatus" class="status--filter" @change="onTabChange()">
<option <option
v-for="item in $t('CHAT_LIST.CHAT_STATUS_ITEMS')" v-for="item in $t('CHAT_LIST.CHAT_STATUS_ITEMS')"
:key="item['VALUE']" :key="item['VALUE']"
@ -11,15 +11,16 @@
</template> </template>
<script> <script>
import wootConstants from '../../../constants';
export default { export default {
data: () => ({ data: () => ({
activeIndex: 0, activeStatus: wootConstants.STATUS_TYPE.OPEN,
}), }),
mounted() {},
methods: { methods: {
onTabChange() { onTabChange() {
this.$store.dispatch('setChatFilter', this.activeIndex); this.$store.dispatch('setChatFilter', this.activeStatus);
this.$emit('statusFilterChange', this.activeIndex); this.$emit('statusFilterChange', this.activeStatus);
}, },
}, },
}; };

View file

@ -4,9 +4,13 @@ export default {
return `${this.APP_BASE_URL}/`; return `${this.APP_BASE_URL}/`;
}, },
GRAVATAR_URL: 'https://www.gravatar.com/avatar/', GRAVATAR_URL: 'https://www.gravatar.com/avatar/',
ASSIGNEE_TYPE_SLUG: { ASSIGNEE_TYPE: {
MINE: 0, ME: 'me',
UNASSIGNED: 1, UNASSIGNED: 'unassigned',
OPEN: 0, ALL: 'all',
},
STATUS_TYPE: {
OPEN: 'open',
RESOLVED: 'resolved',
}, },
}; };

View file

@ -1,6 +1,8 @@
{ {
"CHAT_LIST": { "CHAT_LIST": {
"LOADING": "Fetching conversations", "LOADING": "Fetching conversations",
"LOAD_MORE_CONVERSATIONS": "Load more conversations...",
"EOF": "You have reached the end of the list",
"LIST": { "LIST": {
"404": "There are no active conversations in this group." "404": "There are no active conversations in this group."
}, },
@ -14,20 +16,14 @@
], ],
"ASSIGNEE_TYPE_TABS": [ "ASSIGNEE_TYPE_TABS": [
{ "NAME": "Mine", "KEY": "mineCount"}, { "NAME": "Mine", "KEY": "me", "COUNT_KEY": "mineCount" },
{ "NAME": "Unassigned", "KEY": "unAssignedCount"}, { "NAME": "Unassigned", "KEY": "unassigned", "COUNT_KEY": "unAssignedCount"},
{ "NAME": "All", "KEY": "allCount"} { "NAME": "All", "KEY": "all", "COUNT_KEY": "allCount" }
], ],
"ASSIGNEE_TYPE_SLUG": {
"MINE": 0,
"UNASSIGNED": 1,
"ALL": 2
},
"CHAT_STATUS_ITEMS": [ "CHAT_STATUS_ITEMS": [
{ "TEXT": "Open", "VALUE": 0 }, { "TEXT": "Open", "VALUE": "open" },
{ "TEXT": "Resolved", "VALUE": 1 } { "TEXT": "Resolved", "VALUE": "resolved" }
], ],
"ATTACHMENTS": { "ATTACHMENTS": {

View file

@ -11,6 +11,7 @@
"LOADING_CONVERSATIONS": "Loading Conversations", "LOADING_CONVERSATIONS": "Loading Conversations",
"HEADER": { "HEADER": {
"RESOLVE_ACTION": "Resolve", "RESOLVE_ACTION": "Resolve",
"REOPEN_ACTION": "Reopen",
"OPEN": "More", "OPEN": "More",
"CLOSE": "Close", "CLOSE": "Close",
"DETAILS": "details" "DETAILS": "details"

View file

@ -1,10 +1,6 @@
<template> <template>
<section class="app-content columns"> <section class="app-content columns">
<chat-list <chat-list :conversation-inbox="inboxId"></chat-list>
:conversation-inbox="inboxId"
:page-title="$t('CHAT_LIST.TAB_HEADING')"
>
</chat-list>
<conversation-box <conversation-box
:inbox-id="inboxId" :inbox-id="inboxId"
:is-contact-panel-open="isContactPanelOpen" :is-contact-panel-open="isContactPanelOpen"
@ -37,7 +33,6 @@ export default {
data() { data() {
return { return {
pageTitle: this.$state,
panelToggleState: false, panelToggleState: false,
}; };
}, },
@ -60,7 +55,15 @@ export default {
props: ['inboxId', 'conversationId'], props: ['inboxId', 'conversationId'],
mounted() { mounted() {
this.$watch('$store.state.route', () => { this.initialize();
this.$watch('$store.state.route', () => this.initialize());
this.$watch('chatList.length', () => {
this.setActiveChat();
});
},
methods: {
initialize() {
switch (this.$store.state.route.name) { switch (this.$store.state.route.name) {
case 'inbox_conversation': case 'inbox_conversation':
this.setActiveChat(); this.setActiveChat();
@ -80,13 +83,8 @@ export default {
this.$store.dispatch('setActiveInbox', null); this.$store.dispatch('setActiveInbox', null);
break; break;
} }
}); },
this.$watch('chatList.length', () => {
this.setActiveChat();
});
},
methods: {
setActiveChat() { setActiveChat() {
const conversationId = parseInt(this.conversationId, 10); const conversationId = parseInt(this.conversationId, 10);
const [chat] = this.chatList.filter(c => c.id === conversationId); const [chat] = this.chatList.filter(c => c.id === conversationId);

View file

@ -21,10 +21,14 @@ jest.mock('../constants', () => {
CHANNELS: { CHANNELS: {
FACEBOOK: 'facebook', FACEBOOK: 'facebook',
}, },
ASSIGNEE_TYPE_SLUG: { ASSIGNEE_TYPE: {
MINE: 0, ME: 'me',
UNASSIGNED: 1, UNASSIGNED: 'unassigned',
OPEN: 1, ALL: 'all',
},
STATUS_TYPE: {
OPEN: 'open',
RESOLVED: 'resolved',
}, },
}; };
}); });

View file

@ -8,8 +8,9 @@ import cannedResponse from './modules/cannedResponse';
import Channel from './modules/channels'; import Channel from './modules/channels';
import contacts from './modules/contacts'; import contacts from './modules/contacts';
import contactConversations from './modules/contactConversations'; import contactConversations from './modules/contactConversations';
import conversationMetadata from './modules/conversationMetadata';
import conversationLabels from './modules/conversationLabels'; import conversationLabels from './modules/conversationLabels';
import conversationMetadata from './modules/conversationMetadata';
import conversationPage from './modules/conversationPage';
import conversations from './modules/conversations'; import conversations from './modules/conversations';
import inboxes from './modules/inboxes'; import inboxes from './modules/inboxes';
import inboxMembers from './modules/inboxMembers'; import inboxMembers from './modules/inboxMembers';
@ -27,6 +28,7 @@ export default new Vuex.Store({
contactConversations, contactConversations,
conversationLabels, conversationLabels,
conversationMetadata, conversationMetadata,
conversationPage,
conversations, conversations,
inboxes, inboxes,
inboxMembers, inboxMembers,

View file

@ -0,0 +1,70 @@
import Vue from 'vue';
import * as types from '../mutation-types';
const state = {
currentPage: {
me: 0,
unassigned: 0,
all: 0,
},
hasEndReached: {
me: false,
unassigned: false,
all: false,
},
};
export const getters = {
getHasEndReached: $state => filter => {
return $state.hasEndReached[filter];
},
getCurrentPage: $state => filter => {
return $state.currentPage[filter];
},
};
export const actions = {
setCurrentPage({ commit }, { filter, page }) {
commit(types.default.SET_CURRENT_PAGE, { filter, page });
},
setEndReached({ commit }, { filter }) {
commit(types.default.SET_CONVERSATION_END_REACHED, { filter });
},
reset({ commit }) {
commit(types.default.CLEAR_CONVERSATION_PAGE);
},
};
export const mutations = {
[types.default.SET_CURRENT_PAGE]: ($state, { filter, page }) => {
Vue.set($state.currentPage, filter, page);
},
[types.default.SET_CONVERSATION_END_REACHED]: ($state, { filter }) => {
if (filter === 'all') {
Vue.set($state.hasEndReached, 'unassigned', true);
Vue.set($state.hasEndReached, 'me', true);
}
Vue.set($state.hasEndReached, filter, true);
},
[types.default.CLEAR_CONVERSATION_PAGE]: $state => {
$state.currentPage = {
me: 0,
unassigned: 0,
all: 0,
};
$state.hasEndReached = {
me: false,
unassigned: false,
all: false,
};
},
};
export default {
namespaced: true,
state,
getters,
actions,
mutations,
};

View file

@ -7,7 +7,7 @@ import FBChannel from '../../../api/channel/fbChannel';
// actions // actions
const actions = { const actions = {
fetchAllConversations: async ({ commit }, params) => { fetchAllConversations: async ({ commit, dispatch }, params) => {
commit(types.default.SET_LIST_LOADING_STATUS); commit(types.default.SET_LIST_LOADING_STATUS);
try { try {
const response = await ConversationApi.get(params); const response = await ConversationApi.get(params);
@ -16,6 +16,21 @@ const actions = {
commit(types.default.SET_ALL_CONVERSATION, chatList); commit(types.default.SET_ALL_CONVERSATION, chatList);
commit(types.default.SET_CONV_TAB_META, metaData); commit(types.default.SET_CONV_TAB_META, metaData);
commit(types.default.CLEAR_LIST_LOADING_STATUS); commit(types.default.CLEAR_LIST_LOADING_STATUS);
dispatch(
'conversationPage/setCurrentPage',
{
filter: params.assigneeType,
page: params.page,
},
{ root: true }
);
if (!chatList.length) {
dispatch(
'conversationPage/setEndReached',
{ filter: params.assigneeType },
{ root: true }
);
}
} catch (error) { } catch (error) {
// Handle error // Handle error
} }

View file

@ -2,9 +2,9 @@
/* eslint no-param-reassign: 0 */ /* eslint no-param-reassign: 0 */
import Vue from 'vue'; import Vue from 'vue';
import * as types from '../../mutation-types'; import * as types from '../../mutation-types';
import wootConstants from '../../../constants';
import getters, { getSelectedChatConversation } from './getters'; import getters, { getSelectedChatConversation } from './getters';
import actions from './actions'; import actions from './actions';
import wootConstants from '../../../constants';
const state = { const state = {
allConversations: [], allConversations: [],
@ -22,7 +22,7 @@ const state = {
dataFetched: false, dataFetched: false,
}, },
listLoadingStatus: true, listLoadingStatus: true,
chatStatusFilter: wootConstants.ASSIGNEE_TYPE_SLUG.OPEN, chatStatusFilter: wootConstants.STATUS_TYPE.OPEN,
currentInbox: null, currentInbox: null,
}; };

View file

@ -0,0 +1,33 @@
import { actions } from '../../conversationPage';
import * as types from '../../../mutation-types';
const commit = jest.fn();
describe('#actions', () => {
describe('#setCurrentPage', () => {
it('sends correct actions', () => {
actions.setCurrentPage({ commit }, { filter: 'me', page: 1 });
expect(commit.mock.calls).toEqual([
[types.default.SET_CURRENT_PAGE, { filter: 'me', page: 1 }],
]);
});
});
describe('#setEndReached', () => {
it('sends correct actions', () => {
actions.setEndReached({ commit }, { filter: 'me' });
expect(commit.mock.calls).toEqual([
[types.default.SET_CONVERSATION_END_REACHED, { filter: 'me' }],
]);
});
});
describe('#reset', () => {
it('sends correct actions', () => {
actions.reset({ commit });
expect(commit.mock.calls).toEqual([
[types.default.CLEAR_CONVERSATION_PAGE],
]);
});
});
});

View file

@ -0,0 +1,29 @@
import { getters } from '../../conversationPage';
describe('#getters', () => {
it('getCurrentPage', () => {
const state = {
currentPage: {
me: 1,
unassigned: 2,
all: 3,
},
};
expect(getters.getCurrentPage(state)('me')).toEqual(1);
expect(getters.getCurrentPage(state)('unassigned')).toEqual(2);
expect(getters.getCurrentPage(state)('all')).toEqual(3);
});
it('getCurrentPage', () => {
const state = {
hasEndReached: {
me: false,
unassigned: true,
all: false,
},
};
expect(getters.getHasEndReached(state)('me')).toEqual(false);
expect(getters.getHasEndReached(state)('unassigned')).toEqual(true);
expect(getters.getHasEndReached(state)('all')).toEqual(false);
});
});

View file

@ -0,0 +1,61 @@
import * as types from '../../../mutation-types';
import { mutations } from '../../conversationPage';
describe('#mutations', () => {
describe('#SET_CURRENT_PAGE', () => {
it('set current page correctly', () => {
const state = { currentPage: { me: 1 } };
mutations[types.default.SET_CURRENT_PAGE](state, {
filter: 'me',
page: 2,
});
expect(state.currentPage).toEqual({
me: 2,
});
});
});
describe('#CLEAR_CONVERSATION_PAGE', () => {
it('resets the state to initial state', () => {
const state = {
currentPage: { me: 1, unassigned: 2, all: 3 },
hasEndReached: { me: true, unassigned: true, all: true },
};
mutations[types.default.CLEAR_CONVERSATION_PAGE](state);
expect(state).toEqual({
currentPage: { me: 0, unassigned: 0, all: 0 },
hasEndReached: { me: false, unassigned: false, all: false },
});
});
});
describe('#SET_CONVERSATION_END_REACHED', () => {
it('set conversation end reached correctly', () => {
const state = {
hasEndReached: { me: false, unassigned: false, all: false },
};
mutations[types.default.SET_CONVERSATION_END_REACHED](state, {
filter: 'me',
});
expect(state.hasEndReached).toEqual({
me: true,
unassigned: false,
all: false,
});
});
it('set all state to true if all end has reached', () => {
const state = {
hasEndReached: { me: false, unassigned: false, all: false },
};
mutations[types.default.SET_CONVERSATION_END_REACHED](state, {
filter: 'all',
});
expect(state.hasEndReached).toEqual({
me: true,
unassigned: true,
all: true,
});
});
});
});

View file

@ -81,4 +81,9 @@ export default {
// Conversation Metadata // Conversation Metadata
SET_CONVERSATION_METADATA: 'SET_CONVERSATION_METADATA', SET_CONVERSATION_METADATA: 'SET_CONVERSATION_METADATA',
// Conversation Page
SET_CURRENT_PAGE: 'SET_CURRENT_PAGE',
SET_CONVERSATION_END_REACHED: 'SET_CONVERSATION_END_REACHED',
CLEAR_CONVERSATION_PAGE: 'CLEAR_CONVERSATION_PAGE',
}; };

View file

@ -9,7 +9,7 @@ class Conversations::EventDataPresenter < SimpleDelegator
inbox_id: inbox_id, inbox_id: inbox_id,
messages: push_messages, messages: push_messages,
meta: push_meta, meta: push_meta,
status: status_before_type_cast.to_i, status: status,
unread_count: unread_incoming_messages.count, unread_count: unread_incoming_messages.count,
**push_timestamps **push_timestamps
} }

View file

@ -17,7 +17,7 @@ json.payload do
json.messages conversation.unread_messages.map(&:push_event_data) json.messages conversation.unread_messages.map(&:push_event_data)
end end
json.inbox_id conversation.inbox_id json.inbox_id conversation.inbox_id
json.status conversation.status_before_type_cast json.status conversation.status
json.timestamp conversation.messages.last.try(:created_at).try(:to_i) json.timestamp conversation.messages.last.try(:created_at).try(:to_i)
json.user_last_seen_at conversation.user_last_seen_at.to_i json.user_last_seen_at conversation.user_last_seen_at.to_i
json.agent_last_seen_at conversation.agent_last_seen_at.to_i json.agent_last_seen_at conversation.agent_last_seen_at.to_i

View file

@ -24,7 +24,7 @@ json.data do
json.messages conversation.unread_messages.map(&:push_event_data) json.messages conversation.unread_messages.map(&:push_event_data)
end end
json.inbox_id conversation.inbox_id json.inbox_id conversation.inbox_id
json.status conversation.status_before_type_cast json.status conversation.status
json.timestamp conversation.messages.last.try(:created_at).try(:to_i) json.timestamp conversation.messages.last.try(:created_at).try(:to_i)
json.user_last_seen_at conversation.user_last_seen_at.to_i json.user_last_seen_at conversation.user_last_seen_at.to_i
json.agent_last_seen_at conversation.agent_last_seen_at.to_i json.agent_last_seen_at conversation.agent_last_seen_at.to_i

View file

@ -3,6 +3,6 @@ end
json.payload do json.payload do
json.success @status json.success @status
json.current_status @conversation.status_before_type_cast json.current_status @conversation.status
json.conversation_id @conversation.display_id json.conversation_id @conversation.display_id
end end

View file

@ -19,7 +19,7 @@ describe ::ConversationFinder do
describe '#perform' do describe '#perform' do
context 'with status' do context 'with status' do
let(:params) { { status: 'open', assignee_type_id: 0 } } let(:params) { { status: 'open', assignee_type: 'me' } }
it 'filter conversations by status' do it 'filter conversations by status' do
result = conversation_finder.perform result = conversation_finder.perform
@ -28,7 +28,7 @@ describe ::ConversationFinder do
end end
context 'with assignee' do context 'with assignee' do
let(:params) { { assignee_type_id: 2 } } let(:params) { { assignee_type: 'all' } }
it 'filter conversations by assignee' do it 'filter conversations by assignee' do
result = conversation_finder.perform result = conversation_finder.perform
@ -49,7 +49,7 @@ describe ::ConversationFinder do
end end
context 'with pagination' do context 'with pagination' do
let(:params) { { status: 'open', assignee_type_id: 0, page: 1 } } let(:params) { { status: 'open', assignee_type: 'me', page: 1 } }
it 'returns paginated conversations' do it 'returns paginated conversations' do
create_list(:conversation, 50, account: account, inbox: inbox, assignee: user_1) create_list(:conversation, 50, account: account, inbox: inbox, assignee: user_1)

View file

@ -221,7 +221,7 @@ RSpec.describe Conversation, type: :model do
id: conversation.display_id, id: conversation.display_id,
messages: [], messages: [],
inbox_id: conversation.inbox_id, inbox_id: conversation.inbox_id,
status: conversation.status_before_type_cast.to_i, status: conversation.status,
timestamp: conversation.created_at.to_i, timestamp: conversation.created_at.to_i,
user_last_seen_at: conversation.user_last_seen_at.to_i, user_last_seen_at: conversation.user_last_seen_at.to_i,
agent_last_seen_at: conversation.agent_last_seen_at.to_i, agent_last_seen_at: conversation.agent_last_seen_at.to_i,

View file

@ -20,7 +20,7 @@ RSpec.describe Conversations::EventDataPresenter do
id: conversation.display_id, id: conversation.display_id,
messages: [], messages: [],
inbox_id: conversation.inbox_id, inbox_id: conversation.inbox_id,
status: conversation.status_before_type_cast.to_i, status: conversation.status,
timestamp: conversation.created_at.to_i, timestamp: conversation.created_at.to_i,
user_last_seen_at: conversation.user_last_seen_at.to_i, user_last_seen_at: conversation.user_last_seen_at.to_i,
agent_last_seen_at: conversation.agent_last_seen_at.to_i, agent_last_seen_at: conversation.agent_last_seen_at.to_i,