Feat: Show notes panel on crm page (#2320)
* Feat: Show notes panel on CRM page Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
This commit is contained in:
committed by
GitHub
parent
75d05e55ae
commit
fe2af370e0
107
app/javascript/dashboard/store/modules/contactNotes.js
Normal file
107
app/javascript/dashboard/store/modules/contactNotes.js
Normal file
@@ -0,0 +1,107 @@
|
||||
import * as types from '../mutation-types';
|
||||
import Vue from 'vue';
|
||||
import ContactNotesAPI from '../../api/contactNotes';
|
||||
|
||||
export const state = {
|
||||
records: {},
|
||||
uiFlags: {
|
||||
isFetching: false,
|
||||
isCreating: false,
|
||||
isDeleting: false,
|
||||
},
|
||||
};
|
||||
|
||||
export const getters = {
|
||||
getAllNotesByContact: _state => contactId => {
|
||||
return _state.records[contactId] || [];
|
||||
},
|
||||
getUIFlags(_state) {
|
||||
return _state.uiFlags;
|
||||
},
|
||||
};
|
||||
|
||||
export const actions = {
|
||||
async get({ commit }, { contactId }) {
|
||||
commit(types.default.SET_CONTACT_NOTES_UI_FLAG, {
|
||||
isFetching: true,
|
||||
});
|
||||
try {
|
||||
const { data } = await ContactNotesAPI.get(contactId);
|
||||
commit(types.default.SET_CONTACT_NOTES, { contactId, data });
|
||||
} catch (error) {
|
||||
throw new Error(error);
|
||||
} finally {
|
||||
commit(types.default.SET_CONTACT_NOTES_UI_FLAG, {
|
||||
isFetching: false,
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
async create({ commit }, { contactId, content }) {
|
||||
commit(types.default.SET_CONTACT_NOTES_UI_FLAG, {
|
||||
isCreating: true,
|
||||
});
|
||||
try {
|
||||
const { data } = await ContactNotesAPI.create({
|
||||
content,
|
||||
contactId,
|
||||
});
|
||||
commit(types.default.ADD_CONTACT_NOTE, {
|
||||
contactId,
|
||||
data,
|
||||
});
|
||||
} catch (error) {
|
||||
throw new Error(error);
|
||||
} finally {
|
||||
commit(types.default.SET_CONTACT_NOTES_UI_FLAG, {
|
||||
isCreating: false,
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
async delete({ commit }, { noteId, contactId }) {
|
||||
commit(types.default.SET_CONTACT_NOTES_UI_FLAG, {
|
||||
isDeleting: true,
|
||||
});
|
||||
try {
|
||||
await ContactNotesAPI.delete(contactId, noteId);
|
||||
commit(types.default.DELETE_CONTACT_NOTE, { contactId, noteId });
|
||||
} catch (error) {
|
||||
throw new Error(error);
|
||||
} finally {
|
||||
commit(types.default.SET_CONTACT_NOTES_UI_FLAG, {
|
||||
isDeleting: false,
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export const mutations = {
|
||||
[types.default.SET_CONTACT_NOTES_UI_FLAG](_state, data) {
|
||||
_state.uiFlags = {
|
||||
..._state.uiFlags,
|
||||
...data,
|
||||
};
|
||||
},
|
||||
|
||||
[types.default.SET_CONTACT_NOTES]($state, { data, contactId }) {
|
||||
Vue.set($state.records, contactId, data);
|
||||
},
|
||||
[types.default.ADD_CONTACT_NOTE]($state, { data, contactId }) {
|
||||
const contactNotes = $state.records[contactId] || [];
|
||||
$state.records[contactId] = [...contactNotes, data];
|
||||
},
|
||||
[types.default.DELETE_CONTACT_NOTE]($state, { noteId, contactId }) {
|
||||
const contactNotes = $state.records[contactId];
|
||||
const withoutDeletedNote = contactNotes.filter(note => note.id !== noteId);
|
||||
$state.records[contactId] = [...withoutDeletedNote];
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state,
|
||||
getters,
|
||||
actions,
|
||||
mutations,
|
||||
};
|
||||
@@ -0,0 +1,78 @@
|
||||
import axios from 'axios';
|
||||
import { actions } from '../../contactNotes';
|
||||
import * as types from '../../../mutation-types';
|
||||
import notesData 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: notesData });
|
||||
await actions.get({ commit }, { contactId: 23 });
|
||||
expect(commit.mock.calls).toEqual([
|
||||
[types.default.SET_CONTACT_NOTES_UI_FLAG, { isFetching: true }],
|
||||
[types.default.SET_CONTACT_NOTES, { contactId: 23, data: notesData }],
|
||||
[types.default.SET_CONTACT_NOTES_UI_FLAG, { isFetching: false }],
|
||||
]);
|
||||
});
|
||||
it('sends correct actions if API is error', async () => {
|
||||
axios.get.mockRejectedValue({ message: 'Incorrect header' });
|
||||
await expect(actions.get({ commit }, { contactId: 23 })).rejects.toThrow(
|
||||
Error
|
||||
);
|
||||
expect(commit.mock.calls).toEqual([
|
||||
[types.default.SET_CONTACT_NOTES_UI_FLAG, { isFetching: true }],
|
||||
[types.default.SET_CONTACT_NOTES_UI_FLAG, { isFetching: false }],
|
||||
]);
|
||||
});
|
||||
});
|
||||
describe('#create', () => {
|
||||
it('sends correct actions if API is success', async () => {
|
||||
axios.post.mockResolvedValue({ data: { id: 2, content: 'hi' } });
|
||||
await actions.create({ commit }, { contactId: 1, content: 'hi' });
|
||||
expect(commit.mock.calls).toEqual([
|
||||
[types.default.SET_CONTACT_NOTES_UI_FLAG, { isCreating: true }],
|
||||
[
|
||||
types.default.ADD_CONTACT_NOTE,
|
||||
{ contactId: 1, data: { id: 2, content: 'hi' } },
|
||||
],
|
||||
[types.default.SET_CONTACT_NOTES_UI_FLAG, { isCreating: false }],
|
||||
]);
|
||||
});
|
||||
it('sends correct actions if API is error', async () => {
|
||||
axios.post.mockRejectedValue({ message: 'Incorrect header' });
|
||||
await expect(
|
||||
actions.create({ commit }, { contactId: 1, content: 'hi' })
|
||||
).rejects.toThrow(Error);
|
||||
expect(commit.mock.calls).toEqual([
|
||||
[types.default.SET_CONTACT_NOTES_UI_FLAG, { isCreating: true }],
|
||||
[types.default.SET_CONTACT_NOTES_UI_FLAG, { isCreating: false }],
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#delete', () => {
|
||||
it('sends correct actions if API is success', async () => {
|
||||
axios.delete.mockResolvedValue({ data: notesData[0] });
|
||||
await actions.delete({ commit }, { contactId: 1, noteId: 2 });
|
||||
expect(commit.mock.calls).toEqual([
|
||||
[types.default.SET_CONTACT_NOTES_UI_FLAG, { isDeleting: true }],
|
||||
[types.default.DELETE_CONTACT_NOTE, { contactId: 1, noteId: 2 }],
|
||||
[types.default.SET_CONTACT_NOTES_UI_FLAG, { isDeleting: false }],
|
||||
]);
|
||||
});
|
||||
it('sends correct actions if API is error', async () => {
|
||||
axios.delete.mockRejectedValue({ message: 'Incorrect header' });
|
||||
await expect(
|
||||
actions.delete({ commit }, { contactId: 1, noteId: 2 })
|
||||
).rejects.toThrow(Error);
|
||||
expect(commit.mock.calls).toEqual([
|
||||
[types.default.SET_CONTACT_NOTES_UI_FLAG, { isDeleting: true }],
|
||||
[types.default.SET_CONTACT_NOTES_UI_FLAG, { isDeleting: false }],
|
||||
]);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,21 @@
|
||||
export default [
|
||||
{
|
||||
id: 12345,
|
||||
content: 'It is a long established fact that a reader will be distracted.',
|
||||
user: {
|
||||
name: 'John Doe',
|
||||
thumbnail: 'https://randomuser.me/api/portraits/men/69.jpg',
|
||||
},
|
||||
created_at: 1618046084,
|
||||
},
|
||||
{
|
||||
id: 12346,
|
||||
content:
|
||||
'It is simply dummy text of the printing and typesetting industry.',
|
||||
user: {
|
||||
name: 'Pearl Cruz',
|
||||
thumbnail: 'https://randomuser.me/api/portraits/women/29.jpg',
|
||||
},
|
||||
created_at: 1616046076,
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,24 @@
|
||||
import { getters } from '../../contactNotes';
|
||||
import notesData from './fixtures';
|
||||
|
||||
describe('#getters', () => {
|
||||
it('getAllNotesByContact', () => {
|
||||
const state = { records: { 1: notesData } };
|
||||
expect(getters.getAllNotesByContact(state)(1)).toEqual(notesData);
|
||||
});
|
||||
|
||||
it('getUIFlags', () => {
|
||||
const state = {
|
||||
uiFlags: {
|
||||
isFetching: true,
|
||||
isCreating: false,
|
||||
isDeleting: false,
|
||||
},
|
||||
};
|
||||
expect(getters.getUIFlags(state)).toEqual({
|
||||
isFetching: true,
|
||||
isCreating: false,
|
||||
isDeleting: false,
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,37 @@
|
||||
import types from '../../../mutation-types';
|
||||
import { mutations } from '../../contactNotes';
|
||||
import allNotes from './fixtures';
|
||||
|
||||
describe('#mutations', () => {
|
||||
describe('#SET_CONTACT_NOTES', () => {
|
||||
it('set allNotes records', () => {
|
||||
const state = { records: {} };
|
||||
mutations[types.SET_CONTACT_NOTES](state, {
|
||||
data: allNotes,
|
||||
contactId: 1,
|
||||
});
|
||||
expect(state.records).toEqual({ 1: allNotes });
|
||||
});
|
||||
});
|
||||
|
||||
describe('#ADD_CONTACT_NOTE', () => {
|
||||
it('push newly created note to the store', () => {
|
||||
const state = { records: { 1: [allNotes[0]] } };
|
||||
mutations[types.ADD_CONTACT_NOTE](state, {
|
||||
data: allNotes[1],
|
||||
contactId: 1,
|
||||
});
|
||||
expect(state.records[1]).toEqual([allNotes[0], allNotes[1]]);
|
||||
});
|
||||
});
|
||||
describe('#DELETE_CONTACT_NOTE', () => {
|
||||
it('Delete existing note from records', () => {
|
||||
const state = { records: { 1: [{ id: 2 }] } };
|
||||
mutations[types.DELETE_CONTACT_NOTE](state, {
|
||||
noteId: 2,
|
||||
contactId: 1,
|
||||
});
|
||||
expect(state.records[1]).toEqual([]);
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user