From 44d4e4efaf77f1c75827bb8406d81d874702fb3b Mon Sep 17 00:00:00 2001 From: Paribesh Nepal <100255987+Paribesh01@users.noreply.github.com> Date: Wed, 2 Apr 2025 13:26:32 +0530 Subject: [PATCH] fix: Display multipicker on Created By source filter (#10543) fix: #9674 When the selected filter is Is and the field type is ACTOR, we now show ObjectFilterDropdownSourceSelect instead of a text input. This ensures proper selection for actor-based filters. Also previously, when a user changed the selected option, all default values were getting wiped out so i have made some changes in updatedSelectedItems Loom video: https://www.loom.com/share/8b80a78d5e8c4a5192d69cab96f0c838?sid=5bd76fff-7cd4-4e3c-8c48-d1c9e4e95651 --------- Co-authored-by: Paul Rastoin <45004772+prastoin@users.noreply.github.com> Co-authored-by: prastoin Co-authored-by: Lucas Bordeau --- .../ObjectFilterDropdownOperandSelect.tsx | 2 + .../EditableFilterDropdownButton.tsx | 30 +++++++------ .../EditableFilterDropdownButtonEffect.tsx | 42 ++++++++++++++----- .../views/components/RecordFilterChip.tsx | 35 ---------------- .../views/components/ViewBarDetails.tsx | 3 +- 5 files changed, 48 insertions(+), 64 deletions(-) delete mode 100644 packages/twenty-front/src/modules/views/components/RecordFilterChip.tsx diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx index 424b9f512..0497ba2da 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOperandSelect.tsx @@ -73,6 +73,7 @@ export const ObjectFilterDropdownOperandSelect = () => { value: '', type: getFilterTypeFromFieldType(fieldMetadataItemUsedInDropdown.type), label: fieldMetadataItemUsedInDropdown.label, + subFieldName: subFieldNameUsedInDropdown, }); return; } @@ -100,6 +101,7 @@ export const ObjectFilterDropdownOperandSelect = () => { value, type: filterType, label: fieldMetadataItemUsedInDropdown.label, + subFieldName: subFieldNameUsedInDropdown, }); } }; diff --git a/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx b/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx index 461b061df..09b7d67bd 100644 --- a/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx +++ b/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButton.tsx @@ -12,28 +12,26 @@ import { RecordFilterOperand } from '@/object-record/record-filter/types/RecordF import { EditableFilterDropdownButtonEffect } from '@/views/components/EditableFilterDropdownButtonEffect'; type EditableFilterDropdownButtonProps = { - viewFilterDropdownId: string; - viewFilter: RecordFilter; + recordFilter: RecordFilter; hotkeyScope: HotkeyScope; }; export const EditableFilterDropdownButton = ({ - viewFilterDropdownId, - viewFilter, + recordFilter, hotkeyScope, }: EditableFilterDropdownButtonProps) => { - const { closeDropdown } = useDropdown(viewFilterDropdownId); + const { closeDropdown } = useDropdown(recordFilter.id); const { removeRecordFilter } = useRemoveRecordFilter(); const handleRemove = () => { closeDropdown(); - removeRecordFilter({ recordFilterId: viewFilter.id }); + removeRecordFilter({ recordFilterId: recordFilter.id }); }; const handleDropdownClickOutside = useCallback(() => { - const { value, operand } = viewFilter; + const { value, operand } = recordFilter; if ( !value && ![ @@ -44,24 +42,24 @@ export const EditableFilterDropdownButton = ({ RecordFilterOperand.IsToday, ].includes(operand) ) { - removeRecordFilter({ recordFilterId: viewFilter.id }); + removeRecordFilter({ recordFilterId: recordFilter.id }); } - }, [viewFilter, removeRecordFilter]); + }, [recordFilter, removeRecordFilter]); return ( <> - + + } dropdownComponents={ } dropdownHotkeyScope={hotkeyScope} diff --git a/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButtonEffect.tsx b/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButtonEffect.tsx index ff6247073..272f2628e 100644 --- a/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButtonEffect.tsx +++ b/packages/twenty-front/src/modules/views/components/EditableFilterDropdownButtonEffect.tsx @@ -2,21 +2,21 @@ import { useEffect } from 'react'; import { fieldMetadataItemIdUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/fieldMetadataItemIdUsedInDropdownComponentState'; +import { objectFilterDropdownSelectedRecordIdsComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSelectedRecordIdsComponentState'; import { selectedFilterComponentState } from '@/object-record/object-filter-dropdown/states/selectedFilterComponentState'; import { selectedOperandInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/selectedOperandInDropdownComponentState'; +import { subFieldNameUsedInDropdownComponentState } from '@/object-record/object-filter-dropdown/states/subFieldNameUsedInDropdownComponentState'; import { useFilterableFieldMetadataItemsInRecordIndexContext } from '@/object-record/record-filter/hooks/useFilterableFieldMetadataItemsInRecordIndexContext'; import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter'; import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; import { isDefined } from 'twenty-shared/utils'; type EditableFilterDropdownButtonEffectProps = { - viewFilterDropdownId: string; - viewFilter: RecordFilter; + recordFilter: RecordFilter; }; export const EditableFilterDropdownButtonEffect = ({ - viewFilterDropdownId, - viewFilter, + recordFilter, }: EditableFilterDropdownButtonEffectProps) => { const setFieldMetadataItemIdUsedInDropdown = useSetRecoilComponentStateV2( fieldMetadataItemIdUsedInDropdownComponentState, @@ -24,12 +24,22 @@ export const EditableFilterDropdownButtonEffect = ({ const setSelectedOperandInDropdown = useSetRecoilComponentStateV2( selectedOperandInDropdownComponentState, - viewFilterDropdownId, + recordFilter.id, + ); + + const setSubFieldNameUsedInDropdown = useSetRecoilComponentStateV2( + subFieldNameUsedInDropdownComponentState, + recordFilter.id, ); const setSelectedFilter = useSetRecoilComponentStateV2( selectedFilterComponentState, - viewFilterDropdownId, + recordFilter.id, + ); + + const setObjectFilterDropdownSelectedRecordIds = useSetRecoilComponentStateV2( + objectFilterDropdownSelectedRecordIdsComponentState, + recordFilter.id, ); const { filterableFieldMetadataItems } = @@ -38,7 +48,7 @@ export const EditableFilterDropdownButtonEffect = ({ useEffect(() => { const fieldMetadataItem = filterableFieldMetadataItems.find( (fieldMetadataItem) => - fieldMetadataItem.id === viewFilter.fieldMetadataId, + fieldMetadataItem.id === recordFilter.fieldMetadataId, ); if (!isDefined(fieldMetadataItem)) { @@ -46,15 +56,25 @@ export const EditableFilterDropdownButtonEffect = ({ } setFieldMetadataItemIdUsedInDropdown(fieldMetadataItem.id); - setSelectedOperandInDropdown(viewFilter.operand); - setSelectedFilter(viewFilter); + setSelectedOperandInDropdown(recordFilter.operand); + setSelectedFilter(recordFilter); + setSubFieldNameUsedInDropdown(recordFilter.subFieldName); + + try { + const selectedOptions = JSON.parse(recordFilter.value); + + setObjectFilterDropdownSelectedRecordIds(selectedOptions); + } catch { + setObjectFilterDropdownSelectedRecordIds([]); + } }, [ filterableFieldMetadataItems, setFieldMetadataItemIdUsedInDropdown, - viewFilter, + recordFilter, setSelectedOperandInDropdown, setSelectedFilter, - viewFilterDropdownId, + setSubFieldNameUsedInDropdown, + setObjectFilterDropdownSelectedRecordIds, ]); return null; diff --git a/packages/twenty-front/src/modules/views/components/RecordFilterChip.tsx b/packages/twenty-front/src/modules/views/components/RecordFilterChip.tsx deleted file mode 100644 index 9c5382236..000000000 --- a/packages/twenty-front/src/modules/views/components/RecordFilterChip.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { useIcons } from 'twenty-ui'; - -import { useFieldMetadataItemById } from '@/object-metadata/hooks/useFieldMetadataItemById'; -import { useRemoveRecordFilter } from '@/object-record/record-filter/hooks/useRemoveRecordFilter'; -import { RecordFilter } from '@/object-record/record-filter/types/RecordFilter'; -import { SortOrFilterChip } from '@/views/components/SortOrFilterChip'; - -type RecordFilterChipProps = { - recordFilter: RecordFilter; -}; - -export const RecordFilterChip = ({ recordFilter }: RecordFilterChipProps) => { - const { fieldMetadataItem } = useFieldMetadataItemById( - recordFilter.fieldMetadataId, - ); - - const { removeRecordFilter } = useRemoveRecordFilter(); - - const { getIcon } = useIcons(); - - const FieldMetadataItemIcon = getIcon(fieldMetadataItem.icon); - - const handleRemoveClick = () => { - removeRecordFilter({ recordFilterId: recordFilter.id }); - }; - - return ( - - ); -}; diff --git a/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx b/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx index d56c226ab..ef99e4c5e 100644 --- a/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx @@ -233,11 +233,10 @@ export const ViewBarDetails = ({