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

Delete button in right drawer / side pannel (#7200)

Browse Source 
fixes #7069 
@Bonapara 


https://github.com/user-attachments/assets/b1b57070-1ef4-4cc3-9907-028219245558

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
This commit is contained in:
nitin
2024-10-02 23:52:55 +05:30
committed by GitHub
parent 098d43d460
commit 83e43366bb
9 changed files with 130 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/twenty-front/src/modules/object-record/hooks/useDeleteOneRecord.ts
View File

@ -1,5 +1,5 @@
import { useCallback } from 'react';
import { useApolloClient } from '@apollo/client';
import { useCallback } from 'react';
import { triggerDeleteRecordsOptimisticEffect } from '@/apollo/optimistic-effect/utils/triggerDeleteRecordsOptimisticEffect';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
@ -11,7 +11,6 @@ import { capitalize } from '~/utils/string/capitalize';
type useDeleteOneRecordProps = {
objectNameSingular: string;
refetchFindManyQuery?: boolean;
};
export const useDeleteOneRecord = ({
@ -38,13 +37,18 @@ export const useDeleteOneRecord = ({
const deleteOneRecord = useCallback(
async (idToDelete: string) => {
const currentTimestamp = new Date().toISOString();
const deletedRecord = await apolloClient.mutate({
mutation: deleteOneRecordMutation,
variables: { idToDelete },
variables: {
idToDelete: idToDelete,
},
optimisticResponse: {
[mutationResponseField]: {
__typename: capitalize(objectNameSingular),
id: idToDelete,
deletedAt: currentTimestamp,
},
},
update: (cache, { data }) => {

12
packages/twenty-front/src/modules/object-record/hooks/useDeleteOneRecordMutation.ts
View File

@ -1,6 +1,7 @@
import gql from 'graphql-tag';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { mapSoftDeleteFieldsToGraphQLQuery } from '@/object-metadata/utils/mapSoftDeleteFieldsToGraphQLQuery';
import { EMPTY_MUTATION } from '@/object-record/constants/EmptyMutation';
import { getDeleteOneRecordMutationResponseField } from '@/object-record/utils/getDeleteOneRecordMutationResponseField';
import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
@ -26,12 +27,11 @@ export const useDeleteOneRecordMutation = ({
);
const deleteOneRecordMutation = gql`
mutation DeleteOne${capitalizedObjectName}($idToDelete: ID!) {
${mutationResponseField}(id: $idToDelete) {
id
}
}
`;
mutation DeleteOne${capitalizedObjectName}($idToDelete: ID!) {
${mutationResponseField}(id: $idToDelete)
${mapSoftDeleteFieldsToGraphQLQuery(objectMetadataItem)}
}
`;
return {
deleteOneRecordMutation,

27
packages/twenty-front/src/modules/object-record/record-right-drawer/components/RightDrawerRecord.tsx
View File

@ -6,6 +6,13 @@ import { RecordShowContainer } from '@/object-record/record-show/components/Reco
import { useRecordShowPage } from '@/object-record/record-show/hooks/useRecordShowPage';
import { RecordValueSetterEffect } from '@/object-record/record-store/components/RecordValueSetterEffect';
import { RecordFieldValueSelectorContextProvider } from '@/object-record/record-store/contexts/RecordFieldValueSelectorContext';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import styled from '@emotion/styled';
const StyledRightDrawerRecord = styled.div`
height: ${({ theme }) =>
useIsMobile() ? `calc(100% - ${theme.spacing(16)})` : '100%'};
`;
export const RightDrawerRecord = () => {
const viewableRecordNameSingular = useRecoilValue(
@ -27,14 +34,16 @@ export const RightDrawerRecord = () => {
);
return (
<RecordFieldValueSelectorContextProvider>
<RecordValueSetterEffect recordId={objectRecordId} />
<RecordShowContainer
objectNameSingular={objectNameSingular}
objectRecordId={objectRecordId}
loading={false}
isInRightDrawer={true}
/>
</RecordFieldValueSelectorContextProvider>
<StyledRightDrawerRecord>
<RecordFieldValueSelectorContextProvider>
<RecordValueSetterEffect recordId={objectRecordId} />
<RecordShowContainer
objectNameSingular={objectNameSingular}
objectRecordId={objectRecordId}
loading={false}
isInRightDrawer={true}
/>
</RecordFieldValueSelectorContextProvider>
</StyledRightDrawerRecord>
);
};

3
packages/twenty-front/src/modules/object-record/record-show/components/RecordShowContainer.tsx
View File

@ -26,6 +26,7 @@ import { RecordDetailRelationSection } from '@/object-record/record-show/record-
import { recordLoadingFamilyState } from '@/object-record/record-store/states/recordLoadingFamilyState';
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
import { recordStoreIdentifierFamilySelector } from '@/object-record/record-store/states/selectors/recordStoreIdentifierSelector';
import { ObjectRecord } from '@/object-record/types/ObjectRecord';
import { isFieldCellSupported } from '@/object-record/utils/isFieldCellSupported';
import { useIsPrefetchLoading } from '@/prefetch/hooks/useIsPrefetchLoading';
import { ShowPageContainer } from '@/ui/layout/page/ShowPageContainer';
@ -69,7 +70,7 @@ export const RecordShowContainer = ({
recordLoadingFamilyState(objectRecordId),
);
const [recordFromStore] = useRecoilState<any>(
const [recordFromStore] = useRecoilState<ObjectRecord | null>(
recordStoreFamilyState(objectRecordId),
);