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

43
front/src/modules/companies/hooks/useCompanyTableActionBarEntries.tsx
View File

@ -1,43 +0,0 @@
import { useSetRecoilState } from 'recoil';
import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
import { IconCheckbox, IconNotes, IconTrash } from '@/ui/display/icon';
import { actionBarEntriesState } from '@/ui/navigation/action-bar/states/actionBarEntriesState';
import { ActivityType } from '~/generated/graphql';
import { useDeleteSelectedComapnies } from './useDeleteCompanies';
export const useCompanyTableActionBarEntries = () => {
const setActionBarEntries = useSetRecoilState(actionBarEntriesState);
const openCreateActivityRightDrawer =
useOpenCreateActivityDrawerForSelectedRowIds();
const handleActivityClick = async (type: ActivityType) => {
openCreateActivityRightDrawer(type, ActivityTargetableEntityType.Company);
};
const deleteSelectedCompanies = useDeleteSelectedComapnies();
return {
setActionBarEntries: () =>
setActionBarEntries([
{
label: 'Note',
Icon: IconNotes,
onClick: () => handleActivityClick(ActivityType.Note),
},
{
label: 'Task',
Icon: IconCheckbox,
onClick: () => handleActivityClick(ActivityType.Task),
},
{
label: 'Delete',
Icon: IconTrash,
accent: 'danger',
onClick: () => deleteSelectedCompanies(),
},
]),
};
};

128
front/src/modules/companies/hooks/useCompanyTableContextMenuEntries.tsx
View File

@ -1,10 +1,10 @@
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { getOperationName } from '@apollo/client/utilities';
import { useRecoilCallback, useSetRecoilState } from 'recoil';
import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
import { useFavorites } from '@/favorites/hooks/useFavorites';
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,
IconHeart,
@ -12,58 +12,103 @@ 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, useGetFavoritesQuery } from '~/generated/graphql';
import {
ActivityType,
useDeleteManyCompaniesMutation,
useGetFavoritesQuery,
} from '~/generated/graphql';
import { useDeleteSelectedComapnies } from './useDeleteCompanies';
import { GET_COMPANY } from '../graphql/queries/getCompany';
import { useCreateActivityForCompany } from './useCreateActivityForCompany';
export const useCompanyTableContextMenuEntries = () => {
const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState);
const setActionBarEntriesState = useSetRecoilState(actionBarEntriesState);
const createActivityForCompany = useCreateActivityForCompany();
const openCreateActivityRightDrawer =
useOpenCreateActivityDrawerForSelectedRowIds();
const handleButtonClick = async (type: ActivityType) => {
openCreateActivityRightDrawer(type, ActivityTargetableEntityType.Company);
};
const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
const selectedCompanyId =
selectedRowIds.length === 1 ? selectedRowIds[0] : '';
const { insertCompanyFavorite, deleteCompanyFavorite } = useFavorites();
const setTableRowIds = useSetRecoilState(tableRowIdsState);
const resetRowSelection = useResetTableRowSelection();
const { data } = useGetFavoritesQuery();
const favorites = data?.findFavorites;
const { insertCompanyFavorite, deleteCompanyFavorite } = useFavorites();
const isFavorite =
!!selectedCompanyId &&
!!favorites?.find((favorite) => favorite.company?.id === selectedCompanyId);
const handleFavoriteButtonClick = useRecoilCallback(({ snapshot }) => () => {
const selectedRowIds = snapshot
.getLoadable(selectedRowIdsSelector)
.getValue();
const selectedCompanyId =
selectedRowIds.length === 1 ? selectedRowIds[0] : '';
const isFavorite =
!!selectedCompanyId &&
!!favorites?.find(
(favorite) => favorite.company?.id === selectedCompanyId,
);
const handleFavoriteButtonClick = () => {
resetRowSelection();
if (isFavorite) deleteCompanyFavorite(selectedCompanyId);
else insertCompanyFavorite(selectedCompanyId);
};
});
const deleteSelectedCompanies = useDeleteSelectedComapnies();
const [deleteManyCompany] = useDeleteManyCompaniesMutation({
refetchQueries: [getOperationName(GET_COMPANY) ?? ''],
});
const handleDeleteClick = useRecoilCallback(({ snapshot }) => async () => {
const rowIdsToDelete = snapshot
.getLoadable(selectedRowIdsSelector)
.getValue();
resetRowSelection();
await deleteManyCompany({
variables: {
ids: rowIdsToDelete,
},
optimisticResponse: {
__typename: 'Mutation',
deleteManyCompany: {
count: rowIdsToDelete.length,
},
},
update: () => {
setTableRowIds((tableRowIds) =>
tableRowIds.filter((id) => !rowIdsToDelete.includes(id)),
);
},
});
});
return {
setContextMenuEntries: () =>
setContextMenuEntries: useRecoilCallback(({ snapshot }) => () => {
const selectedRowIds = snapshot
.getLoadable(selectedRowIdsSelector)
.getValue();
const selectedCompanyId =
selectedRowIds.length === 1 ? selectedRowIds[0] : '';
const isFavorite =
!!selectedCompanyId &&
!!favorites?.find(
(favorite) => favorite.company?.id === selectedCompanyId,
);
setContextMenuEntries([
{
label: 'New task',
Icon: IconCheckbox,
onClick: () => handleButtonClick(ActivityType.Task),
onClick: () => createActivityForCompany(ActivityType.Task),
},
{
label: 'New note',
Icon: IconNotes,
onClick: () => handleButtonClick(ActivityType.Note),
onClick: () => createActivityForCompany(ActivityType.Note),
},
...(!!selectedCompanyId
? [
@ -80,8 +125,29 @@ export const useCompanyTableContextMenuEntries = () => {
label: 'Delete',
Icon: IconTrash,
accent: 'danger',
onClick: () => deleteSelectedCompanies(),
onClick: () => handleDeleteClick(),
},
]),
]);
}),
setActionBarEntries: useRecoilCallback(() => () => {
setActionBarEntriesState([
{
label: 'Task',
Icon: IconCheckbox,
onClick: () => createActivityForCompany(ActivityType.Task),
},
{
label: 'Note',
Icon: IconNotes,
onClick: () => createActivityForCompany(ActivityType.Note),
},
{
label: 'Delete',
Icon: IconTrash,
accent: 'danger',
onClick: () => handleDeleteClick(),
},
]);
}),
};
};

17
front/src/modules/companies/hooks/useCreateActivityForCompany.ts Normal file
View File

@ -0,0 +1,17 @@
import { useRecoilCallback } from 'recoil';
import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
import { ActivityType } from '~/generated/graphql';
export const useCreateActivityForCompany = () => {
const openCreateActivityRightDrawer =
useOpenCreateActivityDrawerForSelectedRowIds();
return useRecoilCallback(
() => (type: ActivityType) => {
openCreateActivityRightDrawer(type, ActivityTargetableEntityType.Company);
},
[openCreateActivityRightDrawer],
);
};

5
front/src/modules/companies/table/components/CompanyTable.tsx
View File

@ -3,7 +3,6 @@ import { useRecoilCallback, useSetRecoilState } from 'recoil';
import { companiesAvailableFieldDefinitions } from '@/companies/constants/companiesAvailableFieldDefinitions';
import { getCompaniesOptimisticEffectDefinition } from '@/companies/graphql/optimistic-effect-definitions/getCompaniesOptimisticEffectDefinition';
import { useCompanyTableActionBarEntries } from '@/companies/hooks/useCompanyTableActionBarEntries';
import { useCompanyTableContextMenuEntries } from '@/companies/hooks/useCompanyTableContextMenuEntries';
import { useSpreadsheetCompanyImport } from '@/companies/hooks/useSpreadsheetCompanyImport';
import { DataTable } from '@/ui/data/data-table/components/DataTable';
@ -63,8 +62,8 @@ export const CompanyTable = () => {
viewScopeId,
});
const { setContextMenuEntries } = useCompanyTableContextMenuEntries();
const { setActionBarEntries } = useCompanyTableActionBarEntries();
const { setContextMenuEntries, setActionBarEntries } =
useCompanyTableContextMenuEntries();
const updateCompany = async (
variables: UpdateOneCompanyMutationVariables,

18
front/src/modules/companies/table/components/CompanyTableEffect.tsx
View File

@ -40,24 +40,6 @@ const CompanyTableEffect = () => {
setViewType,
]);
// useEffect(() => {
// if (currentViewSorts) {
// setTableSorts(currentViewSorts);
// }
// }, [currentViewFields, currentViewSorts, setTableColumns, setTableSorts]);
// useEffect(() => {
// if (currentViewFilters) {
// setTableFilters(currentViewFilters);
// }
// }, [
// currentViewFields,
// currentViewFilters,
// setTableColumns,
// setTableFilters,
// setTableSorts,
// ]);
return <></>;
};

2
front/src/modules/companies/table/components/CompanyTableMockDataEffect.tsx
View File

@ -16,7 +16,7 @@ export const CompanyTableMockDataEffect = () => {
const setDataTableData = useSetDataTableData();
useEffect(() => {
setDataTableData(mockedCompaniesData, [], []);
setDataTableData(mockedCompaniesData);
setTableColumns(companiesAvailableFieldDefinitions);
}, [setDataTableData, setTableColumns]);

28
front/src/modules/companies/table/components/CompanyTableMockMode.tsx
View File

@ -1,15 +1,35 @@
import styled from '@emotion/styled';
import { DataTable } from '@/ui/data/data-table/components/DataTable';
import { TableOptionsDropdownId } from '@/ui/data/data-table/constants/TableOptionsDropdownId';
import { TableOptionsDropdown } from '@/ui/data/data-table/options/components/TableOptionsDropdown';
import { ViewBar } from '@/views/components/ViewBar';
import { ViewScope } from '@/views/scopes/ViewScope';
import { useUpdateOneCompanyMutation } from '~/generated/graphql';
import CompanyTableEffect from './CompanyTableEffect';
import { CompanyTableMockDataEffect } from './CompanyTableMockDataEffect';
const StyledContainer = styled.div`
display: flex;
flex-direction: column;
height: 100%;
overflow: auto;
`;
export const CompanyTableMockMode = () => {
return (
<ViewScope viewScopeId="company-table-mock-mode">
<CompanyTableMockDataEffect />
<StyledContainer>
<ViewScope viewScopeId="company-table-mock-mode">
<CompanyTableEffect />
<CompanyTableMockDataEffect />
<ViewBar
optionsDropdownButton={<TableOptionsDropdown />}
optionsDropdownScopeId={TableOptionsDropdownId}
/>
<DataTable updateEntityMutation={useUpdateOneCompanyMutation} />
</ViewScope>
<DataTable updateEntityMutation={useUpdateOneCompanyMutation} />
</ViewScope>
</StyledContainer>
);
};