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

fix - add new button on opportunity board company picker doesnt work (#8488)

Browse Source 
Closes https://github.com/twentyhq/twenty/issues/8455


https://github.com/user-attachments/assets/fec269b9-abb4-47e4-811e-fa23b69ca040

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
nitin
2024-12-17 21:39:11 +05:30
committed by GitHub
parent f05a217f62
commit edff53f5b8
4 changed files with 60 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnNewOpportunity.tsx
View File

@ -1,10 +1,17 @@
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
import { useAddNewCard } from '@/object-record/record-board/record-board-column/hooks/useAddNewCard';
import { recordBoardNewRecordByColumnIdSelector } from '@/object-record/record-board/states/selectors/recordBoardNewRecordByColumnIdSelector';
import { viewableRecordIdState } from '@/object-record/record-right-drawer/states/viewableRecordIdState';
import { viewableRecordNameSingularState } from '@/object-record/record-right-drawer/states/viewableRecordNameSingularState';
import { SingleRecordSelect } from '@/object-record/relation-picker/components/SingleRecordSelect';
import { RecordPickerComponentInstanceContext } from '@/object-record/relation-picker/states/contexts/RecordPickerComponentInstanceContext';
import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
import { useRecoilValue } from 'recoil';
import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { v4 } from 'uuid';
import { isDefined } from '~/utils/isDefined';
export const RecordBoardColumnNewOpportunity = ({
columnId,
position,
@ -18,21 +25,55 @@ export const RecordBoardColumnNewOpportunity = ({
scopeId: columnId,
}),
);
const { handleCreateSuccess, handleEntitySelect } = useAddNewCard();
const { createOneRecord: createCompany } = useCreateOneRecord({
objectNameSingular: CoreObjectNameSingular.Company,
});
const { openRightDrawer } = useRightDrawer();
const setViewableRecordId = useSetRecoilState(viewableRecordIdState);
const setViewableRecordNameSingular = useSetRecoilState(
viewableRecordNameSingularState,
);
const createCompanyOpportunityAndOpenRightDrawer = async (
searchInput?: string,
) => {
const newRecordId = v4();
const createdCompany = await createCompany({
id: newRecordId,
name: searchInput,
});
setViewableRecordId(newRecordId);
setViewableRecordNameSingular(CoreObjectNameSingular.Company);
openRightDrawer(RightDrawerPages.ViewRecord);
if (isDefined(createdCompany)) {
handleEntitySelect(position, createdCompany);
}
};
return (
<>
{newRecord.isCreating && newRecord.position === position && (
<OverlayContainer>
<SingleRecordSelect
onCancel={() => handleCreateSuccess(position, columnId, false)}
onRecordSelected={(company) =>
company ? handleEntitySelect(position, company) : null
}
objectNameSingular={CoreObjectNameSingular.Company}
recordPickerInstanceId="relation-picker"
selectedRecordIds={[]}
/>
<RecordPickerComponentInstanceContext.Provider
value={{ instanceId: 'relation-picker' }}
>
<SingleRecordSelect
onCancel={() => handleCreateSuccess(position, columnId, false)}
onRecordSelected={(company) =>
company ? handleEntitySelect(position, company) : null
}
objectNameSingular={CoreObjectNameSingular.Company}
selectedRecordIds={[]}
onCreate={createCompanyOpportunityAndOpenRightDrawer}
/>
</RecordPickerComponentInstanceContext.Provider>
</OverlayContainer>
)}
</>

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

@ -20,7 +20,6 @@ export const SingleRecordSelect = ({
onCreate,
onRecordSelected,
objectNameSingular,
recordPickerInstanceId,
selectedRecordIds,
width = 200,
}: SingleRecordSelectProps) => {
@ -53,7 +52,6 @@ export const SingleRecordSelect = ({
onCreate,
onRecordSelected,
objectNameSingular,
recordPickerInstanceId,
selectedRecordIds,
}}
/>

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

@ -4,10 +4,12 @@ import {
} from '@/object-record/relation-picker/components/SingleRecordSelectMenuItems';
import { useRecordPickerRecordsOptions } from '@/object-record/relation-picker/hooks/useRecordPickerRecordsOptions';
import { useRecordSelectSearch } from '@/object-record/relation-picker/hooks/useRecordSelectSearch';
import { RecordPickerComponentInstanceContext } from '@/object-record/relation-picker/states/contexts/RecordPickerComponentInstanceContext';
import { CreateNewButton } from '@/ui/input/relation-picker/components/CreateNewButton';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { Placement } from '@floating-ui/react';
import { IconPlus } from 'twenty-ui';
import { isDefined } from '~/utils/isDefined';
@ -37,13 +39,14 @@ export const SingleRecordSelectMenuItemsWithSearch = ({
onCreate,
onRecordSelected,
objectNameSingular,
recordPickerInstanceId = 'record-picker',
selectedRecordIds,
dropdownPlacement,
}: SingleRecordSelectMenuItemsWithSearchProps) => {
const { handleSearchFilterChange } = useRecordSelectSearch({
recordPickerInstanceId,
});
const { handleSearchFilterChange } = useRecordSelectSearch();
const recordPickerInstanceId = useAvailableComponentInstanceIdOrThrow(
RecordPickerComponentInstanceContext,
);
const { records, recordPickerSearchFilter } = useRecordPickerRecordsOptions({
objectNameSingular,

1
packages/twenty-front/src/modules/search/hooks/useFilteredSearchRecordQuery.ts
View File

@ -60,6 +60,7 @@ export const useFilteredSearchRecordQuery = ({
filter: notFilter,
limit: limit ?? DEFAULT_SEARCH_REQUEST_LIMIT,
searchInput: searchFilter,
fetchPolicy: 'cache-and-network',
});
return {