diff --git a/front/src/modules/companies/components/HooksCompanyBoard.tsx b/front/src/modules/companies/components/HooksCompanyBoard.tsx index 7493169a5..98cac7f3f 100644 --- a/front/src/modules/companies/components/HooksCompanyBoard.tsx +++ b/front/src/modules/companies/components/HooksCompanyBoard.tsx @@ -2,6 +2,7 @@ import { useEffect, useMemo } from 'react'; import { useRecoilState, useSetRecoilState } from 'recoil'; import { pipelineViewFields } from '@/pipeline/constants/pipelineViewFields'; +import { useBoardActionBarEntries } from '@/ui/board/hooks/useBoardActionBarEntries'; import { isBoardLoadedState } from '@/ui/board/states/isBoardLoadedState'; import { viewFieldsDefinitionsState } from '@/ui/board/states/viewFieldsDefinitionsState'; import { availableFiltersScopedState } from '@/ui/filter-n-sort/states/availableFiltersScopedState'; @@ -27,8 +28,6 @@ import { CompanyBoardRecoilScopeContext } from '../states/recoil-scope-contexts/ export function HooksCompanyBoard({ orderBy, - setActionBar, - setContextMenu, }: { orderBy: PipelineProgresses_Order_By[]; setActionBar?: () => void; @@ -117,15 +116,11 @@ export function HooksCompanyBoard({ const loading = loadingGetPipelines || loadingGetPipelineProgress || loadingGetCompanies; - if (setActionBar) { - setActionBar(); - } - if (setContextMenu) { - setContextMenu(); - } + const { setActionBarEntries } = useBoardActionBarEntries(); useEffect(() => { if (!loading && pipeline && pipelineProgresses && companiesData) { + setActionBarEntries(); updateCompanyBoard(pipeline, pipelineProgresses, companiesData.companies); } }, [ @@ -134,6 +129,7 @@ export function HooksCompanyBoard({ pipelineProgresses, companiesData, updateCompanyBoard, + setActionBarEntries, ]); return <>; diff --git a/front/src/modules/companies/hooks/useActionBarEntries.tsx b/front/src/modules/companies/hooks/useCompanyTableActionBarEntries.tsx similarity index 54% rename from front/src/modules/companies/hooks/useActionBarEntries.tsx rename to front/src/modules/companies/hooks/useCompanyTableActionBarEntries.tsx index 184689c8f..197892c33 100644 --- a/front/src/modules/companies/hooks/useActionBarEntries.tsx +++ b/front/src/modules/companies/hooks/useCompanyTableActionBarEntries.tsx @@ -3,13 +3,13 @@ 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 { 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() { +export function useCompanyTableActionBarEntries() { const setActionBarEntries = useSetRecoilState(actionBarEntriesState); const openCreateActivityRightDrawer = @@ -20,27 +20,28 @@ export function useActionBarEntries() { } const deleteSelectedCompanies = useDeleteSelectedComapnies(); - return () => { - setActionBarEntries([ - } - onClick={() => handleActivityClick(ActivityType.Note)} - key="note" - />, - } - onClick={() => handleActivityClick(ActivityType.Task)} - key="task" - />, - } - type="danger" - onClick={() => deleteSelectedCompanies()} - key="delete" - />, - ]); + return { + setActionBarEntries: () => + setActionBarEntries([ + } + onClick={() => handleActivityClick(ActivityType.Note)} + key="note" + />, + } + onClick={() => handleActivityClick(ActivityType.Task)} + key="task" + />, + } + type="danger" + onClick={() => deleteSelectedCompanies()} + key="delete" + />, + ]), }; } diff --git a/front/src/modules/companies/hooks/useContextMenuEntries.tsx b/front/src/modules/companies/hooks/useCompanyTableContextMenuEntries.tsx similarity index 57% rename from front/src/modules/companies/hooks/useContextMenuEntries.tsx rename to front/src/modules/companies/hooks/useCompanyTableContextMenuEntries.tsx index 3f5689989..8cb768f21 100644 --- a/front/src/modules/companies/hooks/useContextMenuEntries.tsx +++ b/front/src/modules/companies/hooks/useCompanyTableContextMenuEntries.tsx @@ -4,12 +4,12 @@ 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 { contextMenuEntriesState } from '@/ui/context-menu/states/contextMenuEntriesState'; import { ActivityType } from '~/generated/graphql'; import { useDeleteSelectedComapnies } from './useDeleteCompanies'; -export function useContextMenuEntries() { +export function useCompanyTableContextMenuEntries() { const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState); const openCreateActivityRightDrawer = @@ -21,27 +21,28 @@ export function useContextMenuEntries() { const deleteSelectedCompanies = useDeleteSelectedComapnies(); - return () => { - setContextMenuEntries([ - } - onClick={() => handleButtonClick(ActivityType.Note)} - key="note" - />, - } - onClick={() => handleButtonClick(ActivityType.Task)} - key="task" - />, - } - type="danger" - onClick={() => deleteSelectedCompanies()} - key="delete" - />, - ]); + return { + setContextMenuEntries: () => + setContextMenuEntries([ + } + onClick={() => handleButtonClick(ActivityType.Note)} + key="note" + />, + } + onClick={() => handleButtonClick(ActivityType.Task)} + key="task" + />, + } + accent="danger" + onClick={() => deleteSelectedCompanies()} + key="delete" + />, + ]), }; } diff --git a/front/src/modules/companies/table/components/CompanyTable.tsx b/front/src/modules/companies/table/components/CompanyTable.tsx index 943daf703..c5a5835e8 100644 --- a/front/src/modules/companies/table/components/CompanyTable.tsx +++ b/front/src/modules/companies/table/components/CompanyTable.tsx @@ -2,8 +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 { useCompanyTableActionBarEntries } from '@/companies/hooks/useCompanyTableActionBarEntries'; +import { useCompanyTableContextMenuEntries } from '@/companies/hooks/useCompanyTableContextMenuEntries'; 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'; @@ -53,8 +53,8 @@ export function CompanyTable() { return { AND: filters.map(turnFilterIntoWhereClause) }; }, [filters]) as any; - const setContextMenu = useContextMenuEntries(); - const setActionBar = useActionBarEntries(); + const { setContextMenuEntries } = useCompanyTableContextMenuEntries(); + const { setActionBarEntries } = useCompanyTableActionBarEntries(); return ( <> @@ -64,8 +64,8 @@ export function CompanyTable() { orderBy={orderBy.length ? orderBy : defaultOrderBy} whereFilters={whereFilters} filterDefinitionArray={companiesFilters} - setContextMenu={setContextMenu} - setActionBar={setActionBar} + setContextMenuEntries={setContextMenuEntries} + setActionBarEntries={setActionBarEntries} /> { - setContextMenuEntries([ - } - onClick={() => handleActivityClick(ActivityType.Note)} - key="note" - />, - } - onClick={() => handleActivityClick(ActivityType.Task)} - key="task" - />, - } - type="danger" - onClick={handleDeleteClick} - key="delete" - />, - ]); + return { + setContextMenuEntries: () => + setContextMenuEntries([ + } + onClick={() => handleActivityClick(ActivityType.Note)} + key="note" + />, + } + onClick={() => handleActivityClick(ActivityType.Task)} + key="task" + />, + } + accent="danger" + onClick={handleDeleteClick} + key="delete" + />, + ]), }; } diff --git a/front/src/modules/people/hooks/useActionBarEntries.tsx b/front/src/modules/people/hooks/usePersonTableActionBarEntries.tsx similarity index 72% rename from front/src/modules/people/hooks/useActionBarEntries.tsx rename to front/src/modules/people/hooks/usePersonTableActionBarEntries.tsx index d3bf44c8f..74bfe98d7 100644 --- a/front/src/modules/people/hooks/useActionBarEntries.tsx +++ b/front/src/modules/people/hooks/usePersonTableActionBarEntries.tsx @@ -4,7 +4,7 @@ import { useRecoilState, useRecoilValue, 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 { 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/selectors/selectedRowIdsSelector'; @@ -13,7 +13,7 @@ import { ActivityType, useDeleteManyPersonMutation } from '~/generated/graphql'; import { GET_PEOPLE } from '../queries'; -export function useActionBarEntries() { +export function usePersonTableActionBarEntries() { const setActionBarEntries = useSetRecoilState(actionBarEntriesState); const openCreateActivityRightDrawer = @@ -55,27 +55,28 @@ export function useActionBarEntries() { }); } - return () => { - setActionBarEntries([ - } - onClick={() => handleActivityClick(ActivityType.Note)} - key="note" - />, - } - onClick={() => handleActivityClick(ActivityType.Task)} - key="task" - />, - } - type="danger" - onClick={handleDeleteClick} - key="delte" - />, - ]); + return { + setActionBarEntries: () => + setActionBarEntries([ + } + onClick={() => handleActivityClick(ActivityType.Note)} + key="note" + />, + } + onClick={() => handleActivityClick(ActivityType.Task)} + key="task" + />, + } + type="danger" + onClick={handleDeleteClick} + key="delete" + />, + ]), }; } diff --git a/front/src/modules/people/table/components/PeopleTable.tsx b/front/src/modules/people/table/components/PeopleTable.tsx index db3bf4bf9..c468e3f85 100644 --- a/front/src/modules/people/table/components/PeopleTable.tsx +++ b/front/src/modules/people/table/components/PeopleTable.tsx @@ -2,8 +2,8 @@ import { useMemo } from 'react'; import { useRecoilValue } from 'recoil'; import { peopleViewFields } from '@/people/constants/peopleViewFields'; -import { useActionBarEntries } from '@/people/hooks/useActionBarEntries'; -import { useContextMenuEntries } from '@/people/hooks/useContextMenuEntries'; +import { usePersonTableContextMenuEntries } from '@/people/hooks/usePeopleTableContextMenuEntries'; +import { usePersonTableActionBarEntries } from '@/people/hooks/usePersonTableActionBarEntries'; 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'; @@ -53,8 +53,8 @@ export function PeopleTable() { return { AND: filters.map(turnFilterIntoWhereClause) }; }, [filters]) as any; - const setContextMenu = useContextMenuEntries(); - const setActionBar = useActionBarEntries(); + const { setContextMenuEntries } = usePersonTableContextMenuEntries(); + const { setActionBarEntries } = usePersonTableActionBarEntries(); return ( <> @@ -64,8 +64,8 @@ export function PeopleTable() { orderBy={orderBy.length ? orderBy : defaultOrderBy} whereFilters={whereFilters} filterDefinitionArray={peopleFilters} - setContextMenu={setContextMenu} - setActionBar={setActionBar} + setContextMenuEntries={setContextMenuEntries} + setActionBarEntries={setActionBarEntries} /> ; @@ -25,7 +25,7 @@ const meta: Meta = { decorators: [ (Story) => ( - + diff --git a/front/src/modules/ui/action-bar/states/ActionBarEntriesState.ts b/front/src/modules/ui/action-bar/states/actionBarEntriesState.ts similarity index 100% rename from front/src/modules/ui/action-bar/states/ActionBarEntriesState.ts rename to front/src/modules/ui/action-bar/states/actionBarEntriesState.ts diff --git a/front/src/modules/ui/action-bar/states/ActionBarIsOpenState.ts b/front/src/modules/ui/action-bar/states/actionBarIsOpenState.ts similarity index 100% rename from front/src/modules/ui/action-bar/states/ActionBarIsOpenState.ts rename to front/src/modules/ui/action-bar/states/actionBarIsOpenState.ts diff --git a/front/src/modules/ui/board/hooks/useActionBarEntries.tsx b/front/src/modules/ui/board/hooks/useBoardActionBarEntries.tsx similarity index 50% rename from front/src/modules/ui/board/hooks/useActionBarEntries.tsx rename to front/src/modules/ui/board/hooks/useBoardActionBarEntries.tsx index a1b23f58c..9a0bea2c4 100644 --- a/front/src/modules/ui/board/hooks/useActionBarEntries.tsx +++ b/front/src/modules/ui/board/hooks/useBoardActionBarEntries.tsx @@ -1,13 +1,16 @@ import { useSetRecoilState } from 'recoil'; -import { actionBarEntriesState } from '@/ui/action-bar/states/ActionBarEntriesState'; +import { actionBarEntriesState } from '@/ui/action-bar/states/actionBarEntriesState'; import { BoardActionBarButtonDeleteBoardCard } from '../components/BoardActionBarButtonDeleteBoardCard'; -export function useActionBarEntries() { +export function useBoardActionBarEntries() { const setActionBarEntries = useSetRecoilState(actionBarEntriesState); - return () => { - setActionBarEntries([]); + return { + setActionBarEntries: () => + setActionBarEntries([ + , + ]), }; } diff --git a/front/src/modules/ui/board/hooks/useCurrentCardSelected.ts b/front/src/modules/ui/board/hooks/useCurrentCardSelected.ts index f2785631a..2f13c04fe 100644 --- a/front/src/modules/ui/board/hooks/useCurrentCardSelected.ts +++ b/front/src/modules/ui/board/hooks/useCurrentCardSelected.ts @@ -1,7 +1,7 @@ import { useContext } from 'react'; import { useRecoilCallback, useRecoilState, useSetRecoilState } from 'recoil'; -import { actionBarOpenState } from '@/ui/action-bar/states/ActionBarIsOpenState'; +import { actionBarOpenState } from '@/ui/action-bar/states/actionBarIsOpenState'; import { BoardCardIdContext } from '../contexts/BoardCardIdContext'; import { isCardSelectedFamilyState } from '../states/isCardSelectedFamilyState'; diff --git a/front/src/modules/ui/board/hooks/useSetCardSelected.ts b/front/src/modules/ui/board/hooks/useSetCardSelected.ts index a22fa1f87..afeba3e40 100644 --- a/front/src/modules/ui/board/hooks/useSetCardSelected.ts +++ b/front/src/modules/ui/board/hooks/useSetCardSelected.ts @@ -1,6 +1,6 @@ import { useRecoilCallback, useSetRecoilState } from 'recoil'; -import { actionBarOpenState } from '@/ui/action-bar/states/ActionBarIsOpenState'; +import { actionBarOpenState } from '@/ui/action-bar/states/actionBarIsOpenState'; import { isCardSelectedFamilyState } from '../states/isCardSelectedFamilyState'; diff --git a/front/src/modules/ui/context-menu/components/ContextMenu.tsx b/front/src/modules/ui/context-menu/components/ContextMenu.tsx index 12ab9c01c..66276a0c0 100644 --- a/front/src/modules/ui/context-menu/components/ContextMenu.tsx +++ b/front/src/modules/ui/context-menu/components/ContextMenu.tsx @@ -2,12 +2,14 @@ import React, { useRef } from 'react'; import styled from '@emotion/styled'; import { useRecoilValue, useSetRecoilState } from 'recoil'; -import { actionBarOpenState } from '@/ui/action-bar/states/ActionBarIsOpenState'; -import { contextMenuPositionState } from '@/ui/context-menu/states/ContextMenuPositionState'; +import { actionBarOpenState } from '@/ui/action-bar/states/actionBarIsOpenState'; +import { contextMenuPositionState } from '@/ui/context-menu/states/contextMenuPositionState'; +import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu'; +import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer'; import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; -import { contextMenuEntriesState } from '../states/ContextMenuEntriesState'; -import { contextMenuOpenState } from '../states/ContextMenuIsOpenState'; +import { contextMenuEntriesState } from '../states/contextMenuEntriesState'; +import { contextMenuIsOpenState } from '../states/contextMenuIsOpenState'; import { PositionType } from '../types/PositionType'; type OwnProps = { @@ -39,9 +41,9 @@ const StyledContainerContextMenu = styled.div` export function ContextMenu({ selectedIds }: OwnProps) { const position = useRecoilValue(contextMenuPositionState); - const contextMenuOpen = useRecoilValue(contextMenuOpenState); + const contextMenuOpen = useRecoilValue(contextMenuIsOpenState); const contextMenuEntries = useRecoilValue(contextMenuEntriesState); - const setContextMenuOpenState = useSetRecoilState(contextMenuOpenState); + const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState); const setActionBarOpenState = useSetRecoilState(actionBarOpenState); const wrapperRef = useRef(null); @@ -58,7 +60,11 @@ export function ContextMenu({ selectedIds }: OwnProps) { } return ( - {contextMenuEntries} + + + {contextMenuEntries} + + ); } diff --git a/front/src/modules/ui/context-menu/components/ContextMenuEntry.tsx b/front/src/modules/ui/context-menu/components/ContextMenuEntry.tsx index 7979b097f..c026219a0 100644 --- a/front/src/modules/ui/context-menu/components/ContextMenuEntry.tsx +++ b/front/src/modules/ui/context-menu/components/ContextMenuEntry.tsx @@ -1,41 +1,17 @@ import { ReactNode } from 'react'; import styled from '@emotion/styled'; +import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem'; + +type ContextMenuEntryAccent = 'regular' | 'danger'; + type OwnProps = { icon: ReactNode; label: string; - type?: 'standard' | 'danger'; + accent?: ContextMenuEntryAccent; onClick: () => void; }; -type StyledButtonProps = { - type: 'standard' | 'danger'; -}; - -const StyledButton = styled.div` - align-items: center; - align-self: stretch; - border-radius: ${({ theme }) => theme.border.radius.sm}; - color: ${(props) => - props.type === 'danger' - ? props.theme.color.red - : props.theme.font.color.secondary}; - cursor: pointer; - display: flex; - gap: ${({ theme }) => theme.spacing(2)}; - - height: 32px; - padding-left: ${({ theme }) => theme.spacing(1)}; - padding-right: ${({ theme }) => theme.spacing(1)}; - transition: background 0.1s ease; - user-select: none; - - &:hover { - background: ${({ theme, type }) => - type === 'danger' ? theme.tag.background.red : theme.background.tertiary}; - } -`; - const StyledButtonLabel = styled.div` font-weight: ${({ theme }) => theme.font.weight.medium}; margin-left: ${({ theme }) => theme.spacing(2)}; @@ -44,13 +20,13 @@ const StyledButtonLabel = styled.div` export function ContextMenuEntry({ label, icon, - type = 'standard', + accent = 'regular', onClick, }: OwnProps) { return ( - + {icon} {label} - + ); } diff --git a/front/src/modules/ui/context-menu/components/__stories__/ContextMenu.stories.tsx b/front/src/modules/ui/context-menu/components/__stories__/ContextMenu.stories.tsx index 8146b9150..04029f0c4 100644 --- a/front/src/modules/ui/context-menu/components/__stories__/ContextMenu.stories.tsx +++ b/front/src/modules/ui/context-menu/components/__stories__/ContextMenu.stories.tsx @@ -2,25 +2,25 @@ import { MemoryRouter } from 'react-router-dom'; import type { Meta, StoryObj } from '@storybook/react'; import { useSetRecoilState } from 'recoil'; -import { useContextMenuEntries } from '@/companies/hooks/useContextMenuEntries'; +import { useCompanyTableContextMenuEntries } from '@/companies/hooks/useCompanyTableContextMenuEntries'; import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode'; import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; -import { contextMenuOpenState } from '../../states/ContextMenuIsOpenState'; -import { contextMenuPositionState } from '../../states/ContextMenuPositionState'; +import { contextMenuIsOpenState } from '../../states/contextMenuIsOpenState'; +import { contextMenuPositionState } from '../../states/contextMenuPositionState'; import { ContextMenu } from '../ContextMenu'; function FilledContextMenu(props: { selectedIds: string[] }) { - const setContextMenu = useContextMenuEntries(); - setContextMenu(); + const { setContextMenuEntries } = useCompanyTableContextMenuEntries(); + setContextMenuEntries(); const setContextMenuPosition = useSetRecoilState(contextMenuPositionState); setContextMenuPosition({ x: 100, y: 10, }); - const setContextMenuOpenState = useSetRecoilState(contextMenuOpenState); + const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState); setContextMenuOpenState(true); return ; } diff --git a/front/src/modules/ui/context-menu/states/ContextMenuIsOpenState.ts b/front/src/modules/ui/context-menu/states/ContextMenuIsOpenState.ts deleted file mode 100644 index 139bd3af4..000000000 --- a/front/src/modules/ui/context-menu/states/ContextMenuIsOpenState.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { atom } from 'recoil'; - -export const contextMenuOpenState = atom({ - key: 'contextMenuOpenState', - default: false, -}); diff --git a/front/src/modules/ui/context-menu/states/ContextMenuEntriesState.ts b/front/src/modules/ui/context-menu/states/contextMenuEntriesState.ts similarity index 100% rename from front/src/modules/ui/context-menu/states/ContextMenuEntriesState.ts rename to front/src/modules/ui/context-menu/states/contextMenuEntriesState.ts diff --git a/front/src/modules/ui/context-menu/states/contextMenuIsOpenState.ts b/front/src/modules/ui/context-menu/states/contextMenuIsOpenState.ts new file mode 100644 index 000000000..a41032e21 --- /dev/null +++ b/front/src/modules/ui/context-menu/states/contextMenuIsOpenState.ts @@ -0,0 +1,6 @@ +import { atom } from 'recoil'; + +export const contextMenuIsOpenState = atom({ + key: 'contextMenuIsOpenState', + default: false, +}); diff --git a/front/src/modules/ui/context-menu/states/ContextMenuPositionState.ts b/front/src/modules/ui/context-menu/states/contextMenuPositionState.ts similarity index 100% rename from front/src/modules/ui/context-menu/states/ContextMenuPositionState.ts rename to front/src/modules/ui/context-menu/states/contextMenuPositionState.ts diff --git a/front/src/modules/ui/dropdown/components/DropdownMenuItem.tsx b/front/src/modules/ui/dropdown/components/DropdownMenuItem.tsx index c060ef44f..a6fc58420 100644 --- a/front/src/modules/ui/dropdown/components/DropdownMenuItem.tsx +++ b/front/src/modules/ui/dropdown/components/DropdownMenuItem.tsx @@ -9,14 +9,17 @@ import { hoverBackground } from '@/ui/theme/constants/effects'; const styledIconButtonGroupClassName = 'dropdown-menu-item-actions'; -const StyledItem = styled.li` +export type DropdownMenuItemAccent = 'regular' | 'danger'; + +const StyledItem = styled.li<{ accent: DropdownMenuItemAccent }>` --horizontal-padding: ${({ theme }) => theme.spacing(1)}; --vertical-padding: ${({ theme }) => theme.spacing(2)}; align-items: center; border-radius: ${({ theme }) => theme.border.radius.sm}; - color: ${({ theme }) => theme.font.color.secondary}; + color: ${({ theme, accent }) => + accent === 'danger' ? theme.color.red : theme.font.color.secondary}; cursor: pointer; display: flex; @@ -52,14 +55,16 @@ const StyledActions = styled(IconButtonGroup)` export type DropdownMenuItemProps = ComponentProps<'li'> & { actions?: IconButtonGroupProps['children']; + accent?: DropdownMenuItemAccent; }; export const DropdownMenuItem = ({ actions, children, + accent = 'regular', ...props }: DropdownMenuItemProps) => ( - + {children} {actions && ( ; + return ; } diff --git a/front/src/modules/ui/table/components/CheckboxCell.tsx b/front/src/modules/ui/table/components/CheckboxCell.tsx index 0b3a4749a..c4c4227ad 100644 --- a/front/src/modules/ui/table/components/CheckboxCell.tsx +++ b/front/src/modules/ui/table/components/CheckboxCell.tsx @@ -2,7 +2,7 @@ import { useCallback } from 'react'; import styled from '@emotion/styled'; import { useSetRecoilState } from 'recoil'; -import { actionBarOpenState } from '@/ui/action-bar/states/ActionBarIsOpenState'; +import { actionBarOpenState } from '@/ui/action-bar/states/actionBarIsOpenState'; import { Checkbox } from '@/ui/input/checkbox/components/Checkbox'; import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected'; diff --git a/front/src/modules/ui/table/components/EntityTableCell.tsx b/front/src/modules/ui/table/components/EntityTableCell.tsx index c27f7d9bd..2ba83d95c 100644 --- a/front/src/modules/ui/table/components/EntityTableCell.tsx +++ b/front/src/modules/ui/table/components/EntityTableCell.tsx @@ -1,8 +1,8 @@ import { useContext } from 'react'; import { useSetRecoilState } from 'recoil'; -import { contextMenuOpenState } from '@/ui/context-menu/states/ContextMenuIsOpenState'; -import { contextMenuPositionState } from '@/ui/context-menu/states/ContextMenuPositionState'; +import { contextMenuIsOpenState } from '@/ui/context-menu/states/contextMenuIsOpenState'; +import { contextMenuPositionState } from '@/ui/context-menu/states/contextMenuPositionState'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { ColumnIndexContext } from '../contexts/ColumnIndexContext'; @@ -12,7 +12,7 @@ import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected'; export function EntityTableCell({ cellIndex }: { cellIndex: number }) { const setContextMenuPosition = useSetRecoilState(contextMenuPositionState); - const setContextMenuOpenState = useSetRecoilState(contextMenuOpenState); + const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState); const { setCurrentRowSelected } = useCurrentRowSelected(); diff --git a/front/src/modules/ui/table/components/GenericEntityTableData.tsx b/front/src/modules/ui/table/components/GenericEntityTableData.tsx index f23920830..a9f4d45f6 100644 --- a/front/src/modules/ui/table/components/GenericEntityTableData.tsx +++ b/front/src/modules/ui/table/components/GenericEntityTableData.tsx @@ -1,3 +1,5 @@ +import { useEffect } from 'react'; + import { defaultOrderBy } from '@/people/queries'; import { FilterDefinition } from '@/ui/filter-n-sort/types/FilterDefinition'; import { useSetEntityTableData } from '@/ui/table/hooks/useSetEntityTableData'; @@ -8,16 +10,16 @@ export function GenericEntityTableData({ orderBy = defaultOrderBy, whereFilters, filterDefinitionArray, - setActionBar, - setContextMenu, + setActionBarEntries, + setContextMenuEntries, }: { useGetRequest: any; getRequestResultKey: string; orderBy?: any; whereFilters?: any; filterDefinitionArray: FilterDefinition[]; - setActionBar?: () => void; - setContextMenu?: () => void; + setActionBarEntries?: () => void; + setContextMenuEntries?: () => void; }) { const setEntityTableData = useSetEntityTableData(); useGetRequest({ @@ -28,11 +30,10 @@ export function GenericEntityTableData({ }, }); - if (setActionBar) { - setActionBar(); - } - if (setContextMenu) { - setContextMenu(); - } + useEffect(() => { + setActionBarEntries?.(); + setContextMenuEntries?.(); + }, [setActionBarEntries, setContextMenuEntries]); + return <>; } 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 bd49c6cb8..cf5d1724b 100644 --- a/front/src/modules/ui/table/context-menu/components/EntityTableContextMenu.tsx +++ b/front/src/modules/ui/table/context-menu/components/EntityTableContextMenu.tsx @@ -7,5 +7,5 @@ import { selectedRowIdsSelector } from '../../states/selectors/selectedRowIdsSel export function EntityTableContextMenu() { const selectedRowIds = useRecoilValue(selectedRowIdsSelector); - return ; + return ; } diff --git a/front/src/pages/companies/Companies.tsx b/front/src/pages/companies/Companies.tsx index 4045a884a..3a0d65c73 100644 --- a/front/src/pages/companies/Companies.tsx +++ b/front/src/pages/companies/Companies.tsx @@ -72,8 +72,8 @@ export function Companies() { - - + + ); diff --git a/front/src/pages/companies/CompaniesMockMode.tsx b/front/src/pages/companies/CompaniesMockMode.tsx index 1a1c72b1d..9d70e82c7 100644 --- a/front/src/pages/companies/CompaniesMockMode.tsx +++ b/front/src/pages/companies/CompaniesMockMode.tsx @@ -4,7 +4,6 @@ import styled from '@emotion/styled'; import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode'; import { IconBuildingSkyscraper } from '@/ui/icon'; import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer'; -import { EntityTableActionBar } from '@/ui/table/action-bar/components/EntityTableActionBar'; import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; @@ -26,7 +25,6 @@ export function CompaniesMockMode() { - diff --git a/front/src/pages/opportunities/Opportunities.tsx b/front/src/pages/opportunities/Opportunities.tsx index bf8b60616..92b2d3bd9 100644 --- a/front/src/pages/opportunities/Opportunities.tsx +++ b/front/src/pages/opportunities/Opportunities.tsx @@ -10,7 +10,6 @@ import { import { EntityBoard } from '@/ui/board/components/EntityBoard'; import { EntityBoardActionBar } from '@/ui/board/components/EntityBoardActionBar'; import { BoardOptionsContext } from '@/ui/board/contexts/BoardOptionsContext'; -import { useActionBarEntries } from '@/ui/board/hooks/useActionBarEntries'; import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers'; import { IconTargetArrow } from '@/ui/icon/index'; import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer'; @@ -63,8 +62,6 @@ export function Opportunities() { }); } - const setActionBar = useActionBarEntries(); - return ( - + - +