diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RelationFromManyFieldInput.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RelationFromManyFieldInput.tsx index 92e1dc80c..3bcebb3ca 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RelationFromManyFieldInput.tsx +++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/RelationFromManyFieldInput.tsx @@ -1,11 +1,15 @@ import { useContext } from 'react'; import { ObjectMetadataItemsRelationPickerEffect } from '@/object-metadata/components/ObjectMetadataItemsRelationPickerEffect'; +import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; 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 { FieldDefinition } from '@/object-record/record-field/types/FieldDefinition'; import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent'; +import { FieldRelationMetadata } from '@/object-record/record-field/types/FieldMetadata'; import { MultiRecordSelect } from '@/object-record/relation-picker/components/MultiRecordSelect'; +import { useAddNewRecordAndOpenRightDrawer } from '@/object-record/relation-picker/hooks/useAddNewRecordAndOpenRightDrawer'; import { RelationPickerScope } from '@/object-record/relation-picker/scopes/RelationPickerScope'; export type RelationFromManyFieldInputProps = { @@ -15,7 +19,7 @@ export type RelationFromManyFieldInputProps = { export const RelationFromManyFieldInput = ({ onSubmit, }: RelationFromManyFieldInputProps) => { - const { fieldDefinition } = useContext(FieldContext); + const { fieldDefinition, entityId } = useContext(FieldContext); const relationPickerScopeId = `relation-picker-${fieldDefinition.fieldMetadataId}`; const { updateRelation } = useUpdateRelationFromManyFieldInput({ scopeId: relationPickerScopeId, @@ -25,12 +29,38 @@ export const RelationFromManyFieldInput = ({ onSubmit?.(() => {}); }; + const relationFieldDefinition = + fieldDefinition as FieldDefinition; + + const { objectMetadataItem: relationObjectMetadataItem } = + useObjectMetadataItem({ + objectNameSingular: + relationFieldDefinition.metadata.relationObjectMetadataNameSingular, + }); + + const relationFieldMetadataItem = relationObjectMetadataItem.fields.find( + ({ id }) => id === relationFieldDefinition.metadata.relationFieldMetadataId, + ); + + const { createNewRecordAndOpenRightDrawer } = + useAddNewRecordAndOpenRightDrawer({ + relationObjectMetadataNameSingular: + relationFieldDefinition.metadata.relationObjectMetadataNameSingular, + relationObjectMetadataItem, + relationFieldMetadataItem, + entityId, + }); + return ( <> - + ); diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/components/MultiRecordSelect.tsx b/packages/twenty-front/src/modules/object-record/relation-picker/components/MultiRecordSelect.tsx index fe0f3453a..c4acbcb1f 100644 --- a/packages/twenty-front/src/modules/object-record/relation-picker/components/MultiRecordSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/relation-picker/components/MultiRecordSelect.tsx @@ -1,5 +1,5 @@ -import { useCallback, useRef } from 'react'; import styled from '@emotion/styled'; +import { useCallback, useRef } from 'react'; import { useRecoilValue, useSetRecoilState } from 'recoil'; import { useDebouncedCallback } from 'use-debounce'; @@ -10,6 +10,7 @@ import { MULTI_OBJECT_RECORD_SELECT_SELECTABLE_LIST_ID } from '@/object-record/r import { useRelationPickerScopedStates } from '@/object-record/relation-picker/hooks/internal/useRelationPickerScopedStates'; import { RelationPickerScopeInternalContext } from '@/object-record/relation-picker/scopes/scope-internal-context/RelationPickerScopeInternalContext'; import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope'; +import { CreateNewButton } from '@/ui/input/relation-picker/components/CreateNewButton'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput'; @@ -18,6 +19,7 @@ import { SelectableItem } from '@/ui/layout/selectable-list/components/Selectabl import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList'; import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId'; +import { IconPlus, isDefined } from 'twenty-ui'; export const StyledSelectableItem = styled(SelectableItem)` height: 100%; @@ -26,9 +28,11 @@ export const StyledSelectableItem = styled(SelectableItem)` export const MultiRecordSelect = ({ onChange, onSubmit, + onCreate, }: { onChange?: (changedRecordForSelectId: string) => void; onSubmit?: () => void; + onCreate?: ((searchInput?: string) => void) | (() => void); }) => { const containerRef = useRef(null); @@ -58,12 +62,18 @@ export const MultiRecordSelect = ({ leading: true, }); + const debouncedOnCreate = useDebouncedCallback( + () => onCreate?.(relationPickerSearchFilter), + 500, + ); + const handleFilterChange = useCallback( (event: React.ChangeEvent) => { debouncedSetSearchFilter(event.currentTarget.value); }, [debouncedSetSearchFilter], ); + return ( <> )} + {isDefined(onCreate) && ( + <> + {objectRecordsIdsMultiSelect.length > 0 && ( + + )} + + + )}