feat - Add filter for reports by agent, label and inboxes (#3084)

* Adds filter for agents, labels and inboxes

* Added Inboxes Reports Feature

* Fixed populating of filter dropdown issue

* If applied, fixes code climate style-lint warnings

* Fixes codeclimate warnings

* if applied, Refactors sidebar file to fix codclimate warnings

* if applied, fixes the download reports button for filtered report-data

* If applied, replaces native img tag with thumbnail component

* If applied, replaces hardcoded color string with variable

* If applied, adds a11y labels to multiselect dropdowns

* If applied, Renames reports methods to generic names

* If applied, Adds test cases for Labels and Inboxes

* If applied, write a test spec for fileDownload helper

* if applied, Moves fileDownload method to a utils folder

* If applied, Fixes the report file name type

* Test Spec for Reports Store module

* Fix specs - add restoreAllMocks

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>
This commit is contained in:
Fayaz Ahmed
2021-09-30 13:13:45 +05:30
committed by GitHub
co-authored by Muhsin Keloth Pranav Raj S
parent 57abdc4d5f
commit a1563917ba
21 changed files with 1215 additions and 283 deletions
@@ -36,10 +36,12 @@ const getters = {
export const actions = {
fetchAccountReport({ commit }, reportObj) {
commit(types.default.TOGGLE_ACCOUNT_REPORT_LOADING, true);
Report.getAccountReports(
Report.getReports(
reportObj.metric,
reportObj.from,
reportObj.to
reportObj.to,
reportObj.type,
reportObj.id
).then(accountReport => {
let { data } = accountReport;
data = data.filter(
@@ -60,7 +62,12 @@ export const actions = {
});
},
fetchAccountSummary({ commit }, reportObj) {
Report.getAccountSummary(reportObj.from, reportObj.to)
Report.getSummary(
reportObj.from,
reportObj.to,
reportObj.type,
reportObj.id
)
.then(accountSummary => {
commit(types.default.SET_ACCOUNT_SUMMARY, accountSummary.data);
})
@@ -85,6 +92,40 @@ export const actions = {
console.error(error);
});
},
downloadLabelReports(_, reportObj) {
return Report.getLabelReports(reportObj.from, reportObj.to)
.then(response => {
let csvContent = 'data:text/csv;charset=utf-8,' + response.data;
var encodedUri = encodeURI(csvContent);
var downloadLink = document.createElement('a');
downloadLink.href = encodedUri;
downloadLink.download = reportObj.fileName;
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
})
.catch(error => {
console.error(error);
});
},
downloadInboxReports(_, reportObj) {
return Report.getInboxReports(reportObj.from, reportObj.to)
.then(response => {
let csvContent = 'data:text/csv;charset=utf-8,' + response.data;
var encodedUri = encodeURI(csvContent);
var downloadLink = document.createElement('a');
downloadLink.href = encodedUri;
downloadLink.download = reportObj.fileName;
document.body.appendChild(downloadLink);
downloadLink.click();
// document.body.removeChild(downloadLink);
})
.catch(error => {
console.error(error);
});
},
};
const mutations = {
@@ -5,7 +5,17 @@ global.open = jest.fn();
global.axios = axios;
jest.mock('axios');
const createElementSpy = () => {
const element = document.createElement('a');
jest.spyOn(document, 'createElement').mockImplementation(() => element);
return element;
};
describe('#actions', () => {
afterEach(() => {
jest.restoreAllMocks();
});
describe('#downloadAgentReports', () => {
it('open CSV download prompt if API is success', async () => {
axios.get.mockResolvedValue({
@@ -17,15 +27,55 @@ describe('#actions', () => {
to: 1630504922510,
fileName: 'agent-report-01-09-2021.csv',
};
const mockDownloadElement = document.createElement('a');
jest
.spyOn(document, 'createElement')
.mockImplementation(() => mockDownloadElement);
const mockAgentDownloadElement = createElementSpy();
await actions.downloadAgentReports(1, param);
expect(mockDownloadElement.href).toEqual(
expect(mockAgentDownloadElement.href).toEqual(
'data:text/csv;charset=utf-8,Agent%20name,Conversations%20count,Avg%20first%20response%20time%20(Minutes),Avg%20resolution%20time%20(Minutes)%0A%20%20%20%20%20%20%20%20Pranav,36,114,28411'
);
expect(mockDownloadElement.download).toEqual(param.fileName);
expect(mockAgentDownloadElement.download).toEqual(param.fileName);
});
});
describe('#downloadLabelReports', () => {
it('open CSV download prompt if API is success', async () => {
axios.get.mockResolvedValue({
data: `Label Title,Conversations count,Avg first response time (Minutes),Avg resolution time (Minutes)
website,0,0,0`,
});
const param = {
from: 1632335400,
to: 1632853800,
type: 'label',
fileName: 'label-report-01-09-2021.csv',
};
const mockLabelDownloadElement = createElementSpy();
await actions.downloadLabelReports(1, param);
expect(mockLabelDownloadElement.href).toEqual(
'data:text/csv;charset=utf-8,Label%20Title,Conversations%20count,Avg%20first%20response%20time%20(Minutes),Avg%20resolution%20time%20(Minutes)%0A%20%20%20%20%20%20%20%20website,0,0,0'
);
expect(mockLabelDownloadElement.download).toEqual(param.fileName);
});
});
describe('#downloadInboxReports', () => {
it('open CSV download prompt if API is success', async () => {
axios.get.mockResolvedValue({
data: `Inbox name,Conversations count,Avg first response time (Minutes),Avg resolution time (Minutes)
Fayaz,2,127,0
EMa,0,0,0
Twillio WA,0,0,0`,
});
const param = {
from: 1631039400,
to: 1635013800,
fileName: 'inbox-report-24-10-2021.csv',
};
const mockInboxDownloadElement = createElementSpy();
await actions.downloadInboxReports(1, param);
expect(mockInboxDownloadElement.href).toEqual(
'data:text/csv;charset=utf-8,Inbox%20name,Conversations%20count,Avg%20first%20response%20time%20(Minutes),Avg%20resolution%20time%20(Minutes)%0A%20%20%20%20%20%20%20%20Fayaz,2,127,0%0A%20%20%20%20%20%20%20%20EMa,0,0,0%0A%20%20%20%20%20%20%20%20Twillio%20WA,0,0,0'
);
expect(mockInboxDownloadElement.download).toEqual(param.fileName);
});
});
});