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

Add filters to search record action (#12481)

Browse Source 
First PR to add filters to send records. Lot of work left, but I want to
split. I mainly want to validate the architecture there.


https://github.com/user-attachments/assets/63375a75-ba88-49df-8c12-5e3e58de5342

TODO in next PRs:
- fix design
- make filters reliable. Some composite fields are not implemented and
some fields like datetime do not work well
- improve typing
This commit is contained in:
Thomas Trompette
2025-06-06 14:29:53 +02:00
committed by GitHub
parent b85ea721e5
commit 0188b66280
17 changed files with 568 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupChildren.tsx
View File

@ -2,6 +2,7 @@ import { AdvancedFilterAddFilterRuleSelect } from '@/object-record/advanced-filt
import { AdvancedFilterRecordFilterRow } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterRow';
import { useChildRecordFiltersAndRecordFilterGroups } from '@/object-record/advanced-filter/hooks/useChildRecordFiltersAndRecordFilterGroups';
import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
import styled from '@emotion/styled';
import { isDefined } from 'twenty-shared/utils';
@ -21,10 +22,12 @@ const StyledContainer = styled.div<{ isGrayBackground?: boolean }>`
type AdvancedFilterRecordFilterGroupChildrenProps = {
recordFilterGroupId: string;
VariablePicker?: VariablePickerComponent;
};
export const AdvancedFilterRecordFilterGroupChildren = ({
recordFilterGroupId,
VariablePicker,
}: AdvancedFilterRecordFilterGroupChildrenProps) => {
const { currentRecordFilterGroup, childRecordFilters } =
useChildRecordFiltersAndRecordFilterGroups({
@ -47,6 +50,7 @@ export const AdvancedFilterRecordFilterGroupChildren = ({
recordFilter={childRecordFilter}
recordFilterIndex={childRecordFilterIndex}
recordFilterGroup={currentRecordFilterGroup}
VariablePicker={VariablePicker}
/>
))}
<AdvancedFilterAddFilterRuleSelect

4
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupRow.tsx
View File

@ -2,16 +2,19 @@ import { AdvancedFilterDropdownRow } from '@/object-record/advanced-filter/compo
import { AdvancedFilterLogicalOperatorCell } from '@/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorCell';
import { AdvancedFilterRecordFilterGroupChildren } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupChildren';
import { AdvancedFilterRecordFilterGroupOptionsDropdown } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterGroupOptionsDropdown';
import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
import { RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
export const AdvancedFilterRecordFilterGroupRow = ({
parentRecordFilterGroup,
recordFilterGroup,
recordFilterGroupIndex,
VariablePicker,
}: {
parentRecordFilterGroup: RecordFilterGroup;
recordFilterGroup: RecordFilterGroup;
recordFilterGroupIndex: number;
VariablePicker?: VariablePickerComponent;
}) => {
return (
<AdvancedFilterDropdownRow>
@ -21,6 +24,7 @@ export const AdvancedFilterRecordFilterGroupRow = ({
/>
<AdvancedFilterRecordFilterGroupChildren
recordFilterGroupId={recordFilterGroup.id}
VariablePicker={VariablePicker}
/>
<AdvancedFilterRecordFilterGroupOptionsDropdown
recordFilterGroupId={recordFilterGroup.id}

14
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRecordFilterRow.tsx
View File

@ -3,20 +3,25 @@ import { AdvancedFilterFieldSelectDropdownButton } from '@/object-record/advance
import { AdvancedFilterLogicalOperatorCell } from '@/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorCell';
import { AdvancedFilterRecordFilterOperandSelect } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterOperandSelect';
import { AdvancedFilterRecordFilterOptionsDropdown } from '@/object-record/advanced-filter/components/AdvancedFilterRecordFilterOptionsDropdown';
import { AdvancedFilterValueFormInput } from '@/object-record/advanced-filter/components/AdvancedFilterValueFormInput';
import { AdvancedFilterValueInput } from '@/object-record/advanced-filter/components/AdvancedFilterValueInput';
import { getAdvancedFilterObjectFilterDropdownComponentInstanceId } from '@/object-record/advanced-filter/utils/getAdvancedFilterObjectFilterDropdownComponentInstanceId';
import { ObjectFilterDropdownComponentInstanceContext } from '@/object-record/object-filter-dropdown/states/contexts/ObjectFilterDropdownComponentInstanceContext';
import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
import { RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
import { isDefined } from 'twenty-shared/utils';
export const AdvancedFilterRecordFilterRow = ({
recordFilterGroup,
recordFilter,
recordFilterIndex,
VariablePicker,
}: {
recordFilterGroup: RecordFilterGroup;
recordFilter: RecordFilter;
recordFilterIndex: number;
VariablePicker?: VariablePickerComponent;
}) => {
return (
<ObjectFilterDropdownComponentInstanceContext.Provider
@ -37,7 +42,14 @@ export const AdvancedFilterRecordFilterRow = ({
<AdvancedFilterRecordFilterOperandSelect
recordFilterId={recordFilter.id}
/>
<AdvancedFilterValueInput recordFilterId={recordFilter.id} />
{isDefined(VariablePicker) ? (
<AdvancedFilterValueFormInput
recordFilterId={recordFilter.id}
VariablePicker={VariablePicker}
/>
) : (
<AdvancedFilterValueInput recordFilterId={recordFilter.id} />
)}
<AdvancedFilterRecordFilterOptionsDropdown
recordFilterId={recordFilter.id}
/>

2
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterRootRecordFilterGroup.tsx
View File

@ -13,7 +13,7 @@ import styled from '@emotion/styled';
import { id } from 'date-fns/locale';
import { isDefined } from 'twenty-shared/utils';
const StyledContainer = styled.div<{ isGrayBackground?: boolean }>`
const StyledContainer = styled.div`
align-items: start;
display: flex;
flex: 1;

58
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterValueFormCompositeFieldInput.tsx Normal file
View File

@ -0,0 +1,58 @@
import { subFieldNameUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/subFieldNameUsedInDropdownComponentState';
import { FormCountryCodeSelectInput } from '@/object-record/record-field/form-types/components/FormCountryCodeSelectInput';
import { FormCountrySelectInput } from '@/object-record/record-field/form-types/components/FormCountrySelectInput';
import { FormNumberFieldInput } from '@/object-record/record-field/form-types/components/FormNumberFieldInput';
import { FormTextFieldInput } from '@/object-record/record-field/form-types/components/FormTextFieldInput';
import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { JsonValue } from 'type-fest';
export const AdvancedFilterValueFormCompositeFieldInput = ({
recordFilter,
VariablePicker,
onChange,
}: {
recordFilter: RecordFilter;
VariablePicker: VariablePickerComponent;
onChange: (newValue: JsonValue) => void;
}) => {
const subFieldNameUsedInDropdown = useRecoilComponentValueV2(
subFieldNameUsedInDropdownComponentState,
);
const filterType = recordFilter.type;
return (
<>
{filterType === 'ADDRESS' &&
(subFieldNameUsedInDropdown === 'addressCountry' ? (
<FormCountrySelectInput
selectedCountryName={recordFilter.value}
onChange={onChange}
VariablePicker={VariablePicker}
/>
) : (
<FormTextFieldInput
defaultValue={recordFilter.value}
onChange={onChange}
VariablePicker={VariablePicker}
/>
))}
{filterType === 'CURRENCY' &&
(recordFilter.subFieldName === 'currencyCode' ? (
<FormCountryCodeSelectInput
selectedCountryCode={recordFilter.value}
onChange={onChange}
VariablePicker={VariablePicker}
/>
) : recordFilter.subFieldName === 'amountMicros' ? (
<FormNumberFieldInput
defaultValue={recordFilter.value}
onChange={onChange}
VariablePicker={VariablePicker}
/>
) : null)}
</>
);
};

67
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterValueFormInput.tsx Normal file
View File

@ -0,0 +1,67 @@
import { AdvancedFilterValueFormCompositeFieldInput } from '@/object-record/advanced-filter/components/AdvancedFilterValueFormCompositeFieldInput';
import { useApplyObjectFilterDropdownFilterValue } from '@/object-record/object-filter-dropdown/hooks/useApplyObjectFilterDropdownFilterValue';
import { subFieldNameUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/subFieldNameUsedInDropdownComponentState';
import { FormFieldInput } from '@/object-record/record-field/components/FormFieldInput';
import { VariablePickerComponent } from '@/object-record/record-field/form-types/types/VariablePickerComponent';
import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { FieldMetadataType } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import { JsonValue } from 'type-fest';
export const AdvancedFilterValueFormInput = ({
recordFilterId,
VariablePicker,
}: {
recordFilterId: string;
VariablePicker: VariablePickerComponent;
}) => {
const currentRecordFilters = useRecoilComponentValueV2(
currentRecordFiltersComponentState,
);
const subFieldNameUsedInDropdown = useRecoilComponentValueV2(
subFieldNameUsedInDropdownComponentState,
);
const recordFilter = currentRecordFilters.find(
(recordFilter) => recordFilter.id === recordFilterId,
);
const isDisabled = !recordFilter?.fieldMetadataId || !recordFilter.operand;
const { applyObjectFilterDropdownFilterValue } =
useApplyObjectFilterDropdownFilterValue();
const handleChange = (newValue: JsonValue) => {
applyObjectFilterDropdownFilterValue(newValue as string);
};
if (isDisabled) {
return null;
}
if (isDefined(subFieldNameUsedInDropdown)) {
return (
<AdvancedFilterValueFormCompositeFieldInput
recordFilter={recordFilter}
VariablePicker={VariablePicker}
onChange={handleChange}
/>
);
}
return (
<FormFieldInput
field={{
type: recordFilter.type as FieldMetadataType,
label: '',
metadata: {} as FieldMetadata,
}}
defaultValue={recordFilter.value}
onChange={handleChange}
VariablePicker={VariablePicker}
/>
);
};

9
packages/twenty-front/src/modules/object-record/advanced-filter/states/context/AdvancedFilterContext.ts Normal file
View File

@ -0,0 +1,9 @@
import { createContext } from 'react';
type AdvancedFilterContextType = {
onUpdate?: () => void;
};
export const AdvancedFilterContext = createContext<AdvancedFilterContextType>(
{} as AdvancedFilterContextType,
);

11
packages/twenty-front/src/modules/object-record/record-filter-group/hooks/useRemoveRecordFilterGroup.ts
View File

@ -1,13 +1,17 @@
import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
import { useContext } from 'react';
import { useRecoilCallback } from 'recoil';
export const useRemoveRecordFilterGroup = () => {
const currentRecordFilterGroupsCallbackState =
useRecoilComponentCallbackStateV2(currentRecordFilterGroupsComponentState);
const removeRecordFilterGroup = useRecoilCallback(
const { onUpdate } = useContext(AdvancedFilterContext);
const removeRecordFilterGroupCallback = useRecoilCallback(
({ set, snapshot }) =>
(recordFilterGroupIdToRemove: string) => {
const currentRecordFilterGroups = getSnapshotValue(
@ -53,6 +57,11 @@ export const useRemoveRecordFilterGroup = () => {
[currentRecordFilterGroupsCallbackState],
);
const removeRecordFilterGroup = (recordFilterGroupIdToRemove: string) => {
removeRecordFilterGroupCallback(recordFilterGroupIdToRemove);
onUpdate?.();
};
return {
removeRecordFilterGroup,
};

12
packages/twenty-front/src/modules/object-record/record-filter-group/hooks/useUpsertRecordFilterGroup.ts
View File

@ -1,14 +1,17 @@
import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
import { currentRecordFilterGroupsComponentState } from '@/object-record/record-filter-group/states/currentRecordFilterGroupsComponentState';
import { RecordFilterGroup } from '@/object-record/record-filter-group/types/RecordFilterGroup';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
import { useContext } from 'react';
import { useRecoilCallback } from 'recoil';
export const useUpsertRecordFilterGroup = () => {
const currentRecordFilterGroupsCallbackState =
useRecoilComponentCallbackStateV2(currentRecordFilterGroupsComponentState);
const { onUpdate } = useContext(AdvancedFilterContext);
const upsertRecordFilterGroup = useRecoilCallback(
const upsertRecordFilterGroupCallback = useRecoilCallback(
({ set, snapshot }) =>
(recordFilterGroupToSet: RecordFilterGroup) => {
const currentRecordFilterGroups = getSnapshotValue(
@ -57,6 +60,13 @@ export const useUpsertRecordFilterGroup = () => {
[currentRecordFilterGroupsCallbackState],
);
const upsertRecordFilterGroup = (
recordFilterGroupToSet: RecordFilterGroup,
) => {
upsertRecordFilterGroupCallback(recordFilterGroupToSet);
onUpdate?.();
};
return {
upsertRecordFilterGroup,
};

15
packages/twenty-front/src/modules/object-record/record-filter/hooks/useRemoveRecordFilter.ts
View File

@ -1,9 +1,11 @@
import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
import { VIEW_BAR_FILTER_DROPDOWN_ID } from '@/views/constants/ViewBarFilterDropdownId';
import { vectorSearchInputComponentState } from '@/views/states/vectorSearchInputComponentState';
import { isVectorSearchFilter } from '@/views/utils/isVectorSearchFilter';
import { useContext } from 'react';
import { useRecoilCallback } from 'recoil';
import { isDefined } from 'twenty-shared/utils';
@ -12,7 +14,9 @@ export const useRemoveRecordFilter = () => {
currentRecordFiltersComponentState,
);
const removeRecordFilter = useRecoilCallback(
const { onUpdate } = useContext(AdvancedFilterContext);
const removeRecordFilterCallback = useRecoilCallback(
({ set, snapshot }) =>
({ recordFilterId }: { recordFilterId: string }) => {
const currentRecordFilters = getSnapshotValue(
@ -52,6 +56,15 @@ export const useRemoveRecordFilter = () => {
[currentRecordFiltersCallbackState],
);
const removeRecordFilter = ({
recordFilterId,
}: {
recordFilterId: string;
}) => {
removeRecordFilterCallback({ recordFilterId });
onUpdate?.();
};
return {
removeRecordFilter,
};

11
packages/twenty-front/src/modules/object-record/record-filter/hooks/useUpsertRecordFilter.ts
View File

@ -1,7 +1,9 @@
import { AdvancedFilterContext } from '@/object-record/advanced-filter/states/context/AdvancedFilterContext';
import { currentRecordFiltersComponentState } from '@/object-record/record-filter/states/currentRecordFiltersComponentState';
import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { getSnapshotValue } from '@/ui/utilities/state/utils/getSnapshotValue';
import { useContext } from 'react';
import { useRecoilCallback } from 'recoil';
export const useUpsertRecordFilter = () => {
@ -9,7 +11,9 @@ export const useUpsertRecordFilter = () => {
currentRecordFiltersComponentState,
);
const upsertRecordFilter = useRecoilCallback(
const { onUpdate } = useContext(AdvancedFilterContext);
const upsertRecordFilterCallback = useRecoilCallback(
({ set, snapshot }) =>
(recordFilterToSet: RecordFilter) => {
const currentRecordFilters = getSnapshotValue(
@ -46,6 +50,11 @@ export const useUpsertRecordFilter = () => {
[currentRecordFiltersCallbackState],
);
const upsertRecordFilter = (recordFilterToSet: RecordFilter) => {
upsertRecordFilterCallback(recordFilterToSet);
onUpdate?.();
};
return {
upsertRecordFilter,
};