scottk/twenty
1
0
Fork 0
mirror of https://github.com/lingble/twenty.git synced 2025-10-30 20:27:55 +00: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
2 changed files with 13 additions and 130 deletions
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 { useNavigate } from 'react-router-dom';
import { useRecoilState, useRecoilValue } from 'recoil';
import {
IconButton,
IconDotsVertical,
IconRestore,
IconTrash,
MenuItem,
} from 'twenty-ui';
import { IconButton, IconDotsVertical } from 'twenty-ui';
import { useDeleteOneRecord } from '@/object-record/hooks/useDeleteOneRecord';
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 { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
import { isObjectMetadataReadOnly } from '@/object-metadata/utils/isObjectMetadataReadOnly';
import { useDestroyOneRecord } from '@/object-record/hooks/useDestroyOneRecord';
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;
}
export const ShowPageMoreButton = () => {
const { openCommandMenu } = useCommandMenu();
return (
<StyledContainer>
<Dropdown
dropdownId="more-show-page"
clickableComponent={
<IconButton
Icon={IconDotsVertical}
size="medium"
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>
<IconButton
Icon={IconDotsVertical}
size="medium"
dataTestId="more-showpage-button"
accent="default"
variant="secondary"
onClick={openCommandMenu}
/>
);
};

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

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