Date filter improvements (#5917)

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/MultipleFiltersDropdownContent.tsx

@@ -38,19 +38,23 @@ export const MultipleFiltersDropdownContent = ({
   const selectedOperandInDropdown = useRecoilValue(
     selectedOperandInDropdownState,
   );
-  const isEmptyOperand =
+  const isNotConfigurable =
     selectedOperandInDropdown &&
-    [ViewFilterOperand.IsEmpty, ViewFilterOperand.IsNotEmpty].includes(
-      selectedOperandInDropdown,
-    );
+    [
+      ViewFilterOperand.IsEmpty,
+      ViewFilterOperand.IsNotEmpty,
+      ViewFilterOperand.IsInFuture,
+      ViewFilterOperand.IsInPast,
+      ViewFilterOperand.IsToday,
+    ].includes(selectedOperandInDropdown);
 
   return (
     <>
       {!filterDefinitionUsedInDropdown ? (
         <ObjectFilterDropdownFilterSelect />
       ) : isObjectFilterDropdownOperandSelectUnfolded ? (
         <ObjectFilterDropdownOperandSelect />
-      ) : isEmptyOperand ? (
+      ) : isNotConfigurable ? (
         <ObjectFilterDropdownOperandButton />
       ) : (
         selectedOperandInDropdown && (

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownDateInput.tsx

@@ -2,10 +2,19 @@ import { useRecoilValue } from 'recoil';
 import { v4 } from 'uuid';
 
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
+import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
+import { getRelativeDateDisplayValue } from '@/object-record/object-filter-dropdown/utils/getRelativeDateDisplayValue';
 import { InternalDatePicker } from '@/ui/input/components/internal/date/components/InternalDatePicker';
+import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
+import { ViewFilterValueType } from '@/views/types/ViewFilterValueType';
+import { computeVariableDateViewFilterValue } from '@/views/utils/view-filter-value/computeVariableDateViewFilterValue';
+import {
+  VariableDateViewFilterValueDirection,
+  VariableDateViewFilterValueUnit,
+} from '@/views/utils/view-filter-value/resolveDateViewFilterValue';
+import { resolveFilterValue } from '@/views/utils/view-filter-value/resolveFilterValue';
 import { useState } from 'react';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
-import { isDefined } from '~/utils/isDefined';
 
 export const ObjectFilterDropdownDateInput = () => {
   const {
@@ -23,40 +32,84 @@ export const ObjectFilterDropdownDateInput = () => {
     selectedOperandInDropdownState,
   );
 
-  const selectedFilter = useRecoilValue(selectedFilterState);
+  const selectedFilter = useRecoilValue(selectedFilterState) as
+    | (Filter & { definition: { type: 'DATE' | 'DATE_TIME' } })
+    | null
+    | undefined;
+
+  const initialFilterValue = selectedFilter
+    ? resolveFilterValue(selectedFilter)
+    : null;
   const [internalDate, setInternalDate] = useState<Date | null>(
-    selectedFilter?.value ? new Date(selectedFilter.value) : new Date(),
+    initialFilterValue instanceof Date ? initialFilterValue : new Date(),
   );
 
   const isDateTimeInput =
     filterDefinitionUsedInDropdown?.type === FieldMetadataType.DateTime;
 
-  const handleChange = (date: Date | null) => {
-    setInternalDate(date);
+  const handleAbsoluteDateChange = (newDate: Date | null) => {
+    setInternalDate(newDate);
 
     if (!filterDefinitionUsedInDropdown || !selectedOperandInDropdown) return;
 
     selectFilter?.({
       id: selectedFilter?.id ? selectedFilter.id : v4(),
       fieldMetadataId: filterDefinitionUsedInDropdown.fieldMetadataId,
-      value: isDefined(date) ? date.toISOString() : '',
+      value: newDate?.toISOString() ?? '',
+      valueType: ViewFilterValueType.STATIC,
       operand: selectedOperandInDropdown,
-      displayValue: isDefined(date)
+      displayValue: newDate
         ? isDateTimeInput
-          ? date.toLocaleString()
-          : date.toLocaleDateString()
+          ? newDate.toLocaleString()
+          : newDate.toLocaleDateString()
         : '',
       definition: filterDefinitionUsedInDropdown,
     });
 
     setIsObjectFilterDropdownUnfolded(false);
   };
 
+  const handleRelativeDateChange = (
+    relativeDate: {
+      direction: VariableDateViewFilterValueDirection;
+      amount: number;
+      unit: VariableDateViewFilterValueUnit;
+    } | null,
+  ) => {
+    if (!filterDefinitionUsedInDropdown || !selectedOperandInDropdown) return;
+
+    const value = relativeDate
+      ? computeVariableDateViewFilterValue(
+          relativeDate.direction,
+          relativeDate.amount,
+          relativeDate.unit,
+        )
+      : '';
+
+    selectFilter?.({
+      id: selectedFilter?.id ? selectedFilter.id : v4(),
+      fieldMetadataId: filterDefinitionUsedInDropdown.fieldMetadataId,
+      value,
+      valueType: ViewFilterValueType.VARIABLE,
+      operand: selectedOperandInDropdown,
+      displayValue: getRelativeDateDisplayValue(relativeDate),
+      definition: filterDefinitionUsedInDropdown,
+    });
+
+    setIsObjectFilterDropdownUnfolded(false);
+  };
+
+  const isRelativeOperand =
+    selectedOperandInDropdown === ViewFilterOperand.IsRelative;
+
   return (
     <InternalDatePicker
+      isRelative={isRelativeOperand}
       date={internalDate}
-      onChange={handleChange}
-      onMouseSelect={handleChange}
+      relativeDateFilterValue={selectedFilter?.value}
+      onChange={handleAbsoluteDateChange}
+      onRelativeDateChange={handleRelativeDateChange}
+      onMouseSelect={handleAbsoluteDateChange}
       isDateTimeInput={isDateTimeInput}
     />
   );

packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx

@@ -36,15 +36,18 @@ export const ObjectFilterDropdownOperandSelect = () => {
   );
 
   const handleOperandChange = (newOperand: ViewFilterOperand) => {
-    const isEmptyOperand = [
+    const isValuelessOperand = [
       ViewFilterOperand.IsEmpty,
       ViewFilterOperand.IsNotEmpty,
+      ViewFilterOperand.IsInPast,
+      ViewFilterOperand.IsInFuture,
+      ViewFilterOperand.IsToday,
     ].includes(newOperand);
 
     setSelectedOperandInDropdown(newOperand);
     setIsObjectFilterDropdownOperandSelectUnfolded(false);
 
-    if (isEmptyOperand) {
+    if (isValuelessOperand) {
       selectFilter?.({
         id: v4(),
         fieldMetadataId: filterDefinitionUsedInDropdown?.fieldMetadataId ?? '',
@@ -66,6 +69,7 @@ export const ObjectFilterDropdownOperandSelect = () => {
         displayValue: selectedFilter.displayValue,
         operand: newOperand,
         value: selectedFilter.value,
+        valueType: selectedFilter.valueType,
         definition: filterDefinitionUsedInDropdown,
       });
     }

packages/twenty-front/src/modules/object-record/object-filter-dropdown/types/Filter.ts

@@ -1,12 +1,13 @@
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
-
+import { ViewFilterValueType } from '@/views/types/ViewFilterValueType';
 import { FilterDefinition } from './FilterDefinition';
 
 export type Filter = {
   id: string;
   variant?: 'default' | 'danger';
   fieldMetadataId: string;
   value: string;
+  valueType?: ViewFilterValueType;
   displayValue: string;
   displayAvatarUrl?: string;
   operand: ViewFilterOperand;

packages/twenty-front/src/modules/object-record/object-filter-dropdown/utils/getOperandLabel.ts

@@ -12,6 +12,10 @@ export const getOperandLabel = (
       return 'Greater than';
     case ViewFilterOperand.LessThan:
       return 'Less than';
+    case ViewFilterOperand.IsBefore:
+      return 'Is before';
+    case ViewFilterOperand.IsAfter:
+      return 'Is after';
     case ViewFilterOperand.Is:
       return 'Is';
     case ViewFilterOperand.IsNot:
@@ -22,6 +26,14 @@ export const getOperandLabel = (
       return 'Is empty';
     case ViewFilterOperand.IsNotEmpty:
       return 'Is not empty';
+    case ViewFilterOperand.IsRelative:
+      return 'Is relative';
+    case ViewFilterOperand.IsInPast:
+      return 'Is in past';
+    case ViewFilterOperand.IsInFuture:
+      return 'Is in future';
+    case ViewFilterOperand.IsToday:
+      return 'Is today';
     default:
       return '';
   }
@@ -47,6 +59,16 @@ export const getOperandLabelShort = (
       return '\u00A0> ';
     case ViewFilterOperand.LessThan:
       return '\u00A0< ';
+    case ViewFilterOperand.IsBefore:
+      return '\u00A0< ';
+    case ViewFilterOperand.IsAfter:
+      return '\u00A0> ';
+    case ViewFilterOperand.IsInPast:
+      return ': Past';
+    case ViewFilterOperand.IsInFuture:
+      return ': Future';
+    case ViewFilterOperand.IsToday:
+      return ': Today';
     default:
       return ': ';
   }

packages/twenty-front/src/modules/object-record/object-filter-dropdown/utils/getOperandsForFilterType.ts

@@ -34,8 +34,13 @@ export const getOperandsForFilterType = (
     case 'DATE_TIME':
     case 'DATE':
       return [
-        ViewFilterOperand.GreaterThan,
-        ViewFilterOperand.LessThan,
+        ViewFilterOperand.Is,
+        ViewFilterOperand.IsRelative,
+        ViewFilterOperand.IsInPast,
+        ViewFilterOperand.IsInFuture,
+        ViewFilterOperand.IsToday,
+        ViewFilterOperand.IsBefore,
+        ViewFilterOperand.IsAfter,
         ...emptyOperands,
       ];
     case 'RATING':

packages/twenty-front/src/modules/object-record/object-filter-dropdown/utils/getRelativeDateDisplayValue.ts

@@ -0,0 +1,20 @@
+import {
+  VariableDateViewFilterValueDirection,
+  VariableDateViewFilterValueUnit,
+} from '@/views/utils/view-filter-value/resolveDateViewFilterValue';
+import { capitalize } from '~/utils/string/capitalize';
+
+export const getRelativeDateDisplayValue = (
+  relativeDate: {
+    direction: VariableDateViewFilterValueDirection;
+    amount: number;
+    unit: VariableDateViewFilterValueUnit;
+  } | null,
+) => {
+  if (!relativeDate) return '';
+
+  const isPlural = relativeDate.amount > 1;
+  return capitalize(
+    `${relativeDate.direction} ${relativeDate.amount} ${relativeDate.unit}${isPlural ? 's' : ''}`.toLowerCase(),
+  );
+};