feat: Download Agent wise report (#1517)

app/javascript/dashboard/api/reports.js

@@ -17,6 +17,12 @@ class ReportsAPI extends ApiClient {
       params: { since, until },
     });
   }
+
+  getAgentReports(since, until) {
+    return axios.get(`${this.url}/agents`, {
+      params: { since, until },
+    });
+  }
 }
 
 export default new ReportsAPI();

app/javascript/dashboard/api/specs/reports.spec.js

@@ -12,5 +12,6 @@ describe('#Reports API', () => {
     expect(reports).toHaveProperty('delete');
     expect(reports).toHaveProperty('getAccountReports');
     expect(reports).toHaveProperty('getAccountSummary');
+    expect(reports).toHaveProperty('getAgentReports');
   });
 });

app/javascript/dashboard/i18n/locale/en/report.json

@@ -3,6 +3,7 @@
     "HEADER": "Reports",
     "LOADING_CHART": "Loading chart data...",
     "NO_ENOUGH_DATA": "We've not received enough data points to generate report, Please try again later.",
+    "DOWNLOAD_AGENT_REPORTS": "Download agent reports",
     "METRICS": {
       "CONVERSATIONS": {
         "NAME": "Conversations",

app/javascript/dashboard/routes/dashboard/settings/reports/Index.vue

@@ -1,5 +1,12 @@
 <template>
   <div class="column content-box">
+    <button
+      class="button nice icon success button--fixed-right-top"
+      @click="downloadAgentReports"
+    >
+      <i class="icon ion-android-download"></i>
+      {{ $t('REPORT.DOWNLOAD_AGENT_REPORTS') }}
+    </button>
     <div class="small-3 pull-right">
       <multiselect
         v-model="currentDateRangeSelection"
@@ -148,6 +155,13 @@ export default {
         to,
       });
     },
+    downloadAgentReports() {
+      const { from, to } = this;
+      this.$store.dispatch('downloadAgentReports', {
+        from,
+        to,
+      });
+    },
   },
 };
 </script>

app/javascript/dashboard/store/modules/reports.js

@@ -33,7 +33,7 @@ const getters = {
   },
 };
 
-const actions = {
+export const actions = {
   fetchAccountReport({ commit }, reportObj) {
     commit(types.default.TOGGLE_ACCOUNT_REPORT_LOADING, true);
     Report.getAccountReports(
@@ -68,6 +68,17 @@ const actions = {
         commit(types.default.TOGGLE_ACCOUNT_REPORT_LOADING, false);
       });
   },
+  downloadAgentReports(_, reportObj) {
+    return Report.getAgentReports(reportObj.from, reportObj.to)
+      .then(response => {
+        let csvContent = 'data:text/csv;charset=utf-8,' + response.data;
+        var encodedUri = encodeURI(csvContent);
+        window.open(encodedUri);
+      })
+      .catch(error => {
+        console.error(error);
+      });
+  },
 };
 
 const mutations = {

app/javascript/dashboard/store/modules/specs/reports/actions.spec.js

@@ -0,0 +1,21 @@
+import axios from 'axios';
+import { actions } from '../../reports';
+
+global.open = jest.fn();
+global.axios = axios;
+jest.mock('axios');
+
+describe('#actions', () => {
+  describe('#downloadAgentReports', () => {
+    it('open CSV download prompt if API is success', async () => {
+      axios.get.mockResolvedValue({
+        data: `Agent name,Conversations count,Avg first response time (Minutes),Avg resolution time (Minutes)
+        Pranav,36,114,28411`,
+      });
+      await actions.downloadAgentReports(1, 2);
+      expect(global.open).toBeCalledWith(
+        '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'
+      );
+    });
+  });
+});

app/views/api/v2/accounts/reports/agents.csv.erb

@@ -10,3 +10,4 @@
   <% row = [ agent.name, agent_report[:conversations_count], (agent_report[:avg_first_response_time]/60).to_i, (agent_report[:avg_resolution_time]/60).to_i ] %>
   <%= CSV.generate_line row %>
 <% end %>
+<%= CSV.generate_line [I18n.t('reports.period', { since: Date.strptime(params[:since], '%s'), until: Date.strptime(params[:until], '%s') })] %>

config/locales/en.yml

@@ -42,6 +42,9 @@ en:
       email_already_exists: "You have already signed up for an account with %{email}"
       failed: Signup failed
 
+  reports:
+    period: Reporting period %{since} to %{until}
+
   conversations:
     activity:
       status: