Fixed relative date filter initalization (#12811)

This PR fixes problems with date filter : 
- Filter chip shows the label with plural, ex : `This weeks` 
- Using a relative filter now initializes to `This day`
- Switching between the different relative sub-operands (This, Past,
Next) now initializes with a value so we're never in an "empty" state.

packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/useApplyObjectFilterDropdownOperand.ts

@@ -3,12 +3,18 @@ import { useUpsertObjectFilterDropdownCurrentFilter } from '@/object-record/obje
 import { fieldMetadataItemUsedInDropdownComponentSelector } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemUsedInDropdownComponentSelector';
 import { objectFilterDropdownCurrentRecordFilterComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownCurrentRecordFilterComponentState';
 import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState';
+import { getRelativeDateDisplayValue } from '@/object-record/object-filter-dropdown/utils/getRelativeDateDisplayValue';
 import { useCreateEmptyRecordFilterFromFieldMetadataItem } from '@/object-record/record-filter/hooks/useCreateEmptyRecordFilterFromFieldMetadataItem';
 import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
 import { RecordFilterOperand } from '@/object-record/record-filter/types/RecordFilterOperand';
 import { getDateFilterDisplayValue } from '@/object-record/record-filter/utils/getDateFilterDisplayValue';
 import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
 import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
+import { computeVariableDateViewFilterValue } from '@/views/view-filter-value/utils/computeVariableDateViewFilterValue';
+import {
+  VariableDateViewFilterValueDirection,
+  VariableDateViewFilterValueUnit,
+} from '@/views/view-filter-value/utils/resolveDateViewFilterValue';
 import { isDefined } from 'twenty-shared/utils';
 
 export const useApplyObjectFilterDropdownOperand = () => {
@@ -87,6 +93,20 @@ export const useApplyObjectFilterDropdownOperand = () => {
         );
 
         recordFilterToUpsert.displayValue = displayValue;
+      } else if (newOperand === RecordFilterOperand.IsRelative) {
+        const defaultRelativeDate = {
+          direction: 'THIS' as VariableDateViewFilterValueDirection,
+          amount: 1,
+          unit: 'DAY' as VariableDateViewFilterValueUnit,
+        };
+
+        recordFilterToUpsert.value = computeVariableDateViewFilterValue(
+          defaultRelativeDate.direction,
+          defaultRelativeDate.amount,
+          defaultRelativeDate.unit,
+        );
+        recordFilterToUpsert.displayValue =
+          getRelativeDateDisplayValue(defaultRelativeDate);
       } else {
         recordFilterToUpsert.value = '';
         recordFilterToUpsert.displayValue = '';

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

@@ -17,11 +17,14 @@ export const getRelativeDateDisplayValue = (
 
   const directionStr = capitalize(direction.toLowerCase());
   const amountStr = direction === 'THIS' ? '' : amount;
-  const unitStr = amount
-    ? amount > 1
-      ? plural(unit.toLowerCase())
-      : unit.toLowerCase()
-    : undefined;
+  const unitStr =
+    direction === 'THIS'
+      ? unit.toLowerCase()
+      : amount
+        ? amount > 1
+          ? plural(unit.toLowerCase())
+          : unit.toLowerCase()
+        : undefined;
 
   return [directionStr, amountStr, unitStr]
     .filter((item) => item !== undefined)

packages/twenty-front/src/modules/views/view-filter-value/utils/computeVariableDateViewFilterValue.ts

@@ -7,4 +7,14 @@ export const computeVariableDateViewFilterValue = (
   direction: VariableDateViewFilterValueDirection,
   amount: number | undefined,
   unit: VariableDateViewFilterValueUnit,
-) => `${direction}_${amount?.toString()}_${unit}`;
+) => {
+  if (direction === 'THIS') {
+    return `THIS_1_${unit}`;
+  } else if (amount === undefined || amount <= 0) {
+    throw new Error(
+      'Amount must be defined and greater than 0 for relative date filters',
+    );
+  }
+
+  return `${direction}_${amount.toString()}_${unit}`;
+};