mirror of
https://github.com/twentyhq/twenty.git
synced 2025-01-06 03:45:15 +03:00
Fix: Changed file and component names (#1934)
Changed file and component names
This commit is contained in:
parent
150d1a880c
commit
a09456055e
@ -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 (
|
||||
<TableContext.Provider value={{ onColumnsChange: persistColumns }}>
|
||||
<EntityTableEffect
|
||||
<DataTableEffect
|
||||
getRequestResultKey="companies"
|
||||
useGetRequest={useGetCompaniesQuery}
|
||||
getRequestOptimisticEffectDefinition={
|
||||
@ -107,7 +107,7 @@ export const CompanyTable = () => {
|
||||
ViewBarRecoilScopeContext: TableRecoilScopeContext,
|
||||
}}
|
||||
>
|
||||
<EntityTable
|
||||
<DataTable
|
||||
updateEntityMutation={({
|
||||
variables,
|
||||
}: {
|
||||
|
@ -1,6 +1,6 @@
|
||||
import { useEffect } from 'react';
|
||||
|
||||
import { useSetEntityTableData } from '@/ui/data-table/hooks/useSetEntityTableData';
|
||||
import { useSetDataTableData } from '@/ui/data-table/hooks/useSetDataTableData';
|
||||
import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
|
||||
import { tableColumnsScopedState } from '@/ui/data-table/states/tableColumnsScopedState';
|
||||
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
|
||||
@ -14,13 +14,13 @@ export const CompanyTableMockDataEffect = () => {
|
||||
tableColumnsScopedState,
|
||||
TableRecoilScopeContext,
|
||||
);
|
||||
const setEntityTableData = useSetEntityTableData();
|
||||
const setDataTableData = useSetDataTableData();
|
||||
|
||||
useEffect(() => {
|
||||
setEntityTableData(mockedCompaniesData, [], []);
|
||||
setDataTableData(mockedCompaniesData, [], []);
|
||||
|
||||
setTableColumns(companiesAvailableColumnDefinitions);
|
||||
}, [setEntityTableData, setTableColumns]);
|
||||
}, [setDataTableData, setTableColumns]);
|
||||
|
||||
return <></>;
|
||||
};
|
||||
|
@ -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,
|
||||
}}
|
||||
>
|
||||
<EntityTable updateEntityMutation={useUpdateOneCompanyMutation} />
|
||||
<DataTable updateEntityMutation={useUpdateOneCompanyMutation} />
|
||||
</ViewBarContext.Provider>
|
||||
</>
|
||||
);
|
||||
|
@ -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);
|
||||
},
|
||||
});
|
||||
|
@ -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],
|
||||
);
|
@ -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 (
|
||||
<TableContext.Provider value={{ onColumnsChange: persistColumns }}>
|
||||
<EntityTableEffect
|
||||
<DataTableEffect
|
||||
getRequestResultKey="people"
|
||||
useGetRequest={useGetPeopleQuery}
|
||||
getRequestOptimisticEffectDefinition={
|
||||
@ -79,7 +79,7 @@ export const PeopleTable = () => {
|
||||
ViewBarRecoilScopeContext: TableRecoilScopeContext,
|
||||
}}
|
||||
>
|
||||
<EntityTable
|
||||
<DataTable
|
||||
updateEntityMutation={({
|
||||
variables,
|
||||
}: {
|
||||
@ -91,7 +91,7 @@ export const PeopleTable = () => {
|
||||
if (!data.updateOnePerson) {
|
||||
return;
|
||||
}
|
||||
upsertEntityTableItem(data.updateOnePerson);
|
||||
upsertDataTableItem(data.updateOnePerson);
|
||||
},
|
||||
})
|
||||
}
|
||||
|
@ -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 <ActionBar selectedIds={selectedRowIds} />;
|
@ -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<HTMLDivElement>(null);
|
||||
|
||||
const setRowSelectedState = useSetRowSelectedState();
|
||||
@ -127,8 +127,8 @@ export const EntityTable = ({ updateEntityMutation }: OwnProps) => {
|
||||
<ScrollWrapper>
|
||||
<div>
|
||||
<StyledTable className="entity-table-cell">
|
||||
<EntityTableHeader />
|
||||
<EntityTableBody />
|
||||
<DataTableHeader />
|
||||
<DataTableBody />
|
||||
</StyledTable>
|
||||
</div>
|
||||
</ScrollWrapper>
|
@ -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<SpaceProps>`
|
||||
${({ 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 (
|
||||
<RowIdContext.Provider value={rowId} key={rowId}>
|
||||
<RowIndexContext.Provider value={virtualItem.index}>
|
||||
<EntityTableRow
|
||||
<DataTableRow
|
||||
key={virtualItem.index}
|
||||
ref={virtualItem.measureRef}
|
||||
rowId={rowId}
|
@ -16,7 +16,7 @@ import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected';
|
||||
import { TableCell } from '../table-cell/components/TableCell';
|
||||
import { TableHotkeyScope } from '../types/TableHotkeyScope';
|
||||
|
||||
export const EntityTableCell = ({ cellIndex }: { cellIndex: number }) => {
|
||||
export const DataTableCell = ({ cellIndex }: { cellIndex: number }) => {
|
||||
const setContextMenuPosition = useSetRecoilState(contextMenuPositionState);
|
||||
const setContextMenuOpenState = useSetRecoilState(contextMenuIsOpenState);
|
||||
const currentRowId = useContext(RowIdContext);
|
@ -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 },
|
@ -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 && (
|
||||
<StyledEntityTableColumnMenu
|
||||
<StyledDataTableColumnMenu
|
||||
onAddColumn={toggleColumnMenu}
|
||||
onClickOutside={toggleColumnMenu}
|
||||
/>
|
@ -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<HTMLDivElement>(null);
|
||||
|
||||
const hiddenTableColumns = useRecoilScopedValue(
|
||||
@ -52,7 +52,7 @@ export const EntityTableColumnMenu = ({
|
||||
|
||||
return (
|
||||
// eslint-disable-next-line twenty/no-spread-props
|
||||
<StyledColumnMenu {...props} ref={ref}>
|
||||
<StyledHeaderPlusButton {...props} ref={ref}>
|
||||
<StyledDropdownMenuItemsContainer>
|
||||
{hiddenTableColumns.map((column) => (
|
||||
<MenuItem
|
||||
@ -68,6 +68,6 @@ export const EntityTableColumnMenu = ({
|
||||
/>
|
||||
))}
|
||||
</StyledDropdownMenuItemsContainer>
|
||||
</StyledColumnMenu>
|
||||
</StyledHeaderPlusButton>
|
||||
);
|
||||
};
|
52
front/src/modules/ui/data-table/components/DataTableRow.tsx
Normal file
52
front/src/modules/ui/data-table/components/DataTableRow.tsx
Normal file
@ -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<HTMLTableRowElement, DataTableRowProps>(
|
||||
({ rowId }, ref) => {
|
||||
const visibleTableColumns = useRecoilScopedValue(
|
||||
visibleTableColumnsScopedSelector,
|
||||
TableRecoilScopeContext,
|
||||
);
|
||||
const { currentRowSelected } = useCurrentRowSelected();
|
||||
|
||||
return (
|
||||
<StyledRow
|
||||
ref={ref}
|
||||
data-testid={`row-id-${rowId}`}
|
||||
selected={currentRowSelected}
|
||||
data-selectable-id={rowId}
|
||||
>
|
||||
<td>
|
||||
<CheckboxCell />
|
||||
</td>
|
||||
{visibleTableColumns.map((column, columnIndex) => {
|
||||
return (
|
||||
<ColumnContext.Provider value={column} key={column.key}>
|
||||
<DataTableCell cellIndex={columnIndex} />
|
||||
</ColumnContext.Provider>
|
||||
);
|
||||
})}
|
||||
<td></td>
|
||||
</StyledRow>
|
||||
);
|
||||
},
|
||||
);
|
@ -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 (
|
||||
<StyledRow
|
||||
ref={ref}
|
||||
data-testid={`row-id-${rowId}`}
|
||||
selected={currentRowSelected}
|
||||
data-selectable-id={rowId}
|
||||
>
|
||||
<td>
|
||||
<CheckboxCell />
|
||||
</td>
|
||||
{visibleTableColumns.map((column, columnIndex) => {
|
||||
return (
|
||||
<ColumnContext.Provider value={column} key={column.key}>
|
||||
<EntityTableCell cellIndex={columnIndex} />
|
||||
</ColumnContext.Provider>
|
||||
);
|
||||
})}
|
||||
<td></td>
|
||||
</StyledRow>
|
||||
);
|
||||
});
|
@ -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<FieldMetadata>;
|
||||
isFirstColumn: boolean;
|
||||
isLastColumn: boolean;
|
||||
@ -21,7 +21,7 @@ export const TableColumnDropdownMenu = ({
|
||||
isFirstColumn,
|
||||
isLastColumn,
|
||||
primaryColumnKey,
|
||||
}: EntityTableHeaderOptionsProps) => {
|
||||
}: DataTableHeaderOptionsProps) => {
|
||||
const { handleColumnVisibilityChange, handleMoveTableColumn } =
|
||||
useTableColumns();
|
||||
|
||||
|
@ -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 <ContextMenu selectedIds={selectedRowIds} />;
|
||||
};
|
@ -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],
|
||||
);
|
@ -2,7 +2,7 @@ import { useRecoilCallback } from 'recoil';
|
||||
|
||||
import { entityFieldsFamilyState } from '@/ui/field/states/entityFieldsFamilyState';
|
||||
|
||||
export const useUpsertEntityTableItem = () =>
|
||||
export const useUpsertDataTableItem = () =>
|
||||
useRecoilCallback(
|
||||
({ set, snapshot }) =>
|
||||
<T extends { id: string }>(entity: T) => {
|
@ -2,7 +2,7 @@ import { useRecoilCallback } from 'recoil';
|
||||
|
||||
import { entityFieldsFamilyState } from '@/ui/field/states/entityFieldsFamilyState';
|
||||
|
||||
export const useUpsertEntityTableItems = () =>
|
||||
export const useUpsertDataTableItems = () =>
|
||||
useRecoilCallback(
|
||||
({ set, snapshot }) =>
|
||||
<T extends { id: string }>(entities: T[]) => {
|
@ -0,0 +1,6 @@
|
||||
import { atom } from 'recoil';
|
||||
|
||||
export const isFetchingDataTableDataState = atom<boolean>({
|
||||
key: 'isFetchingDataTableDataState',
|
||||
default: true,
|
||||
});
|
@ -1,6 +0,0 @@
|
||||
import { atom } from 'recoil';
|
||||
|
||||
export const isFetchingEntityTableDataState = atom<boolean>({
|
||||
key: 'isFetchingEntityTableDataState',
|
||||
default: true,
|
||||
});
|
@ -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 = () => {
|
||||
<StyledTableContainer>
|
||||
<CompanyTable />
|
||||
</StyledTableContainer>
|
||||
<EntityTableActionBar />
|
||||
<EntityTableContextMenu />
|
||||
<DataTableActionBar />
|
||||
<DataTableContextMenu />
|
||||
</RecoilScope>
|
||||
</PageBody>
|
||||
</PageContainer>
|
||||
|
@ -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 = () => {
|
||||
<StyledTableContainer>
|
||||
<PeopleTable />
|
||||
</StyledTableContainer>
|
||||
<EntityTableActionBar />
|
||||
<EntityTableContextMenu />
|
||||
<DataTableActionBar />
|
||||
<DataTableContextMenu />
|
||||
</RecoilScope>
|
||||
</PageBody>
|
||||
</PageContainer>
|
||||
|
Loading…
Reference in New Issue
Block a user