feat: Custom date picker (#9247)

* feat: Custom date picker

* chore: Calender footer

* chore: Minor fix

* chore: Reset date picker

* chore: Minor fix

* feat: Toggle button

* chore: Clean up

* chore: Use font inter

* chore: Cleanup and fix bugs

* fix: custom date range reset the calendar

* chore: fix logic bug

* feat: Add manual date range

* fix: styles in rtl

* chore: Helper specs

* chore: Clean up

* chore: Review fixes

* chore: remove magic strings

* chore: Add comments

* chore: Review fixes

* chore: Clean up

* chore: remove magic strings

* fix: Use outline instead of border

* chore: Minor style fix

* chore: disable pointer events for the disabled dates

* chore: Fix code climate

---------

Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>

app/javascript/dashboard/routes/dashboard/settings/reports/components/SLA/SLAReportFilters.vue

@@ -1,24 +1,10 @@
 <template>
   <div class="flex flex-col flex-wrap w-full gap-3 md:flex-row">
-    <reports-filters-date-range
-      class="sm:min-w-[200px] tiny h-8"
-      @on-range-change="onDateRangeChange"
-    />
-    <woot-date-range-picker
-      v-if="isDateRangeSelected"
-      show-range
-      class="no-margin auto-width sm:min-w-[240px] small h-8"
-      :value="customDateRange"
-      :confirm-text="$t('REPORT.CUSTOM_DATE_RANGE.CONFIRM')"
-      :placeholder="$t('REPORT.CUSTOM_DATE_RANGE.PLACEHOLDER')"
-      @change="onCustomDateRangeChange"
-    />
+    <woot-date-picker @dateRangeChanged="onDateRangeChange" />
     <SLA-filter @filter-change="emitFilterChange" />
   </div>
 </template>
 <script>
-import WootDateRangePicker from 'dashboard/components/ui/DateRangePicker.vue';
-import ReportsFiltersDateRange from '../Filters/DateRange.vue';
 import SLAFilter from '../SLA/SLAFilter.vue';
 import subDays from 'date-fns/subDays';
 import { DATE_RANGE_OPTIONS } from '../../constants';
@@ -26,8 +12,6 @@ import { getUnixStartOfDay, getUnixEndOfDay } from 'helpers/DateHelper';
 
 export default {
   components: {
-    WootDateRangePicker,
-    ReportsFiltersDateRange,
     SLAFilter,
   },
 
@@ -39,25 +23,11 @@ export default {
     };
   },
   computed: {
-    isDateRangeSelected() {
-      return (
-        this.selectedDateRange.id === DATE_RANGE_OPTIONS.CUSTOM_DATE_RANGE.id
-      );
-    },
     to() {
-      if (this.isDateRangeSelected) {
-        return getUnixEndOfDay(this.customDateRange[1]);
-      }
-      return getUnixEndOfDay(new Date());
+      return getUnixEndOfDay(this.customDateRange[1]);
     },
     from() {
-      if (this.isDateRangeSelected) {
-        return getUnixStartOfDay(this.customDateRange[0]);
-      }
-
-      const { offset } = this.selectedDateRange;
-      const fromDate = subDays(new Date(), offset);
-      return getUnixStartOfDay(fromDate);
+      return getUnixStartOfDay(this.customDateRange[0]);
     },
   },
   watch: {
@@ -66,9 +36,20 @@ export default {
     },
   },
   mounted() {
-    this.emitChange();
+    this.setInitialRange();
   },
   methods: {
+    setInitialRange() {
+      const { offset } = this.selectedDateRange;
+      const fromDate = subDays(new Date(), offset);
+      const from = getUnixStartOfDay(fromDate);
+      const to = getUnixEndOfDay(new Date());
+      this.$emit('filter-change', {
+        from,
+        to,
+        ...this.selectedGroupByFilter,
+      });
+    },
     emitChange() {
       const { from, to } = this;
       this.$emit('filter-change', {
@@ -81,11 +62,7 @@ export default {
       this.selectedGroupByFilter = params;
       this.emitChange();
     },
-    onDateRangeChange(selectedRange) {
-      this.selectedDateRange = selectedRange;
-      this.emitChange();
-    },
-    onCustomDateRangeChange(value) {
+    onDateRangeChange(value) {
       this.customDateRange = value;
       this.emitChange();
     },