Add custom date ranges to custom reports

frontend/src/assets/scss/form/date-picker.scss

@@ -1,3 +1,12 @@
+.el-range-editor.is-active {
+  --el-input-focus-border: #4b5563; // Gray-600
+  --el-input-focus-border-color: #4b5563; // Gray-600
+  --el-select-input-focus-border-color: #4b5563; // Gray-600
+  --el-input-text-color: #111827; //Gray-900
+  --el-text-color-placeholder: #9ca3af; // Gray-400
+  --el-input-hover-border-color: #9ca3af; // Gray-400
+}
+
 .date-picker-popper {
   &.el-popper.is-light {
     @apply rounded-lg border-none;

frontend/src/modules/report/components/report-grid-layout.vue

@@ -9,6 +9,7 @@
       v-if="widgetDrawer.visible === true"
       v-model:widget="widgetDrawer.model"
       v-model:drawer="widgetDrawer.visible"
+      :action="widgetDrawer.action"
       @submit="handleWidgetFormSubmit"
     />
     <div

frontend/src/modules/widget/components/cube/_query_builder/DateRangeSelect.vue

@@ -7,12 +7,7 @@
       <span class="text-brand-500 ml-0.5">*</span></label>
     <el-select
       id="formDateRange"
-      :model-value="
-        timeDimensions[0]
-          && dateRangeItems.find(
-            (o) => o.value === timeDimensions[0].dateRange,
-          ).label
-      "
+      :model-value="selectedDateRange"
       filterable
       value-key="label"
       class="w-full"
@@ -27,10 +22,30 @@
       />
     </el-select>
   </div>
+
+  <div v-if="selectedDateRange === 'Custom'" class="w-full mt-2">
+    <div class="custom-date-range-field">
+      <el-date-picker
+        v-model="selectedCustomDateRange"
+        class="custom-date-picker !h-10"
+        popper-class="date-picker-popper custom"
+        type="daterange"
+        range-separator="To"
+        start-placeholder="Start date"
+        end-placeholder="End date"
+        value-format="YYYY-MM-DD"
+        :clearable="false"
+        :teleported="false"
+        :disabled-date="disabledDate"
+        @change="onCustomDateRangeChange"
+      />
+    </div>
+  </div>
 </template>
 
 <script>
 import { onSelectMouseLeave } from '@/utils/select';
+import moment from 'moment';
 
 export default {
   name: 'DateRangeSelect',
@@ -43,7 +58,16 @@ export default {
   emits: ['change'],
   data() {
     return {
+      defaultCustomDateRange: [
+        moment().utc().subtract(30, 'day').format('YYYY-MM-DD'),
+        moment().utc().format('YYYY-MM-DD')],
+      selectedDateRange: null,
+      selectedCustomDateRange: null,
       dateRangeItems: [
+        {
+          value: 'Custom',
+          label: 'Custom',
+        },
         {
           value: 'Today',
           label: 'Today',
@@ -83,13 +107,70 @@ export default {
       ],
     };
   },
+  watch: {
+    timeDimensions: {
+      immediate: true,
+      deep: true,
+      handler(newVal) {
+        if (!newVal[0]) {
+          this.selectedDateRange = null;
+          return;
+        }
+
+        if (Array.isArray(newVal[0].dateRange)) {
+          this.selectedDateRange = 'Custom';
+          this.selectedCustomDateRange = newVal[0].dateRange;
+          return;
+        }
+
+        const dateRange = this.dateRangeItems.find(
+          (o) => o.value === newVal[0].dateRange,
+        );
+
+        this.selectedDateRange = dateRange?.label || null;
+      },
+    },
+  },
   methods: {
     changeHandler(item) {
+      let dateRange = item;
+      let { granularity = 'week' } = this.timeDimensions[0];
+
+      // Update custom range to default value
+      // Update granularity default to day
+      // Reset only if previous value wasn't Custom
+      if (item === 'Custom' && !Array.isArray(this.timeDimensions[0].dateRange)) {
+        dateRange = this.defaultCustomDateRange;
+        granularity = 'day';
+      }
+
+      // Emit change to Cube
+      this.$emit('change', [
+        {
+          dimension: this.timeDimensions[0].dimension.name,
+          granularity,
+          ...(dateRange ? { dateRange } : null),
+        },
+      ]);
+    },
+
+    // Disable dates in custom date range picker
+    // Disable dates in the future and dates before 2000
+    disabledDate(time) {
+      if (moment(time).year() < 2000 || moment(time) > moment()) {
+        return true;
+      }
+
+      return false;
+    },
+
+    // Emit change to Cube
+    onCustomDateRangeChange(value) {
       this.$emit('change', [
         {
           dimension: this.timeDimensions[0].dimension.name,
           granularity: this.timeDimensions[0].granularity,
-          ...(item ? { dateRange: item } : null),
+          dateRange: value,
         },
       ]);
     },
@@ -98,3 +179,23 @@ export default {
   },
 };
 </script>
+
+<style lang="scss">
+.custom-date-range-field {
+  .el-input__wrapper,
+  .el-input__wrapper.is-focus,
+  .el-input__wrapper:hover {
+    @apply rounded-md w-full #{!important};
+
+  }
+}
+
+.date-picker-popper.custom {
+  .el-date-table td.today .el-date-table-cell .el-date-table-cell__text {
+    @apply text-white;
+  }
+
+  .el-picker-panel {
+    width: 552px;
+  }}
+</style>

frontend/src/modules/widget/components/cube/widget-cube-builder.vue

@@ -1,7 +1,7 @@
 <template>
   <app-drawer
     v-model="visible"
-    title="Edit widget"
+    :title="action === 'edit' ? 'Edit widget' : 'Add widget'"
     size="600px"
     custom-class="widget-cube-builder"
   >
@@ -294,6 +294,10 @@ export default {
       type: Object,
       default: () => {},
     },
+    action: {
+      type: String,
+      default: 'edit',
+    },
   },
   emits: ['update:widget', 'update:drawer', 'submit'],