diff --git a/front/src/modules/companies/hooks/useCompanyTableContextMenuEntries.tsx b/front/src/modules/companies/hooks/useCompanyTableContextMenuEntries.tsx index 176ad2582..534adf444 100644 --- a/front/src/modules/companies/hooks/useCompanyTableContextMenuEntries.tsx +++ b/front/src/modules/companies/hooks/useCompanyTableContextMenuEntries.tsx @@ -1,10 +1,19 @@ -import { useSetRecoilState } from 'recoil'; +import { useRecoilValue, useSetRecoilState } from 'recoil'; import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds'; import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity'; +import { useFavorites } from '@/favorites/hooks/useFavorites'; import { contextMenuEntriesState } from '@/ui/context-menu/states/contextMenuEntriesState'; -import { IconCheckbox, IconNotes, IconTrash } from '@/ui/icon'; -import { ActivityType } from '~/generated/graphql'; +import { + IconCheckbox, + IconHeart, + IconHeartOff, + IconNotes, + IconTrash, +} from '@/ui/icon'; +import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection'; +import { selectedRowIdsSelector } from '@/ui/table/states/selectors/selectedRowIdsSelector'; +import { ActivityType, useGetFavoritesQuery } from '~/generated/graphql'; import { useDeleteSelectedComapnies } from './useDeleteCompanies'; @@ -18,21 +27,55 @@ export const useCompanyTableContextMenuEntries = () => { openCreateActivityRightDrawer(type, ActivityTargetableEntityType.Company); }; + const selectedRowIds = useRecoilValue(selectedRowIdsSelector); + + const selectedCompanyId = + selectedRowIds.length === 1 ? selectedRowIds[0] : ''; + + const { insertCompanyFavorite, deleteCompanyFavorite } = useFavorites(); + + const resetRowSelection = useResetTableRowSelection(); + + const { data } = useGetFavoritesQuery(); + + const favorites = data?.findFavorites; + + const isFavorite = + !!selectedCompanyId && + !!favorites?.find((favorite) => favorite.company?.id === selectedCompanyId); + + const handleFavoriteButtonClick = () => { + resetRowSelection(); + if (isFavorite) deleteCompanyFavorite(selectedCompanyId); + else insertCompanyFavorite(selectedCompanyId); + }; + const deleteSelectedCompanies = useDeleteSelectedComapnies(); return { setContextMenuEntries: () => setContextMenuEntries([ { - label: 'Note', - Icon: IconNotes, - onClick: () => handleButtonClick(ActivityType.Note), - }, - { - label: 'Task', + label: 'New task', Icon: IconCheckbox, onClick: () => handleButtonClick(ActivityType.Task), }, + { + label: 'New note', + Icon: IconNotes, + onClick: () => handleButtonClick(ActivityType.Note), + }, + ...(!!selectedCompanyId + ? [ + { + label: isFavorite + ? 'Remove from favorites' + : 'Add to favorites', + Icon: isFavorite ? IconHeartOff : IconHeart, + onClick: () => handleFavoriteButtonClick(), + }, + ] + : []), { label: 'Delete', Icon: IconTrash, diff --git a/front/src/modules/people/hooks/usePeopleTableContextMenuEntries.tsx b/front/src/modules/people/hooks/usePeopleTableContextMenuEntries.tsx index 803547fc2..2407b3eb8 100644 --- a/front/src/modules/people/hooks/usePeopleTableContextMenuEntries.tsx +++ b/front/src/modules/people/hooks/usePeopleTableContextMenuEntries.tsx @@ -1,12 +1,23 @@ import { getOperationName } from '@apollo/client/utilities'; import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'; +import { useFavorites } from '@/favorites/hooks/useFavorites'; import { contextMenuEntriesState } from '@/ui/context-menu/states/contextMenuEntriesState'; -import { IconCheckbox, IconNotes, IconTrash } from '@/ui/icon'; +import { + IconCheckbox, + IconHeart, + IconHeartOff, + IconNotes, + IconTrash, +} from '@/ui/icon'; import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection'; import { selectedRowIdsSelector } from '@/ui/table/states/selectors/selectedRowIdsSelector'; import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState'; -import { ActivityType, useDeleteManyPersonMutation } from '~/generated/graphql'; +import { + ActivityType, + useDeleteManyPersonMutation, + useGetFavoritesQuery, +} from '~/generated/graphql'; import { GET_PEOPLE } from '../graphql/queries/getPeople'; @@ -22,6 +33,24 @@ export const usePersonTableContextMenuEntries = () => { 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 = () => { + resetRowSelection(); + if (isFavorite) deletePersonFavorite(selectedPersonId); + else insertPersonFavorite(selectedPersonId); + }; + const [deleteManyPerson] = useDeleteManyPersonMutation({ refetchQueries: [getOperationName(GET_PEOPLE) ?? ''], }); @@ -53,15 +82,26 @@ export const usePersonTableContextMenuEntries = () => { setContextMenuEntries: () => setContextMenuEntries([ { - label: 'Note', - Icon: IconNotes, - onClick: () => createActivityForPeople(ActivityType.Note), - }, - { - label: 'Task', + label: 'New task', Icon: IconCheckbox, onClick: () => createActivityForPeople(ActivityType.Task), }, + { + label: 'New note', + Icon: IconNotes, + onClick: () => createActivityForPeople(ActivityType.Note), + }, + ...(!!selectedPersonId + ? [ + { + label: isFavorite + ? 'Remove from favorites' + : 'Add to favorites', + Icon: isFavorite ? IconHeartOff : IconHeart, + onClick: () => handleFavoriteButtonClick(), + }, + ] + : []), { label: 'Delete', Icon: IconTrash, diff --git a/front/src/modules/ui/context-menu/components/ContextMenu.tsx b/front/src/modules/ui/context-menu/components/ContextMenu.tsx index 866e11a06..2f1ac07bf 100644 --- a/front/src/modules/ui/context-menu/components/ContextMenu.tsx +++ b/front/src/modules/ui/context-menu/components/ContextMenu.tsx @@ -37,7 +37,7 @@ const StyledContainerContextMenu = styled.div` top: ${(props) => `${props.position.y}px`}; transform: translateX(-50%); - width: 160px; + width: auto; z-index: 1; `; @@ -60,13 +60,20 @@ export const ContextMenu = ({ selectedIds }: OwnProps) => { if (selectedIds.length === 0 || !contextMenuIsOpen) { return null; } + + const width = contextMenuEntries.some( + (contextMenuEntry) => contextMenuEntry.label === 'Remove from favorites', + ) + ? 200 + : undefined; + return ( - + {contextMenuEntries.map((item) => (