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

Refactor ObjectDataTable to work with new views system (#2274)

Browse Source 
Complete work
This commit is contained in:
Charles Bochet
2023-10-29 23:50:59 +01:00
committed by GitHub
parent 9bab28912d
commit d38497c46a
39 changed files with 578 additions and 373 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
front/src/modules/people/hooks/useCreateActivityForPeople.ts
View File

@ -1,4 +1,4 @@
import { useRecoilCallback, useRecoilValue } from 'recoil';
import { useRecoilCallback } from 'recoil';
import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
import {
@ -12,12 +12,14 @@ import { ActivityType, Person } from '~/generated/graphql';
export const useCreateActivityForPeople = () => {
const openCreateActivityRightDrawer =
useOpenCreateActivityDrawerForSelectedRowIds();
const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
return useRecoilCallback(
({ snapshot }) =>
(type: ActivityType) => {
const relatedEntites: ActivityTargetableEntity[] = [];
const selectedRowIds = Object.keys(
snapshot.getLoadable(selectedRowIdsSelector).getValue(),
);
for (const id of selectedRowIds) {
const person = snapshot
.getLoadable(entityFieldsFamilyState(id))
@ -39,6 +41,6 @@ export const useCreateActivityForPeople = () => {
relatedEntites,
);
},
[selectedRowIds, openCreateActivityRightDrawer],
[openCreateActivityRightDrawer],
);
};

75
front/src/modules/people/hooks/usePersonTableActionBarEntries.tsx
View File

@ -1,75 +0,0 @@
import { getOperationName } from '@apollo/client/utilities';
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import { useResetTableRowSelection } from '@/ui/data/data-table/hooks/useResetTableRowSelection';
import { selectedRowIdsSelector } from '@/ui/data/data-table/states/selectors/selectedRowIdsSelector';
import { tableRowIdsState } from '@/ui/data/data-table/states/tableRowIdsState';
import { IconCheckbox, IconNotes, IconTrash } from '@/ui/display/icon';
import { actionBarEntriesState } from '@/ui/navigation/action-bar/states/actionBarEntriesState';
import { ActivityType, useDeleteManyPersonMutation } from '~/generated/graphql';
import { GET_PEOPLE } from '../graphql/queries/getPeople';
import { useCreateActivityForPeople } from './useCreateActivityForPeople';
export const usePersonTableActionBarEntries = () => {
const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
const setActionBarEntries = useSetRecoilState(actionBarEntriesState);
const createActivityForPeople = useCreateActivityForPeople();
const resetRowSelection = useResetTableRowSelection();
const [deleteManyPerson] = useDeleteManyPersonMutation({
refetchQueries: [getOperationName(GET_PEOPLE) ?? ''],
});
const handleDeleteClick = async () => {
const rowIdsToDelete = selectedRowIds;
resetRowSelection();
await deleteManyPerson({
variables: {
ids: rowIdsToDelete,
},
optimisticResponse: {
__typename: 'Mutation',
deleteManyPerson: {
count: rowIdsToDelete.length,
},
},
update: (cache) => {
setTableRowIds(
tableRowIds.filter((id) => !rowIdsToDelete.includes(id)),
);
rowIdsToDelete.forEach((id) => {
cache.evict({ id: cache.identify({ id, __typename: 'Person' }) });
cache.gc();
});
},
});
};
return {
setActionBarEntries: () =>
setActionBarEntries([
{
label: 'Note',
Icon: IconNotes,
onClick: () => createActivityForPeople(ActivityType.Note),
},
{
label: 'Task',
Icon: IconCheckbox,
onClick: () => createActivityForPeople(ActivityType.Task),
},
{
label: 'Delete',
Icon: IconTrash,
accent: 'danger',
onClick: () => handleDeleteClick(),
},
]),
};
};

80
front/src/modules/people/hooks/usePersonTableContextMenuEntries.tsx
View File

@ -1,5 +1,5 @@
import { getOperationName } from '@apollo/client/utilities';
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import { useRecoilCallback, useSetRecoilState } from 'recoil';
import { useFavorites } from '@/favorites/hooks/useFavorites';
import { useResetTableRowSelection } from '@/ui/data/data-table/hooks/useResetTableRowSelection';
@ -12,6 +12,7 @@ import {
IconNotes,
IconTrash,
} from '@/ui/display/icon';
import { actionBarEntriesState } from '@/ui/navigation/action-bar/states/actionBarEntriesState';
import { contextMenuEntriesState } from '@/ui/navigation/context-menu/states/contextMenuEntriesState';
import {
ActivityType,
@ -25,38 +26,41 @@ import { useCreateActivityForPeople } from './useCreateActivityForPeople';
export const usePersonTableContextMenuEntries = () => {
const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState);
const setActionBarEntriesState = useSetRecoilState(actionBarEntriesState);
const createActivityForPeople = useCreateActivityForPeople();
const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
const setTableRowIds = useSetRecoilState(tableRowIdsState);
const resetRowSelection = useResetTableRowSelection();
const selectedPersonId = selectedRowIds.length === 1 ? selectedRowIds[0] : '';
const { data } = useGetFavoritesQuery();
const favorites = data?.findFavorites;
const isFavorite =
!!selectedPersonId &&
!!favorites?.find((favorite) => favorite.person?.id === selectedPersonId);
const { insertPersonFavorite, deletePersonFavorite } = useFavorites();
const handleFavoriteButtonClick = () => {
const handleFavoriteButtonClick = useRecoilCallback(({ snapshot }) => () => {
const selectedRowIds = snapshot
.getLoadable(selectedRowIdsSelector)
.getValue();
const selectedPersonId =
selectedRowIds.length === 1 ? selectedRowIds[0] : '';
const isFavorite =
!!selectedPersonId &&
!!favorites?.find((favorite) => favorite.person?.id === selectedPersonId);
resetRowSelection();
if (isFavorite) deletePersonFavorite(selectedPersonId);
else insertPersonFavorite(selectedPersonId);
};
});
const [deleteManyPerson] = useDeleteManyPersonMutation({
refetchQueries: [getOperationName(GET_PEOPLE) ?? ''],
});
const handleDeleteClick = async () => {
const rowIdsToDelete = selectedRowIds;
const handleDeleteClick = useRecoilCallback(({ snapshot }) => async () => {
const rowIdsToDelete = snapshot
.getLoadable(selectedRowIdsSelector)
.getValue();
resetRowSelection();
@ -71,15 +75,28 @@ export const usePersonTableContextMenuEntries = () => {
},
},
update: () => {
setTableRowIds(
setTableRowIds((tableRowIds) =>
tableRowIds.filter((id) => !rowIdsToDelete.includes(id)),
);
},
});
};
});
return {
setContextMenuEntries: () =>
setContextMenuEntries: useRecoilCallback(({ snapshot }) => () => {
const selectedRowIds = snapshot
.getLoadable(selectedRowIdsSelector)
.getValue();
const selectedPersonId =
selectedRowIds.length === 1 ? selectedRowIds[0] : '';
const isFavorite =
!!selectedPersonId &&
!!favorites?.find(
(favorite) => favorite.person?.id === selectedPersonId,
);
setContextMenuEntries([
{
label: 'New task',
@ -108,6 +125,27 @@ export const usePersonTableContextMenuEntries = () => {
accent: 'danger',
onClick: () => handleDeleteClick(),
},
]),
]);
}),
setActionBarEntries: useRecoilCallback(() => () => {
setActionBarEntriesState([
{
label: 'Task',
Icon: IconCheckbox,
onClick: () => createActivityForPeople(ActivityType.Task),
},
{
label: 'Note',
Icon: IconNotes,
onClick: () => createActivityForPeople(ActivityType.Note),
},
{
label: 'Delete',
Icon: IconTrash,
accent: 'danger',
onClick: () => handleDeleteClick(),
},
]);
}),
};
};

6
front/src/modules/people/table/components/PersonTable.tsx
View File

@ -3,7 +3,6 @@ import { useRecoilCallback, useSetRecoilState } from 'recoil';
import { peopleAvailableFieldDefinitions } from '@/people/constants/peopleAvailableFieldDefinitions';
import { getPeopleOptimisticEffectDefinition } from '@/people/graphql/optimistic-effect-definitions/getPeopleOptimisticEffectDefinition';
import { usePersonTableActionBarEntries } from '@/people/hooks/usePersonTableActionBarEntries';
import { usePersonTableContextMenuEntries } from '@/people/hooks/usePersonTableContextMenuEntries';
import { useSpreadsheetPersonImport } from '@/people/hooks/useSpreadsheetPersonImport';
import { DataTable } from '@/ui/data/data-table/components/DataTable';
@ -53,8 +52,8 @@ export const PersonTable = () => {
viewScopeId,
});
const { setContextMenuEntries } = usePersonTableContextMenuEntries();
const { setActionBarEntries } = usePersonTableActionBarEntries();
const { setContextMenuEntries, setActionBarEntries } =
usePersonTableContextMenuEntries();
const updatePerson = async (variables: UpdateOnePersonMutationVariables) => {
updateEntityMutation({
@ -74,7 +73,6 @@ export const PersonTable = () => {
const StyledContainer = styled.div`
display: flex;
flex-direction: column;
height: 100%;
overflow: auto;
`;

23
front/src/modules/people/table/components/PersonTableEffect.tsx
View File

@ -46,29 +46,6 @@ const PeopleTableEffect = () => {
setViewObjectId,
setViewType,
]);
// useEffect(() => {
// if (currentViewFields) {
// setTableColumns([...currentViewFields].sort((a, b) => a.index - b.index));
// }
// }, [currentViewFields, setTableColumns]);
// useEffect(() => {
// if (currentViewSorts) {
// setTableSorts(currentViewSorts);
// }
// }, [currentViewFields, currentViewSorts, setTableColumns, setTableSorts]);
// useEffect(() => {
// if (currentViewFilters) {
// setTableFilters(currentViewFilters);
// }
// }, [
// currentViewFields,
// currentViewFilters,
// setTableColumns,
// setTableFilters,
// setTableSorts,
// ]);
return <></>;
};