admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fixes date filter chip bugs (#12788)

Browse Source 
This PR fixes a bug that occurs during filter operand changes.

As a date filter can contain values that have a different shape, mainly
date ISO string and hard-coded relative dates, changing the operand
without resetting the value to its default was causing a crash.

This PR also extracts the logic that computes the right part of a filter
chip into a util instead of a difficult to understand ternary, thus
solving small bugs in the value displayed also.

Fixes https://github.com/twentyhq/twenty/issues/12778
This commit is contained in:
Lucas Bordeau
2025-06-24 11:29:28 +02:00
committed by GitHub
parent 84b204dcab
commit c56ccf7ed9
4 changed files with 80 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/twenty-front/src/modules/object-record/object-filter-dropdown/constants/DateOperandsThatShouldBeInitializedWithNow.ts Normal file
View File

@ -0,0 +1,9 @@
import { RecordFilterOperand } from '@/object-record/record-filter/types/RecordFilterOperand';
export const DATE_OPERANDS_THAT_SHOULD_BE_INITIALIZED_WITH_NOW: RecordFilterOperand[] =
[
RecordFilterOperand.Is,
RecordFilterOperand.IsNot,
RecordFilterOperand.IsAfter,
RecordFilterOperand.IsBefore,
];

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

@ -1,3 +1,4 @@
import { DATE_OPERANDS_THAT_SHOULD_BE_INITIALIZED_WITH_NOW } from '@/object-record/object-filter-dropdown/constants/DateOperandsThatShouldBeInitializedWithNow';
import { useUpsertObjectFilterDropdownCurrentFilter } from '@/object-record/object-filter-dropdown/hooks/useUpsertObjectFilterDropdownCurrentFilter';
import { fieldMetadataItemUsedInDropdownComponentSelector } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemUsedInDropdownComponentSelector';
import { objectFilterDropdownCurrentRecordFilterComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownCurrentRecordFilterComponentState';
@ -5,6 +6,7 @@ import { selectedOperandInDropdownComponentState } from '@/object-record/object-
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 { isDefined } from 'twenty-shared/utils';
@ -18,7 +20,7 @@ export const useApplyObjectFilterDropdownOperand = () => {
selectedOperandInDropdownComponentState,
);
const objectFilterDropdownFilterIsCreated = isDefined(
const objectFilterDropdownFilterHasBeenCreated = isDefined(
objectFilterDropdownCurrentRecordFilter,
);
@ -43,13 +45,13 @@ export const useApplyObjectFilterDropdownOperand = () => {
RecordFilterOperand.IsToday,
].includes(newOperand);
if (objectFilterDropdownFilterIsCreated) {
const newCurrentRecordFilter = {
let recordFilterToUpsert: RecordFilter | null | undefined = null;
if (objectFilterDropdownFilterHasBeenCreated) {
recordFilterToUpsert = {
...objectFilterDropdownCurrentRecordFilter,
operand: newOperand,
} satisfies RecordFilter;
upsertObjectFilterDropdownCurrentFilter(newCurrentRecordFilter);
} else if (isValuelessOperand) {
if (!isDefined(fieldMetadataItemUsedInDropdown)) {
throw new Error(
@ -62,12 +64,37 @@ export const useApplyObjectFilterDropdownOperand = () => {
fieldMetadataItemUsedInDropdown,
);
const recordFilterToCreate = {
recordFilterToUpsert = {
...emptyRecordFilter,
operand: newOperand,
} satisfies RecordFilter;
}
upsertObjectFilterDropdownCurrentFilter(recordFilterToCreate);
if (
isDefined(recordFilterToUpsert) &&
(recordFilterToUpsert.type === 'DATE' ||
recordFilterToUpsert.type === 'DATE_TIME')
) {
if (
DATE_OPERANDS_THAT_SHOULD_BE_INITIALIZED_WITH_NOW.includes(newOperand)
) {
const newDateValue = new Date();
recordFilterToUpsert.value = newDateValue.toISOString();
const { displayValue } = getDateFilterDisplayValue(
newDateValue,
recordFilterToUpsert.type,
);
recordFilterToUpsert.displayValue = displayValue;
} else {
recordFilterToUpsert.value = '';
recordFilterToUpsert.displayValue = '';
}
}
if (isDefined(recordFilterToUpsert)) {
upsertObjectFilterDropdownCurrentFilter(recordFilterToUpsert);
}
setSelectedOperandInDropdown(newOperand);

11
packages/twenty-front/src/modules/views/components/EditableFilterChip.tsx
View File

@ -1,12 +1,10 @@
import { useFieldMetadataItemById } from '@/object-metadata/hooks/useFieldMetadataItemById';
import { getCompositeSubFieldLabel } from '@/object-record/object-filter-dropdown/utils/getCompositeSubFieldLabel';
import { getOperandLabelShort } from '@/object-record/object-filter-dropdown/utils/getOperandLabel';
import { isCompositeFieldType } from '@/object-record/object-filter-dropdown/utils/isCompositeFieldType';
import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
import { isEmptinessOperand } from '@/object-record/record-filter/utils/isEmptinessOperand';
import { isRecordFilterConsideredEmpty } from '@/object-record/record-filter/utils/isRecordFilterConsideredEmpty';
import { isValidSubFieldName } from '@/settings/data-model/utils/isValidSubFieldName';
import { SortOrFilterChip } from '@/views/components/SortOrFilterChip';
import { getRecordFilterLabelValue } from '@/views/utils/getRecordFilterLabelValue';
import { isNonEmptyString } from '@sniptt/guards';
import { useIcons } from 'twenty-ui/display';
@ -29,9 +27,6 @@ export const EditableFilterChip = ({
const FieldMetadataItemIcon = getIcon(fieldMetadataItem.icon);
const operandLabelShort = getOperandLabelShort(recordFilter.operand);
const operandIsEmptiness = isEmptinessOperand(recordFilter.operand);
const recordFilterSubFieldName = recordFilter.subFieldName;
const subFieldLabel =
@ -48,10 +43,8 @@ export const EditableFilterChip = ({
? `${recordFilter.label} / ${subFieldLabel}`
: recordFilter.label;
const recordFilterIsEmpty = isRecordFilterConsideredEmpty(recordFilter);
const labelKey = `${fieldNameLabel}`;
const labelValue = `${!operandIsEmptiness && !recordFilterIsEmpty ? operandLabelShort : operandIsEmptiness ? ` ${operandLabelShort}` : ''} ${operandIsEmptiness ? '' : recordFilter.displayValue}`;
const labelValue = getRecordFilterLabelValue(recordFilter);
return (
<SortOrFilterChip

35
packages/twenty-front/src/modules/views/utils/getRecordFilterLabelValue.ts Normal file
View File

@ -0,0 +1,35 @@
import { getOperandLabelShort } from '@/object-record/object-filter-dropdown/utils/getOperandLabel';
import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
import { RecordFilterOperand } from '@/object-record/record-filter/types/RecordFilterOperand';
import { isEmptinessOperand } from '@/object-record/record-filter/utils/isEmptinessOperand';
import { isRecordFilterConsideredEmpty } from '@/object-record/record-filter/utils/isRecordFilterConsideredEmpty';
export const getRecordFilterLabelValue = (recordFilter: RecordFilter) => {
const operandLabelShort = getOperandLabelShort(recordFilter.operand);
const operandIsEmptiness = isEmptinessOperand(recordFilter.operand);
const recordFilterIsEmpty = isRecordFilterConsideredEmpty(recordFilter);
const isDateOrDateTimeFilter =
recordFilter.type === 'DATE' || recordFilter.type === 'DATE_TIME';
if (isDateOrDateTimeFilter) {
switch (recordFilter.operand) {
case RecordFilterOperand.IsToday:
case RecordFilterOperand.IsInFuture:
case RecordFilterOperand.IsInPast:
return operandLabelShort;
default:
return `${operandLabelShort} ${recordFilter.displayValue}`;
}
}
if (!operandIsEmptiness && !recordFilterIsEmpty) {
return `${operandLabelShort} ${recordFilter.displayValue}`;
}
if (operandIsEmptiness) {
return `${operandLabelShort}`;
}
return recordFilter.displayValue;
};