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

- refactored to use multiple states

Browse Source
This commit is contained in:
brendanlaschke
2023-08-11 10:27:31 +02:00
parent b76f01d930
commit accfaafcfa
34 changed files with 486 additions and 419 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
front/src/modules/companies/components/CompanyBoardCard.tsx
View File

@ -1,6 +1,6 @@
import { ReactNode, useContext } from 'react';
import styled from '@emotion/styled';
import { useRecoilState, useRecoilValue } from 'recoil';
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import { BoardCardIdContext } from '@/ui/board/states/BoardCardIdContext';
import { fieldsDefinitionsState } from '@/ui/board/states/fieldsDefinitionsState';
@ -12,6 +12,7 @@ import {
Checkbox,
CheckboxVariant,
} from '@/ui/input/checkbox/components/Checkbox';
import { actionBarOpenState } from '@/ui/table/states/ActionBarIsOpenState';
import { EntityUpdateMutationHookContext } from '@/ui/table/states/EntityUpdateMutationHookContext';
import { useUpdateOnePipelineProgressMutation } from '~/generated/graphql';
import { getLogoUrlFromDomainName } from '~/utils';
@ -114,10 +115,12 @@ export function CompanyBoardCard() {
const fieldsDefinitions = useRecoilValue(fieldsDefinitionsState);
const selected = selectedBoardCards.includes(boardCardId ?? '');
const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
function setSelected(isSelected: boolean) {
if (isSelected) {
setSelectedBoardCards([...selectedBoardCards, boardCardId ?? '']);
setActionBarOpenState(true);
} else {
setSelectedBoardCards(
selectedBoardCards.filter((id) => id !== boardCardId),

6
front/src/modules/companies/table/components/TableActionBarButtonDeleteCompanies copy.tsx → front/src/modules/companies/hooks/TableContextMenuEntryDeleteCompanies.tsx
View File

@ -2,8 +2,8 @@ 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 { EntityTableContextMenuEntry } from '@/ui/table/context-menu/components/EntityTableContextMenuEntry';
import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector';
import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
@ -44,10 +44,10 @@ export function TableContextMenuEntryDeleteCompanies() {
}
return (
<EntityTableContextMenuEntry
<ContextMenuEntry
label="Delete"
icon={<IconTrash size={16} />}
type="warning"
type="danger"
onClick={handleDeleteClick}
/>
);

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

@ -0,0 +1,81 @@
import { getOperationName } from '@apollo/client/utilities';
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
import { GET_PIPELINES } from '@/pipeline/queries';
import { ActionBarEntry } from '@/ui/action-bar/components/ActionBarEntry';
import { IconCheckbox, IconNotes, IconTrash } from '@/ui/icon';
import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
import { actionBarEntriesState } from '@/ui/table/states/ActionBarEntriesState';
import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector';
import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
import {
ActivityType,
CommentableType,
useDeleteManyCompaniesMutation,
} from '~/generated/graphql';
export function useOpenActionBar() {
const setActionBarEntries = useSetRecoilState(actionBarEntriesState);
const openCreateActivityRightDrawer =
useOpenCreateActivityDrawerForSelectedRowIds();
async function handleActivityClick(type: ActivityType) {
openCreateActivityRightDrawer(type, CommentableType.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 Normal file
View File

@ -0,0 +1,81 @@
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 { GET_PIPELINES } from '@/pipeline/queries';
import { ContextMenuEntry } from '@/ui/context-menu/components/ContextMenuEntry';
import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
import { contextMenuEntriesState } from '@/ui/table/states/ContextMenuEntriesState';
import { selectedRowIdsSelector } from '@/ui/table/states/selectedRowIdsSelector';
import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
import {
ActivityType,
CommentableType,
useDeleteManyCompaniesMutation,
} from '~/generated/graphql';
export function useOpenContextMenu() {
const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState);
const openCreateActivityRightDrawer =
useOpenCreateActivityDrawerForSelectedRowIds();
async function handleButtonClick(type: ActivityType) {
openCreateActivityRightDrawer(type, CommentableType.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}
/>,
]);
};
}

29
front/src/modules/companies/table/components/TableActionBarButtonCreateActivityCompany.tsx
View File

@ -1,29 +0,0 @@
import { IconCheckbox, IconNotes } from '@tabler/icons-react';
import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
import { EntityTableActionBarButton } from '@/ui/table/action-bar/components/EntityTableActionBarButton';
import { ActivityType, CommentableType } from '~/generated/graphql';
export function TableActionBarButtonCreateActivityCompany() {
const openCreateActivityRightDrawer =
useOpenCreateActivityDrawerForSelectedRowIds();
async function handleButtonClick(type: ActivityType) {
openCreateActivityRightDrawer(type, CommentableType.Company);
}
return (
<>
<EntityTableActionBarButton
label="Note"
icon={<IconNotes size={16} />}
onClick={() => handleButtonClick(ActivityType.Note)}
/>
<EntityTableActionBarButton
label="Task"
icon={<IconCheckbox size={16} />}
onClick={() => handleButtonClick(ActivityType.Task)}
/>
</>
);
}

54
front/src/modules/companies/table/components/TableActionBarButtonDeleteCompanies.tsx
View File

@ -1,54 +0,0 @@
import { getOperationName } from '@apollo/client/utilities';
import { useRecoilState, useRecoilValue } from 'recoil';
import { GET_PIPELINES } from '@/pipeline/queries';
import { IconTrash } from '@/ui/icon/index';
import { EntityTableActionBarButton } from '@/ui/table/action-bar/components/EntityTableActionBarButton';
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 TableActionBarButtonDeleteCompanies() {
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 (
<EntityTableActionBarButton
label="Delete"
icon={<IconTrash size={16} />}
type="warning"
onClick={handleDeleteClick}
/>
);
}

29
front/src/modules/companies/table/components/TableContextMenuEntryCreateActivityCompany copy.tsx
View File

@ -1,29 +0,0 @@
import { IconCheckbox, IconNotes } from '@tabler/icons-react';
import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
import { EntityTableContextMenuEntry } from '@/ui/table/context-menu/components/EntityTableContextMenuEntry';
import { ActivityType, CommentableType } from '~/generated/graphql';
export function TableContextMenuEntryCreateActivityCompany() {
const openCreateActivityRightDrawer =
useOpenCreateActivityDrawerForSelectedRowIds();
async function handleButtonClick(type: ActivityType) {
openCreateActivityRightDrawer(type, CommentableType.Company);
}
return (
<>
<EntityTableContextMenuEntry
label="Note"
icon={<IconNotes size={16} />}
onClick={() => handleButtonClick(ActivityType.Note)}
/>
<EntityTableContextMenuEntry
label="Task"
icon={<IconCheckbox size={16} />}
onClick={() => handleButtonClick(ActivityType.Task)}
/>
</>
);
}