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 { 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 <></>;

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 { 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([
<ActionBarEntry
label="Note"
icon={<IconNotes size={16} />}
onClick={() => handleActivityClick(ActivityType.Note)}
key="note"
/>,
<ActionBarEntry
label="Task"
icon={<IconCheckbox size={16} />}
onClick={() => handleActivityClick(ActivityType.Task)}
key="task"
/>,
<ActionBarEntry
label="Delete"
icon={<IconTrash size={16} />}
type="danger"
onClick={() => deleteSelectedCompanies()}
key="delete"
/>,
]);
return {
setActionBarEntries: () =>
setActionBarEntries([
<ActionBarEntry
label="Note"
icon={<IconNotes size={16} />}
onClick={() => handleActivityClick(ActivityType.Note)}
key="note"
/>,
<ActionBarEntry
label="Task"
icon={<IconCheckbox size={16} />}
onClick={() => handleActivityClick(ActivityType.Task)}
key="task"
/>,
<ActionBarEntry
label="Delete"
icon={<IconTrash size={16} />}
type="danger"
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 { 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([
<ContextMenuEntry
label="Note"
icon={<IconNotes size={16} />}
onClick={() => handleButtonClick(ActivityType.Note)}
key="note"
/>,
<ContextMenuEntry
label="Task"
icon={<IconCheckbox size={16} />}
onClick={() => handleButtonClick(ActivityType.Task)}
key="task"
/>,
<ContextMenuEntry
label="Delete"
icon={<IconTrash size={16} />}
type="danger"
onClick={() => deleteSelectedCompanies()}
key="delete"
/>,
]);
return {
setContextMenuEntries: () =>
setContextMenuEntries([
<ContextMenuEntry
label="Note"
icon={<IconNotes size={16} />}
onClick={() => handleButtonClick(ActivityType.Note)}
key="note"
/>,
<ContextMenuEntry
label="Task"
icon={<IconCheckbox size={16} />}
onClick={() => handleButtonClick(ActivityType.Task)}
key="task"
/>,
<ContextMenuEntry
label="Delete"
icon={<IconTrash size={16} />}
accent="danger"
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 { 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}
/>
<EntityTable
viewName="All Companies"