diff --git a/packages/twenty-front/src/modules/object-record/components/RecordShowPage.tsx b/packages/twenty-front/src/modules/object-record/components/RecordShowPage.tsx index b3de9f479..05966c35c 100644 --- a/packages/twenty-front/src/modules/object-record/components/RecordShowPage.tsx +++ b/packages/twenty-front/src/modules/object-record/components/RecordShowPage.tsx @@ -21,6 +21,7 @@ import { PageHeader } from '@/ui/layout/page/PageHeader'; import { ShowPageContainer } from '@/ui/layout/page/ShowPageContainer'; import { ShowPageAddButton } from '@/ui/layout/show-page/components/ShowPageAddButton'; import { ShowPageLeftContainer } from '@/ui/layout/show-page/components/ShowPageLeftContainer'; +import { ShowPageMoreButton } from '@/ui/layout/show-page/components/ShowPageMoreButton'; import { ShowPageRightContainer } from '@/ui/layout/show-page/components/ShowPageRightContainer'; import { ShowPageSummaryCard } from '@/ui/layout/show-page/components/ShowPageSummaryCard'; import { ShowPageRecoilScopeContext } from '@/ui/layout/states/ShowPageRecoilScopeContext'; @@ -208,6 +209,11 @@ export const RecordShowPage = () => { type: objectMetadataType, }} /> + )} diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx new file mode 100644 index 000000000..02f7cc3ef --- /dev/null +++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx @@ -0,0 +1,78 @@ +import { useNavigate } from 'react-router-dom'; +import styled from '@emotion/styled'; +import { useRecoilValue } from 'recoil'; + +import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord'; +import { PageHotkeyScope } from '@/types/PageHotkeyScope'; +import { IconDotsVertical, IconTrash } from '@/ui/display/icon/index'; +import { IconButton } from '@/ui/input/button/components/IconButton'; +import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; +import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; +import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; +import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState'; + +import { Dropdown } from '../../dropdown/components/Dropdown'; +import { DropdownMenu } from '../../dropdown/components/DropdownMenu'; +import { DropdownScope } from '../../dropdown/scopes/DropdownScope'; + +const StyledContainer = styled.div` + z-index: 1; +`; + +export const ShowPageMoreButton = ({ + recordId, + objectNameSingular, +}: { + recordId: string; + objectNameSingular: string; +}) => { + const { closeDropdown, toggleDropdown } = useDropdown({ + dropdownScopeId: 'more-show-page', + }); + const navigationMemorizedUrl = useRecoilValue(navigationMemorizedUrlState); + const navigate = useNavigate(); + + const { deleteOneRecord: deleteOneRecord } = useDeleteOneRecord({ + objectNameSingular, + }); + + const handleDelete = () => { + deleteOneRecord(recordId); + closeDropdown(); + navigate(navigationMemorizedUrl, { replace: true }); + }; + + return ( + + + + } + dropdownComponents={ + + + + + + } + dropdownHotkeyScope={{ + scope: PageHotkeyScope.ShowPage, + }} + /> + + + ); +};