feat: Adds custom date range component for reports (#2602)

* feat: Adds custom date range for reports

* Review fixes

* Minor fixes

* Review fixes

* Use computed property

Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/dashboard/components/ui/DateRangePicker.vue

@@ -4,6 +4,7 @@
       :range="true"
       :confirm="true"
       :clearable="false"
+      :editable="false"
       :confirm-text="confirmText"
       :placeholder="placeholder"
       :value="value"
@@ -53,5 +54,11 @@ export default {
     box-shadow: none;
     height: 4.6rem;
   }
+
+  .mx-input:disabled,
+  .mx-input[readonly] {
+    background-color: var(--white);
+    cursor: pointer;
+  }
 }
 </style>

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

@@ -50,7 +50,15 @@
       {
         "id": 4,
         "name": "Last year"
+      },
+      {
+        "id": 5,
+        "name": "Custom date range"
+      }
+    ],
+    "CUSTOM_DATE_RANGE": {
+      "CONFIRM": "Apply",
+      "PLACEHOLDER": "Select date range"
     }
-    ]
   }
 }

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

@@ -8,6 +8,7 @@
     >
       {{ $t('REPORT.DOWNLOAD_AGENT_REPORTS') }}
     </woot-button>
+    <div class="range-selector">
       <div class="small-3 pull-right">
         <multiselect
           v-model="currentDateRangeSelection"
@@ -16,13 +17,21 @@
           :placeholder="$t('FORMS.MULTISELECT.SELECT_ONE')"
           selected-label
           :select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
-        :deselect-label="$t('FORMS.MULTISELECT.ENTER_TO_REMOVE')"
+          deselect-label=""
           :options="dateRange"
           :searchable="false"
-        :allow-empty="true"
+          :allow-empty="false"
           @select="changeDateSelection"
         />
       </div>
+      <woot-date-range-picker
+        v-if="isDateRangeSelected"
+        :value="customDateRange"
+        :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
+        :placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
+        @change="onChange"
+      />
+    </div>
     <div class="row">
       <woot-report-stats-card
         v-for="(metric, index) in metrics"
@@ -57,6 +66,7 @@ import subDays from 'date-fns/subDays';
 import getUnixTime from 'date-fns/getUnixTime';
 import fromUnixTime from 'date-fns/fromUnixTime';
 import format from 'date-fns/format';
+import WootDateRangePicker from 'dashboard/components/ui/DateRangePicker.vue';
 
 const REPORTS_KEYS = {
   CONVERSATIONS: 'conversations_count',
@@ -67,12 +77,18 @@ const REPORTS_KEYS = {
   RESOLUTION_COUNT: 'resolutions_count',
 };
 
+const CUSTOM_DATE_RANGE_ID = 5;
+
 export default {
+  components: {
+    WootDateRangePicker,
+  },
   data() {
     return {
       currentSelection: 0,
       currentDateRangeSelection: this.$t('REPORT.DATE_RANGE')[0],
       dateRange: this.$t('REPORT.DATE_RANGE'),
+      customDateRange: [new Date(), new Date()],
     };
   },
   computed: {
@@ -81,9 +97,15 @@ export default {
       accountReport: 'getAccountReports',
     }),
     to() {
-      return getUnixTime(startOfDay(new Date()));
+      if (this.isDateRangeSelected) {
+        return this.fromCustomDate(this.customDateRange[1]);
+      }
+      return this.fromCustomDate(new Date());
     },
     from() {
+      if (this.isDateRangeSelected) {
+        return this.fromCustomDate(this.customDateRange[0]);
+      }
       const dateRange = {
         0: 6,
         1: 29,
@@ -93,7 +115,7 @@ export default {
       };
       const diff = dateRange[this.currentDateRangeSelection.id];
       const fromDate = subDays(new Date(), diff);
-      return getUnixTime(startOfDay(fromDate));
+      return this.fromCustomDate(fromDate);
     },
     collection() {
       if (this.accountReport.isFetching) {
@@ -130,6 +152,9 @@ export default {
         DESC: this.$t(`REPORT.METRICS.${key}.DESC`),
       }));
     },
+    isDateRangeSelected() {
+      return this.currentDateRangeSelection.id === CUSTOM_DATE_RANGE_ID;
+    },
   },
   mounted() {
     this.fetchAllData();
@@ -170,6 +195,18 @@ export default {
         to,
       });
     },
+    fromCustomDate(date) {
+      return getUnixTime(startOfDay(date));
+    },
+    onChange(value) {
+      this.customDateRange = value;
+      this.fetchAllData();
+    },
   },
 };
 </script>
+<style lang="scss" scoped>
+.range-selector {
+  display: flex;
+}
+</style>