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

Cosmetic refactoring on context menu (#1209)

Browse Source 
* Cosmetic refactoring on context menu

* Fix lint

* Fix lint

* Fix lint

* Fix lint

* Fix lint

* Fix lint
This commit is contained in:
Charles Bochet
2023-08-15 02:34:23 +02:00
committed by GitHub
parent 444d9a9ca1
commit e3dc3b3e4a
30 changed files with 196 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
front/src/modules/companies/components/HooksCompanyBoard.tsx
View File

@ -2,6 +2,7 @@ import { useEffect, useMemo } from 'react';
import { useRecoilState, useSetRecoilState } from 'recoil'; import { useRecoilState, useSetRecoilState } from 'recoil';
import { pipelineViewFields } from '@/pipeline/constants/pipelineViewFields'; import { pipelineViewFields } from '@/pipeline/constants/pipelineViewFields';
import { useBoardActionBarEntries } from '@/ui/board/hooks/useBoardActionBarEntries';
import { isBoardLoadedState } from '@/ui/board/states/isBoardLoadedState'; import { isBoardLoadedState } from '@/ui/board/states/isBoardLoadedState';
import { viewFieldsDefinitionsState } from '@/ui/board/states/viewFieldsDefinitionsState'; import { viewFieldsDefinitionsState } from '@/ui/board/states/viewFieldsDefinitionsState';
import { availableFiltersScopedState } from '@/ui/filter-n-sort/states/availableFiltersScopedState'; import { availableFiltersScopedState } from '@/ui/filter-n-sort/states/availableFiltersScopedState';
@ -27,8 +28,6 @@ import { CompanyBoardRecoilScopeContext } from '../states/recoil-scope-contexts/
export function HooksCompanyBoard({ export function HooksCompanyBoard({
orderBy, orderBy,
setActionBar,
setContextMenu,
}: { }: {
orderBy: PipelineProgresses_Order_By[]; orderBy: PipelineProgresses_Order_By[];
setActionBar?: () => void; setActionBar?: () => void;
@ -117,15 +116,11 @@ export function HooksCompanyBoard({
const loading = const loading =
loadingGetPipelines || loadingGetPipelineProgress || loadingGetCompanies; loadingGetPipelines || loadingGetPipelineProgress || loadingGetCompanies;
if (setActionBar) { const { setActionBarEntries } = useBoardActionBarEntries();
setActionBar();
}
if (setContextMenu) {
setContextMenu();
}
useEffect(() => { useEffect(() => {
if (!loading && pipeline && pipelineProgresses && companiesData) { if (!loading && pipeline && pipelineProgresses && companiesData) {
setActionBarEntries();
updateCompanyBoard(pipeline, pipelineProgresses, companiesData.companies); updateCompanyBoard(pipeline, pipelineProgresses, companiesData.companies);
} }
}, [ }, [
@ -134,6 +129,7 @@ export function HooksCompanyBoard({
pipelineProgresses, pipelineProgresses,
companiesData, companiesData,
updateCompanyBoard, updateCompanyBoard,
setActionBarEntries,
]); ]);
return <></>; return <></>;

49
front/src/modules/companies/hooks/useActionBarEntries.tsx → front/src/modules/companies/hooks/useCompanyTableActionBarEntries.tsx
View File

@ -3,13 +3,13 @@ import { useSetRecoilState } from 'recoil';
import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds'; import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity'; import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
import { ActionBarEntry } from '@/ui/action-bar/components/ActionBarEntry'; 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 { IconCheckbox, IconNotes, IconTrash } from '@/ui/icon';
import { ActivityType } from '~/generated/graphql'; import { ActivityType } from '~/generated/graphql';
import { useDeleteSelectedComapnies } from './useDeleteCompanies'; import { useDeleteSelectedComapnies } from './useDeleteCompanies';
export function useActionBarEntries() { export function useCompanyTableActionBarEntries() {
const setActionBarEntries = useSetRecoilState(actionBarEntriesState); const setActionBarEntries = useSetRecoilState(actionBarEntriesState);
const openCreateActivityRightDrawer = const openCreateActivityRightDrawer =
@ -20,27 +20,28 @@ export function useActionBarEntries() {
} }
const deleteSelectedCompanies = useDeleteSelectedComapnies(); const deleteSelectedCompanies = useDeleteSelectedComapnies();
return () => { return {
setActionBarEntries([ setActionBarEntries: () =>
<ActionBarEntry setActionBarEntries([
label="Note" <ActionBarEntry
icon={<IconNotes size={16} />} label="Note"
onClick={() => handleActivityClick(ActivityType.Note)} icon={<IconNotes size={16} />}
key="note" onClick={() => handleActivityClick(ActivityType.Note)}
/>, key="note"
<ActionBarEntry />,
label="Task" <ActionBarEntry
icon={<IconCheckbox size={16} />} label="Task"
onClick={() => handleActivityClick(ActivityType.Task)} icon={<IconCheckbox size={16} />}
key="task" onClick={() => handleActivityClick(ActivityType.Task)}
/>, key="task"
<ActionBarEntry />,
label="Delete" <ActionBarEntry
icon={<IconTrash size={16} />} label="Delete"
type="danger" icon={<IconTrash size={16} />}
onClick={() => deleteSelectedCompanies()} type="danger"
key="delete" onClick={() => deleteSelectedCompanies()}
/>, key="delete"
]); />,
]),
}; };
} }

49
front/src/modules/companies/hooks/useContextMenuEntries.tsx → front/src/modules/companies/hooks/useCompanyTableContextMenuEntries.tsx
View File

@ -4,12 +4,12 @@ import { useSetRecoilState } from 'recoil';
import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds'; import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity'; import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
import { ContextMenuEntry } from '@/ui/context-menu/components/ContextMenuEntry'; 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 { ActivityType } from '~/generated/graphql';
import { useDeleteSelectedComapnies } from './useDeleteCompanies'; import { useDeleteSelectedComapnies } from './useDeleteCompanies';
export function useContextMenuEntries() { export function useCompanyTableContextMenuEntries() {
const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState); const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState);
const openCreateActivityRightDrawer = const openCreateActivityRightDrawer =
@ -21,27 +21,28 @@ export function useContextMenuEntries() {
const deleteSelectedCompanies = useDeleteSelectedComapnies(); const deleteSelectedCompanies = useDeleteSelectedComapnies();
return () => { return {
setContextMenuEntries([ setContextMenuEntries: () =>
<ContextMenuEntry setContextMenuEntries([
label="Note" <ContextMenuEntry
icon={<IconNotes size={16} />} label="Note"
onClick={() => handleButtonClick(ActivityType.Note)} icon={<IconNotes size={16} />}
key="note" onClick={() => handleButtonClick(ActivityType.Note)}
/>, key="note"
<ContextMenuEntry />,
label="Task" <ContextMenuEntry
icon={<IconCheckbox size={16} />} label="Task"
onClick={() => handleButtonClick(ActivityType.Task)} icon={<IconCheckbox size={16} />}
key="task" onClick={() => handleButtonClick(ActivityType.Task)}
/>, key="task"
<ContextMenuEntry />,
label="Delete" <ContextMenuEntry
icon={<IconTrash size={16} />} label="Delete"
type="danger" icon={<IconTrash size={16} />}
onClick={() => deleteSelectedCompanies()} accent="danger"
key="delete" onClick={() => deleteSelectedCompanies()}
/>, key="delete"
]); />,
]),
}; };
} }

12
front/src/modules/companies/table/components/CompanyTable.tsx
View File

@ -2,8 +2,8 @@ import { useMemo } from 'react';
import { useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
import { companyViewFields } from '@/companies/constants/companyViewFields'; import { companyViewFields } from '@/companies/constants/companyViewFields';
import { useActionBarEntries } from '@/companies/hooks/useActionBarEntries'; import { useCompanyTableActionBarEntries } from '@/companies/hooks/useCompanyTableActionBarEntries';
import { useContextMenuEntries } from '@/companies/hooks/useContextMenuEntries'; import { useCompanyTableContextMenuEntries } from '@/companies/hooks/useCompanyTableContextMenuEntries';
import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState'; import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
import { sortsOrderByScopedState } from '@/ui/filter-n-sort/states/sortScopedState'; import { sortsOrderByScopedState } from '@/ui/filter-n-sort/states/sortScopedState';
import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause'; import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause';
@ -53,8 +53,8 @@ export function CompanyTable() {
return { AND: filters.map(turnFilterIntoWhereClause) }; return { AND: filters.map(turnFilterIntoWhereClause) };
}, [filters]) as any; }, [filters]) as any;
const setContextMenu = useContextMenuEntries(); const { setContextMenuEntries } = useCompanyTableContextMenuEntries();
const setActionBar = useActionBarEntries(); const { setActionBarEntries } = useCompanyTableActionBarEntries();
return ( return (
<> <>
@ -64,8 +64,8 @@ export function CompanyTable() {
orderBy={orderBy.length ? orderBy : defaultOrderBy} orderBy={orderBy.length ? orderBy : defaultOrderBy}
whereFilters={whereFilters} whereFilters={whereFilters}
filterDefinitionArray={companiesFilters} filterDefinitionArray={companiesFilters}
setContextMenu={setContextMenu} setContextMenuEntries={setContextMenuEntries}
setActionBar={setActionBar} setActionBarEntries={setActionBarEntries}
/> />
<EntityTable <EntityTable
viewName="All Companies" viewName="All Companies"

49
front/src/modules/people/hooks/useContextMenuEntries.tsx → front/src/modules/people/hooks/usePeopleTableContextMenuEntries.tsx
View File

@ -5,7 +5,7 @@ import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds'; import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity'; import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
import { ContextMenuEntry } from '@/ui/context-menu/components/ContextMenuEntry'; 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 { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection'; import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
import { selectedRowIdsSelector } from '@/ui/table/states/selectors/selectedRowIdsSelector'; import { selectedRowIdsSelector } from '@/ui/table/states/selectors/selectedRowIdsSelector';
import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState'; import { tableRowIdsState } from '@/ui/table/states/tableRowIdsState';
@ -13,7 +13,7 @@ import { ActivityType, useDeleteManyPersonMutation } from '~/generated/graphql';
import { GET_PEOPLE } from '../queries'; import { GET_PEOPLE } from '../queries';
export function useContextMenuEntries() { export function usePersonTableContextMenuEntries() {
const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState); const setContextMenuEntries = useSetRecoilState(contextMenuEntriesState);
const openCreateActivityRightDrawer = const openCreateActivityRightDrawer =
@ -55,27 +55,28 @@ export function useContextMenuEntries() {
}); });
} }
return () => { return {
setContextMenuEntries([ setContextMenuEntries: () =>
<ContextMenuEntry setContextMenuEntries([
label="Note" <ContextMenuEntry
icon={<IconNotes size={16} />} label="Note"
onClick={() => handleActivityClick(ActivityType.Note)} icon={<IconNotes size={16} />}
key="note" onClick={() => handleActivityClick(ActivityType.Note)}
/>, key="note"
<ContextMenuEntry />,
label="Task" <ContextMenuEntry
icon={<IconCheckbox size={16} />} label="Task"
onClick={() => handleActivityClick(ActivityType.Task)} icon={<IconCheckbox size={16} />}
key="task" onClick={() => handleActivityClick(ActivityType.Task)}
/>, key="task"
<ContextMenuEntry />,
label="Delete" <ContextMenuEntry
icon={<IconTrash size={16} />} label="Delete"
type="danger" icon={<IconTrash size={16} />}
onClick={handleDeleteClick} accent="danger"
key="delete" onClick={handleDeleteClick}
/>, key="delete"
]); />,
]),
}; };
} }

49
front/src/modules/people/hooks/useActionBarEntries.tsx → front/src/modules/people/hooks/usePersonTableActionBarEntries.tsx
View File

@ -4,7 +4,7 @@ import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds'; import { useOpenCreateActivityDrawerForSelectedRowIds } from '@/activities/hooks/useOpenCreateActivityDrawerForSelectedRowIds';
import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity'; import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
import { ActionBarEntry } from '@/ui/action-bar/components/ActionBarEntry'; 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 { IconCheckbox, IconNotes, IconTrash } from '@/ui/icon';
import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection'; import { useResetTableRowSelection } from '@/ui/table/hooks/useResetTableRowSelection';
import { selectedRowIdsSelector } from '@/ui/table/states/selectors/selectedRowIdsSelector'; import { selectedRowIdsSelector } from '@/ui/table/states/selectors/selectedRowIdsSelector';
@ -13,7 +13,7 @@ import { ActivityType, useDeleteManyPersonMutation } from '~/generated/graphql';
import { GET_PEOPLE } from '../queries'; import { GET_PEOPLE } from '../queries';
export function useActionBarEntries() { export function usePersonTableActionBarEntries() {
const setActionBarEntries = useSetRecoilState(actionBarEntriesState); const setActionBarEntries = useSetRecoilState(actionBarEntriesState);
const openCreateActivityRightDrawer = const openCreateActivityRightDrawer =
@ -55,27 +55,28 @@ export function useActionBarEntries() {
}); });
} }
return () => { return {
setActionBarEntries([ setActionBarEntries: () =>
<ActionBarEntry setActionBarEntries([
label="Note" <ActionBarEntry
icon={<IconNotes size={16} />} label="Note"
onClick={() => handleActivityClick(ActivityType.Note)} icon={<IconNotes size={16} />}
key="note" onClick={() => handleActivityClick(ActivityType.Note)}
/>, key="note"
<ActionBarEntry />,
label="Task" <ActionBarEntry
icon={<IconCheckbox size={16} />} label="Task"
onClick={() => handleActivityClick(ActivityType.Task)} icon={<IconCheckbox size={16} />}
key="task" onClick={() => handleActivityClick(ActivityType.Task)}
/>, key="task"
<ActionBarEntry />,
label="Delete" <ActionBarEntry
icon={<IconTrash size={16} />} label="Delete"
type="danger" icon={<IconTrash size={16} />}
onClick={handleDeleteClick} type="danger"
key="delte" onClick={handleDeleteClick}
/>, key="delete"
]); />,
]),
}; };
} }

12
front/src/modules/people/table/components/PeopleTable.tsx
View File

@ -2,8 +2,8 @@ import { useMemo } from 'react';
import { useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
import { peopleViewFields } from '@/people/constants/peopleViewFields'; import { peopleViewFields } from '@/people/constants/peopleViewFields';
import { useActionBarEntries } from '@/people/hooks/useActionBarEntries'; import { usePersonTableContextMenuEntries } from '@/people/hooks/usePeopleTableContextMenuEntries';
import { useContextMenuEntries } from '@/people/hooks/useContextMenuEntries'; import { usePersonTableActionBarEntries } from '@/people/hooks/usePersonTableActionBarEntries';
import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState'; import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
import { sortsOrderByScopedState } from '@/ui/filter-n-sort/states/sortScopedState'; import { sortsOrderByScopedState } from '@/ui/filter-n-sort/states/sortScopedState';
import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause'; import { turnFilterIntoWhereClause } from '@/ui/filter-n-sort/utils/turnFilterIntoWhereClause';
@ -53,8 +53,8 @@ export function PeopleTable() {
return { AND: filters.map(turnFilterIntoWhereClause) }; return { AND: filters.map(turnFilterIntoWhereClause) };
}, [filters]) as any; }, [filters]) as any;
const setContextMenu = useContextMenuEntries(); const { setContextMenuEntries } = usePersonTableContextMenuEntries();
const setActionBar = useActionBarEntries(); const { setActionBarEntries } = usePersonTableActionBarEntries();
return ( return (
<> <>
@ -64,8 +64,8 @@ export function PeopleTable() {
orderBy={orderBy.length ? orderBy : defaultOrderBy} orderBy={orderBy.length ? orderBy : defaultOrderBy}
whereFilters={whereFilters} whereFilters={whereFilters}
filterDefinitionArray={peopleFilters} filterDefinitionArray={peopleFilters}
setContextMenu={setContextMenu} setContextMenuEntries={setContextMenuEntries}
setActionBar={setActionBar} setActionBarEntries={setActionBarEntries}
/> />
<EntityTable <EntityTable
viewName="All People" viewName="All People"

8
front/src/modules/ui/action-bar/components/ActionBar.tsx
View File

@ -2,10 +2,10 @@ import React, { useRef } from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
import { actionBarEntriesState } from '@/ui/action-bar/states/ActionBarEntriesState'; import { actionBarEntriesState } from '@/ui/action-bar/states/actionBarEntriesState';
import { contextMenuOpenState } from '@/ui/context-menu/states/ContextMenuIsOpenState'; import { contextMenuIsOpenState } from '@/ui/context-menu/states/contextMenuIsOpenState';
import { actionBarOpenState } from '../states/ActionBarIsOpenState'; import { actionBarOpenState } from '../states/actionBarIsOpenState';
type OwnProps = { type OwnProps = {
selectedIds: string[]; selectedIds: string[];
@ -33,7 +33,7 @@ const StyledContainerActionBar = styled.div`
export function ActionBar({ selectedIds }: OwnProps) { export function ActionBar({ selectedIds }: OwnProps) {
const actionBarOpen = useRecoilValue(actionBarOpenState); const actionBarOpen = useRecoilValue(actionBarOpenState);
const contextMenuOpen = useRecoilValue(contextMenuOpenState); const contextMenuOpen = useRecoilValue(contextMenuIsOpenState);
const actionBarEntries = useRecoilValue(actionBarEntriesState); const actionBarEntries = useRecoilValue(actionBarEntriesState);
const wrapperRef = useRef(null); const wrapperRef = useRef(null);

10
front/src/modules/ui/action-bar/components/__stories__/ActionBar.stories.tsx
View File

@ -2,18 +2,18 @@ import { MemoryRouter } from 'react-router-dom';
import type { Meta, StoryObj } from '@storybook/react'; import type { Meta, StoryObj } from '@storybook/react';
import { useSetRecoilState } from 'recoil'; import { useSetRecoilState } from 'recoil';
import { useActionBarEntries } from '@/companies/hooks/useActionBarEntries'; import { useCompanyTableActionBarEntries } from '@/companies/hooks/useCompanyTableActionBarEntries';
import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode'; import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode';
import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext'; import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { actionBarOpenState } from '../../states/ActionBarIsOpenState'; import { actionBarOpenState } from '../../states/actionBarIsOpenState';
import { ActionBar } from '../ActionBar'; import { ActionBar } from '../ActionBar';
function FilledActionBar(props: { selectedIds: string[] }) { function FilledActionBar(props: { selectedIds: string[] }) {
const setActionBar = useActionBarEntries(); const { setActionBarEntries } = useCompanyTableActionBarEntries();
setActionBar(); setActionBarEntries();
const setActionBarOpenState = useSetRecoilState(actionBarOpenState); const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
setActionBarOpenState(true); setActionBarOpenState(true);
return <ActionBar selectedIds={props.selectedIds} />; return <ActionBar selectedIds={props.selectedIds} />;
@ -25,7 +25,7 @@ const meta: Meta<typeof ActionBar> = {
decorators: [ decorators: [
(Story) => ( (Story) => (
<RecoilScope SpecificContext={TableRecoilScopeContext}> <RecoilScope SpecificContext={TableRecoilScopeContext}>
<CompanyTableMockMode></CompanyTableMockMode> <CompanyTableMockMode />
<MemoryRouter> <MemoryRouter>
<Story /> <Story />
</MemoryRouter> </MemoryRouter>

0
front/src/modules/ui/action-bar/states/ActionBarEntriesState.ts → front/src/modules/ui/action-bar/states/actionBarEntriesState.ts
View File

0
front/src/modules/ui/action-bar/states/ActionBarIsOpenState.ts → front/src/modules/ui/action-bar/states/actionBarIsOpenState.ts
View File

11
front/src/modules/ui/board/hooks/useActionBarEntries.tsx → front/src/modules/ui/board/hooks/useBoardActionBarEntries.tsx
View File

@ -1,13 +1,16 @@
import { useSetRecoilState } from 'recoil'; 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'; import { BoardActionBarButtonDeleteBoardCard } from '../components/BoardActionBarButtonDeleteBoardCard';
export function useActionBarEntries() { export function useBoardActionBarEntries() {
const setActionBarEntries = useSetRecoilState(actionBarEntriesState); const setActionBarEntries = useSetRecoilState(actionBarEntriesState);
return () => { return {
setActionBarEntries([<BoardActionBarButtonDeleteBoardCard key="delete" />]); setActionBarEntries: () =>
setActionBarEntries([
<BoardActionBarButtonDeleteBoardCard key="delete" />,
]),
}; };
} }

2
front/src/modules/ui/board/hooks/useCurrentCardSelected.ts
View File

@ -1,7 +1,7 @@
import { useContext } from 'react'; import { useContext } from 'react';
import { useRecoilCallback, useRecoilState, useSetRecoilState } from 'recoil'; 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 { BoardCardIdContext } from '../contexts/BoardCardIdContext';
import { isCardSelectedFamilyState } from '../states/isCardSelectedFamilyState'; import { isCardSelectedFamilyState } from '../states/isCardSelectedFamilyState';

2
front/src/modules/ui/board/hooks/useSetCardSelected.ts
View File

@ -1,6 +1,6 @@
import { useRecoilCallback, useSetRecoilState } from 'recoil'; 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'; import { isCardSelectedFamilyState } from '../states/isCardSelectedFamilyState';

20
front/src/modules/ui/context-menu/components/ContextMenu.tsx
View File

@ -2,12 +2,14 @@ import React, { useRef } from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { useRecoilValue, useSetRecoilState } from 'recoil'; import { useRecoilValue, useSetRecoilState } from 'recoil';
import { actionBarOpenState } from '@/ui/action-bar/states/ActionBarIsOpenState'; import { actionBarOpenState } from '@/ui/action-bar/states/actionBarIsOpenState';
import { contextMenuPositionState } from '@/ui/context-menu/states/ContextMenuPositionState'; 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 { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { contextMenuEntriesState } from '../states/ContextMenuEntriesState'; import { contextMenuEntriesState } from '../states/contextMenuEntriesState';
import { contextMenuOpenState } from '../states/ContextMenuIsOpenState'; import { contextMenuIsOpenState } from '../states/contextMenuIsOpenState';
import { PositionType } from '../types/PositionType'; import { PositionType } from '../types/PositionType';
type OwnProps = { type OwnProps = {
@ -39,9 +41,9 @@ const StyledContainerContextMenu = styled.div<StyledContainerProps>`
export function ContextMenu({ selectedIds }: OwnProps) { export function ContextMenu({ selectedIds }: OwnProps) {
const position = useRecoilValue(contextMenuPositionState); const position = useRecoilValue(contextMenuPositionState);
const contextMenuOpen = useRecoilValue(contextMenuOpenState); const contextMenuOpen = useRecoilValue(contextMenuIsOpenState);
const contextMenuEntries = useRecoilValue(contextMenuEntriesState); const contextMenuEntries = useRecoilValue(contextMenuEntriesState);
const setContextMenuOpenState = useSetRecoilState(contextMenuOpenState); const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);
const setActionBarOpenState = useSetRecoilState(actionBarOpenState); const setActionBarOpenState = useSetRecoilState(actionBarOpenState);
const wrapperRef = useRef(null); const wrapperRef = useRef(null);
@ -58,7 +60,11 @@ export function ContextMenu({ selectedIds }: OwnProps) {
} }
return ( return (
<StyledContainerContextMenu ref={wrapperRef} position={position}> <StyledContainerContextMenu ref={wrapperRef} position={position}>
{contextMenuEntries} <DropdownMenu>
<DropdownMenuItemsContainer>
{contextMenuEntries}
</DropdownMenuItemsContainer>
</DropdownMenu>
</StyledContainerContextMenu> </StyledContainerContextMenu>
); );
} }

40
front/src/modules/ui/context-menu/components/ContextMenuEntry.tsx
View File

@ -1,41 +1,17 @@
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
type ContextMenuEntryAccent = 'regular' | 'danger';
type OwnProps = { type OwnProps = {
icon: ReactNode; icon: ReactNode;
label: string; label: string;
type?: 'standard' | 'danger'; accent?: ContextMenuEntryAccent;
onClick: () => void; onClick: () => void;
}; };
type StyledButtonProps = {
type: 'standard' | 'danger';
};
const StyledButton = styled.div<StyledButtonProps>`
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` const StyledButtonLabel = styled.div`
font-weight: ${({ theme }) => theme.font.weight.medium}; font-weight: ${({ theme }) => theme.font.weight.medium};
margin-left: ${({ theme }) => theme.spacing(2)}; margin-left: ${({ theme }) => theme.spacing(2)};
@ -44,13 +20,13 @@ const StyledButtonLabel = styled.div`
export function ContextMenuEntry({ export function ContextMenuEntry({
label, label,
icon, icon,
type = 'standard', accent = 'regular',
onClick, onClick,
}: OwnProps) { }: OwnProps) {
return ( return (
<StyledButton type={type} onClick={onClick}> <DropdownMenuItem onClick={onClick} accent={accent}>
{icon} {icon}
<StyledButtonLabel>{label}</StyledButtonLabel> <StyledButtonLabel>{label}</StyledButtonLabel>
</StyledButton> </DropdownMenuItem>
); );
} }

12
front/src/modules/ui/context-menu/components/__stories__/ContextMenu.stories.tsx
View File

@ -2,25 +2,25 @@ import { MemoryRouter } from 'react-router-dom';
import type { Meta, StoryObj } from '@storybook/react'; import type { Meta, StoryObj } from '@storybook/react';
import { useSetRecoilState } from 'recoil'; import { useSetRecoilState } from 'recoil';
import { useContextMenuEntries } from '@/companies/hooks/useContextMenuEntries'; import { useCompanyTableContextMenuEntries } from '@/companies/hooks/useCompanyTableContextMenuEntries';
import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode'; import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode';
import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext'; import { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { contextMenuOpenState } from '../../states/ContextMenuIsOpenState'; import { contextMenuIsOpenState } from '../../states/contextMenuIsOpenState';
import { contextMenuPositionState } from '../../states/ContextMenuPositionState'; import { contextMenuPositionState } from '../../states/contextMenuPositionState';
import { ContextMenu } from '../ContextMenu'; import { ContextMenu } from '../ContextMenu';
function FilledContextMenu(props: { selectedIds: string[] }) { function FilledContextMenu(props: { selectedIds: string[] }) {
const setContextMenu = useContextMenuEntries(); const { setContextMenuEntries } = useCompanyTableContextMenuEntries();
setContextMenu(); setContextMenuEntries();
const setContextMenuPosition = useSetRecoilState(contextMenuPositionState); const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
setContextMenuPosition({ setContextMenuPosition({
x: 100, x: 100,
y: 10, y: 10,
}); });
const setContextMenuOpenState = useSetRecoilState(contextMenuOpenState); const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);
setContextMenuOpenState(true); setContextMenuOpenState(true);
return <ContextMenu selectedIds={props.selectedIds} />; return <ContextMenu selectedIds={props.selectedIds} />;
} }

6
front/src/modules/ui/context-menu/states/ContextMenuIsOpenState.ts
View File

@ -1,6 +0,0 @@
import { atom } from 'recoil';
export const contextMenuOpenState = atom<boolean>({
key: 'contextMenuOpenState',
default: false,
});

0
front/src/modules/ui/context-menu/states/ContextMenuEntriesState.ts → front/src/modules/ui/context-menu/states/contextMenuEntriesState.ts
View File

6
front/src/modules/ui/context-menu/states/contextMenuIsOpenState.ts Normal file
View File

@ -0,0 +1,6 @@
import { atom } from 'recoil';
export const contextMenuIsOpenState = atom<boolean>({
key: 'contextMenuIsOpenState',
default: false,
});

0
front/src/modules/ui/context-menu/states/ContextMenuPositionState.ts → front/src/modules/ui/context-menu/states/contextMenuPositionState.ts
View File

11
front/src/modules/ui/dropdown/components/DropdownMenuItem.tsx
View File

@ -9,14 +9,17 @@ import { hoverBackground } from '@/ui/theme/constants/effects';
const styledIconButtonGroupClassName = 'dropdown-menu-item-actions'; 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)}; --horizontal-padding: ${({ theme }) => theme.spacing(1)};
--vertical-padding: ${({ theme }) => theme.spacing(2)}; --vertical-padding: ${({ theme }) => theme.spacing(2)};
align-items: center; align-items: center;
border-radius: ${({ theme }) => theme.border.radius.sm}; 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; cursor: pointer;
display: flex; display: flex;
@ -52,14 +55,16 @@ const StyledActions = styled(IconButtonGroup)`
export type DropdownMenuItemProps = ComponentProps<'li'> & { export type DropdownMenuItemProps = ComponentProps<'li'> & {
actions?: IconButtonGroupProps['children']; actions?: IconButtonGroupProps['children'];
accent?: DropdownMenuItemAccent;
}; };
export const DropdownMenuItem = ({ export const DropdownMenuItem = ({
actions, actions,
children, children,
accent = 'regular',
...props ...props
}: DropdownMenuItemProps) => ( }: DropdownMenuItemProps) => (
<StyledItem {...props}> <StyledItem {...props} accent={accent}>
{children} {children}
{actions && ( {actions && (
<StyledActions <StyledActions

2
front/src/modules/ui/table/action-bar/components/EntityTableActionBar.tsx
View File

@ -8,5 +8,5 @@ import { selectedRowIdsSelector } from '../../states/selectors/selectedRowIdsSel
export function EntityTableActionBar() { export function EntityTableActionBar() {
const selectedRowIds = useRecoilValue(selectedRowIdsSelector); const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
return <ActionBar selectedIds={selectedRowIds}></ActionBar>; return <ActionBar selectedIds={selectedRowIds} />;
} }

2
front/src/modules/ui/table/components/CheckboxCell.tsx
View File

@ -2,7 +2,7 @@ import { useCallback } from 'react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { useSetRecoilState } from 'recoil'; 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 { Checkbox } from '@/ui/input/checkbox/components/Checkbox';
import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected'; import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected';

6
front/src/modules/ui/table/components/EntityTableCell.tsx
View File

@ -1,8 +1,8 @@
import { useContext } from 'react'; import { useContext } from 'react';
import { useSetRecoilState } from 'recoil'; import { useSetRecoilState } from 'recoil';
import { contextMenuOpenState } from '@/ui/context-menu/states/ContextMenuIsOpenState'; import { contextMenuIsOpenState } from '@/ui/context-menu/states/contextMenuIsOpenState';
import { contextMenuPositionState } from '@/ui/context-menu/states/ContextMenuPositionState'; import { contextMenuPositionState } from '@/ui/context-menu/states/contextMenuPositionState';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { ColumnIndexContext } from '../contexts/ColumnIndexContext'; import { ColumnIndexContext } from '../contexts/ColumnIndexContext';
@ -12,7 +12,7 @@ import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected';
export function EntityTableCell({ cellIndex }: { cellIndex: number }) { export function EntityTableCell({ cellIndex }: { cellIndex: number }) {
const setContextMenuPosition = useSetRecoilState(contextMenuPositionState); const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
const setContextMenuOpenState = useSetRecoilState(contextMenuOpenState); const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);
const { setCurrentRowSelected } = useCurrentRowSelected(); const { setCurrentRowSelected } = useCurrentRowSelected();

21
front/src/modules/ui/table/components/GenericEntityTableData.tsx
View File

@ -1,3 +1,5 @@
import { useEffect } from 'react';
import { defaultOrderBy } from '@/people/queries'; import { defaultOrderBy } from '@/people/queries';
import { FilterDefinition } from '@/ui/filter-n-sort/types/FilterDefinition'; import { FilterDefinition } from '@/ui/filter-n-sort/types/FilterDefinition';
import { useSetEntityTableData } from '@/ui/table/hooks/useSetEntityTableData'; import { useSetEntityTableData } from '@/ui/table/hooks/useSetEntityTableData';
@ -8,16 +10,16 @@ export function GenericEntityTableData({
orderBy = defaultOrderBy, orderBy = defaultOrderBy,
whereFilters, whereFilters,
filterDefinitionArray, filterDefinitionArray,
setActionBar, setActionBarEntries,
setContextMenu, setContextMenuEntries,
}: { }: {
useGetRequest: any; useGetRequest: any;
getRequestResultKey: string; getRequestResultKey: string;
orderBy?: any; orderBy?: any;
whereFilters?: any; whereFilters?: any;
filterDefinitionArray: FilterDefinition[]; filterDefinitionArray: FilterDefinition[];
setActionBar?: () => void; setActionBarEntries?: () => void;
setContextMenu?: () => void; setContextMenuEntries?: () => void;
}) { }) {
const setEntityTableData = useSetEntityTableData(); const setEntityTableData = useSetEntityTableData();
useGetRequest({ useGetRequest({
@ -28,11 +30,10 @@ export function GenericEntityTableData({
}, },
}); });
if (setActionBar) { useEffect(() => {
setActionBar(); setActionBarEntries?.();
} setContextMenuEntries?.();
if (setContextMenu) { }, [setActionBarEntries, setContextMenuEntries]);
setContextMenu();
}
return <></>; return <></>;
} }

2
front/src/modules/ui/table/context-menu/components/EntityTableContextMenu.tsx
View File

@ -7,5 +7,5 @@ import { selectedRowIdsSelector } from '../../states/selectors/selectedRowIdsSel
export function EntityTableContextMenu() { export function EntityTableContextMenu() {
const selectedRowIds = useRecoilValue(selectedRowIdsSelector); const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
return <ContextMenu selectedIds={selectedRowIds}></ContextMenu>; return <ContextMenu selectedIds={selectedRowIds} />;
} }

4
front/src/pages/companies/Companies.tsx
View File

@ -72,8 +72,8 @@ export function Companies() {
<StyledTableContainer> <StyledTableContainer>
<CompanyTable /> <CompanyTable />
</StyledTableContainer> </StyledTableContainer>
<EntityTableActionBar></EntityTableActionBar> <EntityTableActionBar />
<EntityTableContextMenu></EntityTableContextMenu> <EntityTableContextMenu />
</RecoilScope> </RecoilScope>
</WithTopBarContainer> </WithTopBarContainer>
); );

2
front/src/pages/companies/CompaniesMockMode.tsx
View File

@ -4,7 +4,6 @@ import styled from '@emotion/styled';
import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode'; import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode';
import { IconBuildingSkyscraper } from '@/ui/icon'; import { IconBuildingSkyscraper } from '@/ui/icon';
import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer'; 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 { TableRecoilScopeContext } from '@/ui/table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
@ -26,7 +25,6 @@ export function CompaniesMockMode() {
<StyledTableContainer> <StyledTableContainer>
<CompanyTableMockMode /> <CompanyTableMockMode />
</StyledTableContainer> </StyledTableContainer>
<EntityTableActionBar></EntityTableActionBar>
</RecoilScope> </RecoilScope>
</WithTopBarContainer> </WithTopBarContainer>
</> </>

7
front/src/pages/opportunities/Opportunities.tsx
View File

@ -10,7 +10,6 @@ import {
import { EntityBoard } from '@/ui/board/components/EntityBoard'; import { EntityBoard } from '@/ui/board/components/EntityBoard';
import { EntityBoardActionBar } from '@/ui/board/components/EntityBoardActionBar'; import { EntityBoardActionBar } from '@/ui/board/components/EntityBoardActionBar';
import { BoardOptionsContext } from '@/ui/board/contexts/BoardOptionsContext'; import { BoardOptionsContext } from '@/ui/board/contexts/BoardOptionsContext';
import { useActionBarEntries } from '@/ui/board/hooks/useActionBarEntries';
import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers'; import { reduceSortsToOrderBy } from '@/ui/filter-n-sort/helpers';
import { IconTargetArrow } from '@/ui/icon/index'; import { IconTargetArrow } from '@/ui/icon/index';
import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer'; import { WithTopBarContainer } from '@/ui/layout/components/WithTopBarContainer';
@ -63,8 +62,6 @@ export function Opportunities() {
}); });
} }
const setActionBar = useActionBarEntries();
return ( return (
<WithTopBarContainer <WithTopBarContainer
title="Opportunities" title="Opportunities"
@ -72,13 +69,13 @@ export function Opportunities() {
> >
<BoardOptionsContext.Provider value={opportunitiesBoardOptions}> <BoardOptionsContext.Provider value={opportunitiesBoardOptions}>
<RecoilScope SpecificContext={CompanyBoardRecoilScopeContext}> <RecoilScope SpecificContext={CompanyBoardRecoilScopeContext}>
<HooksCompanyBoard orderBy={orderBy} setActionBar={setActionBar} /> <HooksCompanyBoard orderBy={orderBy} />
<EntityBoard <EntityBoard
boardOptions={opportunitiesBoardOptions} boardOptions={opportunitiesBoardOptions}
updateSorts={updateSorts} updateSorts={updateSorts}
onEditColumnTitle={handleEditColumnTitle} onEditColumnTitle={handleEditColumnTitle}
/> />
<EntityBoardActionBar></EntityBoardActionBar> <EntityBoardActionBar />
</RecoilScope> </RecoilScope>
</BoardOptionsContext.Provider> </BoardOptionsContext.Provider>
</WithTopBarContainer> </WithTopBarContainer>