feat: implement date range filter on crud module

Author: brunomous

packages/react-material-ui/src/components/DateRangePicker/index.tsx

@@ -1,4 +1,9 @@
-import React, { useState, useRef, FieldsetHTMLAttributes } from 'react';
+import React, {
+  useState,
+  useRef,
+  useEffect,
+  FieldsetHTMLAttributes,
+} from 'react';
 import {
   Box,
   Popover,
@@ -35,7 +40,7 @@ import ChevronRight from '@mui/icons-material/ChevronRight';
 import DateInput from './DateInput';
 import { CustomCalendarHeaderRoot } from './styles';
 
-interface DateRange {
+export interface DateRange {
   startDate: Date | null;
   endDate: Date | null;
 }
@@ -46,7 +51,9 @@ enum DateSelectionMode {
 }
 
 export type DateRangePickerProps = {
+  type?: string;
   label?: string;
+  value?: DateRange;
   sx?: SxProps;
   error?: string;
   onRangeUpdate?: (range: DateRange) => void;
@@ -55,6 +62,7 @@ export type DateRangePickerProps = {
 const DateRangePicker = ({
   label,
   error,
+  value,
   onRangeUpdate,
   ...props
 }: DateRangePickerProps) => {
@@ -203,6 +211,30 @@ const DateRangePicker = ({
     }
   };
 
+  useEffect(() => {
+    if (value?.startDate && !startDateInputValue) {
+      setStartDateInputValue(format(value.startDate, 'yyyy-MM-dd'));
+    }
+
+    if (value?.startDate && !dateRange.startDate) {
+      setDateRange({
+        ...dateRange,
+        startDate: new Date(value.startDate),
+      });
+    }
+
+    if (value?.endDate && !endDateInputValue) {
+      setEndDateInputValue(format(value.endDate, 'yyyy-MM-dd'));
+    }
+
+    if (value?.endDate && !dateRange.endDate) {
+      setDateRange({
+        ...dateRange,
+        endDate: new Date(value.endDate),
+      });
+    }
+  }, [value, dateRange]);
+
   const renderDay = (props: PickersDayProps<Date>) => {
     const isSelected =
       (dateRange.startDate && isSameDay(props.day, dateRange.startDate)) ||
@@ -250,7 +282,6 @@ const DateRangePicker = ({
               : alpha(theme.palette.common.black, 0.23)
           }`,
         borderRadius: '4px',
-        width: 'fit-content',
         height: '40px',
         fontSize: '1rem',
         padding: '8px',
@@ -283,7 +314,7 @@ const DateRangePicker = ({
         </Typography>
       )}
 
-      <Box display="flex">
+      <Box display="flex" alignItems="center" justifyContent="center">
         <DateInput
           ref={startDateInputRef}
           value={startDateInputValue}

packages/react-material-ui/src/components/Filter/Filter.tsx

@@ -16,6 +16,9 @@ import { SearchFieldProps } from '../../components/SearchField/SearchField';
 import { OrderableDropDown, ListItem } from '../OrderableDropDown';
 import { DatePickerProps } from '@mui/x-date-pickers';
 import DatePickerField from '../../components/DatePickerField';
+import DateRangePicker, {
+  DateRangePickerProps,
+} from '../../components/DateRangePicker';
 
 /**
  * Type of filter variants available.
@@ -25,7 +28,8 @@ export type FilterVariant =
   | 'autocomplete'
   | 'select'
   | 'multiSelect'
-  | 'date';
+  | 'date'
+  | 'dateRange';
 
 /**
  * Common properties for all filters.
@@ -64,6 +68,16 @@ type DateFilter = {
 } & FilterCommon &
   DatePickerProps<Date>;
 
+/**
+ * Properties for the date range filter.
+ */
+type DateRangeFilter = {
+  type: 'dateRange';
+  onChange?: (value: Date | null) => void;
+  onDebouncedSearchChange?: (value: Date) => void;
+} & FilterCommon &
+  DateRangePickerProps;
+
 /**
  * Properties for the autocomplete filter.
  */
@@ -110,6 +124,7 @@ type MultiSelectFilter = {
 export type FilterType =
   | TextFilter
   | DateFilter
+  | DateRangeFilter
   | AutocompleteFilter
   | SelectFilter
   | MultiSelectFilter;
@@ -156,6 +171,15 @@ const renderComponent = (filter: FilterType) => {
         />
       );
 
+    case 'dateRange':
+      return (
+        <DateRangePicker
+          label={filter.label}
+          value={filter.value}
+          onRangeUpdate={filter.onRangeUpdate}
+        />
+      );
+
     case 'select':
       return (
         <SelectField

packages/react-material-ui/src/components/submodules/Filter/index.tsx

@@ -8,6 +8,7 @@ import {
 } from '../../../components/Filter';
 import { SelectOption } from '../../../components/SelectField/SelectField';
 import { useCrudRoot, FilterValues } from '../../../modules/crud/useCrudRoot';
+import { DateRange } from '../../../components/DateRangePicker';
 
 type Operator =
   | 'eq'
@@ -140,7 +141,7 @@ const FilterSubmodule = (props: Props) => {
 
   const onFilterChange = (
     id: string,
-    value: string | string[] | Date | null,
+    value: string | string[] | Date | null | DateRange,
     updateFilter?: boolean,
     reference?: FilterDetails['reference'],
     referenceValidationFn?: FilterDetails['referenceValidationFn'],
@@ -265,6 +266,15 @@ const FilterSubmodule = (props: Props) => {
             onFilterChange(id, val, true, reference, referenceValidationFn),
         };
 
+      case 'dateRange':
+        return {
+          ...commonFields,
+          type,
+          value: value as DateRange,
+          onRangeUpdate: (dateRange: DateRange) =>
+            onFilterChange(id, dateRange, true),
+        };
+
       default:
         break;
     }

packages/react-material-ui/src/modules/crud/useCrudRoot.tsx

@@ -2,8 +2,12 @@ import { createContext, useContext } from 'react';
 import { UseTableResult } from '../../components/Table/useTable';
 import { Search, SimpleFilter } from '../../components/Table/types';
 import { FilterDetails } from '../../components/submodules/Filter';
+import { DateRange } from '../../components/DateRangePicker';
 
-export type FilterValues = Record<string, string | string[] | Date | null>;
+export type FilterValues = Record<
+  string,
+  string | string[] | Date | null | DateRange
+>;
 
 export type CrudContextProps = {
   /**