scottk/chatwoot
1
0
Fork 0
mirror of https://github.com/lingble/chatwoot.git synced 2025-10-31 19:17:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Split reconnect logic PR (store) (#9520)

Browse Source 
# Pull Request Template

## Description

This PR includes store filter parts split from this [Reconnect
PR](https://github.com/chatwoot/chatwoot/pull/9453)
This commit is contained in:
Sivin Varghese
2024-05-30 12:29:55 +05:30
committed by GitHub
parent 6c682a6869
commit e3eca47c31
22 changed files with 374 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/dashboard/api/inbox/conversation.js
View File

@@ -15,6 +15,7 @@ class ConversationApi extends ApiClient {
teamId,
conversationType,
sortBy,
updatedWithin,
}) {
return axios.get(this.url, {
params: {
@@ -26,6 +27,7 @@ class ConversationApi extends ApiClient {
labels,
conversation_type: conversationType,
sort_by: sortBy,
updated_within: updatedWithin,
},
});
}

2
app/javascript/dashboard/api/specs/inbox/conversation.spec.js
View File

@@ -46,6 +46,7 @@ describe('#ConversationAPI', () => {
page: 1,
labels: [],
teamId: 1,
updatedWithin: 20,
});
expect(axiosMock.get).toHaveBeenCalledWith('/api/v1/conversations', {
params: {
@@ -55,6 +56,7 @@ describe('#ConversationAPI', () => {
assignee_type: 'me',
page: 1,
labels: [],
updated_within: 20,
},
});
});

26
app/javascript/dashboard/components/ChatList.vue
View File

@@ -268,6 +268,7 @@ export default {
chatLists: 'getAllConversations',
mineChatsList: 'getMineChats',
allChatList: 'getAllStatusChats',
chatListFilters: 'getChatListFilters',
unAssignedChatsList: 'getUnAssignedChats',
chatListLoading: 'getChatListLoadingStatus',
currentUserID: 'getCurrentUserID',
@@ -293,13 +294,6 @@ export default {
hasAppliedFiltersOrActiveFolders() {
return this.hasAppliedFilters || this.hasActiveFolders;
},
savedFoldersValue() {
if (this.hasActiveFolders) {
const payload = this.activeFolder.query;
this.fetchSavedFilteredConversations(payload);
}
return {};
},
showEndOfListMessage() {
return (
this.conversationList.length &&
@@ -375,7 +369,6 @@ export default {
labels: this.label ? [this.label] : undefined,
teamId: this.teamId || undefined,
conversationType: this.conversationType || undefined,
folders: this.hasActiveFolders ? this.savedFoldersValue : undefined,
};
},
conversationListPagination() {
@@ -488,7 +481,13 @@ export default {
this.resetAndFetchData();
this.updateVirtualListProps('conversationType', this.conversationType);
},
activeFolder() {
activeFolder(newVal, oldVal) {
if (newVal !== oldVal) {
this.$store.dispatch(
'customViews/setActiveConversationFolder',
newVal || null
);
}
this.resetAndFetchData();
this.updateVirtualListProps('foldersId', this.foldersId);
},
@@ -498,8 +497,14 @@ export default {
showAssigneeInConversationCard(newVal) {
this.updateVirtualListProps('showAssignee', newVal);
},
conversationFilters(newVal, oldVal) {
if (newVal !== oldVal) {
this.$store.dispatch('updateChatListFilters', newVal);
}
},
},
mounted() {
this.$store.dispatch('setChatListFilters', this.conversationFilters);
this.setFiltersFromUISettings();
this.$store.dispatch('setChatStatusFilter', this.activeStatus);
this.$store.dispatch('setChatSortFilter', this.activeSortBy);
@@ -695,8 +700,9 @@ export default {
this.fetchConversations();
},
fetchConversations() {
this.$store.dispatch('updateChatListFilters', this.conversationFilters);
this.$store
.dispatch('fetchAllConversations', this.conversationFilters)
.dispatch('fetchAllConversations')
.then(this.emitConversationLoaded);
},
loadMoreConversations() {

12
app/javascript/dashboard/routes/dashboard/inbox/InboxList.vue
View File

@@ -47,6 +47,7 @@
<script>
import { mapGetters } from 'vuex';
import wootConstants from 'dashboard/constants/globals';
import InboxCard from './components/InboxCard.vue';
import InboxListHeader from './components/InboxListHeader.vue';
import { INBOX_EVENTS } from 'dashboard/helper/AnalyticsHelper/events';
@@ -103,6 +104,13 @@ export default {
return !this.uiFlags.isFetching && !this.notifications.length;
},
},
watch: {
inboxFilters(newVal, oldVal) {
if (newVal !== oldVal) {
this.$store.dispatch('notifications/updateNotificationFilters', newVal);
}
},
},
mounted() {
this.setSavedFilter();
this.fetchNotifications();
@@ -190,6 +198,10 @@ export default {
this.status = status;
this.type = type;
this.sortOrder = sortBy || wootConstants.INBOX_SORT_BY.NEWEST;
this.$store.dispatch(
'notifications/setNotificationFilters',
this.inboxFilters
);
},
},
};

11
app/javascript/dashboard/store/modules/conversations/actions.js
View File

@@ -37,9 +37,10 @@ const actions = {
}
},
fetchAllConversations: async ({ commit, dispatch }, params) => {
fetchAllConversations: async ({ commit, state, dispatch }) => {
commit(types.SET_LIST_LOADING_STATUS);
try {
const params = state.conversationFilters;
const {
data: { data },
} = await ConversationApi.get(params);
@@ -446,6 +447,14 @@ const actions = {
commit(types.CLEAR_CONVERSATION_FILTERS);
},
setChatListFilters({ commit }, data) {
commit(types.SET_CHAT_LIST_FILTERS, data);
},
updateChatListFilters({ commit }, data) {
commit(types.UPDATE_CHAT_LIST_FILTERS, data);
},
assignPriority: async ({ dispatch }, { conversationId, priority }) => {
try {
await ConversationApi.togglePriority({

6
app/javascript/dashboard/store/modules/conversations/getters.js
View File

@@ -1,5 +1,6 @@
import { MESSAGE_TYPE } from 'shared/constants/messages';
import { applyPageFilters, sortComparator } from './helpers';
import filterQueryGenerator from 'dashboard/helper/filterQueryGenerator';
export const getSelectedChatConversation = ({
allConversations,
@@ -21,6 +22,7 @@ const getters = {
const selectedChat = _getters.getSelectedChat;
return selectedChat.attachments || [];
},
getChatListFilters: ({ conversationFilters }) => conversationFilters,
getLastEmailInSelectedChat: (stage, _getters) => {
const selectedChat = _getters.getSelectedChat;
const { messages = [] } = selectedChat;
@@ -56,6 +58,10 @@ const getters = {
getAppliedConversationFilters: _state => {
return _state.appliedFilters;
},
getAppliedConversationFiltersQuery: _state => {
const hasAppliedFilters = _state.appliedFilters.length !== 0;
return hasAppliedFilters ? filterQueryGenerator(_state.appliedFilters) : [];
},
getUnAssignedChats: _state => activeFilters => {
return _state.allConversations.filter(conversation => {
const isUnAssigned = !conversation.meta.assignee;

22
app/javascript/dashboard/store/modules/conversations/index.js
View File

@@ -19,6 +19,7 @@ const state = {
conversationParticipants: [],
conversationLastSeen: null,
syncConversationsMessages: {},
conversationFilters: {},
};
// mutations
@@ -31,6 +32,20 @@ export const mutations = {
);
if (indexInCurrentList < 0) {
newAllConversations.push(conversation);
} else if (conversation.id !== _state.selectedChatId) {
// If the conversation is already in the list, replace it
// Added this to fix the issue of the conversation not being updated
// When reconnecting to the websocket. If the selectedChatId is not the same as
// the conversation.id in the store, replace the existing conversation with the new one
newAllConversations[indexInCurrentList] = conversation;
} else {
// If the conversation is already in the list and selectedChatId is the same,
// replace all data except the messages array
const existingConversation = newAllConversations[indexInCurrentList];
newAllConversations[indexInCurrentList] = {
...conversation,
messages: existingConversation.messages,
};
}
});
_state.allConversations = newAllConversations;
@@ -286,6 +301,13 @@ export const mutations = {
[types.SET_CONTEXT_MENU_CHAT_ID](_state, chatId) {
_state.contextMenuChatId = chatId;
},
[types.SET_CHAT_LIST_FILTERS](_state, data) {
_state.conversationFilters = data;
},
[types.UPDATE_CHAT_LIST_FILTERS](_state, data) {
_state.conversationFilters = { ..._state.conversationFilters, ...data };
},
};
export default {

11
app/javascript/dashboard/store/modules/customViews.js
View File

@@ -9,6 +9,7 @@ export const state = {
isCreating: false,
isDeleting: false,
},
activeConversationFolder: null,
};
export const getters = {
@@ -21,6 +22,9 @@ export const getters = {
getCustomViewsByFilterType: _state => filterType => {
return _state.records.filter(record => record.filter_type === filterType);
},
getActiveConversationFolder(_state) {
return _state.activeConversationFolder;
},
};
export const actions = {
@@ -71,6 +75,9 @@ export const actions = {
commit(types.SET_CUSTOM_VIEW_UI_FLAG, { isDeleting: false });
}
},
setActiveConversationFolder({ commit }, data) {
commit(types.SET_ACTIVE_CONVERSATION_FOLDER, data);
},
};
export const mutations = {
@@ -85,6 +92,10 @@ export const mutations = {
[types.SET_CUSTOM_VIEW]: MutationHelpers.set,
[types.UPDATE_CUSTOM_VIEW]: MutationHelpers.update,
[types.DELETE_CUSTOM_VIEW]: MutationHelpers.destroy,
[types.SET_ACTIVE_CONVERSATION_FOLDER](_state, folder) {
_state.activeConversationFolder = folder;
},
};
export default {

7
app/javascript/dashboard/store/modules/notifications/actions.js
View File

@@ -159,4 +159,11 @@ export const actions = {
clear({ commit }) {
commit(types.CLEAR_NOTIFICATIONS);
},
setNotificationFilters: ({ commit }, filters) => {
commit(types.SET_NOTIFICATION_FILTERS, filters);
},
updateNotificationFilters: ({ commit }, filters) => {
commit(types.UPDATE_NOTIFICATION_FILTERS, filters);
},
};

3
app/javascript/dashboard/store/modules/notifications/getters.js
View File

@@ -24,4 +24,7 @@ export const getters = {
getMeta: $state => {
return $state.meta;
},
getNotificationFilters($state) {
return $state.notificationFilters;
},
};

1
app/javascript/dashboard/store/modules/notifications/index.js
View File

@@ -17,6 +17,7 @@ const state = {
isUpdatingUnreadCount: false,
isAllNotificationsLoaded: false,
},
notificationFilters: {},
};
export default {

20
app/javascript/dashboard/store/modules/notifications/mutations.js
View File

@@ -28,6 +28,16 @@ export const mutations = {
},
[types.SET_NOTIFICATIONS]: ($state, data) => {
data.forEach(notification => {
// Find existing notification with same primary_actor_id (primary_actor_id is unique)
const existingNotification = Object.values($state.records).find(
record => record.primary_actor_id === notification.primary_actor_id
);
// This is to handle the case where the same notification is received multiple times
// On reconnect, if there is existing notification with same primary_actor_id,
// it will be deleted and the new one will be added. So it will solve with duplicate notification
if (existingNotification) {
Vue.delete($state.records, existingNotification.id);
}
Vue.set($state.records, notification.id, {
...($state.records[notification.id] || {}),
...notification,
@@ -85,4 +95,14 @@ export const mutations = {
[types.SNOOZE_NOTIFICATION]: ($state, { id, snoozed_until }) => {
Vue.set($state.records[id], 'snoozed_until', snoozed_until);
},
[types.SET_NOTIFICATION_FILTERS]: ($state, filters) => {
Vue.set($state, 'notificationFilters', filters);
},
[types.UPDATE_NOTIFICATION_FILTERS]: ($state, filters) => {
Vue.set($state, 'notificationFilters', {
...$state.notificationFilters,
...filters,
});
},
};

28
app/javascript/dashboard/store/modules/specs/conversations/actions.spec.js
View File

@@ -659,4 +659,32 @@ describe('#addMentions', () => {
expect(commit.mock.calls).toEqual([[types.SET_CONTEXT_MENU_CHAT_ID, 1]]);
});
});
describe('#setChatListFilters', () => {
it('set chat list filters', () => {
const filters = {
inboxId: 1,
assigneeType: 'me',
status: 'open',
sortBy: 'created_at',
page: 1,
labels: ['label'],
teamId: 1,
conversationType: 'mention',
};
actions.setChatListFilters({ commit }, filters);
expect(commit.mock.calls).toEqual([
[types.SET_CHAT_LIST_FILTERS, filters],
]);
});
});
describe('#updateChatListFilters', () => {
it('update chat list filters', () => {
actions.updateChatListFilters({ commit }, { updatedWithin: 20 });
expect(commit.mock.calls).toEqual([
[types.UPDATE_CHAT_LIST_FILTERS, { updatedWithin: 20 }],
]);
});
});
});

41
app/javascript/dashboard/store/modules/specs/conversations/getters.spec.js
View File

@@ -279,4 +279,45 @@ describe('#getters', () => {
expect(getters.getContextMenuChatId(state)).toEqual(1);
});
});
describe('#getChatListFilters', () => {
it('get chat list filters', () => {
const conversationFilters = {
inboxId: 1,
assigneeType: 'me',
status: 'open',
sortBy: 'created_at',
page: 1,
labels: ['label'],
teamId: 1,
conversationType: 'mention',
};
const state = { conversationFilters: conversationFilters };
expect(getters.getChatListFilters(state)).toEqual(conversationFilters);
});
});
describe('#getAppliedConversationFiltersQuery', () => {
it('get applied conversation filters query', () => {
const filtersList = [
{
attribute_key: 'status',
filter_operator: 'equal_to',
values: [{ id: 'snoozed', name: 'Snoozed' }],
query_operator: 'and',
},
];
const state = { appliedFilters: filtersList };
expect(getters.getAppliedConversationFiltersQuery(state)).toEqual({
payload: [
{
attribute_key: 'status',
filter_operator: 'equal_to',
query_operator: undefined,
values: ['snoozed'],
},
],
});
});
});
});

110
app/javascript/dashboard/store/modules/specs/conversations/mutations.spec.js
View File

@@ -279,6 +279,66 @@ describe('#mutations', () => {
});
});
describe('#SET_ALL_CONVERSATION', () => {
it('set all conversation', () => {
const state = { allConversations: [{ id: 1 }] };
const data = [{ id: 1, name: 'test' }];
mutations[types.SET_ALL_CONVERSATION](state, data);
expect(state.allConversations).toEqual(data);
});
it('set all conversation in reconnect if selected chat id and conversation id is the same', () => {
const state = {
allConversations: [{ id: 1, status: 'open' }],
selectedChatId: 1,
};
const data = [{ id: 1, name: 'test', status: 'resolved' }];
mutations[types.SET_ALL_CONVERSATION](state, data);
expect(state.allConversations).toEqual(data);
});
it('set all conversation in reconnect if selected chat id and conversation id is the same then do not update messages', () => {
const state = {
allConversations: [{ id: 1, messages: [{ id: 1, content: 'test' }] }],
selectedChatId: 1,
};
const data = [
{
id: 1,
name: 'test',
messages: [{ id: 1, content: 'updated message' }],
},
];
const expected = [
{ id: 1, name: 'test', messages: [{ id: 1, content: 'test' }] },
];
mutations[types.SET_ALL_CONVERSATION](state, data);
expect(state.allConversations).toEqual(expected);
});
it('set all conversation in reconnect if selected chat id and conversation id is not the same', () => {
const state = {
allConversations: [{ id: 1, status: 'open' }],
selectedChatId: 2,
};
const data = [{ id: 1, name: 'test', status: 'resolved' }];
mutations[types.SET_ALL_CONVERSATION](state, data);
expect(state.allConversations).toEqual(data);
});
it('set all conversation in reconnect if selected chat id and conversation id is not the same then update messages', () => {
const state = {
allConversations: [{ id: 1, messages: [{ id: 1, content: 'test' }] }],
selectedChatId: 2,
};
const data = [
{ id: 1, name: 'test', messages: [{ id: 1, content: 'tested' }] },
];
mutations[types.SET_ALL_CONVERSATION](state, data);
expect(state.allConversations).toEqual(data);
});
});
describe('#SET_ALL_ATTACHMENTS', () => {
it('set all attachments', () => {
const state = {
@@ -411,4 +471,54 @@ describe('#mutations', () => {
expect(state.contextMenuChatId).toEqual(2);
});
});
describe('#SET_CHAT_LIST_FILTERS', () => {
it('set chat list filters', () => {
const conversationFilters = {
inboxId: 1,
assigneeType: 'me',
status: 'open',
sortBy: 'created_at',
page: 1,
labels: ['label'],
teamId: 1,
conversationType: 'mention',
};
const state = { conversationFilters: conversationFilters };
mutations[types.SET_CHAT_LIST_FILTERS](state, conversationFilters);
expect(state.conversationFilters).toEqual(conversationFilters);
});
});
describe('#UPDATE_CHAT_LIST_FILTERS', () => {
it('update chat list filters', () => {
const conversationFilters = {
inboxId: 1,
assigneeType: 'me',
status: 'open',
sortBy: 'created_at',
page: 1,
labels: ['label'],
teamId: 1,
conversationType: 'mention',
};
const state = { conversationFilters: conversationFilters };
mutations[types.UPDATE_CHAT_LIST_FILTERS](state, {
inboxId: 2,
updatedWithin: 20,
assigneeType: 'all',
});
expect(state.conversationFilters).toEqual({
inboxId: 2,
assigneeType: 'all',
status: 'open',
sortBy: 'created_at',
page: 1,
labels: ['label'],
teamId: 1,
conversationType: 'mention',
updatedWithin: 20,
});
});
});
});

9
app/javascript/dashboard/store/modules/specs/customViews/actions.spec.js
View File

@@ -91,4 +91,13 @@ describe('#actions', () => {
]);
});
});
describe('#setActiveConversationFolder', () => {
it('set active conversation folder', async () => {
await actions.setActiveConversationFolder({ commit }, customViewList[0]);
expect(commit.mock.calls).toEqual([
[types.default.SET_ACTIVE_CONVERSATION_FOLDER, customViewList[0]],
]);
});
});
});

7
app/javascript/dashboard/store/modules/specs/customViews/getters.spec.js
View File

@@ -76,4 +76,11 @@ describe('#getters', () => {
isDeleting: false,
});
});
it('getActiveConversationFolder', () => {
const state = { activeConversationFolder: customViewList[0] };
expect(getters.getActiveConversationFolder(state)).toEqual(
customViewList[0]
);
});
});

8
app/javascript/dashboard/store/modules/specs/customViews/mutations.spec.js
View File

@@ -34,4 +34,12 @@ describe('#mutations', () => {
expect(state.records).toEqual(updateCustomViewList);
});
});
describe('#SET_ACTIVE_CONVERSATION_FOLDER', () => {
it('set active conversation folder', () => {
const state = { activeConversationFolder: customViewList[0] };
mutations[types.SET_ACTIVE_CONVERSATION_FOLDER](state, customViewList[0]);
expect(state.activeConversationFolder).toEqual(customViewList[0]);
});
});
});

30
app/javascript/dashboard/store/modules/specs/notifications/actions.spec.js
View File

@@ -283,4 +283,34 @@ describe('#actions', () => {
]);
});
});
describe('setNotificationFilters', () => {
it('set notification filters', async () => {
const filters = {
page: 1,
status: 'read',
type: 'all',
sortOrder: 'desc',
};
await actions.setNotificationFilters({ commit }, filters);
expect(commit.mock.calls).toEqual([
[types.SET_NOTIFICATION_FILTERS, filters],
]);
});
});
describe('updateNotificationFilters', () => {
it('update notification filters', async () => {
const filters = {
page: 1,
status: 'unread',
type: 'all',
sortOrder: 'desc',
};
await actions.updateNotificationFilters({ commit }, filters);
expect(commit.mock.calls).toEqual([
[types.UPDATE_NOTIFICATION_FILTERS, filters],
]);
});
});
});

14
app/javascript/dashboard/store/modules/specs/notifications/getters.spec.js
View File

@@ -81,4 +81,18 @@ describe('#getters', () => {
};
expect(getters.getMeta(state)).toEqual({ unreadCount: 1 });
});
it('getNotificationFilters', () => {
const state = {
notificationFilters: {
page: 1,
status: 'unread',
type: 'all',
sortOrder: 'desc',
},
};
expect(getters.getNotificationFilters(state)).toEqual(
state.notificationFilters
);
});
});

18
app/javascript/dashboard/store/modules/specs/notifications/mutations.spec.js
View File

@@ -52,19 +52,19 @@ describe('#mutations', () => {
});
describe('#SET_NOTIFICATIONS', () => {
it('set notifications ', () => {
it('set notifications', () => {
const state = { records: {} };
mutations[types.SET_NOTIFICATIONS](state, [
{ id: 1 },
{ id: 2 },
{ id: 3 },
{ id: 4 },
{ id: 1, primary_actor_id: 1 },
{ id: 2, primary_actor_id: 2 },
{ id: 3, primary_actor_id: 3 },
{ id: 4, primary_actor_id: 4 },
]);
expect(state.records).toEqual({
1: { id: 1 },
2: { id: 2 },
3: { id: 3 },
4: { id: 4 },
1: { id: 1, primary_actor_id: 1 },
2: { id: 2, primary_actor_id: 2 },
3: { id: 3, primary_actor_id: 3 },
4: { id: 4, primary_actor_id: 4 },
});
});
});

6
app/javascript/dashboard/store/mutation-types.js
View File

@@ -60,6 +60,9 @@ export default {
SET_CONTEXT_MENU_CHAT_ID: 'SET_CONTEXT_MENU_CHAT_ID',
SET_CHAT_LIST_FILTERS: 'SET_CHAT_LIST_FILTERS',
UPDATE_CHAT_LIST_FILTERS: 'UPDATE_CHAT_LIST_FILTERS',
// Inboxes
SET_INBOXES_UI_FLAG: 'SET_INBOXES_UI_FLAG',
SET_INBOXES: 'SET_INBOXES',
@@ -147,6 +150,8 @@ export default {
DELETE_READ_NOTIFICATIONS: 'DELETE_READ_NOTIFICATIONS',
DELETE_ALL_NOTIFICATIONS: 'DELETE_ALL_NOTIFICATIONS',
SNOOZE_NOTIFICATION: 'SNOOZE_NOTIFICATION',
SET_NOTIFICATION_FILTERS: 'SET_NOTIFICATION_FILTERS',
UPDATE_NOTIFICATION_FILTERS: 'UPDATE_NOTIFICATION_FILTERS',
// Contact Conversation
SET_CONTACT_CONVERSATIONS_UI_FLAG: 'SET_CONTACT_CONVERSATIONS_UI_FLAG',
@@ -239,6 +244,7 @@ export default {
ADD_CUSTOM_VIEW: 'ADD_CUSTOM_VIEW',
UPDATE_CUSTOM_VIEW: 'UPDATE_CUSTOM_VIEW',
DELETE_CUSTOM_VIEW: 'DELETE_CUSTOM_VIEW',
SET_ACTIVE_CONVERSATION_FOLDER: 'SET_ACTIVE_CONVERSATION_FOLDER',
// Bulk Actions
SET_BULK_ACTIONS_FLAG: 'SET_BULK_ACTIONS_FLAG',