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

feat: Add Contacts page (#1335)

Browse Source 
Co-authored-by: Sojan <sojan@pepalo.com>
Co-authored-by: Pranav Raj Sreepuram <pranavrajs@gmail.com>
This commit is contained in:
Nithin David Thomas
2020-11-10 15:25:26 +05:30
committed by GitHub
parent 2babfd6148
commit f214c9c47c
41 changed files with 1163 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,126 +0,0 @@
import { DuplicateContactException } from 'shared/helpers/CustomErrors';
import * as types from '../mutation-types';
import ContactAPI from '../../api/contacts';
import Vue from 'vue';
const state = {
records: {},
uiFlags: {
isFetching: false,
isFetchingItem: false,
isUpdating: false,
},
};
export const getters = {
getContacts($state) {
return Object.values($state.records);
},
getUIFlags($state) {
return $state.uiFlags;
},
getContact: $state => id => {
const contact = $state.records[id];
return contact || {};
},
};
export const actions = {
get: async ({ commit }) => {
commit(types.default.SET_CONTACT_UI_FLAG, { isFetching: true });
try {
const response = await ContactAPI.get();
commit(types.default.SET_CONTACTS, response.data.payload);
commit(types.default.SET_CONTACT_UI_FLAG, { isFetching: false });
} catch (error) {
commit(types.default.SET_CONTACT_UI_FLAG, { isFetching: false });
}
},
show: async ({ commit }, { id }) => {
commit(types.default.SET_CONTACT_UI_FLAG, { isFetchingItem: true });
try {
const response = await ContactAPI.show(id);
commit(types.default.SET_CONTACT_ITEM, response.data.payload);
commit(types.default.SET_CONTACT_UI_FLAG, { isFetchingItem: false });
} catch (error) {
commit(types.default.SET_CONTACT_UI_FLAG, { isFetchingItem: false });
}
},
update: async ({ commit }, { id, ...updateObj }) => {
commit(types.default.SET_CONTACT_UI_FLAG, { isUpdating: true });
try {
const response = await ContactAPI.update(id, updateObj);
commit(types.default.EDIT_CONTACT, response.data.payload);
commit(types.default.SET_CONTACT_UI_FLAG, { isUpdating: false });
} catch (error) {
commit(types.default.SET_CONTACT_UI_FLAG, { isUpdating: false });
if (error.response?.data?.contact) {
throw new DuplicateContactException(error.response.data.contact);
} else {
throw new Error(error);
}
}
},
updatePresence: ({ commit }, data) => {
commit(types.default.UPDATE_CONTACTS_PRESENCE, data);
},
setContact({ commit }, data) {
commit(types.default.SET_CONTACT_ITEM, data);
},
};
export const mutations = {
[types.default.SET_CONTACT_UI_FLAG]($state, data) {
$state.uiFlags = {
...$state.uiFlags,
...data,
};
},
[types.default.SET_CONTACTS]: ($state, data) => {
data.forEach(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, {
...($state.records[data.id] || {}),
...data,
});
},
[types.default.EDIT_CONTACT]: ($state, data) => {
Vue.set($state.records, data.id, data);
},
[types.default.UPDATE_CONTACTS_PRESENCE]: ($state, data) => {
Object.values($state.records).forEach(element => {
const availabilityStatus = data[element.id];
if (availabilityStatus) {
Vue.set(
$state.records[element.id],
'availability_status',
availabilityStatus
);
} else {
Vue.delete($state.records[element.id], 'availability_status');
}
});
},
};
export default {
namespaced: true,
state,
getters,
actions,
mutations,
};

74
app/javascript/dashboard/store/modules/contacts/actions.js Normal file
View File

@@ -0,0 +1,74 @@
import { DuplicateContactException } from 'shared/helpers/CustomErrors';
import types from '../../mutation-types';
import ContactAPI from '../../../api/contacts';
export const actions = {
search: async ({ commit }, { search, page }) => {
commit(types.SET_CONTACT_UI_FLAG, { isFetching: true });
try {
const {
data: { payload, meta },
} = await ContactAPI.search(search, page);
commit(types.CLEAR_CONTACTS);
commit(types.SET_CONTACTS, payload);
commit(types.SET_CONTACT_META, meta);
commit(types.SET_CONTACT_UI_FLAG, { isFetching: false });
} catch (error) {
commit(types.SET_CONTACT_UI_FLAG, { isFetching: false });
}
},
get: async ({ commit }, { page = 1 } = {}) => {
commit(types.SET_CONTACT_UI_FLAG, { isFetching: true });
try {
const {
data: { payload, meta },
} = await ContactAPI.get(page);
commit(types.CLEAR_CONTACTS);
commit(types.SET_CONTACTS, payload);
commit(types.SET_CONTACT_META, meta);
commit(types.SET_CONTACT_UI_FLAG, { isFetching: false });
} catch (error) {
commit(types.SET_CONTACT_UI_FLAG, { isFetching: false });
}
},
show: async ({ commit }, { id }) => {
commit(types.SET_CONTACT_UI_FLAG, { isFetchingItem: true });
try {
const response = await ContactAPI.show(id);
commit(types.SET_CONTACT_ITEM, response.data.payload);
commit(types.SET_CONTACT_UI_FLAG, {
isFetchingItem: false,
});
} catch (error) {
commit(types.SET_CONTACT_UI_FLAG, {
isFetchingItem: false,
});
}
},
update: async ({ commit }, { id, ...updateObj }) => {
commit(types.SET_CONTACT_UI_FLAG, { isUpdating: true });
try {
const response = await ContactAPI.update(id, updateObj);
commit(types.EDIT_CONTACT, response.data.payload);
commit(types.SET_CONTACT_UI_FLAG, { isUpdating: false });
} catch (error) {
commit(types.SET_CONTACT_UI_FLAG, { isUpdating: false });
if (error.response?.data?.contact) {
throw new DuplicateContactException(error.response.data.contact);
} else {
throw new Error(error);
}
}
},
updatePresence: ({ commit }, data) => {
commit(types.UPDATE_CONTACTS_PRESENCE, data);
},
setContact({ commit }, data) {
commit(types.SET_CONTACT_ITEM, data);
},
};

15
app/javascript/dashboard/store/modules/contacts/getters.js Normal file
View File

@@ -0,0 +1,15 @@
export const getters = {
getContacts($state) {
return Object.values($state.records);
},
getUIFlags($state) {
return $state.uiFlags;
},
getContact: $state => id => {
const contact = $state.records[id];
return contact || {};
},
getMeta: $state => {
return $state.meta;
},
};

24
app/javascript/dashboard/store/modules/contacts/index.js Normal file
View File

@@ -0,0 +1,24 @@
import { getters } from './getters';
import { actions } from './actions';
import { mutations } from './mutations';
const state = {
meta: {
count: 0,
currentPage: 1,
},
records: {},
uiFlags: {
isFetching: false,
isFetchingItem: false,
isUpdating: false,
},
};
export default {
namespaced: true,
state,
getters,
actions,
mutations,
};

56
app/javascript/dashboard/store/modules/contacts/mutations.js Normal file
View File

@@ -0,0 +1,56 @@
import Vue from 'vue';
import types from '../../mutation-types';
export const mutations = {
[types.SET_CONTACT_UI_FLAG]($state, data) {
$state.uiFlags = {
...$state.uiFlags,
...data,
};
},
[types.CLEAR_CONTACTS]: $state => {
Vue.set($state, 'records', {});
},
[types.SET_CONTACT_META]: ($state, data) => {
const { count, current_page: currentPage } = data;
Vue.set($state.meta, 'count', count);
Vue.set($state.meta, 'currentPage', currentPage);
},
[types.SET_CONTACTS]: ($state, data) => {
data.forEach(contact => {
Vue.set($state.records, contact.id, {
...($state.records[contact.id] || {}),
...contact,
});
});
},
[types.SET_CONTACT_ITEM]: ($state, data) => {
Vue.set($state.records, data.id, {
...($state.records[data.id] || {}),
...data,
});
},
[types.EDIT_CONTACT]: ($state, data) => {
Vue.set($state.records, data.id, data);
},
[types.UPDATE_CONTACTS_PRESENCE]: ($state, data) => {
Object.values($state.records).forEach(element => {
const availabilityStatus = data[element.id];
if (availabilityStatus) {
Vue.set(
$state.records[element.id],
'availability_status',
availabilityStatus
);
} else {
Vue.delete($state.records[element.id], 'availability_status');
}
});
},
};

50
app/javascript/dashboard/store/modules/specs/contacts/actions.spec.js
View File

@@ -1,9 +1,11 @@
import axios from 'axios';
import { actions } from '../../contacts';
import * as types from '../../../mutation-types';
import Contacts from '../../contacts';
import types from '../../../mutation-types';
import contactList from './fixtures';
import { DuplicateContactException } from '../../../../../shared/helpers/CustomErrors';
const { actions } = Contacts;
const commit = jest.fn();
global.axios = axios;
jest.mock('axios');
@@ -11,20 +13,24 @@ jest.mock('axios');
describe('#actions', () => {
describe('#get', () => {
it('sends correct mutations if API is success', async () => {
axios.get.mockResolvedValue({ data: { payload: contactList } });
axios.get.mockResolvedValue({
data: { payload: contactList, meta: { count: 100, current_page: 1 } },
});
await actions.get({ commit });
expect(commit.mock.calls).toEqual([
[types.default.SET_CONTACT_UI_FLAG, { isFetching: true }],
[types.default.SET_CONTACTS, contactList],
[types.default.SET_CONTACT_UI_FLAG, { isFetching: false }],
[types.SET_CONTACT_UI_FLAG, { isFetching: true }],
[types.CLEAR_CONTACTS],
[types.SET_CONTACTS, contactList],
[types.SET_CONTACT_META, { count: 100, current_page: 1 }],
[types.SET_CONTACT_UI_FLAG, { isFetching: false }],
]);
});
it('sends correct mutations if API is error', async () => {
axios.get.mockRejectedValue({ message: 'Incorrect header' });
await actions.get({ commit });
expect(commit.mock.calls).toEqual([
[types.default.SET_CONTACT_UI_FLAG, { isFetching: true }],
[types.default.SET_CONTACT_UI_FLAG, { isFetching: false }],
[types.SET_CONTACT_UI_FLAG, { isFetching: true }],
[types.SET_CONTACT_UI_FLAG, { isFetching: false }],
]);
});
});
@@ -34,17 +40,17 @@ describe('#actions', () => {
axios.get.mockResolvedValue({ data: { payload: contactList[0] } });
await actions.show({ commit }, { id: contactList[0].id });
expect(commit.mock.calls).toEqual([
[types.default.SET_CONTACT_UI_FLAG, { isFetchingItem: true }],
[types.default.SET_CONTACT_ITEM, contactList[0]],
[types.default.SET_CONTACT_UI_FLAG, { isFetchingItem: false }],
[types.SET_CONTACT_UI_FLAG, { isFetchingItem: true }],
[types.SET_CONTACT_ITEM, contactList[0]],
[types.SET_CONTACT_UI_FLAG, { isFetchingItem: false }],
]);
});
it('sends correct mutations if API is error', async () => {
axios.get.mockRejectedValue({ message: 'Incorrect header' });
await actions.show({ commit }, { id: contactList[0].id });
expect(commit.mock.calls).toEqual([
[types.default.SET_CONTACT_UI_FLAG, { isFetchingItem: true }],
[types.default.SET_CONTACT_UI_FLAG, { isFetchingItem: false }],
[types.SET_CONTACT_UI_FLAG, { isFetchingItem: true }],
[types.SET_CONTACT_UI_FLAG, { isFetchingItem: false }],
]);
});
});
@@ -54,9 +60,9 @@ describe('#actions', () => {
axios.patch.mockResolvedValue({ data: { payload: contactList[0] } });
await actions.update({ commit }, contactList[0]);
expect(commit.mock.calls).toEqual([
[types.default.SET_CONTACT_UI_FLAG, { isUpdating: true }],
[types.default.EDIT_CONTACT, contactList[0]],
[types.default.SET_CONTACT_UI_FLAG, { isUpdating: false }],
[types.SET_CONTACT_UI_FLAG, { isUpdating: true }],
[types.EDIT_CONTACT, contactList[0]],
[types.SET_CONTACT_UI_FLAG, { isUpdating: false }],
]);
});
it('sends correct actions if API is error', async () => {
@@ -65,8 +71,8 @@ describe('#actions', () => {
Error
);
expect(commit.mock.calls).toEqual([
[types.default.SET_CONTACT_UI_FLAG, { isUpdating: true }],
[types.default.SET_CONTACT_UI_FLAG, { isUpdating: false }],
[types.SET_CONTACT_UI_FLAG, { isUpdating: true }],
[types.SET_CONTACT_UI_FLAG, { isUpdating: false }],
]);
});
@@ -83,8 +89,8 @@ describe('#actions', () => {
DuplicateContactException
);
expect(commit.mock.calls).toEqual([
[types.default.SET_CONTACT_UI_FLAG, { isUpdating: true }],
[types.default.SET_CONTACT_UI_FLAG, { isUpdating: false }],
[types.SET_CONTACT_UI_FLAG, { isUpdating: true }],
[types.SET_CONTACT_UI_FLAG, { isUpdating: false }],
]);
});
});
@@ -93,9 +99,7 @@ describe('#actions', () => {
it('returns correct mutations', () => {
const data = { id: 1, name: 'john doe', availability_status: 'online' };
actions.setContact({ commit }, data);
expect(commit.mock.calls).toEqual([
[types.default.SET_CONTACT_ITEM, data],
]);
expect(commit.mock.calls).toEqual([[types.SET_CONTACT_ITEM, data]]);
});
});
});

4
app/javascript/dashboard/store/modules/specs/contacts/getters.spec.js
View File

@@ -1,6 +1,8 @@
import { getters } from '../../contacts';
import Contacts from '../../contacts';
import contactList from './fixtures';
const { getters } = Contacts;
describe('#getters', () => {
it('getContacts', () => {
const state = {

11
app/javascript/dashboard/store/modules/specs/contacts/mutations.spec.js
View File

@@ -1,11 +1,12 @@
import * as types from '../../../mutation-types';
import { mutations } from '../../contacts';
import types from '../../../mutation-types';
import Contacts from '../../contacts';
const { mutations } = Contacts;
describe('#mutations', () => {
describe('#SET_CONTACTS', () => {
it('set contact records', () => {
const state = { records: {} };
mutations[types.default.SET_CONTACTS](state, [
mutations[types.SET_CONTACTS](state, [
{ id: 1, name: 'contact1', email: 'contact1@chatwoot.com' },
]);
expect(state.records).toEqual({
@@ -25,7 +26,7 @@ describe('#mutations', () => {
1: { id: 1, name: 'contact1', email: 'contact1@chatwoot.com' },
},
};
mutations[types.default.SET_CONTACT_ITEM](state, {
mutations[types.SET_CONTACT_ITEM](state, {
id: 2,
name: 'contact2',
email: 'contact2@chatwoot.com',
@@ -44,7 +45,7 @@ describe('#mutations', () => {
1: { id: 1, name: 'contact1', email: 'contact1@chatwoot.com' },
},
};
mutations[types.default.EDIT_CONTACT](state, {
mutations[types.EDIT_CONTACT](state, {
id: 1,
name: 'contact2',
email: 'contact2@chatwoot.com',

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

@@ -88,9 +88,11 @@ export default {
DELETE_WEBHOOK: 'DELETE_WEBHOOK',
// Contacts
SET_CONTACT_META: 'SET_CONTACT_META',
SET_CONTACT_UI_FLAG: 'SET_CONTACT_UI_FLAG',
SET_CONTACT_ITEM: 'SET_CONTACT_ITEM',
SET_CONTACTS: 'SET_CONTACTS',
CLEAR_CONTACTS: 'CLEAR_CONTACTS',
EDIT_CONTACT: 'EDIT_CONTACT',
UPDATE_CONTACTS_PRESENCE: 'UPDATE_CONTACTS_PRESENCE',