scottk/twenty
1
0
Fork 0
mirror of https://github.com/lingble/twenty.git synced 2025-11-02 05:37:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

multiselect for onetomany relations (#6892)

Browse Source 
Issue #4345 
used `useUpdateRelationFromManyFieldInput` hook from `FieldInput` to
`updateRelation`.
Creating a seperate hook didnt made sense when it basically does the
same thing.
However renaming the hook to something generic would make sense so that
its not tied to `FieldInput` according to naming convention

followup issue to tackle - #6890 


https://github.com/user-attachments/assets/452372ea-2699-45fd-9edf-ded36abdbca2

---------

Co-authored-by: Weiko <corentin@twenty.com>
This commit is contained in:
nitin
2024-09-06 18:26:01 +05:30
committed by GitHub
parent 85f2e58f0c
commit 7205927440
2 changed files with 31 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationSection.tsx
View File

@@ -4,10 +4,13 @@ import { useCallback, useContext } from 'react';
import { useRecoilValue } from 'recoil';
import { IconForbid, IconPencil, IconPlus } from 'twenty-ui';
import { ObjectMetadataItemsRelationPickerEffect } from '@/object-metadata/components/ObjectMetadataItemsRelationPickerEffect';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord';
import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
import { usePersistField } from '@/object-record/record-field/hooks/usePersistField';
import { RelationFromManyFieldInputMultiRecordsEffect } from '@/object-record/record-field/meta-types/input/components/RelationFromManyFieldInputMultiRecordsEffect';
import { useUpdateRelationFromManyFieldInput } from '@/object-record/record-field/meta-types/input/hooks/useUpdateRelationFromManyFieldInput';
import { FieldRelationMetadata } from '@/object-record/record-field/types/FieldMetadata';
import { RecordDetailRelationRecordsList } from '@/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsList';
import { RecordDetailRelationRecordsListEmptyState } from '@/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListEmptyState';
@@ -16,6 +19,7 @@ import { RecordDetailSection } from '@/object-record/record-show/record-detail-s
import { RecordDetailSectionHeader } from '@/object-record/record-show/record-detail-section/components/RecordDetailSectionHeader';
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
import { recordStoreFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreFamilySelector';
import { MultiRecordSelect } from '@/object-record/relation-picker/components/MultiRecordSelect';
import { SingleEntitySelectMenuItemsWithSearch } from '@/object-record/relation-picker/components/SingleEntitySelectMenuItemsWithSearch';
import { useAddNewRecordAndOpenRightDrawer } from '@/object-record/relation-picker/hooks/useAddNewRecordAndOpenRightDrawer';
import { useRelationPicker } from '@/object-record/relation-picker/hooks/useRelationPicker';
@@ -110,6 +114,10 @@ export const RecordDetailRelationSection = ({
});
};
const { updateRelation } = useUpdateRelationFromManyFieldInput({
scopeId: dropdownId,
});
const filterQueryParams: FilterQueryParams = {
filter: {
[relationFieldMetadataItem?.name || '']: {
@@ -175,16 +183,28 @@ export const RecordDetailRelationSection = ({
}
dropdownComponents={
<RelationPickerScope relationPickerScopeId={dropdownId}>
<SingleEntitySelectMenuItemsWithSearch
EmptyIcon={IconForbid}
onEntitySelected={handleRelationPickerEntitySelected}
selectedRelationRecordIds={relationRecordIds}
relationObjectNameSingular={
relationObjectMetadataNameSingular
}
relationPickerScopeId={dropdownId}
onCreate={createNewRecordAndOpenRightDrawer}
/>
{isToOneObject ? (
<SingleEntitySelectMenuItemsWithSearch
EmptyIcon={IconForbid}
onEntitySelected={handleRelationPickerEntitySelected}
selectedRelationRecordIds={relationRecordIds}
relationObjectNameSingular={
relationObjectMetadataNameSingular
}
relationPickerScopeId={dropdownId}
onCreate={createNewRecordAndOpenRightDrawer}
/>
) : (
<>
<ObjectMetadataItemsRelationPickerEffect />
<RelationFromManyFieldInputMultiRecordsEffect />
<MultiRecordSelect
onCreate={createNewRecordAndOpenRightDrawer}
onChange={updateRelation}
onSubmit={closeDropdown}
/>
</>
)}
</RelationPickerScope>
}
dropdownHotkeyScope={{

3
packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleObjectRecordSelectItem.tsx
View File

@@ -1,7 +1,6 @@
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { Avatar } from 'twenty-ui';
import { v4 } from 'uuid';
import { useObjectRecordMultiSelectScopedStates } from '@/activities/hooks/useObjectRecordMultiSelectScopedStates';
import { MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID } from '@/object-record/relation-picker/constants/MultiObjectRecordSelectSelectableListId';
@@ -69,7 +68,7 @@ export const MultipleObjectRecordSelectItem = ({
: false;
return (
<StyledSelectableItem itemId={objectRecordId} key={objectRecordId + v4()}>
<StyledSelectableItem itemId={objectRecordId} key={objectRecordId}>
<MenuItemMultiSelectAvatar
onSelectChange={(_isNewlySelectedValue) => handleSelectChange()}
isKeySelected={isSelectedByKeyboard}