Initialize filter value on operand change to immediately show results…

… for 'Is', 'IsBefore' and 'IsAfter'

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

@@ -7,6 +7,7 @@ import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
 import { isDefined } from '~/utils/isDefined';
 
+import { getInitialFilterValue } from '@/object-record/object-filter-dropdown/utils/getInitialFilterValue';
 import { getOperandLabel } from '../utils/getOperandLabel';
 import { getOperandsForFilterType } from '../utils/getOperandsForFilterType';
 
@@ -62,17 +63,17 @@ export const ObjectFilterDropdownOperandSelect = () => {
       isDefined(filterDefinitionUsedInDropdown) &&
       isDefined(selectedFilter)
     ) {
-      const clearValueOperands = [ViewFilterOperand.IsRelative];
-      const shouldClearValue =
-        clearValueOperands.includes(selectedFilter.operand) ||
-        clearValueOperands.includes(newOperand);
-
-      const value = shouldClearValue ? '' : selectedFilter.value;
+      const { value, displayValue } = getInitialFilterValue(
+        filterDefinitionUsedInDropdown.type,
+        newOperand,
+        selectedFilter.value,
+        selectedFilter.displayValue,
+      );
 
       selectFilter?.({
         id: selectedFilter.id ? selectedFilter.id : v4(),
         fieldMetadataId: selectedFilter.fieldMetadataId,
-        displayValue: selectedFilter.displayValue,
+        displayValue,
         operand: newOperand,
         value,
         definition: filterDefinitionUsedInDropdown,

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

@@ -1,8 +1,10 @@
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { FilterDefinition } from '@/object-record/object-filter-dropdown/types/FilterDefinition';
+import { getInitialFilterValue } from '@/object-record/object-filter-dropdown/utils/getInitialFilterValue';
 import { getOperandsForFilterType } from '@/object-record/object-filter-dropdown/utils/getOperandsForFilterType';
 import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
 import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
+import { v4 } from 'uuid';
 
 type SelectFilterParams = {
   filterDefinition: FilterDefinition;
@@ -13,6 +15,7 @@ export const useSelectFilter = () => {
     setFilterDefinitionUsedInDropdown,
     setSelectedOperandInDropdown,
     setObjectFilterDropdownSearchInput,
+    selectFilter: filterDropdownSelectFilter,
   } = useFilterDropdown();
 
   const setHotkeyScope = useSetHotkeyScope();
@@ -31,6 +34,22 @@ export const useSelectFilter = () => {
       getOperandsForFilterType(filterDefinition.type)?.[0],
     );
 
+    const { value, displayValue } = getInitialFilterValue(
+      filterDefinition.type,
+      getOperandsForFilterType(filterDefinition.type)?.[0],
+    );
+
+    if (value !== '') {
+      filterDropdownSelectFilter({
+        id: v4(),
+        fieldMetadataId: filterDefinition.fieldMetadataId,
+        displayValue,
+        operand: getOperandsForFilterType(filterDefinition.type)?.[0],
+        value,
+        definition: filterDefinition,
+      });
+    }
+
     setObjectFilterDropdownSearchInput('');
   };
 

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

@@ -0,0 +1,42 @@
+import { Filter } from '@/object-record/object-filter-dropdown/types/Filter';
+import { FilterType } from '@/object-record/object-filter-dropdown/types/FilterType';
+import { ViewFilterOperand } from '@/views/types/ViewFilterOperand';
+import { z } from 'zod';
+
+export const getInitialFilterValue = (
+  newType: FilterType,
+  newOperand: ViewFilterOperand,
+  oldValue?: string,
+  oldDisplayValue?: string,
+): Pick<Filter, 'value' | 'displayValue'> | Record<string, never> => {
+  switch (newType) {
+    case 'DATE':
+    case 'DATE_TIME': {
+      const activeDatePickerOperands = [
+        ViewFilterOperand.IsBefore,
+        ViewFilterOperand.Is,
+        ViewFilterOperand.IsAfter,
+      ];
+
+      if (activeDatePickerOperands.includes(newOperand)) {
+        const date = z.coerce.date().safeParse(oldValue).data ?? new Date();
+        const value = date.toISOString();
+        const displayValue =
+          newType === 'DATE'
+            ? date.toLocaleString()
+            : date.toLocaleDateString();
+
+        return { value, displayValue };
+      }
+
+      if (newOperand === ViewFilterOperand.IsRelative) {
+        return { value: '', displayValue: '' };
+      }
+      break;
+    }
+  }
+  return {
+    value: oldValue ?? '',
+    displayValue: oldDisplayValue ?? '',
+  };
+};