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

- rename entries hooks

Browse Source 
- tests
- move useeffects to sub components
This commit is contained in:
brendanlaschke
2023-08-14 23:52:36 +02:00
parent a7f4326419
commit cbd0d0a724
21 changed files with 235 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
front/src/modules/companies/components/HooksCompanyBoard.tsx
View File

@ -27,8 +27,12 @@ import { CompanyBoardContext } from '../states/CompanyBoardContext';
export function HooksCompanyBoard({
orderBy,
setActionBar,
setContextMenu,
}: {
orderBy: PipelineProgresses_Order_By[];
setActionBar?: () => void;
setContextMenu?: () => void;
}) {
const setFieldsDefinitionsState = useSetRecoilState(
viewFieldsDefinitionsState,
@ -110,6 +114,13 @@ export function HooksCompanyBoard({
const loading =
loadingGetPipelines || loadingGetPipelineProgress || loadingGetCompanies;
if (setActionBar) {
setActionBar();
}
if (setContextMenu) {
setContextMenu();
}
useEffect(() => {
if (!loading && pipeline && pipelineProgresses && companiesData) {
updateCompanyBoard(pipeline, pipelineProgresses, companiesData.companies);

46
front/src/modules/companies/hooks/useActionBarEntries.tsx Normal file
View File

@ -0,0 +1,46 @@
import { useSetRecoilState } from 'recoil';
import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
import { ActionBarEntry } from '@/ui/action-bar/components/ActionBarEntry';
import { actionBarEntriesState } from '@/ui/action-bar/states/ActionBarEntriesState';
import { IconCheckbox, IconNotes, IconTrash } from '@/ui/icon';
import { ActivityType } from '~/generated/graphql';
import { useDeleteSelectedComapnies } from './useDeleteCompanies';
export function useActionBarEntries() {
const setActionBarEntries = useSetRecoilState(actionBarEntriesState);
const openCreateActivityRightDrawer =
useOpenCreateActivityDrawerForSelectedRowIds();
async function handleActivityClick(type: ActivityType) {
openCreateActivityRightDrawer(type, ActivityTargetableEntityType.Company);
}
const deleteSelectedCompanies = useDeleteSelectedComapnies();
return () => {
setActionBarEntries([
<ActionBarEntry
label="Note"
icon={<IconNotes size={16} />}
onClick={() => handleActivityClick(ActivityType.Note)}
key="note"
/>,
<ActionBarEntry
label="Task"
icon={<IconCheckbox size={16} />}
onClick={() => handleActivityClick(ActivityType.Task)}
key="task"
/>,
<ActionBarEntry
label="Delete"
icon={<IconTrash size={16} />}
type="danger"
onClick={() => deleteSelectedCompanies()}
key="delete"
/>,
]);
};
}

47
front/src/modules/companies/hooks/useContextMenuEntries.tsx Normal file
View File

@ -0,0 +1,47 @@
import { IconCheckbox, IconNotes, IconTrash } from '@tabler/icons-react';
import { useSetRecoilState } from 'recoil';
import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
import { ContextMenuEntry } from '@/ui/context-menu/components/ContextMenuEntry';
import { contextMenuEntriesState } from '@/ui/context-menu/states/ContextMenuEntriesState';
import { ActivityType } from '~/generated/graphql';
import { useDeleteSelectedComapnies } from './useDeleteCompanies';
export function useContextMenuEntries() {
const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState);
const openCreateActivityRightDrawer =
useOpenCreateActivityDrawerForSelectedRowIds();
async function handleButtonClick(type: ActivityType) {
openCreateActivityRightDrawer(type, ActivityTargetableEntityType.Company);
}
const deleteSelectedCompanies = useDeleteSelectedComapnies();
return () => {
setContextMenuEntries([
<ContextMenuEntry
label="Note"
icon={<IconNotes size={16} />}
onClick={() => handleButtonClick(ActivityType.Note)}
key="note"
/>,
<ContextMenuEntry
label="Task"
icon={<IconCheckbox size={16} />}
onClick={() => handleButtonClick(ActivityType.Task)}
key="task"
/>,
<ContextMenuEntry
label="Delete"
icon={<IconTrash size={16} />}
type="danger"
onClick={() => deleteSelectedCompanies()}
key="delete"
/>,
]);
};
}

15
front/src/modules/companies/hooks/TableContextMenuEntryDeleteCompanies.tsx → front/src/modules/companies/hooks/useDeleteCompanies.ts
View File

@ -2,14 +2,12 @@ import { getOperationName } from '@apollo/client/utilities';
import { useRecoilState, useRecoilValue } from 'recoil';
import { GET_PIPELINES } from '@/pipeline/queries';
import { ContextMenuEntry } from '@/ui/context-menu/components/ContextMenuEntry';
import { IconTrash } from '@/ui/icon/index';
import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector';
import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
import { useDeleteManyCompaniesMutation } from '~/generated/graphql';
export function TableContextMenuEntryDeleteCompanies() {
export function useDeleteSelectedComapnies() {
const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
const resetRowSelection = useResetTableRowSelection();
@ -20,7 +18,7 @@ export function TableContextMenuEntryDeleteCompanies() {
const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
async function handleDeleteClick() {
async function deleteSelectedCompanies() {
const rowIdsToDelete = selectedRowIds;
resetRowSelection();
@ -43,12 +41,5 @@ export function TableContextMenuEntryDeleteCompanies() {
});
}
return (
<ContextMenuEntry
label="Delete"
icon={<IconTrash size={16} />}
type="danger"
onClick={handleDeleteClick}
/>
);
return deleteSelectedCompanies;
}

81
front/src/modules/companies/hooks/useOpenActionBar.tsx
View File

@ -1,81 +0,0 @@
import { getOperationName } from '@apollo/client/utilities';
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
import { GET_PIPELINES } from '@/pipeline/queries';
import { ActionBarEntry } from '@/ui/action-bar/components/ActionBarEntry';
import { actionBarEntriesState } from '@/ui/action-bar/states/ActionBarEntriesState';
import { IconCheckbox, IconNotes, IconTrash } from '@/ui/icon';
import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector';
import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
import {
ActivityType,
useDeleteManyCompaniesMutation,
} from '~/generated/graphql';
export function useOpenActionBar() {
const setActionBarEntries = useSetRecoilState(actionBarEntriesState);
const openCreateActivityRightDrawer =
useOpenCreateActivityDrawerForSelectedRowIds();
async function handleActivityClick(type: ActivityType) {
openCreateActivityRightDrawer(type, ActivityTargetableEntityType.Company);
}
const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
const resetRowSelection = useResetTableRowSelection();
const [deleteCompanies] = useDeleteManyCompaniesMutation({
refetchQueries: [getOperationName(GET_PIPELINES) ?? ''],
});
const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
async function handleDeleteClick() {
const rowIdsToDelete = selectedRowIds;
resetRowSelection();
await deleteCompanies({
variables: {
ids: rowIdsToDelete,
},
optimisticResponse: {
__typename: 'Mutation',
deleteManyCompany: {
count: rowIdsToDelete.length,
},
},
update: () => {
setTableRowIds(
tableRowIds.filter((id) => !rowIdsToDelete.includes(id)),
);
},
});
}
return () => {
setActionBarEntries([
<ActionBarEntry
label="Note"
icon={<IconNotes size={16} />}
onClick={() => handleActivityClick(ActivityType.Note)}
/>,
<ActionBarEntry
label="Task"
icon={<IconCheckbox size={16} />}
onClick={() => handleActivityClick(ActivityType.Task)}
/>,
<ActionBarEntry
label="Delete"
icon={<IconTrash size={16} />}
type="danger"
onClick={handleDeleteClick}
/>,
]);
};
}

81
front/src/modules/companies/hooks/useOpenContextMenu.tsx
View File

@ -1,81 +0,0 @@
import { getOperationName } from '@apollo/client/utilities';
import { IconCheckbox, IconNotes, IconTrash } from '@tabler/icons-react';
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
import { GET_PIPELINES } from '@/pipeline/queries';
import { ContextMenuEntry } from '@/ui/context-menu/components/ContextMenuEntry';
import { contextMenuEntriesState } from '@/ui/context-menu/states/ContextMenuEntriesState';
import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector';
import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
import {
ActivityType,
useDeleteManyCompaniesMutation,
} from '~/generated/graphql';
export function useOpenContextMenu() {
const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState);
const openCreateActivityRightDrawer =
useOpenCreateActivityDrawerForSelectedRowIds();
async function handleButtonClick(type: ActivityType) {
openCreateActivityRightDrawer(type, ActivityTargetableEntityType.Company);
}
const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
const resetRowSelection = useResetTableRowSelection();
const [deleteCompanies] = useDeleteManyCompaniesMutation({
refetchQueries: [getOperationName(GET_PIPELINES) ?? ''],
});
const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
async function handleDeleteClick() {
const rowIdsToDelete = selectedRowIds;
resetRowSelection();
await deleteCompanies({
variables: {
ids: rowIdsToDelete,
},
optimisticResponse: {
__typename: 'Mutation',
deleteManyCompany: {
count: rowIdsToDelete.length,
},
},
update: () => {
setTableRowIds(
tableRowIds.filter((id) => !rowIdsToDelete.includes(id)),
);
},
});
}
return () => {
setContextMenuEntries([
<ContextMenuEntry
label="Note"
icon={<IconNotes size={16} />}
onClick={() => handleButtonClick(ActivityType.Note)}
/>,
<ContextMenuEntry
label="Task"
icon={<IconCheckbox size={16} />}
onClick={() => handleButtonClick(ActivityType.Task)}
/>,
<ContextMenuEntry
label="Delete"
icon={<IconTrash size={16} />}
type="danger"
onClick={handleDeleteClick}
/>,
]);
};
}

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

@ -2,6 +2,8 @@ import { useMemo } from 'react';
import { useRecoilValue } from 'recoil';
import { companyViewFields } from '@/companies/constants/companyViewFields';
import { useActionBarEntries } from '@/companies/hooks/useActionBarEntries';
import { useContextMenuEntries } from '@/companies/hooks/useContextMenuEntries';
import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
import { sortsOrderByScopedState } from '@/ui/filter-n-sort/states/sortScopedState';
import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause';
@ -45,6 +47,9 @@ export function CompanyTable() {
return { AND: filters.map(turnFilterIntoWhereClause) };
}, [filters]) as any;
const setContextMenu = useContextMenuEntries();
const setActionBar = useActionBarEntries();
return (
<>
<GenericEntityTableData
@ -53,6 +58,8 @@ export function CompanyTable() {
orderBy={orderBy.length ? orderBy : defaultOrderBy}
whereFilters={whereFilters}
filterDefinitionArray={companiesFilters}
setContextMenu={setContextMenu}
setActionBar={setActionBar}
/>
<EntityTable
viewName="All Companies"