chore: Add an option to download CSAT Reports (#4694)

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

@@ -3,9 +3,18 @@
     <report-filter-selector
       agents-filter
       :agents-filter-items-list="agentList"
+      :show-business-hours-switch="false"
       @date-range-change="onDateRangeChange"
       @agents-filter-change="onAgentsFilterChange"
     />
+    <woot-button
+      color-scheme="success"
+      class-names="button--fixed-right-top"
+      icon="arrow-download"
+      @click="downloadReports"
+    >
+      {{ $t('CSAT_REPORTS.DOWNLOAD') }}
+    </woot-button>
     <csat-metrics />
     <csat-table :page-index="pageIndex" @page-change="onPageNumberChange" />
   </div>
@@ -15,6 +24,7 @@ import CsatMetrics from './components/CsatMetrics';
 import CsatTable from './components/CsatTable';
 import ReportFilterSelector from './components/FilterSelector';
 import { mapGetters } from 'vuex';
+import { generateFileName } from '../../../../helper/downloadHelper';
 
 export default {
   name: 'CsatResponses',
@@ -24,7 +34,7 @@ export default {
     ReportFilterSelector,
   },
   data() {
-    return { pageIndex: 1, from: 0, to: 0, user_ids: [] };
+    return { pageIndex: 1, from: 0, to: 0, userIds: [] };
   },
   computed: {
     ...mapGetters({
@@ -39,7 +49,7 @@ export default {
       this.$store.dispatch('csat/getMetrics', {
         from: this.from,
         to: this.to,
-        user_ids: this.user_ids,
+        user_ids: this.userIds,
       });
       this.getResponses();
     },
@@ -48,7 +58,7 @@ export default {
         page: this.pageIndex,
         from: this.from,
         to: this.to,
-        user_ids: this.user_ids,
+        user_ids: this.userIds,
       });
     },
     onPageNumberChange(pageIndex) {
@@ -61,9 +71,18 @@ export default {
       this.getAllData();
     },
     onAgentsFilterChange(agents) {
-      this.user_ids = agents.map(el => el.id);
+      this.userIds = agents.map(el => el.id);
       this.getAllData();
     },
+    downloadReports() {
+      const type = 'csat';
+      this.$store.dispatch('csat/downloadCSATReports', {
+        from: this.from,
+        to: this.to,
+        user_ids: this.userIds,
+        fileName: generateFileName({ type, to: this.to }),
+      });
+    },
   },
 };
 </script>

app/javascript/dashboard/routes/dashboard/settings/reports/components/FilterSelector.vue

@@ -61,7 +61,10 @@
         @input="handleAgentsFilterSelection"
       />
     </div>
-    <div class="small-12 medium-3 business-hours">
+    <div
+      v-if="showBusinessHoursSwitch"
+      class="small-12 medium-3 business-hours"
+    >
       <span class="business-hours-text margin-right-small">
         {{ $t('REPORT.BUSINESS_HOURS') }}
       </span>
@@ -105,6 +108,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    showBusinessHoursSwitch: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {

app/javascript/dashboard/routes/dashboard/settings/reports/components/WootReports.vue

@@ -61,6 +61,7 @@ import format from 'date-fns/format';
 import { GROUP_BY_FILTER, METRIC_CHART } from '../constants';
 import reportMixin from '../../../../../mixins/reportMixin';
 import { formatTime } from '@chatwoot/utils';
+import { generateFileName } from '../../../../../helper/downloadHelper';
 
 const REPORTS_KEYS = {
   CONVERSATIONS: 'conversations_count',
@@ -250,26 +251,17 @@ export default {
       });
     },
     downloadReports() {
-      const { from, to } = this;
-      const fileName = `${this.type}-report-${format(
-        fromUnixTime(to),
-        'dd-MM-yyyy'
-      )}.csv`;
-      switch (this.type) {
-        case 'agent':
-          this.$store.dispatch('downloadAgentReports', { from, to, fileName });
-          break;
-        case 'label':
-          this.$store.dispatch('downloadLabelReports', { from, to, fileName });
-          break;
-        case 'inbox':
-          this.$store.dispatch('downloadInboxReports', { from, to, fileName });
-          break;
-        case 'team':
-          this.$store.dispatch('downloadTeamReports', { from, to, fileName });
-          break;
-        default:
-          break;
+      const { from, to, type } = this;
+      const dispatchMethods = {
+        agent: 'downloadAgentReports',
+        label: 'downloadLabelReports',
+        inbox: 'downloadInboxReports',
+        team: 'downloadTeamReports',
+      };
+      if (dispatchMethods[type]) {
+        const fileName = generateFileName({ type, to });
+        const params = { from, to, fileName };
+        this.$store.dispatch(dispatchMethods[type], params);
       }
     },
     changeSelection(index) {