LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Feature: Improve label experience (#975)

Browse Source 
Co-authored-by: Sojan <sojan@pepalo.com>
This commit is contained in:
Pranav Raj S
2020-06-25 21:04:03 +05:30
committed by GitHub
parent 8b61452d56
commit 97ad39713b
56 changed files with 1712 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/javascript/dashboard/store/modules/contacts.js
View File

@@ -71,12 +71,18 @@ export const mutations = {
[types.default.SET_CONTACTS]: ($state, data) => {
data.forEach(contact => {
Vue.set($state.records, contact.id, contact);
Vue.set($state.records, contact.id, {
...($state.records[contact.id] || {}),
...contact,
});
});
},
[types.default.SET_CONTACT_ITEM]: ($state, data) => {
Vue.set($state.records, data.id, data);
Vue.set($state.records, data.id, {
...($state.records[data.id] || {}),
...data,
});
},
[types.default.EDIT_CONTACT]: ($state, data) => {

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

@@ -64,6 +64,12 @@ export const actions = {
});
}
},
setBulkConversationLabels({ commit }, conversations) {
commit(types.default.SET_BULK_CONVERSATION_LABELS, conversations);
},
setConversationLabel({ commit }, { id, data }) {
commit(types.default.SET_CONVERSATION_LABELS, { id, data });
},
};
export const mutations = {
@@ -76,6 +82,11 @@ export const mutations = {
[types.default.SET_CONVERSATION_LABELS]: ($state, { id, data }) => {
Vue.set($state.records, id, data);
},
[types.default.SET_BULK_CONVERSATION_LABELS]: ($state, conversations) => {
conversations.forEach(conversation => {
Vue.set($state.records, conversation.id, conversation.labels);
});
},
};
export default {

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

@@ -8,7 +8,7 @@ const actions = {
getConversation: async ({ commit }, conversationId) => {
try {
const response = await ConversationApi.show(conversationId);
commit(types.default.ADD_CONVERSATION, response.data);
commit(types.default.UPDATE_CONVERSATION, response.data);
commit(
`contacts/${types.default.SET_CONTACT_ITEM}`,
response.data.meta.sender
@@ -26,6 +26,7 @@ const actions = {
const { payload: chatList, meta: metaData } = data;
commit(types.default.SET_ALL_CONVERSATION, chatList);
dispatch('conversationStats/set', metaData);
dispatch('conversationLabels/setBulkConversationLabels', chatList);
commit(types.default.CLEAR_LIST_LOADING_STATUS);
commit(
`contacts/${types.default.SET_CONTACTS}`,

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

@@ -142,13 +142,15 @@ const mutations = {
if (currentConversationIndex > -1) {
const currentConversation = {
...allConversations[currentConversationIndex],
status: conversation.status,
...conversation,
};
Vue.set(allConversations, currentConversationIndex, currentConversation);
if (_state.selectedChat.id === conversation.id) {
_state.selectedChat.status = conversation.status;
window.bus.$emit('scrollToMessage');
}
} else {
_state.allConversations.push(conversation);
}
},
@@ -190,7 +192,7 @@ const mutations = {
},
[types.default.SET_ACTIVE_INBOX](_state, inboxId) {
_state.currentInbox = inboxId;
_state.currentInbox = inboxId ? parseInt(inboxId, 10) : null;
},
};

97
app/javascript/dashboard/store/modules/labels.js Normal file
View File

@@ -0,0 +1,97 @@
import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
import types from '../mutation-types';
import LabelsAPI from '../../api/labels';
export const state = {
records: [],
uiFlags: {
isFetching: false,
isFetchingItem: false,
isCreating: false,
isDeleting: false,
},
};
export const getters = {
getLabels(_state) {
return _state.records;
},
getUIFlags(_state) {
return _state.uiFlags;
},
getLabelsOnSidebar(_state) {
return _state.records.filter(record => record.show_on_sidebar);
},
};
export const actions = {
get: async function getLabels({ commit }) {
commit(types.SET_LABEL_UI_FLAG, { isFetching: true });
try {
const response = await LabelsAPI.get();
commit(types.SET_LABELS, response.data.payload);
} catch (error) {
// Ignore error
} finally {
commit(types.SET_LABEL_UI_FLAG, { isFetching: false });
}
},
create: async function createLabels({ commit }, cannedObj) {
commit(types.SET_LABEL_UI_FLAG, { isCreating: true });
try {
const response = await LabelsAPI.create(cannedObj);
commit(types.ADD_LABEL, response.data);
} catch (error) {
throw new Error(error);
} finally {
commit(types.SET_LABEL_UI_FLAG, { isCreating: false });
}
},
update: async function updateLabels({ commit }, { id, ...updateObj }) {
commit(types.SET_LABEL_UI_FLAG, { isUpdating: true });
try {
const response = await LabelsAPI.update(id, updateObj);
commit(types.EDIT_LABEL, response.data);
} catch (error) {
throw new Error(error);
} finally {
commit(types.SET_LABEL_UI_FLAG, { isUpdating: false });
}
},
delete: async function deleteLabels({ commit }, id) {
commit(types.SET_LABEL_UI_FLAG, { isDeleting: true });
try {
await LabelsAPI.delete(id);
commit(types.DELETE_LABEL, id);
} catch (error) {
throw new Error(error);
} finally {
commit(types.SET_LABEL_UI_FLAG, { isDeleting: false });
}
},
};
export const mutations = {
[types.SET_LABEL_UI_FLAG](_state, data) {
_state.uiFlags = {
..._state.uiFlags,
...data,
};
},
[types.SET_LABELS]: MutationHelpers.set,
[types.ADD_LABEL]: MutationHelpers.create,
[types.EDIT_LABEL]: MutationHelpers.update,
[types.DELETE_LABEL]: MutationHelpers.destroy,
};
export default {
namespaced: true,
state,
getters,
actions,
mutations,
};

29
app/javascript/dashboard/store/modules/specs/conversationLabels/actions.spec.js
View File

@@ -74,4 +74,33 @@ describe('#actions', () => {
]);
});
});
describe('#setBulkConversationLabels', () => {
it('it send correct mutations', () => {
actions.setBulkConversationLabels({ commit }, [
{ id: 1, labels: ['customer-support'] },
]);
expect(commit.mock.calls).toEqual([
[
types.default.SET_BULK_CONVERSATION_LABELS,
[{ id: 1, labels: ['customer-support'] }],
],
]);
});
});
describe('#setBulkConversationLabels', () => {
it('it send correct mutations', () => {
actions.setConversationLabel(
{ commit },
{ id: 1, data: ['customer-support'] }
);
expect(commit.mock.calls).toEqual([
[
types.default.SET_CONVERSATION_LABELS,
{ id: 1, data: ['customer-support'] },
],
]);
});
});
});

22
app/javascript/dashboard/store/modules/specs/conversationLabels/mutations.spec.js
View File

@@ -15,7 +15,7 @@ describe('#mutations', () => {
});
describe('#SET_CONVERSATION_LABELS', () => {
it('set contact conversation records', () => {
it('set contact labels', () => {
const state = { records: {} };
mutations[types.default.SET_CONVERSATION_LABELS](state, {
id: 1,
@@ -26,4 +26,24 @@ describe('#mutations', () => {
});
});
});
describe('#SET_BULK_CONVERSATION_LABELS', () => {
it('set contact labels in bulk', () => {
const state = { records: {} };
mutations[types.default.SET_BULK_CONVERSATION_LABELS](state, [
{
id: 1,
labels: ['customer-success', 'on-hold'],
},
{
id: 2,
labels: ['customer-success'],
},
]);
expect(state.records).toEqual({
1: ['customer-success', 'on-hold'],
2: ['customer-success'],
});
});
});
});

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

@@ -15,7 +15,7 @@ describe('#actions', () => {
await actions.getConversation({ commit }, 1);
expect(commit.mock.calls).toEqual([
[
types.default.ADD_CONVERSATION,
types.default.UPDATE_CONVERSATION,
{ id: 1, meta: { sender: { id: 1, name: 'Contact 1' } } },
],
['contacts/SET_CONTACT_ITEM', { id: 1, name: 'Contact 1' }],

94
app/javascript/dashboard/store/modules/specs/labels/actions.spec.js Normal file
View File

@@ -0,0 +1,94 @@
import axios from 'axios';
import { actions } from '../../labels';
import * as types from '../../../mutation-types';
import labelsList from './fixtures';
const commit = jest.fn();
global.axios = axios;
jest.mock('axios');
describe('#actions', () => {
describe('#get', () => {
it('sends correct actions if API is success', async () => {
axios.get.mockResolvedValue({ data: { payload: labelsList } });
await actions.get({ commit });
expect(commit.mock.calls).toEqual([
[types.default.SET_LABEL_UI_FLAG, { isFetching: true }],
[types.default.SET_LABELS, labelsList],
[types.default.SET_LABEL_UI_FLAG, { isFetching: false }],
]);
});
it('sends correct actions if API is error', async () => {
axios.get.mockRejectedValue({ message: 'Incorrect header' });
await actions.get({ commit });
expect(commit.mock.calls).toEqual([
[types.default.SET_LABEL_UI_FLAG, { isFetching: true }],
[types.default.SET_LABEL_UI_FLAG, { isFetching: false }],
]);
});
});
describe('#create', () => {
it('sends correct actions if API is success', async () => {
axios.post.mockResolvedValue({ data: labelsList[0] });
await actions.create({ commit }, labelsList[0]);
expect(commit.mock.calls).toEqual([
[types.default.SET_LABEL_UI_FLAG, { isCreating: true }],
[types.default.ADD_LABEL, labelsList[0]],
[types.default.SET_LABEL_UI_FLAG, { isCreating: false }],
]);
});
it('sends correct actions if API is error', async () => {
axios.post.mockRejectedValue({ message: 'Incorrect header' });
await expect(actions.create({ commit })).rejects.toThrow(Error);
expect(commit.mock.calls).toEqual([
[types.default.SET_LABEL_UI_FLAG, { isCreating: true }],
[types.default.SET_LABEL_UI_FLAG, { isCreating: false }],
]);
});
});
describe('#update', () => {
it('sends correct actions if API is success', async () => {
axios.patch.mockResolvedValue({ data: labelsList[0] });
await actions.update({ commit }, labelsList[0]);
expect(commit.mock.calls).toEqual([
[types.default.SET_LABEL_UI_FLAG, { isUpdating: true }],
[types.default.EDIT_LABEL, labelsList[0]],
[types.default.SET_LABEL_UI_FLAG, { isUpdating: false }],
]);
});
it('sends correct actions if API is error', async () => {
axios.patch.mockRejectedValue({ message: 'Incorrect header' });
await expect(actions.update({ commit }, labelsList[0])).rejects.toThrow(
Error
);
expect(commit.mock.calls).toEqual([
[types.default.SET_LABEL_UI_FLAG, { isUpdating: true }],
[types.default.SET_LABEL_UI_FLAG, { isUpdating: false }],
]);
});
});
describe('#delete', () => {
it('sends correct actions if API is success', async () => {
axios.delete.mockResolvedValue({ data: labelsList[0] });
await actions.delete({ commit }, labelsList[0].id);
expect(commit.mock.calls).toEqual([
[types.default.SET_LABEL_UI_FLAG, { isDeleting: true }],
[types.default.DELETE_LABEL, labelsList[0].id],
[types.default.SET_LABEL_UI_FLAG, { isDeleting: false }],
]);
});
it('sends correct actions if API is error', async () => {
axios.delete.mockRejectedValue({ message: 'Incorrect header' });
await expect(
actions.delete({ commit }, labelsList[0].id)
).rejects.toThrow(Error);
expect(commit.mock.calls).toEqual([
[types.default.SET_LABEL_UI_FLAG, { isDeleting: true }],
[types.default.SET_LABEL_UI_FLAG, { isDeleting: false }],
]);
});
});
});

37
app/javascript/dashboard/store/modules/specs/labels/fixtures.js Normal file
View File

@@ -0,0 +1,37 @@
export default [
{
id: 1,
title: 'customer-support',
description: 'Customer support queries',
color: '#0076FF',
show_on_sidebar: true,
},
{
id: 4,
title: 'saas-customer',
description: 'Customers who have account on app.chatwoot.com',
color: '#A8DBCB',
show_on_sidebar: false,
},
{
id: 5,
title: 'hosted-customer',
description: 'Customers who have self-hosted instance',
color: '#F50471',
show_on_sidebar: false,
},
{
id: 6,
title: 'enterprise',
description: 'Customers who are using enterprise',
color: '#A90CFD',
show_on_sidebar: false,
},
{
id: 7,
title: 'billing-enquiry',
description: 'Queries on billing issues',
color: '#74B57A',
show_on_sidebar: false,
},
];

30
app/javascript/dashboard/store/modules/specs/labels/getters.spec.js Normal file
View File

@@ -0,0 +1,30 @@
import { getters } from '../../labels';
import labels from './fixtures';
describe('#getters', () => {
it('getLabels', () => {
const state = { records: labels };
expect(getters.getLabels(state)).toEqual(labels);
});
it('getLabelsOnSidebar', () => {
const state = { records: labels };
expect(getters.getLabelsOnSidebar(state)).toEqual([labels[0]]);
});
it('getUIFlags', () => {
const state = {
uiFlags: {
isFetching: true,
isCreating: false,
isUpdating: false,
isDeleting: false,
},
};
expect(getters.getUIFlags(state)).toEqual({
isFetching: true,
isCreating: false,
isUpdating: false,
isDeleting: false,
});
});
});

39
app/javascript/dashboard/store/modules/specs/labels/mutations.spec.js Normal file
View File

@@ -0,0 +1,39 @@
import types from '../../../mutation-types';
import { mutations } from '../../labels';
import labels from './fixtures';
describe('#mutations', () => {
describe('#SET_LABELS', () => {
it('set label records', () => {
const state = { records: [] };
mutations[types.SET_LABELS](state, labels);
expect(state.records).toEqual(labels);
});
});
describe('#ADD_LABEL', () => {
it('push newly created label to the store', () => {
const state = { records: [labels[0]] };
mutations[types.ADD_LABEL](state, labels[1]);
expect(state.records).toEqual([labels[0], labels[1]]);
});
});
describe('#EDIT_LABEL', () => {
it('update label record', () => {
const state = { records: [labels[0]] };
mutations[types.EDIT_LABEL](state, {
id: 1,
title: 'customer-support-queries',
});
expect(state.records[0].title).toEqual('customer-support-queries');
});
});
describe('#DELETE_LABEL', () => {
it('delete label record', () => {
const state = { records: [labels[0]] };
mutations[types.DELETE_LABEL](state, 1);
expect(state.records).toEqual([]);
});
});
});