diff --git a/front/src/modules/companies/components/CompanyBoardCard.tsx b/front/src/modules/companies/components/CompanyBoardCard.tsx index e92ecd150..a03070240 100644 --- a/front/src/modules/companies/components/CompanyBoardCard.tsx +++ b/front/src/modules/companies/components/CompanyBoardCard.tsx @@ -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), diff --git a/front/src/modules/companies/table/components/TableActionBarButtonDeleteCompanies copy.tsx b/front/src/modules/companies/hooks/TableContextMenuEntryDeleteCompanies.tsx similarity index 90% rename from front/src/modules/companies/table/components/TableActionBarButtonDeleteCompanies copy.tsx rename to front/src/modules/companies/hooks/TableContextMenuEntryDeleteCompanies.tsx index 04469aa2e..62745ffbe 100644 --- a/front/src/modules/companies/table/components/TableActionBarButtonDeleteCompanies copy.tsx +++ b/front/src/modules/companies/hooks/TableContextMenuEntryDeleteCompanies.tsx @@ -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 ( - } - type="warning" + type="danger" onClick={handleDeleteClick} /> ); diff --git a/front/src/modules/companies/hooks/useOpenActionBar.tsx b/front/src/modules/companies/hooks/useOpenActionBar.tsx new file mode 100644 index 000000000..290a980bc --- /dev/null +++ b/front/src/modules/companies/hooks/useOpenActionBar.tsx @@ -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([ + } + onClick={() => handleActivityClick(ActivityType.Note)} + />, + } + onClick={() => handleActivityClick(ActivityType.Task)} + />, + } + type="danger" + onClick={handleDeleteClick} + />, + ]); + }; +} diff --git a/front/src/modules/companies/hooks/useOpenContextMenu.tsx b/front/src/modules/companies/hooks/useOpenContextMenu.tsx new file mode 100644 index 000000000..ed8765a48 --- /dev/null +++ b/front/src/modules/companies/hooks/useOpenContextMenu.tsx @@ -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([ + } + onClick={() => handleButtonClick(ActivityType.Note)} + />, + } + onClick={() => handleButtonClick(ActivityType.Task)} + />, + } + type="danger" + onClick={handleDeleteClick} + />, + ]); + }; +} diff --git a/front/src/modules/companies/table/components/TableActionBarButtonCreateActivityCompany.tsx b/front/src/modules/companies/table/components/TableActionBarButtonCreateActivityCompany.tsx deleted file mode 100644 index 769690cf0..000000000 --- a/front/src/modules/companies/table/components/TableActionBarButtonCreateActivityCompany.tsx +++ /dev/null @@ -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 ( - <> - } - onClick={() => handleButtonClick(ActivityType.Note)} - /> - } - onClick={() => handleButtonClick(ActivityType.Task)} - /> - - ); -} diff --git a/front/src/modules/companies/table/components/TableActionBarButtonDeleteCompanies.tsx b/front/src/modules/companies/table/components/TableActionBarButtonDeleteCompanies.tsx deleted file mode 100644 index 63d51d09f..000000000 --- a/front/src/modules/companies/table/components/TableActionBarButtonDeleteCompanies.tsx +++ /dev/null @@ -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 ( - } - type="warning" - onClick={handleDeleteClick} - /> - ); -} diff --git a/front/src/modules/companies/table/components/TableContextMenuEntryCreateActivityCompany copy.tsx b/front/src/modules/companies/table/components/TableContextMenuEntryCreateActivityCompany copy.tsx deleted file mode 100644 index 76d1fd4f9..000000000 --- a/front/src/modules/companies/table/components/TableContextMenuEntryCreateActivityCompany copy.tsx +++ /dev/null @@ -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 ( - <> - } - onClick={() => handleButtonClick(ActivityType.Note)} - /> - } - onClick={() => handleButtonClick(ActivityType.Task)} - /> - - ); -} diff --git a/front/src/modules/people/hooks/useOpenActionBar.tsx b/front/src/modules/people/hooks/useOpenActionBar.tsx new file mode 100644 index 000000000..8f425ad8d --- /dev/null +++ b/front/src/modules/people/hooks/useOpenActionBar.tsx @@ -0,0 +1,81 @@ +import { getOperationName } from '@apollo/client/utilities'; +import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; + +import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds'; +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, + useDeleteManyPersonMutation, +} from '~/generated/graphql'; + +import { GET_PEOPLE } from '../queries'; + +export function useOpenActionBar() { + const setActionBarEntries = useSetRecoilState(actionBarEntriesState); + + const openCreateActivityRightDrawer = + useOpenCreateActivityDrawerForSelectedRowIds(); + + async function handleActivityClick(type: ActivityType) { + openCreateActivityRightDrawer(type, CommentableType.Person); + } + + const selectedRowIds = useRecoilValue(selectedRowIdsSelector); + const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState); + + const resetRowSelection = useResetTableRowSelection(); + + const [deleteManyPerson] = useDeleteManyPersonMutation({ + refetchQueries: [getOperationName(GET_PEOPLE) ?? ''], + }); + + async function handleDeleteClick() { + const rowIdsToDelete = selectedRowIds; + + resetRowSelection(); + + await deleteManyPerson({ + variables: { + ids: rowIdsToDelete, + }, + optimisticResponse: { + __typename: 'Mutation', + deleteManyPerson: { + count: rowIdsToDelete.length, + }, + }, + update: () => { + setTableRowIds( + tableRowIds.filter((id) => !rowIdsToDelete.includes(id)), + ); + }, + }); + } + + return () => { + setActionBarEntries([ + } + onClick={() => handleActivityClick(ActivityType.Note)} + />, + } + onClick={() => handleActivityClick(ActivityType.Task)} + />, + } + type="danger" + onClick={handleDeleteClick} + />, + ]); + }; +} diff --git a/front/src/modules/people/hooks/useOpenContextMenu.tsx b/front/src/modules/people/hooks/useOpenContextMenu.tsx new file mode 100644 index 000000000..3792bdfac --- /dev/null +++ b/front/src/modules/people/hooks/useOpenContextMenu.tsx @@ -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 { 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, + useDeleteManyPersonMutation, +} from '~/generated/graphql'; + +import { GET_PEOPLE } from '../queries'; + +export function useOpenContextMenu() { + const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState); + + const openCreateActivityRightDrawer = + useOpenCreateActivityDrawerForSelectedRowIds(); + + async function handleActivityClick(type: ActivityType) { + openCreateActivityRightDrawer(type, CommentableType.Person); + } + + const selectedRowIds = useRecoilValue(selectedRowIdsSelector); + const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState); + + const resetRowSelection = useResetTableRowSelection(); + + const [deleteManyPerson] = useDeleteManyPersonMutation({ + refetchQueries: [getOperationName(GET_PEOPLE) ?? ''], + }); + + async function handleDeleteClick() { + const rowIdsToDelete = selectedRowIds; + + resetRowSelection(); + + await deleteManyPerson({ + variables: { + ids: rowIdsToDelete, + }, + optimisticResponse: { + __typename: 'Mutation', + deleteManyPerson: { + count: rowIdsToDelete.length, + }, + }, + update: () => { + setTableRowIds( + tableRowIds.filter((id) => !rowIdsToDelete.includes(id)), + ); + }, + }); + } + + return () => { + setContextMenuEntries([ + } + onClick={() => handleActivityClick(ActivityType.Note)} + />, + } + onClick={() => handleActivityClick(ActivityType.Task)} + />, + } + type="danger" + onClick={handleDeleteClick} + />, + ]); + }; +} diff --git a/front/src/modules/people/table/components/TableActionBarButtonCreateActivityPeople.tsx b/front/src/modules/people/table/components/TableActionBarButtonCreateActivityPeople.tsx deleted file mode 100644 index 2a9f065ce..000000000 --- a/front/src/modules/people/table/components/TableActionBarButtonCreateActivityPeople.tsx +++ /dev/null @@ -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 TableActionBarButtonCreateActivityPeople() { - const openCreateActivityRightDrawer = - useOpenCreateActivityDrawerForSelectedRowIds(); - - async function handleButtonClick(type: ActivityType) { - openCreateActivityRightDrawer(type, CommentableType.Person); - } - - return ( - <> - } - onClick={() => handleButtonClick(ActivityType.Note)} - /> - } - onClick={() => handleButtonClick(ActivityType.Task)} - /> - - ); -} diff --git a/front/src/modules/people/table/components/TableActionBarButtonDeletePeople.tsx b/front/src/modules/people/table/components/TableActionBarButtonDeletePeople.tsx deleted file mode 100644 index f3bb51f6a..000000000 --- a/front/src/modules/people/table/components/TableActionBarButtonDeletePeople.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { getOperationName } from '@apollo/client/utilities'; -import { useRecoilState, useRecoilValue } from 'recoil'; - -import { GET_PEOPLE } from '@/people/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 { useDeleteManyPersonMutation } from '~/generated/graphql'; - -export function TableActionBarButtonDeletePeople() { - const selectedRowIds = useRecoilValue(selectedRowIdsSelector); - const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState); - - const resetRowSelection = useResetTableRowSelection(); - - const [deleteManyPerson] = useDeleteManyPersonMutation({ - refetchQueries: [getOperationName(GET_PEOPLE) ?? ''], - }); - - async function handleDeleteClick() { - const rowIdsToDelete = selectedRowIds; - - resetRowSelection(); - - await deleteManyPerson({ - variables: { - ids: rowIdsToDelete, - }, - optimisticResponse: { - __typename: 'Mutation', - deleteManyPerson: { - count: rowIdsToDelete.length, - }, - }, - update: () => { - setTableRowIds( - tableRowIds.filter((id) => !rowIdsToDelete.includes(id)), - ); - }, - }); - } - - return ( - } - type="warning" - onClick={handleDeleteClick} - /> - ); -} diff --git a/front/src/modules/people/table/components/TableActionContextMenuEntryDeletePeople.tsx b/front/src/modules/people/table/components/TableActionContextMenuEntryDeletePeople.tsx deleted file mode 100644 index b03edf0b6..000000000 --- a/front/src/modules/people/table/components/TableActionContextMenuEntryDeletePeople.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { getOperationName } from '@apollo/client/utilities'; -import { useRecoilState, useRecoilValue } from 'recoil'; - -import { GET_PEOPLE } from '@/people/queries'; -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'; -import { useDeleteManyPersonMutation } from '~/generated/graphql'; - -export function TableContextMenuEntryDeletePeople() { - const selectedRowIds = useRecoilValue(selectedRowIdsSelector); - const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState); - - const resetRowSelection = useResetTableRowSelection(); - - const [deleteManyPerson] = useDeleteManyPersonMutation({ - refetchQueries: [getOperationName(GET_PEOPLE) ?? ''], - }); - - async function handleDeleteClick() { - const rowIdsToDelete = selectedRowIds; - - resetRowSelection(); - - await deleteManyPerson({ - variables: { - ids: rowIdsToDelete, - }, - optimisticResponse: { - __typename: 'Mutation', - deleteManyPerson: { - count: rowIdsToDelete.length, - }, - }, - update: () => { - setTableRowIds( - tableRowIds.filter((id) => !rowIdsToDelete.includes(id)), - ); - }, - }); - } - - return ( - } - type="warning" - onClick={handleDeleteClick} - /> - ); -} diff --git a/front/src/modules/people/table/components/TableContextMenuEntryCreateActivityPeople.tsx b/front/src/modules/people/table/components/TableContextMenuEntryCreateActivityPeople.tsx deleted file mode 100644 index 8aa70de10..000000000 --- a/front/src/modules/people/table/components/TableContextMenuEntryCreateActivityPeople.tsx +++ /dev/null @@ -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 TableContextMenuEntryCreateActivityPeople() { - const openCreateActivityRightDrawer = - useOpenCreateActivityDrawerForSelectedRowIds(); - - async function handleButtonClick(type: ActivityType) { - openCreateActivityRightDrawer(type, CommentableType.Person); - } - - return ( - <> - } - onClick={() => handleButtonClick(ActivityType.Note)} - /> - } - onClick={() => handleButtonClick(ActivityType.Task)} - /> - - ); -} diff --git a/front/src/modules/ui/action-bar/components/ActionBar.tsx b/front/src/modules/ui/action-bar/components/ActionBar.tsx index 8de0c70de..bc33aed4f 100644 --- a/front/src/modules/ui/action-bar/components/ActionBar.tsx +++ b/front/src/modules/ui/action-bar/components/ActionBar.tsx @@ -1,11 +1,12 @@ -import React, { useEffect } from 'react'; +import React, { useRef } from 'react'; import styled from '@emotion/styled'; -import { useRecoilValue, useSetRecoilState } from 'recoil'; +import { useRecoilValue } from 'recoil'; -import { contextMenuPositionState } from '@/ui/table/states/contextMenuPositionState'; +import { actionBarEntriesState } from '@/ui/table/states/ActionBarEntriesState'; +import { actionBarOpenState } from '@/ui/table/states/ActionBarIsOpenState'; +import { contextMenuOpenState } from '@/ui/table/states/ContextMenuIsOpenState'; type OwnProps = { - children: React.ReactNode | React.ReactNode[]; selectedIds: string[]; }; @@ -29,31 +30,18 @@ const StyledContainerActionBar = styled.div` z-index: 1; `; -export function ActionBar({ children, selectedIds }: OwnProps) { - const position = useRecoilValue(contextMenuPositionState); - const setContextMenuPosition = useSetRecoilState(contextMenuPositionState); +export function ActionBar({ selectedIds }: OwnProps) { + const actionBarOpen = useRecoilValue(actionBarOpenState); + const contextMenuOpen = useRecoilValue(contextMenuOpenState); + const actionBarEntries = useRecoilValue(actionBarEntriesState); + const wrapperRef = useRef(null); - useEffect(() => { - function handleClickOutside(event: MouseEvent) { - if (!(event.target as HTMLElement).closest('.action-bar')) { - setContextMenuPosition({ x: null, y: null }); - } - } - - document.addEventListener('mousedown', handleClickOutside); - - // Cleanup the event listener when the component unmounts - return () => { - document.removeEventListener('mousedown', handleClickOutside); - }; - }, [setContextMenuPosition]); - - if (selectedIds.length === 0 || position.x || position.y) { + if (selectedIds.length === 0 || !actionBarOpen || contextMenuOpen) { return null; } return ( - - {children} + + {actionBarEntries} ); } diff --git a/front/src/modules/ui/table/action-bar/components/EntityTableActionBarButton.tsx b/front/src/modules/ui/action-bar/components/ActionBarEntry.tsx similarity index 80% rename from front/src/modules/ui/table/action-bar/components/EntityTableActionBarButton.tsx rename to front/src/modules/ui/action-bar/components/ActionBarEntry.tsx index 523efe511..f9650f7b5 100644 --- a/front/src/modules/ui/table/action-bar/components/EntityTableActionBarButton.tsx +++ b/front/src/modules/ui/action-bar/components/ActionBarEntry.tsx @@ -4,18 +4,18 @@ import styled from '@emotion/styled'; type OwnProps = { icon: ReactNode; label: string; - type?: 'standard' | 'warning'; + type?: 'standard' | 'danger'; onClick: () => void; }; type StyledButtonProps = { - type: 'standard' | 'warning'; + type: 'standard' | 'danger'; }; const StyledButton = styled.div` border-radius: ${({ theme }) => theme.border.radius.sm}; color: ${(props) => - props.type === 'warning' + props.type === 'danger' ? props.theme.color.red : props.theme.font.color.secondary}; cursor: pointer; @@ -28,9 +28,7 @@ const StyledButton = styled.div` &:hover { background: ${({ theme, type }) => - type === 'warning' - ? theme.tag.background.red - : theme.background.tertiary}; + type === 'danger' ? theme.tag.background.red : theme.background.tertiary}; } `; @@ -39,7 +37,7 @@ const StyledButtonLabel = styled.div` margin-left: ${({ theme }) => theme.spacing(2)}; `; -export function EntityTableActionBarButton({ +export function ActionBarEntry({ label, icon, type = 'standard', diff --git a/front/src/modules/ui/action-bar/components/__stories__/ActionBar.stories.tsx b/front/src/modules/ui/action-bar/components/__stories__/ActionBar.stories.tsx index fdb64a245..a828d35d1 100644 --- a/front/src/modules/ui/action-bar/components/__stories__/ActionBar.stories.tsx +++ b/front/src/modules/ui/action-bar/components/__stories__/ActionBar.stories.tsx @@ -8,7 +8,7 @@ const meta: Meta = { title: 'UI/ActionBar/ActionBar', component: ActionBar, decorators: [ComponentDecorator], - args: { children: 'Lorem ipsum', selectedIds: [] }, + args: { selectedIds: [] }, }; export default meta; diff --git a/front/src/modules/ui/board/components/BoardActionBarButtonDeleteBoardCard.tsx b/front/src/modules/ui/board/components/BoardActionBarButtonDeleteBoardCard.tsx index ed68fe778..3048b03f4 100644 --- a/front/src/modules/ui/board/components/BoardActionBarButtonDeleteBoardCard.tsx +++ b/front/src/modules/ui/board/components/BoardActionBarButtonDeleteBoardCard.tsx @@ -1,10 +1,10 @@ import { useRecoilCallback } from 'recoil'; +import { ActionBarEntry } from '@/ui/action-bar/components/ActionBarEntry'; import { boardCardIdsByColumnIdFamilyState } from '@/ui/board/states/boardCardIdsByColumnIdFamilyState'; import { boardColumnsState } from '@/ui/board/states/boardColumnsState'; import { selectedBoardCardIdsState } from '@/ui/board/states/selectedBoardCardIdsState'; import { IconTrash } from '@/ui/icon/index'; -import { EntityTableActionBarButton } from '@/ui/table/action-bar/components/EntityTableActionBarButton'; export function BoardActionBarButtonDeleteBoardCard({ onDelete, @@ -51,10 +51,10 @@ export function BoardActionBarButtonDeleteBoardCard({ } return ( - } - type="warning" + type="danger" onClick={handleDeleteClick} /> ); diff --git a/front/src/modules/ui/board/components/EntityBoard.tsx b/front/src/modules/ui/board/components/EntityBoard.tsx index 6f3090887..7cf398deb 100644 --- a/front/src/modules/ui/board/components/EntityBoard.tsx +++ b/front/src/modules/ui/board/components/EntityBoard.tsx @@ -4,7 +4,7 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { DragDropContext, OnDragEndResponder } from '@hello-pangea/dnd'; // Atlassian dnd does not support StrictMode from RN 18, so we use a fork @hello-pangea/dnd https://github.com/atlassian/react-beautiful-dnd/issues/2350 import { IconList } from '@tabler/icons-react'; -import { useRecoilState } from 'recoil'; +import { useRecoilState, useSetRecoilState } from 'recoil'; import { CompanyBoardContext } from '@/companies/states/CompanyBoardContext'; import { BoardHeader } from '@/ui/board/components/BoardHeader'; @@ -12,6 +12,7 @@ import { StyledBoard } from '@/ui/board/components/StyledBoard'; import { useUpdateBoardCardIds } from '@/ui/board/hooks/useUpdateBoardCardIds'; import { BoardColumnIdContext } from '@/ui/board/states/BoardColumnIdContext'; import { SelectedSortType } from '@/ui/filter-n-sort/types/interface'; +import { actionBarOpenState } from '@/ui/table/states/ActionBarIsOpenState'; import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { @@ -107,10 +108,12 @@ export function EntityBoard({ const [selectedBoardCards, setSelectedBoardCards] = useRecoilState( selectedBoardCardIdsState, ); + const setActionBarOpenState = useSetRecoilState(actionBarOpenState); function setRowSelectedState(boardCardId: string, selected: boolean) { if (selected && !selectedBoardCards.includes(boardCardId)) { setSelectedBoardCards([...selectedBoardCards, boardCardId ?? '']); + setActionBarOpenState(true); } else if (!selected && selectedBoardCards.includes(boardCardId)) { setSelectedBoardCards( selectedBoardCards.filter((id) => id !== boardCardId), diff --git a/front/src/modules/ui/board/components/EntityBoardActionBar.tsx b/front/src/modules/ui/board/components/EntityBoardActionBar.tsx index 749fc9547..bccd1ff0b 100644 --- a/front/src/modules/ui/board/components/EntityBoardActionBar.tsx +++ b/front/src/modules/ui/board/components/EntityBoardActionBar.tsx @@ -5,11 +5,7 @@ import { ActionBar } from '@/ui/action-bar/components/ActionBar'; import { selectedBoardCardIdsState } from '../states/selectedBoardCardIdsState'; -type OwnProps = { - children: React.ReactNode | React.ReactNode[]; -}; - -export function EntityBoardActionBar({ children }: OwnProps) { +export function EntityBoardActionBar() { const selectedBoardCards = useRecoilValue(selectedBoardCardIdsState); - return {children}; + return ; } diff --git a/front/src/modules/ui/board/hooks/useActionBar.tsx b/front/src/modules/ui/board/hooks/useActionBar.tsx new file mode 100644 index 000000000..2b8aea3bf --- /dev/null +++ b/front/src/modules/ui/board/hooks/useActionBar.tsx @@ -0,0 +1,30 @@ +import { getOperationName } from '@apollo/client/utilities'; +import { useSetRecoilState } from 'recoil'; + +import { GET_PIPELINES } from '@/pipeline/queries'; +import { actionBarEntriesState } from '@/ui/table/states/ActionBarEntriesState'; +import { useDeleteManyPipelineProgressMutation } from '~/generated/graphql'; + +import { BoardActionBarButtonDeleteBoardCard } from '../components/BoardActionBarButtonDeleteBoardCard'; + +export function useOpenActionBar() { + const setActionBarEntries = useSetRecoilState(actionBarEntriesState); + + const [deletePipelineProgress] = useDeleteManyPipelineProgressMutation({ + refetchQueries: [getOperationName(GET_PIPELINES) ?? ''], + }); + + async function handleDelete(cardIdsToDelete: string[]) { + await deletePipelineProgress({ + variables: { + ids: cardIdsToDelete, + }, + }); + } + + return () => { + setActionBarEntries([ + , + ]); + }; +} diff --git a/front/src/modules/ui/context-menu/components/ContextMenu.tsx b/front/src/modules/ui/context-menu/components/ContextMenu.tsx index b9867e5b1..06d587d0b 100644 --- a/front/src/modules/ui/context-menu/components/ContextMenu.tsx +++ b/front/src/modules/ui/context-menu/components/ContextMenu.tsx @@ -1,13 +1,16 @@ -import React, { useEffect } from 'react'; +import React, { useRef } from 'react'; import styled from '@emotion/styled'; import { useRecoilValue, useSetRecoilState } from 'recoil'; +import { actionBarOpenState } from '@/ui/table/states/ActionBarIsOpenState'; +import { contextMenuEntriesState } from '@/ui/table/states/ContextMenuEntriesState'; +import { contextMenuOpenState } from '@/ui/table/states/ContextMenuIsOpenState'; import { contextMenuPositionState } from '@/ui/table/states/contextMenuPositionState'; +import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; import { PositionType } from '../types/PositionType'; type OwnProps = { - children: React.ReactNode | React.ReactNode[]; selectedIds: string[]; }; @@ -34,31 +37,28 @@ const StyledContainerContextMenu = styled.div` z-index: 1; `; -export function ContextMenu({ children, selectedIds }: OwnProps) { +export function ContextMenu({ selectedIds }: OwnProps) { const position = useRecoilValue(contextMenuPositionState); - const setContextMenuPosition = useSetRecoilState(contextMenuPositionState); + const contextMenuOpen = useRecoilValue(contextMenuOpenState); + const contextMenuEntries = useRecoilValue(contextMenuEntriesState); + const setContextMenuOpenState = useSetRecoilState(contextMenuOpenState); + const setActionBarOpenState = useSetRecoilState(actionBarOpenState); + const wrapperRef = useRef(null); - useEffect(() => { - function handleClickOutside(event: MouseEvent) { - if (!(event.target as HTMLElement).closest('.action-bar')) { - setContextMenuPosition({ x: null, y: null }); - } - } + useListenClickOutside({ + refs: [wrapperRef], + callback: () => { + setContextMenuOpenState(false); + setActionBarOpenState(true); + }, + }); - document.addEventListener('mousedown', handleClickOutside); - - // Cleanup the event listener when the component unmounts - return () => { - document.removeEventListener('mousedown', handleClickOutside); - }; - }, [setContextMenuPosition]); - - if (selectedIds.length === 0 || (!position.x && !position.y)) { + if (selectedIds.length === 0 || !contextMenuOpen) { return null; } return ( - - {children} + + {contextMenuEntries} ); } diff --git a/front/src/modules/ui/table/context-menu/components/EntityTableContextMenuEntry.tsx b/front/src/modules/ui/context-menu/components/ContextMenuEntry.tsx similarity index 82% rename from front/src/modules/ui/table/context-menu/components/EntityTableContextMenuEntry.tsx rename to front/src/modules/ui/context-menu/components/ContextMenuEntry.tsx index 3adfb049e..7979b097f 100644 --- a/front/src/modules/ui/table/context-menu/components/EntityTableContextMenuEntry.tsx +++ b/front/src/modules/ui/context-menu/components/ContextMenuEntry.tsx @@ -4,12 +4,12 @@ import styled from '@emotion/styled'; type OwnProps = { icon: ReactNode; label: string; - type?: 'standard' | 'warning'; + type?: 'standard' | 'danger'; onClick: () => void; }; type StyledButtonProps = { - type: 'standard' | 'warning'; + type: 'standard' | 'danger'; }; const StyledButton = styled.div` @@ -17,7 +17,7 @@ const StyledButton = styled.div` align-self: stretch; border-radius: ${({ theme }) => theme.border.radius.sm}; color: ${(props) => - props.type === 'warning' + props.type === 'danger' ? props.theme.color.red : props.theme.font.color.secondary}; cursor: pointer; @@ -32,9 +32,7 @@ const StyledButton = styled.div` &:hover { background: ${({ theme, type }) => - type === 'warning' - ? theme.tag.background.red - : theme.background.tertiary}; + type === 'danger' ? theme.tag.background.red : theme.background.tertiary}; } `; @@ -43,7 +41,7 @@ const StyledButtonLabel = styled.div` margin-left: ${({ theme }) => theme.spacing(2)}; `; -export function EntityTableContextMenuEntry({ +export function ContextMenuEntry({ label, icon, type = 'standard', diff --git a/front/src/modules/ui/table/action-bar/components/EntityTableActionBar.tsx b/front/src/modules/ui/table/action-bar/components/EntityTableActionBar.tsx index 0159e3dd2..84a42a58e 100644 --- a/front/src/modules/ui/table/action-bar/components/EntityTableActionBar.tsx +++ b/front/src/modules/ui/table/action-bar/components/EntityTableActionBar.tsx @@ -5,12 +5,8 @@ import { ActionBar } from '@/ui/action-bar/components/ActionBar'; import { selectedRowIdsSelector } from '../../states/selectedRowIdsSelector'; -type OwnProps = { - children: React.ReactNode | React.ReactNode[]; -}; - -export function EntityTableActionBar({ children }: OwnProps) { +export function EntityTableActionBar() { const selectedRowIds = useRecoilValue(selectedRowIdsSelector); - return {children}; + return ; } diff --git a/front/src/modules/ui/table/components/CheckboxCell.tsx b/front/src/modules/ui/table/components/CheckboxCell.tsx index 91e06da77..7a92a4a88 100644 --- a/front/src/modules/ui/table/components/CheckboxCell.tsx +++ b/front/src/modules/ui/table/components/CheckboxCell.tsx @@ -5,7 +5,7 @@ import { useSetRecoilState } from 'recoil'; import { Checkbox } from '@/ui/input/checkbox/components/Checkbox'; import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected'; -import { contextMenuPositionState } from '../states/contextMenuPositionState'; +import { actionBarOpenState } from '../states/ActionBarIsOpenState'; const StyledContainer = styled.div` align-items: center; @@ -18,14 +18,13 @@ const StyledContainer = styled.div` `; export function CheckboxCell() { - const setContextMenuPosition = useSetRecoilState(contextMenuPositionState); - + const setActionBarOpenState = useSetRecoilState(actionBarOpenState); const { currentRowSelected, setCurrentRowSelected } = useCurrentRowSelected(); const handleClick = useCallback(() => { setCurrentRowSelected(!currentRowSelected); - setContextMenuPosition({ x: null, y: null }); - }, [currentRowSelected, setContextMenuPosition, setCurrentRowSelected]); + setActionBarOpenState(true); + }, [currentRowSelected, setActionBarOpenState, setCurrentRowSelected]); return ( diff --git a/front/src/modules/ui/table/components/EntityTableCell.tsx b/front/src/modules/ui/table/components/EntityTableCell.tsx index a68a06e05..9dfc13de4 100644 --- a/front/src/modules/ui/table/components/EntityTableCell.tsx +++ b/front/src/modules/ui/table/components/EntityTableCell.tsx @@ -6,23 +6,24 @@ import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope' import { GenericEditableCell } from '../editable-cell/components/GenericEditableCell'; import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected'; import { ColumnIndexContext } from '../states/ColumnIndexContext'; +import { contextMenuOpenState } from '../states/ContextMenuIsOpenState'; import { contextMenuPositionState } from '../states/contextMenuPositionState'; import { ViewFieldContext } from '../states/ViewFieldContext'; export function EntityTableCell({ cellIndex }: { cellIndex: number }) { const setContextMenuPosition = useSetRecoilState(contextMenuPositionState); + const setContextMenuOpenState = useSetRecoilState(contextMenuOpenState); const { setCurrentRowSelected } = useCurrentRowSelected(); function handleContextMenu(event: React.MouseEvent) { event.preventDefault(); - setCurrentRowSelected(true); - setContextMenuPosition({ x: event.clientX, y: event.clientY, }); + setContextMenuOpenState(true); } const viewField = useContext(ViewFieldContext); diff --git a/front/src/modules/ui/table/context-menu/components/EntityTableContextMenu.tsx b/front/src/modules/ui/table/context-menu/components/EntityTableContextMenu.tsx index 846e88560..10bbaf088 100644 --- a/front/src/modules/ui/table/context-menu/components/EntityTableContextMenu.tsx +++ b/front/src/modules/ui/table/context-menu/components/EntityTableContextMenu.tsx @@ -5,12 +5,7 @@ import { ContextMenu } from '@/ui/context-menu/components/ContextMenu'; import { selectedRowIdsSelector } from '../../states/selectedRowIdsSelector'; -type OwnProps = { - children: React.ReactNode | React.ReactNode[]; -}; - -export function EntityTableContextMenu({ children }: OwnProps) { +export function EntityTableContextMenu() { const selectedRowIds = useRecoilValue(selectedRowIdsSelector); - - return {children}; + return ; } diff --git a/front/src/modules/ui/table/states/ActionBarEntriesState.ts b/front/src/modules/ui/table/states/ActionBarEntriesState.ts new file mode 100644 index 000000000..81b436523 --- /dev/null +++ b/front/src/modules/ui/table/states/ActionBarEntriesState.ts @@ -0,0 +1,7 @@ +import { ReactElement } from 'react'; +import { atom } from 'recoil'; + +export const actionBarEntriesState = atom({ + key: 'actionBarEntriesState', + default: [], +}); diff --git a/front/src/modules/ui/table/states/ActionBarIsOpenState.ts b/front/src/modules/ui/table/states/ActionBarIsOpenState.ts new file mode 100644 index 000000000..3d150e978 --- /dev/null +++ b/front/src/modules/ui/table/states/ActionBarIsOpenState.ts @@ -0,0 +1,6 @@ +import { atom } from 'recoil'; + +export const actionBarOpenState = atom({ + key: 'actionBarOpenState', + default: false, +}); diff --git a/front/src/modules/ui/table/states/ContextMenuEntriesState.ts b/front/src/modules/ui/table/states/ContextMenuEntriesState.ts new file mode 100644 index 000000000..e79628b6a --- /dev/null +++ b/front/src/modules/ui/table/states/ContextMenuEntriesState.ts @@ -0,0 +1,7 @@ +import { ReactElement } from 'react'; +import { atom } from 'recoil'; + +export const contextMenuEntriesState = atom({ + key: 'contextMenuEntriesState', + default: [], +}); diff --git a/front/src/modules/ui/table/states/ContextMenuIsOpenState.ts b/front/src/modules/ui/table/states/ContextMenuIsOpenState.ts new file mode 100644 index 000000000..139bd3af4 --- /dev/null +++ b/front/src/modules/ui/table/states/ContextMenuIsOpenState.ts @@ -0,0 +1,6 @@ +import { atom } from 'recoil'; + +export const contextMenuOpenState = atom({ + key: 'contextMenuOpenState', + default: false, +}); diff --git a/front/src/pages/companies/Companies.tsx b/front/src/pages/companies/Companies.tsx index 95741730c..22cd51e63 100644 --- a/front/src/pages/companies/Companies.tsx +++ b/front/src/pages/companies/Companies.tsx @@ -1,14 +1,13 @@ +import { useEffect } from 'react'; import { getOperationName } from '@apollo/client/utilities'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { useRecoilState } from 'recoil'; import { v4 } from 'uuid'; +import { useOpenActionBar } from '@/companies/hooks/useOpenActionBar'; +import { useOpenContextMenu } from '@/companies/hooks/useOpenContextMenu'; import { CompanyTable } from '@/companies/table/components/CompanyTable'; -import { TableActionBarButtonCreateActivityCompany } from '@/companies/table/components/TableActionBarButtonCreateActivityCompany'; -import { TableActionBarButtonDeleteCompanies } from '@/companies/table/components/TableActionBarButtonDeleteCompanies'; -import { TableContextMenuEntryDeleteCompanies } from '@/companies/table/components/TableActionBarButtonDeleteCompanies copy'; -import { TableContextMenuEntryCreateActivityCompany } from '@/companies/table/components/TableContextMenuEntryCreateActivityCompany copy'; import { SEARCH_COMPANY_QUERY } from '@/search/queries/search'; import { IconBuildingSkyscraper } from '@/ui/icon'; import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer'; @@ -60,6 +59,14 @@ export function Companies() { const theme = useTheme(); + const setContextMenu = useOpenContextMenu(); + const setActionBar = useOpenActionBar(); + + useEffect(() => { + setContextMenu(); + setActionBar(); + }, [setContextMenu, setActionBar]); + return ( <> - - - - - - - - + + diff --git a/front/src/pages/companies/CompaniesMockMode.tsx b/front/src/pages/companies/CompaniesMockMode.tsx index bc6ff9af5..2a05100c4 100644 --- a/front/src/pages/companies/CompaniesMockMode.tsx +++ b/front/src/pages/companies/CompaniesMockMode.tsx @@ -2,8 +2,6 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode'; -import { TableActionBarButtonCreateActivityCompany } from '@/companies/table/components/TableActionBarButtonCreateActivityCompany'; -import { TableActionBarButtonDeleteCompanies } from '@/companies/table/components/TableActionBarButtonDeleteCompanies'; import { IconBuildingSkyscraper } from '@/ui/icon'; import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer'; import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar'; @@ -28,10 +26,7 @@ export function CompaniesMockMode() { - - - - + diff --git a/front/src/pages/opportunities/Opportunities.tsx b/front/src/pages/opportunities/Opportunities.tsx index 4cf3efbb5..1b75ad122 100644 --- a/front/src/pages/opportunities/Opportunities.tsx +++ b/front/src/pages/opportunities/Opportunities.tsx @@ -1,17 +1,15 @@ -import { useCallback, useState } from 'react'; -import { getOperationName } from '@apollo/client/utilities'; +import { useCallback, useEffect, useState } from 'react'; import { useTheme } from '@emotion/react'; import { HooksCompanyBoard } from '@/companies/components/HooksCompanyBoard'; import { CompanyBoardContext } from '@/companies/states/CompanyBoardContext'; import { defaultPipelineProgressOrderBy, - GET_PIPELINES, PipelineProgressesSelectedSortType, } from '@/pipeline/queries'; -import { BoardActionBarButtonDeleteBoardCard } from '@/ui/board/components/BoardActionBarButtonDeleteBoardCard'; import { EntityBoard } from '@/ui/board/components/EntityBoard'; import { EntityBoardActionBar } from '@/ui/board/components/EntityBoardActionBar'; +import { useOpenActionBar } from '@/ui/board/hooks/useActionBar'; import { BoardOptionsContext } from '@/ui/board/states/BoardOptionsContext'; import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers'; import { AvailableFiltersContext } from '@/ui/filter-n-sort/states/AvailableFiltersContext'; @@ -20,7 +18,6 @@ import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer' import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { PipelineProgressOrderByWithRelationInput, - useDeleteManyPipelineProgressMutation, useUpdatePipelineStageMutation, } from '~/generated/graphql'; import { opportunitiesBoardOptions } from '~/pages/opportunities/opportunitiesBoardOptions'; @@ -67,17 +64,11 @@ export function Opportunities() { }); } - const [deletePipelineProgress] = useDeleteManyPipelineProgressMutation({ - refetchQueries: [getOperationName(GET_PIPELINES) ?? ''], - }); + const setActionBar = useOpenActionBar(); - async function handleDelete(cardIdsToDelete: string[]) { - await deletePipelineProgress({ - variables: { - ids: cardIdsToDelete, - }, - }); - } + useEffect(() => { + setActionBar(); + }, [setActionBar]); return ( - - - + diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx index 127b6f736..24424412d 100644 --- a/front/src/pages/people/People.tsx +++ b/front/src/pages/people/People.tsx @@ -1,13 +1,12 @@ +import { useEffect } from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { useRecoilState } from 'recoil'; import { v4 } from 'uuid'; +import { useOpenActionBar } from '@/people/hooks/useOpenActionBar'; +import { useOpenContextMenu } from '@/people/hooks/useOpenContextMenu'; import { PeopleTable } from '@/people/table/components/PeopleTable'; -import { TableActionBarButtonCreateActivityPeople } from '@/people/table/components/TableActionBarButtonCreateActivityPeople'; -import { TableActionBarButtonDeletePeople } from '@/people/table/components/TableActionBarButtonDeletePeople'; -import { TableContextMenuEntryDeletePeople } from '@/people/table/components/TableActionContextMenuEntryDeletePeople'; -import { TableContextMenuEntryCreateActivityPeople } from '@/people/table/components/TableContextMenuEntryCreateActivityPeople'; import { IconUser } from '@/ui/icon'; import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer'; import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar'; @@ -56,6 +55,14 @@ export function People() { const theme = useTheme(); + const setContextMenu = useOpenContextMenu(); + const setActionBar = useOpenActionBar(); + + useEffect(() => { + setContextMenu(); + setActionBar(); + }, [setContextMenu, setActionBar]); + return ( - - - - - - - - + + );