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

Feat: I can add a favorite directly from my table (#1747)

Browse Source 
* implented add/remove favorite in context menu

* clear selected rows after favorite button click, context menu width 200px when remove from favorites is shown

* Update front/src/modules/ui/context-menu/components/ContextMenu.tsx
This commit is contained in:
Ayush Agrawal
2023-09-29 22:03:28 +05:30
committed by GitHub
parent ae0acd508a
commit a287a5bc8a
4 changed files with 110 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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,