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

Feat(frontend): improve the soft delete empty state (#6877)

Browse Source 
# This PR

- Fix #6834 

## Demo


https://www.loom.com/share/235c4425f3264f429e2064a9d1604a90?sid=02a815c9-3b1a-45e6-b5ce-d5eb3b40e10e

## Notes

- There is a missing icon in Figma corresponding to the
`noDeletedRecordFound` in the dark mode, thus I used the same icon
(different background because we have the correct background image) for
both dark / light modes
<img width="625" alt="Screenshot 2024-09-03 at 15 04 57"
src="https://github.com/user-attachments/assets/cbc0c3dd-a1ee-49a5-be9a-36450e78a992">
cc: @Bonapara

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Pacifique LINJANJA
2024-09-18 09:39:39 +02:00
committed by GitHub
parent 9c885861a3
commit 601e15f028
45 changed files with 667 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
packages/twenty-front/src/pages/object-record/RecordIndexPage.tsx
View File

@ -1,16 +1,18 @@
import styled from '@emotion/styled';
import { useParams } from 'react-router-dom';
import { v4 } from 'uuid';
import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
import { lastShowPageRecordIdState } from '@/object-record/record-field/states/lastShowPageRecordId';
import { RecordIndexContainer } from '@/object-record/record-index/components/RecordIndexContainer';
import { RecordIndexPageHeader } from '@/object-record/record-index/components/RecordIndexPageHeader';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { useSelectedTableCellEditMode } from '@/object-record/record-table/record-table-cell/hooks/useSelectedTableCellEditMode';
import { RecordIndexRootPropsContext } from '@/object-record/record-index/contexts/RecordIndexRootPropsContext';
import { useHandleIndexIdentifierClick } from '@/object-record/record-index/hooks/useHandleIndexIdentifierClick';
import { useCreateNewTableRecord } from '@/object-record/record-table/hooks/useCreateNewTableRecords';
import { PageBody } from '@/ui/layout/page/PageBody';
import { PageContainer } from '@/ui/layout/page/PageContainer';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import { PageTitle } from '@/ui/utilities/page-title/PageTitle';
import { useRecoilCallback } from 'recoil';
import { capitalize } from '~/utils/string/capitalize';
const StyledIndexContainer = styled.div`
@ -23,39 +25,55 @@ export const RecordIndexPage = () => {
const objectNamePlural = useParams().objectNamePlural ?? '';
const recordIndexId = objectNamePlural ?? '';
const setHotkeyScope = useSetHotkeyScope();
const { setSelectedTableCellEditMode } = useSelectedTableCellEditMode({
scopeId: recordIndexId,
const { objectNameSingular } = useObjectNameSingularFromPlural({
objectNamePlural,
});
const { setPendingRecordId } = useRecordTable({
recordTableId: recordIndexId,
const { objectMetadataItem } = useObjectMetadataItem({
objectNameSingular,
});
const handleAddButtonClick = async () => {
setPendingRecordId(v4());
setSelectedTableCellEditMode(-1, 0);
setHotkeyScope(DEFAULT_CELL_SCOPE.scope, DEFAULT_CELL_SCOPE.customScopes);
const { createNewTableRecord } = useCreateNewTableRecord(recordIndexId);
const handleCreateRecord = () => {
createNewTableRecord();
};
const { handleIndexIdentifierClick } = useHandleIndexIdentifierClick({
objectMetadataItem,
recordIndexId,
});
const handleIndexRecordsLoaded = useRecoilCallback(
({ set }) =>
() => {
// TODO: find a better way to reset this state ?
set(lastShowPageRecordIdState, null);
},
[],
);
return (
<PageContainer>
<PageTitle title={`${capitalize(objectNamePlural)}`} />
<RecordIndexPageHeader
createRecord={handleAddButtonClick}
recordIndexId={recordIndexId}
objectNamePlural={objectNamePlural}
/>
<PageBody>
<StyledIndexContainer>
<RecordIndexContainer
recordIndexId={recordIndexId}
objectNamePlural={objectNamePlural}
createRecord={handleAddButtonClick}
/>
</StyledIndexContainer>
</PageBody>
<RecordIndexRootPropsContext.Provider
value={{
recordIndexId,
objectNamePlural,
objectNameSingular,
onIndexRecordsLoaded: handleIndexRecordsLoaded,
onIndexIdentifierClick: handleIndexIdentifierClick,
onCreateRecord: handleCreateRecord,
}}
>
<PageTitle title={`${capitalize(objectNamePlural)}`} />
<RecordIndexPageHeader />
<PageBody>
<StyledIndexContainer>
<RecordIndexContainer />
</StyledIndexContainer>
</PageBody>
</RecordIndexRootPropsContext.Provider>
</PageContainer>
);
};