diff --git a/front/src/modules/companies/table/components/CompanyTable.tsx b/front/src/modules/companies/table/components/CompanyTable.tsx index bc335b995..61e6e0d8e 100644 --- a/front/src/modules/companies/table/components/CompanyTable.tsx +++ b/front/src/modules/companies/table/components/CompanyTable.tsx @@ -3,10 +3,10 @@ import { getCompaniesOptimisticEffectDefinition } from '@/companies/graphql/opti import { useCompanyTableActionBarEntries } from '@/companies/hooks/useCompanyTableActionBarEntries'; import { useCompanyTableContextMenuEntries } from '@/companies/hooks/useCompanyTableContextMenuEntries'; import { useSpreadsheetCompanyImport } from '@/companies/hooks/useSpreadsheetCompanyImport'; -import { EntityTable } from '@/ui/data-table/components/EntityTable'; -import { EntityTableEffect } from '@/ui/data-table/components/EntityTableEffect'; +import { DataTable } from '@/ui/data-table/components/DataTable'; +import { DataTableEffect } from '@/ui/data-table/components/DataTableEffect'; import { TableContext } from '@/ui/data-table/contexts/TableContext'; -import { useUpsertEntityTableItem } from '@/ui/data-table/hooks/useUpsertEntityTableItem'; +import { useUpsertDataTableItem } from '@/ui/data-table/hooks/useUpsertDataTableItem'; import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext'; import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue'; import { ViewBarContext } from '@/ui/view-bar/contexts/ViewBarContext'; @@ -33,7 +33,7 @@ export const CompanyTable = () => { ); const [updateEntityMutation] = useUpdateOneCompanyMutation(); - const upsertEntityTableItem = useUpsertEntityTableItem(); + const upsertDataTableItem = useUpsertDataTableItem(); const [getWorkspaceMember] = useGetWorkspaceMembersLazyQuery(); const { @@ -76,14 +76,14 @@ export const CompanyTable = () => { if (!data.updateOneCompany) { return; } - upsertEntityTableItem(data.updateOneCompany); + upsertDataTableItem(data.updateOneCompany); }, }); }; return ( - { ViewBarRecoilScopeContext: TableRecoilScopeContext, }} > - { tableColumnsScopedState, TableRecoilScopeContext, ); - const setEntityTableData = useSetEntityTableData(); + const setDataTableData = useSetDataTableData(); useEffect(() => { - setEntityTableData(mockedCompaniesData, [], []); + setDataTableData(mockedCompaniesData, [], []); setTableColumns(companiesAvailableColumnDefinitions); - }, [setEntityTableData, setTableColumns]); + }, [setDataTableData, setTableColumns]); return <>; }; diff --git a/front/src/modules/companies/table/components/CompanyTableMockMode.tsx b/front/src/modules/companies/table/components/CompanyTableMockMode.tsx index 967615b6c..ab8c93c49 100644 --- a/front/src/modules/companies/table/components/CompanyTableMockMode.tsx +++ b/front/src/modules/companies/table/components/CompanyTableMockMode.tsx @@ -1,4 +1,4 @@ -import { EntityTable } from '@/ui/data-table/components/EntityTable'; +import { DataTable } from '@/ui/data-table/components/DataTable'; import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext'; import { ViewBarContext } from '@/ui/view-bar/contexts/ViewBarContext'; import { useUpdateOneCompanyMutation } from '~/generated/graphql'; @@ -15,7 +15,7 @@ export const CompanyTableMockMode = () => { ViewBarRecoilScopeContext: TableRecoilScopeContext, }} > - + ); diff --git a/front/src/modules/people/components/PeopleEntityTableDataEffect.tsx b/front/src/modules/people/components/PeopleDataTableDataEffect.tsx similarity index 67% rename from front/src/modules/people/components/PeopleEntityTableDataEffect.tsx rename to front/src/modules/people/components/PeopleDataTableDataEffect.tsx index 9bd1d408b..3b3b860d9 100644 --- a/front/src/modules/people/components/PeopleEntityTableDataEffect.tsx +++ b/front/src/modules/people/components/PeopleDataTableDataEffect.tsx @@ -4,9 +4,9 @@ import { useGetPeopleQuery, } from '~/generated/graphql'; -import { useSetPeopleEntityTable } from '../hooks/useSetPeopleEntityTable'; +import { useSetPeopleDataTable } from '../hooks/useSetPeopleDataTable'; -export const PeopleEntityTableDataEffect = ({ +export const PeopleDataTableDataEffect = ({ orderBy = [ { createdAt: SortOrder.Desc, @@ -17,14 +17,14 @@ export const PeopleEntityTableDataEffect = ({ orderBy?: PersonOrderByWithRelationInput[]; whereFilters?: any; }) => { - const setPeopleEntityTable = useSetPeopleEntityTable(); + const setPeopleDataTable = useSetPeopleDataTable(); useGetPeopleQuery({ variables: { orderBy, where: whereFilters }, onCompleted: (data) => { const people = data.people ?? []; - setPeopleEntityTable(people); + setPeopleDataTable(people); }, }); diff --git a/front/src/modules/people/hooks/useSetPeopleEntityTable.ts b/front/src/modules/people/hooks/useSetPeopleDataTable.ts similarity index 96% rename from front/src/modules/people/hooks/useSetPeopleEntityTable.ts rename to front/src/modules/people/hooks/useSetPeopleDataTable.ts index 22d5f6d0e..e79e28b96 100644 --- a/front/src/modules/people/hooks/useSetPeopleEntityTable.ts +++ b/front/src/modules/people/hooks/useSetPeopleDataTable.ts @@ -2,7 +2,7 @@ import { useLocation } from 'react-router-dom'; import { useRecoilCallback } from 'recoil'; import { useResetTableRowSelection } from '@/ui/data-table/hooks/useResetTableRowSelection'; -import { isFetchingEntityTableDataState } from '@/ui/data-table/states/isFetchingEntityTableDataState'; +import { isFetchingDataTableDataState } from '@/ui/data-table/states/isFetchingDataTableDataState'; import { numberOfTableRowsState } from '@/ui/data-table/states/numberOfTableRowsState'; import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext'; import { tableRowIdsState } from '@/ui/data-table/states/tableRowIdsState'; @@ -21,7 +21,7 @@ import { peopleLinkedinUrlFamilyState } from '../states/peopleLinkedinUrlFamilyS import { peopleNameCellFamilyState } from '../states/peopleNamesFamilyState'; import { peoplePhoneFamilyState } from '../states/peoplePhoneFamilyState'; -export const useSetPeopleEntityTable = () => { +export const useSetPeopleDataTable = () => { const resetTableRowSelection = useResetTableRowSelection(); const tableContextScopeId = useRecoilScopeId(TableRecoilScopeContext); @@ -130,7 +130,7 @@ export const useSetPeopleEntityTable = () => { set(currentPageLocationState, currentLocation); - set(isFetchingEntityTableDataState, false); + set(isFetchingDataTableDataState, false); }, [currentLocation, resetTableRowSelection, tableContextScopeId], ); diff --git a/front/src/modules/people/table/components/PeopleTable.tsx b/front/src/modules/people/table/components/PeopleTable.tsx index d0ec8454b..d72e3c02c 100644 --- a/front/src/modules/people/table/components/PeopleTable.tsx +++ b/front/src/modules/people/table/components/PeopleTable.tsx @@ -3,10 +3,10 @@ import { getPeopleOptimisticEffectDefinition } from '@/people/graphql/optimistic import { usePersonTableContextMenuEntries } from '@/people/hooks/usePeopleTableContextMenuEntries'; import { usePersonTableActionBarEntries } from '@/people/hooks/usePersonTableActionBarEntries'; import { useSpreadsheetPersonImport } from '@/people/hooks/useSpreadsheetPersonImport'; -import { EntityTable } from '@/ui/data-table/components/EntityTable'; -import { EntityTableEffect } from '@/ui/data-table/components/EntityTableEffect'; +import { DataTable } from '@/ui/data-table/components/DataTable'; +import { DataTableEffect } from '@/ui/data-table/components/DataTableEffect'; import { TableContext } from '@/ui/data-table/contexts/TableContext'; -import { useUpsertEntityTableItem } from '@/ui/data-table/hooks/useUpsertEntityTableItem'; +import { useUpsertDataTableItem } from '@/ui/data-table/hooks/useUpsertDataTableItem'; import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext'; import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue'; import { ViewBarContext } from '@/ui/view-bar/contexts/ViewBarContext'; @@ -32,7 +32,7 @@ export const PeopleTable = () => { ); const [updateEntityMutation] = useUpdateOnePersonMutation(); - const upsertEntityTableItem = useUpsertEntityTableItem(); + const upsertDataTableItem = useUpsertDataTableItem(); const { openPersonSpreadsheetImport } = useSpreadsheetPersonImport(); const { @@ -55,7 +55,7 @@ export const PeopleTable = () => { return ( - { ViewBarRecoilScopeContext: TableRecoilScopeContext, }} > - { if (!data.updateOnePerson) { return; } - upsertEntityTableItem(data.updateOnePerson); + upsertDataTableItem(data.updateOnePerson); }, }) } diff --git a/front/src/modules/ui/data-table/action-bar/components/EntityTableActionBar.tsx b/front/src/modules/ui/data-table/action-bar/components/DataTableActionBar.tsx similarity index 88% rename from front/src/modules/ui/data-table/action-bar/components/EntityTableActionBar.tsx rename to front/src/modules/ui/data-table/action-bar/components/DataTableActionBar.tsx index f405e4468..2698fe682 100644 --- a/front/src/modules/ui/data-table/action-bar/components/EntityTableActionBar.tsx +++ b/front/src/modules/ui/data-table/action-bar/components/DataTableActionBar.tsx @@ -5,7 +5,7 @@ import { ActionBar } from '@/ui/action-bar/components/ActionBar'; import { selectedRowIdsSelector } from '../../states/selectors/selectedRowIdsSelector'; -export const EntityTableActionBar = () => { +export const DataTableActionBar = () => { const selectedRowIds = useRecoilValue(selectedRowIdsSelector); return ; diff --git a/front/src/modules/ui/data-table/components/EntityTable.tsx b/front/src/modules/ui/data-table/components/DataTable.tsx similarity index 93% rename from front/src/modules/ui/data-table/components/EntityTable.tsx rename to front/src/modules/ui/data-table/components/DataTable.tsx index e6bb13ba2..2ae7ffff5 100644 --- a/front/src/modules/ui/data-table/components/EntityTable.tsx +++ b/front/src/modules/ui/data-table/components/DataTable.tsx @@ -17,8 +17,8 @@ import { useSetRowSelectedState } from '../hooks/useSetRowSelectedState'; import { TableHeader } from '../table-header/components/TableHeader'; import { TableHotkeyScope } from '../types/TableHotkeyScope'; -import { EntityTableBody } from './EntityTableBody'; -import { EntityTableHeader } from './EntityTableHeader'; +import { DataTableBody } from './DataTableBody'; +import { DataTableHeader } from './DataTableHeader'; const StyledTable = styled.table` border-collapse: collapse; @@ -86,7 +86,7 @@ type OwnProps = { updateEntityMutation: (params: any) => void; }; -export const EntityTable = ({ updateEntityMutation }: OwnProps) => { +export const DataTable = ({ updateEntityMutation }: OwnProps) => { const tableBodyRef = useRef(null); const setRowSelectedState = useSetRowSelectedState(); @@ -127,8 +127,8 @@ export const EntityTable = ({ updateEntityMutation }: OwnProps) => {
- - + +
diff --git a/front/src/modules/ui/data-table/components/EntityTableBody.tsx b/front/src/modules/ui/data-table/components/DataTableBody.tsx similarity index 84% rename from front/src/modules/ui/data-table/components/EntityTableBody.tsx rename to front/src/modules/ui/data-table/components/DataTableBody.tsx index b8eb05baf..62af6f4ee 100644 --- a/front/src/modules/ui/data-table/components/EntityTableBody.tsx +++ b/front/src/modules/ui/data-table/components/DataTableBody.tsx @@ -7,10 +7,10 @@ import { useScrollWrapperScopedRef } from '@/ui/utilities/scroll/hooks/useScroll import { RowIdContext } from '../contexts/RowIdContext'; import { RowIndexContext } from '../contexts/RowIndexContext'; -import { isFetchingEntityTableDataState } from '../states/isFetchingEntityTableDataState'; +import { isFetchingDataTableDataState } from '../states/isFetchingDataTableDataState'; import { tableRowIdsState } from '../states/tableRowIdsState'; -import { EntityTableRow } from './EntityTableRow'; +import { DataTableRow } from './DataTableRow'; type SpaceProps = { top?: number; @@ -22,15 +22,13 @@ const StyledSpace = styled.td` ${({ bottom }) => bottom && `padding-bottom: ${bottom}px;`} `; -export const EntityTableBody = () => { +export const DataTableBody = () => { const scrollWrapperRef = useScrollWrapperScopedRef(); const tableRowIds = useRecoilValue(tableRowIdsState); const isNavbarSwitchingSize = useRecoilValue(isNavbarSwitchingSizeState); - const isFetchingEntityTableData = useRecoilValue( - isFetchingEntityTableDataState, - ); + const isFetchingDataTableData = useRecoilValue(isFetchingDataTableDataState); const rowVirtualizer = useVirtual({ size: tableRowIds.length, @@ -45,7 +43,7 @@ export const EntityTableBody = () => { ? rowVirtualizer.totalSize - items[items.length - 1].end : 0; - if (isFetchingEntityTableData || isNavbarSwitchingSize) { + if (isFetchingDataTableData || isNavbarSwitchingSize) { return null; } @@ -62,7 +60,7 @@ export const EntityTableBody = () => { return ( - { +export const DataTableCell = ({ cellIndex }: { cellIndex: number }) => { const setContextMenuPosition = useSetRecoilState(contextMenuPositionState); const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState); const currentRowId = useContext(RowIdContext); diff --git a/front/src/modules/ui/data-table/components/EntityTableEffect.tsx b/front/src/modules/ui/data-table/components/DataTableEffect.tsx similarity index 93% rename from front/src/modules/ui/data-table/components/EntityTableEffect.tsx rename to front/src/modules/ui/data-table/components/DataTableEffect.tsx index 0e110ecaf..8f82d98c0 100644 --- a/front/src/modules/ui/data-table/components/EntityTableEffect.tsx +++ b/front/src/modules/ui/data-table/components/DataTableEffect.tsx @@ -14,10 +14,10 @@ import { FilterDefinition } from '@/ui/view-bar/types/FilterDefinition'; import { SortDefinition } from '@/ui/view-bar/types/SortDefinition'; import { SortOrder } from '~/generated/graphql'; -import { useSetEntityTableData } from '../hooks/useSetEntityTableData'; +import { useSetDataTableData } from '../hooks/useSetDataTableData'; import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext'; -export const EntityTableEffect = ({ +export const DataTableEffect = ({ useGetRequest, getRequestResultKey, getRequestOptimisticEffectDefinition, @@ -45,7 +45,7 @@ export const EntityTableEffect = ({ setActionBarEntries?: () => void; setContextMenuEntries?: () => void; }) => { - const setEntityTableData = useSetEntityTableData(); + const setDataTableData = useSetDataTableData(); const { registerOptimisticEffect } = useOptimisticEffect(); useGetRequest({ @@ -53,7 +53,7 @@ export const EntityTableEffect = ({ onCompleted: (data: any) => { const entities = data[getRequestResultKey] ?? []; - setEntityTableData(entities, filterDefinitionArray, sortDefinitionArray); + setDataTableData(entities, filterDefinitionArray, sortDefinitionArray); registerOptimisticEffect({ variables: { orderBy, where: whereFilters }, diff --git a/front/src/modules/ui/data-table/components/EntityTableHeader.tsx b/front/src/modules/ui/data-table/components/DataTableHeader.tsx similarity index 96% rename from front/src/modules/ui/data-table/components/EntityTableHeader.tsx rename to front/src/modules/ui/data-table/components/DataTableHeader.tsx index 0ac6d3add..217f9502b 100644 --- a/front/src/modules/ui/data-table/components/EntityTableHeader.tsx +++ b/front/src/modules/ui/data-table/components/DataTableHeader.tsx @@ -18,7 +18,7 @@ import { visibleTableColumnsScopedSelector } from '../states/selectors/visibleTa import { tableColumnsScopedState } from '../states/tableColumnsScopedState'; import { ColumnHeadWithDropdown } from './ColumnHeadWithDropdown'; -import { EntityTableColumnMenu } from './EntityTableColumnMenu'; +import { DataTableHeaderPlusButton } from './DataTableHeaderPlusButton'; import { SelectAllCheckbox } from './SelectAllCheckbox'; const COLUMN_MIN_WIDTH = 75; @@ -65,7 +65,7 @@ const StyledAddIconButtonWrapper = styled.div` position: relative; `; -const StyledEntityTableColumnMenu = styled(EntityTableColumnMenu)` +const StyledDataTableColumnMenu = styled(DataTableHeaderPlusButton)` position: absolute; right: 0; top: 100%; @@ -81,7 +81,7 @@ const StyledColumnHeadContainer = styled.div` z-index: 1; `; -export const EntityTableHeader = () => { +export const DataTableHeader = () => { const [resizeFieldOffset, setResizeFieldOffset] = useRecoilState( resizeFieldOffsetState, ); @@ -219,7 +219,7 @@ export const EntityTableHeader = () => { position="middle" /> {isColumnMenuOpen && ( - diff --git a/front/src/modules/ui/data-table/components/EntityTableColumnMenu.tsx b/front/src/modules/ui/data-table/components/DataTableHeaderPlusButton.tsx similarity index 89% rename from front/src/modules/ui/data-table/components/EntityTableColumnMenu.tsx rename to front/src/modules/ui/data-table/components/DataTableHeaderPlusButton.tsx index 5128688cc..804c7a610 100644 --- a/front/src/modules/ui/data-table/components/EntityTableColumnMenu.tsx +++ b/front/src/modules/ui/data-table/components/DataTableHeaderPlusButton.tsx @@ -14,20 +14,20 @@ import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRe import { hiddenTableColumnsScopedSelector } from '../states/selectors/hiddenTableColumnsScopedSelector'; import { ColumnDefinition } from '../types/ColumnDefinition'; -const StyledColumnMenu = styled(StyledDropdownMenu)` +const StyledHeaderPlusButton = styled(StyledDropdownMenu)` font-weight: ${({ theme }) => theme.font.weight.regular}; `; -type EntityTableColumnMenuProps = { +type DataTableHeaderPlusButtonProps = { onAddColumn?: () => void; onClickOutside?: () => void; } & ComponentProps<'div'>; -export const EntityTableColumnMenu = ({ +export const DataTableHeaderPlusButton = ({ onAddColumn, onClickOutside = () => undefined, ...props -}: EntityTableColumnMenuProps) => { +}: DataTableHeaderPlusButtonProps) => { const ref = useRef(null); const hiddenTableColumns = useRecoilScopedValue( @@ -52,7 +52,7 @@ export const EntityTableColumnMenu = ({ return ( // eslint-disable-next-line twenty/no-spread-props - + {hiddenTableColumns.map((column) => ( ))} - + ); }; diff --git a/front/src/modules/ui/data-table/components/DataTableRow.tsx b/front/src/modules/ui/data-table/components/DataTableRow.tsx new file mode 100644 index 000000000..0515d6bc0 --- /dev/null +++ b/front/src/modules/ui/data-table/components/DataTableRow.tsx @@ -0,0 +1,52 @@ +import { forwardRef } from 'react'; +import styled from '@emotion/styled'; + +import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue'; + +import { ColumnContext } from '../contexts/ColumnContext'; +import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected'; +import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext'; +import { visibleTableColumnsScopedSelector } from '../states/selectors/visibleTableColumnsScopedSelector'; + +import { CheckboxCell } from './CheckboxCell'; +import { DataTableCell } from './DataTableCell'; + +const StyledRow = styled.tr<{ selected: boolean }>` + background: ${(props) => + props.selected ? props.theme.accent.quaternary : 'none'}; +`; + +type DataTableRowProps = { + rowId: string; +}; + +export const DataTableRow = forwardRef( + ({ rowId }, ref) => { + const visibleTableColumns = useRecoilScopedValue( + visibleTableColumnsScopedSelector, + TableRecoilScopeContext, + ); + const { currentRowSelected } = useCurrentRowSelected(); + + return ( + + + + + {visibleTableColumns.map((column, columnIndex) => { + return ( + + + + ); + })} + + + ); + }, +); diff --git a/front/src/modules/ui/data-table/components/EntityTableRow.tsx b/front/src/modules/ui/data-table/components/EntityTableRow.tsx deleted file mode 100644 index 9019f4d35..000000000 --- a/front/src/modules/ui/data-table/components/EntityTableRow.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { forwardRef } from 'react'; -import styled from '@emotion/styled'; - -import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue'; - -import { ColumnContext } from '../contexts/ColumnContext'; -import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected'; -import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext'; -import { visibleTableColumnsScopedSelector } from '../states/selectors/visibleTableColumnsScopedSelector'; - -import { CheckboxCell } from './CheckboxCell'; -import { EntityTableCell } from './EntityTableCell'; - -const StyledRow = styled.tr<{ selected: boolean }>` - background: ${(props) => - props.selected ? props.theme.accent.quaternary : 'none'}; -`; - -type EntityTableRowProps = { - rowId: string; -}; - -export const EntityTableRow = forwardRef< - HTMLTableRowElement, - EntityTableRowProps ->(({ rowId }, ref) => { - const visibleTableColumns = useRecoilScopedValue( - visibleTableColumnsScopedSelector, - TableRecoilScopeContext, - ); - const { currentRowSelected } = useCurrentRowSelected(); - - return ( - - - - - {visibleTableColumns.map((column, columnIndex) => { - return ( - - - - ); - })} - - - ); -}); diff --git a/front/src/modules/ui/data-table/components/TableColumnDropdownMenu.tsx b/front/src/modules/ui/data-table/components/TableColumnDropdownMenu.tsx index c38b5c651..8d7f0a5c7 100644 --- a/front/src/modules/ui/data-table/components/TableColumnDropdownMenu.tsx +++ b/front/src/modules/ui/data-table/components/TableColumnDropdownMenu.tsx @@ -9,7 +9,7 @@ import { ColumnHeadDropdownId } from '../constants/ColumnHeadDropdownId'; import { useTableColumns } from '../hooks/useTableColumns'; import { ColumnDefinition } from '../types/ColumnDefinition'; -export type EntityTableHeaderOptionsProps = { +export type DataTableHeaderOptionsProps = { column: ColumnDefinition; isFirstColumn: boolean; isLastColumn: boolean; @@ -21,7 +21,7 @@ export const TableColumnDropdownMenu = ({ isFirstColumn, isLastColumn, primaryColumnKey, -}: EntityTableHeaderOptionsProps) => { +}: DataTableHeaderOptionsProps) => { const { handleColumnVisibilityChange, handleMoveTableColumn } = useTableColumns(); diff --git a/front/src/modules/ui/data-table/context-menu/components/EntityTableContextMenu.tsx b/front/src/modules/ui/data-table/context-menu/components/DataTableContextMenu.tsx similarity index 88% rename from front/src/modules/ui/data-table/context-menu/components/EntityTableContextMenu.tsx rename to front/src/modules/ui/data-table/context-menu/components/DataTableContextMenu.tsx index 4befe93b4..d46afc5e0 100644 --- a/front/src/modules/ui/data-table/context-menu/components/EntityTableContextMenu.tsx +++ b/front/src/modules/ui/data-table/context-menu/components/DataTableContextMenu.tsx @@ -5,7 +5,7 @@ import { ContextMenu } from '@/ui/context-menu/components/ContextMenu'; import { selectedRowIdsSelector } from '../../states/selectors/selectedRowIdsSelector'; -export const EntityTableContextMenu = () => { +export const DataTableContextMenu = () => { const selectedRowIds = useRecoilValue(selectedRowIdsSelector); return ; }; diff --git a/front/src/modules/ui/data-table/hooks/useSetEntityTableData.ts b/front/src/modules/ui/data-table/hooks/useSetDataTableData.ts similarity index 92% rename from front/src/modules/ui/data-table/hooks/useSetEntityTableData.ts rename to front/src/modules/ui/data-table/hooks/useSetDataTableData.ts index b437440cd..e8650f46f 100644 --- a/front/src/modules/ui/data-table/hooks/useSetEntityTableData.ts +++ b/front/src/modules/ui/data-table/hooks/useSetDataTableData.ts @@ -8,14 +8,14 @@ import { entityCountInCurrentViewState } from '@/ui/view-bar/states/entityCountI import { FilterDefinition } from '@/ui/view-bar/types/FilterDefinition'; import { SortDefinition } from '@/ui/view-bar/types/SortDefinition'; -import { isFetchingEntityTableDataState } from '../states/isFetchingEntityTableDataState'; +import { isFetchingDataTableDataState } from '../states/isFetchingDataTableDataState'; import { numberOfTableRowsState } from '../states/numberOfTableRowsState'; import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext'; import { tableRowIdsState } from '../states/tableRowIdsState'; import { useResetTableRowSelection } from './useResetTableRowSelection'; -export const useSetEntityTableData = () => { +export const useSetDataTableData = () => { const resetTableRowSelection = useResetTableRowSelection(); const tableContextScopeId = useRecoilScopeId(TableRecoilScopeContext); @@ -63,7 +63,7 @@ export const useSetEntityTableData = () => { sortDefinitionArray, ); - set(isFetchingEntityTableDataState, false); + set(isFetchingDataTableDataState, false); }, [resetTableRowSelection, tableContextScopeId], ); diff --git a/front/src/modules/ui/data-table/hooks/useUpsertEntityTableItem.ts b/front/src/modules/ui/data-table/hooks/useUpsertDataTableItem.ts similarity index 91% rename from front/src/modules/ui/data-table/hooks/useUpsertEntityTableItem.ts rename to front/src/modules/ui/data-table/hooks/useUpsertDataTableItem.ts index eaa078292..de8e72e35 100644 --- a/front/src/modules/ui/data-table/hooks/useUpsertEntityTableItem.ts +++ b/front/src/modules/ui/data-table/hooks/useUpsertDataTableItem.ts @@ -2,7 +2,7 @@ import { useRecoilCallback } from 'recoil'; import { entityFieldsFamilyState } from '@/ui/field/states/entityFieldsFamilyState'; -export const useUpsertEntityTableItem = () => +export const useUpsertDataTableItem = () => useRecoilCallback( ({ set, snapshot }) => (entity: T) => { diff --git a/front/src/modules/ui/data-table/hooks/useUpsertEntityTableItems.ts b/front/src/modules/ui/data-table/hooks/useUpsertDataTableItems.ts similarity index 95% rename from front/src/modules/ui/data-table/hooks/useUpsertEntityTableItems.ts rename to front/src/modules/ui/data-table/hooks/useUpsertDataTableItems.ts index e7b7adf7e..6ca19d841 100644 --- a/front/src/modules/ui/data-table/hooks/useUpsertEntityTableItems.ts +++ b/front/src/modules/ui/data-table/hooks/useUpsertDataTableItems.ts @@ -2,7 +2,7 @@ import { useRecoilCallback } from 'recoil'; import { entityFieldsFamilyState } from '@/ui/field/states/entityFieldsFamilyState'; -export const useUpsertEntityTableItems = () => +export const useUpsertDataTableItems = () => useRecoilCallback( ({ set, snapshot }) => (entities: T[]) => { diff --git a/front/src/modules/ui/data-table/states/isFetchingDataTableDataState.ts b/front/src/modules/ui/data-table/states/isFetchingDataTableDataState.ts new file mode 100644 index 000000000..0a0fe94ab --- /dev/null +++ b/front/src/modules/ui/data-table/states/isFetchingDataTableDataState.ts @@ -0,0 +1,6 @@ +import { atom } from 'recoil'; + +export const isFetchingDataTableDataState = atom({ + key: 'isFetchingDataTableDataState', + default: true, +}); diff --git a/front/src/modules/ui/data-table/states/isFetchingEntityTableDataState.ts b/front/src/modules/ui/data-table/states/isFetchingEntityTableDataState.ts deleted file mode 100644 index 40d89f730..000000000 --- a/front/src/modules/ui/data-table/states/isFetchingEntityTableDataState.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { atom } from 'recoil'; - -export const isFetchingEntityTableDataState = atom({ - key: 'isFetchingEntityTableDataState', - default: true, -}); diff --git a/front/src/pages/companies/Companies.tsx b/front/src/pages/companies/Companies.tsx index 2d81b2421..52b7b09c1 100644 --- a/front/src/pages/companies/Companies.tsx +++ b/front/src/pages/companies/Companies.tsx @@ -6,9 +6,9 @@ import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimis import { CompanyTable } from '@/companies/table/components/CompanyTable'; import { SEARCH_COMPANY_QUERY } from '@/search/graphql/queries/searchCompanyQuery'; import { SpreadsheetImportProvider } from '@/spreadsheet-import/provider/components/SpreadsheetImportProvider'; -import { EntityTableActionBar } from '@/ui/data-table/action-bar/components/EntityTableActionBar'; -import { EntityTableContextMenu } from '@/ui/data-table/context-menu/components/EntityTableContextMenu'; -import { useUpsertEntityTableItem } from '@/ui/data-table/hooks/useUpsertEntityTableItem'; +import { DataTableActionBar } from '@/ui/data-table/action-bar/components/DataTableActionBar'; +import { DataTableContextMenu } from '@/ui/data-table/context-menu/components/DataTableContextMenu'; +import { useUpsertDataTableItem } from '@/ui/data-table/hooks/useUpsertDataTableItem'; import { useUpsertTableRowId } from '@/ui/data-table/hooks/useUpsertTableRowId'; import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext'; import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext'; @@ -28,7 +28,7 @@ const StyledTableContainer = styled.div` export const Companies = () => { const [insertCompany] = useInsertOneCompanyMutation(); - const upsertEntityTableItem = useUpsertEntityTableItem(); + const upsertDataTableItem = useUpsertDataTableItem(); const upsertTableRowIds = useUpsertTableRowId(); const { triggerOptimisticEffects } = useOptimisticEffect(); @@ -46,7 +46,7 @@ export const Companies = () => { update: (_cache, { data }) => { if (data?.createOneCompany) { upsertTableRowIds(data?.createOneCompany.id); - upsertEntityTableItem(data?.createOneCompany); + upsertDataTableItem(data?.createOneCompany); triggerOptimisticEffects('Company', [data?.createOneCompany]); } }, @@ -71,8 +71,8 @@ export const Companies = () => { - - + + diff --git a/front/src/pages/people/People.tsx b/front/src/pages/people/People.tsx index 20f1579b3..76c18663e 100644 --- a/front/src/pages/people/People.tsx +++ b/front/src/pages/people/People.tsx @@ -4,9 +4,9 @@ import { v4 } from 'uuid'; import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimisticEffect'; import { PeopleTable } from '@/people/table/components/PeopleTable'; import { SpreadsheetImportProvider } from '@/spreadsheet-import/provider/components/SpreadsheetImportProvider'; -import { EntityTableActionBar } from '@/ui/data-table/action-bar/components/EntityTableActionBar'; -import { EntityTableContextMenu } from '@/ui/data-table/context-menu/components/EntityTableContextMenu'; -import { useUpsertEntityTableItem } from '@/ui/data-table/hooks/useUpsertEntityTableItem'; +import { DataTableActionBar } from '@/ui/data-table/action-bar/components/DataTableActionBar'; +import { DataTableContextMenu } from '@/ui/data-table/context-menu/components/DataTableContextMenu'; +import { useUpsertDataTableItem } from '@/ui/data-table/hooks/useUpsertDataTableItem'; import { useUpsertTableRowId } from '@/ui/data-table/hooks/useUpsertTableRowId'; import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext'; import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext'; @@ -26,7 +26,7 @@ const StyledTableContainer = styled.div` export const People = () => { const [insertOnePerson] = useInsertOnePersonMutation(); - const upsertEntityTableItem = useUpsertEntityTableItem(); + const upsertDataTableItem = useUpsertDataTableItem(); const upsertTableRowIds = useUpsertTableRowId(); const { triggerOptimisticEffects } = useOptimisticEffect(); @@ -43,7 +43,7 @@ export const People = () => { update: (_cache, { data }) => { if (data?.createOnePerson) { upsertTableRowIds(data?.createOnePerson.id); - upsertEntityTableItem(data?.createOnePerson); + upsertDataTableItem(data?.createOnePerson); triggerOptimisticEffects('Person', [data?.createOnePerson]); } }, @@ -67,8 +67,8 @@ export const People = () => { - - + +