twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-22 03:17:40 +03:00
Code Issues Packages Projects Releases Wiki Activity

Update ShowPageMoreButton to open the command menu when clicked (#8565)

Browse Source 
https://github.com/user-attachments/assets/6e269391-8ea2-4146-8e86-7e75c84982f4
This commit is contained in:
Raphaël Bosi 2024-11-18 17:44:23 +01:00 committed by GitHub
parent e1a730a8fc
commit 9810c5b6f2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 13 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageMoreButton.tsx
View File

@ -1,130 +1,18 @@
import styled from '@emotion/styled'; import { IconButton, IconDotsVertical } from 'twenty-ui';
import { useNavigate } from 'react-router-dom';
import { useRecoilState, useRecoilValue } from 'recoil';
import {
IconButton,
IconDotsVertical,
IconRestore,
IconTrash,
MenuItem,
} from 'twenty-ui';
import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord'; import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { PageHotkeyScope } from '@/types/PageHotkeyScope';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
import { isObjectMetadataReadOnly } from '@/object-metadata/utils/isObjectMetadataReadOnly'; export const ShowPageMoreButton = () => {
import { useDestroyOneRecord } from '@/object-record/hooks/useDestroyOneRecord'; const { openCommandMenu } = useCommandMenu();
import { useRestoreManyRecords } from '@/object-record/hooks/useRestoreManyRecords';
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
import { Dropdown } from '../../dropdown/components/Dropdown';
import { DropdownMenu } from '../../dropdown/components/DropdownMenu';
const StyledContainer = styled.div`
z-index: 1;
`;
export const ShowPageMoreButton = ({
recordId,
objectNameSingular,
isRemote,
}: {
recordId: string;
objectNameSingular: string;
isRemote: boolean;
}) => {
const { closeDropdown, toggleDropdown } = useDropdown('more-show-page');
const navigationMemorizedUrl = useRecoilValue(navigationMemorizedUrlState);
const navigate = useNavigate();
const { deleteOneRecord } = useDeleteOneRecord({
objectNameSingular,
});
const { destroyOneRecord } = useDestroyOneRecord({
objectNameSingular,
});
const { restoreManyRecords } = useRestoreManyRecords({
objectNameSingular,
});
const handleDelete = () => {
deleteOneRecord(recordId);
closeDropdown();
};
const handleDestroy = () => {
destroyOneRecord(recordId);
closeDropdown();
navigate(navigationMemorizedUrl, { replace: true });
};
const handleRestore = () => {
restoreManyRecords([recordId]);
closeDropdown();
};
const [recordFromStore] = useRecoilState<any>(
recordStoreFamilyState(recordId),
);
if (
isObjectMetadataReadOnly({
isRemote,
nameSingular: objectNameSingular,
})
) {
return;
}
return ( return (
<StyledContainer> <IconButton
<Dropdown Icon={IconDotsVertical}
dropdownId="more-show-page" size="medium"
clickableComponent={ dataTestId="more-showpage-button"
<IconButton accent="default"
Icon={IconDotsVertical} variant="secondary"
size="medium" onClick={openCommandMenu}
dataTestId="more-showpage-button" />
accent="default"
variant="secondary"
onClick={toggleDropdown}
/>
}
dropdownComponents={
<DropdownMenu>
<DropdownMenuItemsContainer>
{recordFromStore && !recordFromStore.deletedAt && (
<MenuItem
onClick={handleDelete}
accent="danger"
LeftIcon={IconTrash}
text="Delete"
/>
)}
{recordFromStore && recordFromStore.deletedAt && (
<>
<MenuItem
onClick={handleDestroy}
accent="danger"
LeftIcon={IconTrash}
text="Destroy"
/>
<MenuItem
onClick={handleRestore}
LeftIcon={IconRestore}
text="Restore"
/>
</>
)}
</DropdownMenuItemsContainer>
</DropdownMenu>
}
dropdownHotkeyScope={{
scope: PageHotkeyScope.ShowPage,
}}
/>
</StyledContainer>
); );
}; };

7
packages/twenty-front/src/pages/object-record/RecordShowPageBaseHeader.tsx
View File

@ -49,12 +49,7 @@ export const RecordShowPageBaseHeader = ({
targetObjectNameSingular: objectMetadataItem.nameSingular, targetObjectNameSingular: objectMetadataItem.nameSingular,
}} }}
/> />
<ShowPageMoreButton <ShowPageMoreButton key="more" />
key="more"
recordId={record?.id ?? '0'}
objectNameSingular={objectNameSingular}
isRemote={objectMetadataItem.isRemote}
/>
</> </>
); );
}; };