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

2357 Refactor RecordTable to use the new scope architecture (#2407)

Browse Source 
* create RecordTableScope

* use RecordTableScope

* working on useRecordTable hook

* add RecordTableScope to company-table

* add RecordTableScope to person-table

* add filter state and sort state

* add useSetRecordTableData to useRecordTable

* wip

* add setRecordTableData to useRecordTable

* update in RecordTableEffect

* fix bug

* getting rid of unnecessary context and hooks

* remove console.log

* wip

* fix bug by creating an init effect

* fix viewbar not in scope in company and people tables

* wip

* updating useRecordTable to use internal hooks

* updating useRecordTable to use internal hooks

* updating useRecordTable to use internal hooks

* updating useRecordTable to use internal hooks

* modified according to comments
This commit is contained in:
bosiraphael
2023-11-09 17:45:58 +01:00
committed by GitHub
parent 0d4949484c
commit 588091d3dd
93 changed files with 871 additions and 875 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
front/src/modules/companies/hooks/useCompanyTableContextMenuEntries.tsx
View File

@ -11,7 +11,7 @@ import {
} from '@/ui/display/icon';
import { actionBarEntriesState } from '@/ui/navigation/action-bar/states/actionBarEntriesState';
import { contextMenuEntriesState } from '@/ui/navigation/context-menu/states/contextMenuEntriesState';
import { useResetTableRowSelection } from '@/ui/object/record-table/hooks/useResetTableRowSelection';
import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
import { selectedRowIdsSelector } from '@/ui/object/record-table/states/selectors/selectedRowIdsSelector';
import { tableRowIdsState } from '@/ui/object/record-table/states/tableRowIdsState';
import {
@ -30,7 +30,9 @@ export const useCompanyTableContextMenuEntries = () => {
const createActivityForCompany = useCreateActivityForCompany();
const setTableRowIds = useSetRecoilState(tableRowIdsState);
const resetRowSelection = useResetTableRowSelection();
const { resetTableRowSelection } = useRecordTable({
recordTableScopeId: 'companies',
});
const { data } = useGetFavoritesQuery();
const favorites = data?.findFavorites;
@ -50,7 +52,7 @@ export const useCompanyTableContextMenuEntries = () => {
(favorite) => favorite.company?.id === selectedCompanyId,
);
resetRowSelection();
resetTableRowSelection();
if (isFavorite) deleteCompanyFavorite(selectedCompanyId);
else insertCompanyFavorite(selectedCompanyId);
});
@ -64,7 +66,7 @@ export const useCompanyTableContextMenuEntries = () => {
.getLoadable(selectedRowIdsSelector)
.getValue();
resetRowSelection();
resetTableRowSelection();
await deleteManyCompany({
variables: {

57
front/src/modules/companies/hooks/useDeleteCompanies.ts
View File

@ -1,57 +0,0 @@
import { getOperationName } from '@apollo/client/utilities';
import { useRecoilState, useRecoilValue } from 'recoil';
import { useOptimisticEvict } from '@/apollo/optimistic-effect/hooks/useOptimisticEvict';
import { GET_PIPELINES } from '@/pipeline/graphql/queries/getPipelines';
import { useResetTableRowSelection } from '@/ui/object/record-table/hooks/useResetTableRowSelection';
import { selectedRowIdsSelector } from '@/ui/object/record-table/states/selectors/selectedRowIdsSelector';
import { tableRowIdsState } from '@/ui/object/record-table/states/tableRowIdsState';
import { useDeleteManyCompaniesMutation } from '~/generated/graphql';
export const useDeleteSelectedComapnies = () => {
const selectedRowIds = useRecoilValue(selectedRowIdsSelector);
const resetRowSelection = useResetTableRowSelection();
const [deleteCompanies] = useDeleteManyCompaniesMutation({
refetchQueries: [getOperationName(GET_PIPELINES) ?? ''],
});
const { performOptimisticEvict } = useOptimisticEvict();
const [tableRowIds, setTableRowIds] = useRecoilState(tableRowIdsState);
const deleteSelectedCompanies = async () => {
const rowIdsToDelete = selectedRowIds;
resetRowSelection();
await deleteCompanies({
variables: {
ids: rowIdsToDelete,
},
optimisticResponse: {
__typename: 'Mutation',
deleteManyCompany: {
count: rowIdsToDelete.length,
},
},
update: (cache) => {
setTableRowIds(
tableRowIds.filter((id) => !rowIdsToDelete.includes(id)),
);
rowIdsToDelete.forEach((companyId) => {
cache.evict({
id: cache.identify({ __typename: 'Company', id: companyId }),
});
performOptimisticEvict('PipelineProgress', 'companyId', companyId);
cache.gc();
});
},
});
};
return deleteSelectedCompanies;
};

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

@ -1,5 +1,5 @@
import styled from '@emotion/styled';
import { useRecoilCallback, useSetRecoilState } from 'recoil';
import { useRecoilCallback } from 'recoil';
import { companiesAvailableFieldDefinitions } from '@/companies/constants/companiesAvailableFieldDefinitions';
import { getCompaniesOptimisticEffectDefinition } from '@/companies/graphql/optimistic-effect-definitions/getCompaniesOptimisticEffectDefinition';
@ -8,14 +8,12 @@ import { useSpreadsheetCompanyImport } from '@/companies/hooks/useSpreadsheetCom
import { RecordTable } from '@/ui/object/record-table/components/RecordTable';
import { RecordTableEffect } from '@/ui/object/record-table/components/RecordTableEffect';
import { TableOptionsDropdownId } from '@/ui/object/record-table/constants/TableOptionsDropdownId';
import { TableContext } from '@/ui/object/record-table/contexts/TableContext';
import { useUpsertRecordTableItem } from '@/ui/object/record-table/hooks/useUpsertRecordTableItem';
import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
import { TableOptionsDropdown } from '@/ui/object/record-table/options/components/TableOptionsDropdown';
import { tableColumnsScopedState } from '@/ui/object/record-table/states/tableColumnsScopedState';
import { tableFiltersScopedState } from '@/ui/object/record-table/states/tableFiltersScopedState';
import { tableSortsScopedState } from '@/ui/object/record-table/states/tableSortsScopedState';
import { RecordTableScope } from '@/ui/object/record-table/scopes/RecordTableScope';
import { ViewBar } from '@/views/components/ViewBar';
import { useViewFields } from '@/views/hooks/internal/useViewFields';
import { useView } from '@/views/hooks/useView';
import { ViewScope } from '@/views/scopes/ViewScope';
import { mapColumnDefinitionsToViewFields } from '@/views/utils/mapColumnDefinitionToViewField';
import { mapViewFieldsToColumnDefinitions } from '@/views/utils/mapViewFieldsToColumnDefinitions';
@ -42,21 +40,21 @@ const StyledContainer = styled.div`
export const CompanyTable = () => {
const viewScopeId = 'company-table-view';
const tableScopeId = 'companies';
const setTableColumns = useSetRecoilState(
tableColumnsScopedState(tableScopeId),
);
const setTableFilters = useSetRecoilState(
tableFiltersScopedState(tableScopeId),
);
const setTableSorts = useSetRecoilState(tableSortsScopedState(tableScopeId));
const {
setTableFilters,
setTableSorts,
setTableColumns,
upsertRecordTableItem,
} = useRecordTable({
recordTableScopeId: tableScopeId,
});
const [updateEntityMutation] = useUpdateOneCompanyMutation();
const upsertRecordTableItem = useUpsertRecordTableItem();
const [getWorkspaceMember] = useGetWorkspaceMembersLazyQuery();
const { persistViewFields } = useViewFields(viewScopeId);
const { setEntityCountInCurrentView } = useView({ viewScopeId });
const { setContextMenuEntries, setActionBarEntries } =
useCompanyTableContextMenuEntries();
@ -112,12 +110,14 @@ export const CompanyTable = () => {
}}
>
<StyledContainer>
<TableContext.Provider
value={{
onColumnsChange: useRecoilCallback(() => (columns) => {
persistViewFields(mapColumnDefinitionsToViewFields(columns));
}),
}}
<RecordTableScope
recordTableScopeId={tableScopeId}
onColumnsChange={useRecoilCallback(() => (columns) => {
persistViewFields(mapColumnDefinitionsToViewFields(columns));
})}
onEntityCountChange={useRecoilCallback(() => (entityCount) => {
setEntityCountInCurrentView(entityCount);
})}
>
<ViewBar
optionsDropdownButton={<TableOptionsDropdown onImport={onImport} />}
@ -142,7 +142,7 @@ export const CompanyTable = () => {
variables: UpdateOneCompanyMutationVariables;
}) => updateCompany(variables)}
/>
</TableContext.Provider>
</RecordTableScope>
</StyledContainer>
</ViewScope>
);

9
front/src/modules/companies/table/components/CompanyTableEffect.tsx
View File

@ -1,9 +1,7 @@
import { useEffect } from 'react';
import { companiesAvailableFieldDefinitions } from '@/companies/constants/companiesAvailableFieldDefinitions';
import { availableTableColumnsScopedState } from '@/ui/object/record-table/states/availableTableColumnsScopedState';
import { TableRecoilScopeContext } from '@/ui/object/record-table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
import { useView } from '@/views/hooks/useView';
import { ViewType } from '@/views/types/ViewType';
import { companyTableFilterDefinitions } from '~/pages/companies/constants/companyTableFilterDefinitions';
@ -18,10 +16,7 @@ const CompanyTableEffect = () => {
setViewObjectId,
} = useView();
const [, setAvailableTableColumns] = useRecoilScopedState(
availableTableColumnsScopedState,
TableRecoilScopeContext,
);
const { setAvailableTableColumns } = useRecordTable();
useEffect(() => {
setAvailableSortDefinitions?.(companyTableSortDefinitions);

11
front/src/modules/companies/table/components/CompanyTableMockDataEffect.tsx
View File

@ -1,19 +1,12 @@
import { useEffect } from 'react';
import { companiesAvailableFieldDefinitions } from '@/companies/constants/companiesAvailableFieldDefinitions';
import { useSetRecordTableData } from '@/ui/object/record-table/hooks/useSetRecordTableData';
import { TableRecoilScopeContext } from '@/ui/object/record-table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { tableColumnsScopedState } from '@/ui/object/record-table/states/tableColumnsScopedState';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
import { mockedCompaniesData } from './companies-mock-data';
export const CompanyTableMockDataEffect = () => {
const [, setTableColumns] = useRecoilScopedState(
tableColumnsScopedState,
TableRecoilScopeContext,
);
const setRecordTableData = useSetRecordTableData();
const { setRecordTableData, setTableColumns } = useRecordTable();
useEffect(() => {
setRecordTableData(mockedCompaniesData);

21
front/src/modules/companies/table/components/CompanyTableMockMode.tsx
View File

@ -3,6 +3,7 @@ import styled from '@emotion/styled';
import { RecordTable } from '@/ui/object/record-table/components/RecordTable';
import { TableOptionsDropdownId } from '@/ui/object/record-table/constants/TableOptionsDropdownId';
import { TableOptionsDropdown } from '@/ui/object/record-table/options/components/TableOptionsDropdown';
import { RecordTableScope } from '@/ui/object/record-table/scopes/RecordTableScope';
import { ViewBar } from '@/views/components/ViewBar';
import { ViewScope } from '@/views/scopes/ViewScope';
import { useUpdateOneCompanyMutation } from '~/generated/graphql';
@ -21,14 +22,20 @@ export const CompanyTableMockMode = () => {
return (
<StyledContainer>
<ViewScope viewScopeId="company-table-mock-mode">
<CompanyTableEffect />
<CompanyTableMockDataEffect />
<ViewBar
optionsDropdownButton={<TableOptionsDropdown />}
optionsDropdownScopeId={TableOptionsDropdownId}
/>
<RecordTableScope
recordTableScopeId="company-table-mock-mode-table"
onColumnsChange={() => {}}
onEntityCountChange={() => {}}
>
<CompanyTableEffect />
<CompanyTableMockDataEffect />
<ViewBar
optionsDropdownButton={<TableOptionsDropdown />}
optionsDropdownScopeId={TableOptionsDropdownId}
/>
<RecordTable updateEntityMutation={useUpdateOneCompanyMutation} />
<RecordTable updateEntityMutation={useUpdateOneCompanyMutation} />
</RecordTableScope>
</ViewScope>
</StyledContainer>
);

50
front/src/modules/metadata/components/RecordTableContainer.tsx
View File

@ -1,22 +1,21 @@
import styled from '@emotion/styled';
import { useRecoilCallback, useSetRecoilState } from 'recoil';
import { useRecoilCallback } from 'recoil';
import { RecordTable } from '@/ui/object/record-table/components/RecordTable';
import { TableOptionsDropdownId } from '@/ui/object/record-table/constants/TableOptionsDropdownId';
import { TableContext } from '@/ui/object/record-table/contexts/TableContext';
import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
import { TableOptionsDropdown } from '@/ui/object/record-table/options/components/TableOptionsDropdown';
import { tableColumnsScopedState } from '@/ui/object/record-table/states/tableColumnsScopedState';
import { tableFiltersScopedState } from '@/ui/object/record-table/states/tableFiltersScopedState';
import { tableSortsScopedState } from '@/ui/object/record-table/states/tableSortsScopedState';
import { RecordTableScope } from '@/ui/object/record-table/scopes/RecordTableScope';
import { ViewBar } from '@/views/components/ViewBar';
import { useViewFields } from '@/views/hooks/internal/useViewFields';
import { useView } from '@/views/hooks/useView';
import { ViewScope } from '@/views/scopes/ViewScope';
import { mapColumnDefinitionsToViewFields } from '@/views/utils/mapColumnDefinitionToViewField';
import { mapViewFieldsToColumnDefinitions } from '@/views/utils/mapViewFieldsToColumnDefinitions';
import { mapViewFiltersToFilters } from '@/views/utils/mapViewFiltersToFilters';
import { mapViewSortsToSorts } from '@/views/utils/mapViewSortsToSorts';
import { useObjectMetadataItemInContext } from '../hooks/useObjectMetadataItemInContext';
import { useFindOneObjectMetadataItem } from '../hooks/useFindOneObjectMetadataItem';
import { useUpdateOneObject } from '../hooks/useUpdateOneObject';
import { RecordTableEffect } from './RecordTableEffect';
@ -28,28 +27,29 @@ const StyledContainer = styled.div`
overflow: auto;
`;
export const RecordTableContainer = () => {
const { columnDefinitions, foundObjectMetadataItem, objectNamePlural } =
useObjectMetadataItemInContext();
export const RecordTableContainer = ({
objectNamePlural,
}: {
objectNamePlural: string;
}) => {
const { columnDefinitions } = useFindOneObjectMetadataItem({
objectNamePlural,
});
const { updateOneObject } = useUpdateOneObject({
objectNamePlural,
});
const tableScopeId = foundObjectMetadataItem?.namePlural ?? '';
const tableScopeId = objectNamePlural ?? '';
const viewScopeId = objectNamePlural ?? '';
const { persistViewFields } = useViewFields(viewScopeId);
const setTableColumns = useSetRecoilState(
tableColumnsScopedState(tableScopeId),
);
const { setTableFilters, setTableSorts, setTableColumns } = useRecordTable({
recordTableScopeId: tableScopeId,
});
const setTableFilters = useSetRecoilState(
tableFiltersScopedState(tableScopeId),
);
const setTableSorts = useSetRecoilState(tableSortsScopedState(tableScopeId));
const { setEntityCountInCurrentView } = useView({ viewScopeId });
const updateEntity = ({
variables,
@ -83,11 +83,13 @@ export const RecordTableContainer = () => {
}}
>
<StyledContainer>
<TableContext.Provider
value={{
onColumnsChange: useRecoilCallback(() => (columns) => {
persistViewFields(mapColumnDefinitionsToViewFields(columns));
}),
<RecordTableScope
recordTableScopeId={tableScopeId}
onColumnsChange={useRecoilCallback(() => (columns) => {
persistViewFields(mapColumnDefinitionsToViewFields(columns));
})}
onEntityCountChange={(entityCount) => {
setEntityCountInCurrentView(entityCount);
}}
>
<ViewBar
@ -96,7 +98,7 @@ export const RecordTableContainer = () => {
/>
<RecordTableEffect />
<RecordTable updateEntityMutation={updateEntity} />
</TableContext.Provider>
</RecordTableScope>
</StyledContainer>
</ViewScope>
);

43
front/src/modules/metadata/components/RecordTableEffect.tsx
View File

@ -1,29 +1,27 @@
import { useEffect } from 'react';
import { useSetRecoilState } from 'recoil';
import { useRecoilValue } from 'recoil';
import { turnFiltersIntoWhereClauseV2 } from '@/ui/object/object-filter-dropdown/utils/turnFiltersIntoWhereClauseV2';
import { turnSortsIntoOrderByV2 } from '@/ui/object/object-sort-dropdown/utils/turnSortsIntoOrderByV2';
import { useSetRecordTableData } from '@/ui/object/record-table/hooks/useSetRecordTableData';
import { availableTableColumnsScopedState } from '@/ui/object/record-table/states/availableTableColumnsScopedState';
import { TableRecoilScopeContext } from '@/ui/object/record-table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { tableFiltersScopedState } from '@/ui/object/record-table/states/tableFiltersScopedState';
import { tableSortsScopedState } from '@/ui/object/record-table/states/tableSortsScopedState';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { useRecordTableScopedStates } from '@/ui/object/record-table/hooks/internal/useRecordTableScopedStates';
import { useView } from '@/views/hooks/useView';
import { ViewType } from '@/views/types/ViewType';
import { useRecordTable } from '../../ui/object/record-table/hooks/useRecordTable';
import { useFindManyObjects } from '../hooks/useFindManyObjects';
import { useObjectMetadataItemInContext } from '../hooks/useObjectMetadataItemInContext';
import { useFindOneObjectMetadataItem } from '../hooks/useFindOneObjectMetadataItem';
export const RecordTableEffect = () => {
const { scopeId } = useRecordTable();
const {
foundObjectMetadataItem,
columnDefinitions,
filterDefinitions,
sortDefinitions,
foundObjectMetadataItem,
objectNamePlural,
} = useObjectMetadataItemInContext();
} = useFindOneObjectMetadataItem({
objectNamePlural: scopeId,
});
const {
setAvailableSortDefinitions,
setAvailableFilterDefinitions,
@ -32,20 +30,15 @@ export const RecordTableEffect = () => {
setViewObjectId,
} = useView();
const setRecordTableData = useSetRecordTableData();
const { setRecordTableData, setAvailableTableColumns } = useRecordTable();
const tableFilters = useRecoilScopedValue(
tableFiltersScopedState,
TableRecoilScopeContext,
);
const { tableFiltersState, tableSortsState } = useRecordTableScopedStates();
const tableSorts = useRecoilScopedValue(
tableSortsScopedState,
TableRecoilScopeContext,
);
const tableFilters = useRecoilValue(tableFiltersState);
const tableSorts = useRecoilValue(tableSortsState);
const { objects, loading } = useFindManyObjects({
objectNamePlural: objectNamePlural,
objectNamePlural: scopeId,
filter: turnFiltersIntoWhereClauseV2(
tableFilters,
foundObjectMetadataItem?.fields ?? [],
@ -64,12 +57,6 @@ export const RecordTableEffect = () => {
}
}, [objects, setRecordTableData, loading]);
const tableScopeId = foundObjectMetadataItem?.namePlural ?? '';
const setAvailableTableColumns = useSetRecoilState(
availableTableColumnsScopedState(tableScopeId),
);
useEffect(() => {
if (!foundObjectMetadataItem) {
return;

22
front/src/modules/metadata/components/RecordTablePage.tsx
View File

@ -12,12 +12,9 @@ import { PageHeader } from '@/ui/layout/page/PageHeader';
import { PageHotkeysEffect } from '@/ui/layout/page/PageHotkeysEffect';
import { RecordTableActionBar } from '@/ui/object/record-table/action-bar/components/RecordTableActionBar';
import { RecordTableContextMenu } from '@/ui/object/record-table/context-menu/components/RecordTableContextMenu';
import { TableRecoilScopeContext } from '@/ui/object/record-table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { useCreateOneObject } from '../hooks/useCreateOneObject';
import { useFindOneObjectMetadataItem } from '../hooks/useFindOneObjectMetadataItem';
import { ObjectMetadataItemScope } from '../scopes/ObjectMetadataItemScope';
const StyledTableContainer = styled.div`
display: flex;
@ -59,20 +56,11 @@ export const RecordTablePage = () => {
<PageAddButton onClick={handleAddButtonClick} />
</PageHeader>
<PageBody>
<RecoilScope
scopeId={objectNamePlural}
CustomRecoilScopeContext={TableRecoilScopeContext}
>
<StyledTableContainer>
<ObjectMetadataItemScope
objectMetadataItemNamePlural={objectNamePlural}
>
<RecordTableContainer />
</ObjectMetadataItemScope>
</StyledTableContainer>
<RecordTableActionBar />
<RecordTableContextMenu />
</RecoilScope>
<StyledTableContainer>
<RecordTableContainer objectNamePlural={objectNamePlural} />
</StyledTableContainer>
<RecordTableActionBar />
<RecordTableContextMenu />
</PageBody>
</PageContainer>
);

18
front/src/modules/metadata/hooks/useObjectMetadataItem.ts
View File

@ -1,18 +0,0 @@
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
import { ObjectMetadataItemScopeInternalContext } from '../scopes/scope-internal-context/ObjectMetadataItemScopeInternalContext';
type UseObjectMetadataItemProps = {
objectMetadataItemNamePlural?: string;
};
export const useObjectMetadataItem = (props?: UseObjectMetadataItemProps) => {
const scopeId = useAvailableScopeIdOrThrow(
ObjectMetadataItemScopeInternalContext,
props?.objectMetadataItemNamePlural,
);
return {
scopeId,
};
};

34
front/src/modules/metadata/hooks/useObjectMetadataItemInContext.ts
View File

@ -1,34 +0,0 @@
import { useContext } from 'react';
import { ObjectMetadataItemScopeInternalContext } from '../scopes/scope-internal-context/ObjectMetadataItemScopeInternalContext';
import { useFindOneObjectMetadataItem } from './useFindOneObjectMetadataItem';
export const useObjectMetadataItemInContext = () => {
const context = useContext(ObjectMetadataItemScopeInternalContext);
if (!context) {
throw new Error(
'Could not find ObjectMetadataItemScopeInternalContext while in useObjectMetadataItemInContext',
);
}
const {
foundObjectMetadataItem,
loading,
columnDefinitions,
filterDefinitions,
sortDefinitions,
} = useFindOneObjectMetadataItem({
objectNamePlural: context.objectNamePlural,
});
return {
...context,
foundObjectMetadataItem,
loading,
columnDefinitions,
filterDefinitions,
sortDefinitions,
};
};

6
front/src/modules/metadata/hooks/useSetDataTableData.ts → front/src/modules/metadata/hooks/useSetRecordTableData.ts
View File

@ -1,14 +1,14 @@
import { useRecoilCallback } from 'recoil';
import { entityFieldsFamilyState } from '@/ui/object/field/states/entityFieldsFamilyState';
import { useResetTableRowSelection } from '@/ui/object/record-table/hooks/useResetTableRowSelection';
import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
import { isFetchingRecordTableDataState } from '@/ui/object/record-table/states/isFetchingRecordTableDataState';
import { numberOfTableRowsState } from '@/ui/object/record-table/states/numberOfTableRowsState';
import { tableRowIdsState } from '@/ui/object/record-table/states/tableRowIdsState';
import { useView } from '@/views/hooks/useView';
export const useSetObjectRecordTableData = () => {
const resetTableRowSelection = useResetTableRowSelection();
export const useSetRecordTableData = () => {
const { resetTableRowSelection } = useRecordTable();
const { setEntityCountInCurrentView } = useView();
return useRecoilCallback(

24
front/src/modules/metadata/scopes/ObjectMetadataItemScope.tsx
View File

@ -1,24 +0,0 @@
import { ReactNode } from 'react';
import { ObjectMetadataItemScopeInternalContext } from './scope-internal-context/ObjectMetadataItemScopeInternalContext';
type ObjectMetadataItemScopeProps = {
children: ReactNode;
objectMetadataItemNamePlural: string;
};
export const ObjectMetadataItemScope = ({
children,
objectMetadataItemNamePlural,
}: ObjectMetadataItemScopeProps) => {
return (
<ObjectMetadataItemScopeInternalContext.Provider
value={{
scopeId: objectMetadataItemNamePlural,
objectNamePlural: objectMetadataItemNamePlural,
}}
>
{children}
</ObjectMetadataItemScopeInternalContext.Provider>
);
};

9
front/src/modules/metadata/scopes/scope-internal-context/ObjectMetadataItemScopeInternalContext.ts
View File

@ -1,9 +0,0 @@
import { ScopedStateKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopedStateKey';
import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';
type ObjectMetadataItemScopeInternalContextProps = ScopedStateKey & {
objectNamePlural: string;
};
export const ObjectMetadataItemScopeInternalContext =
createScopeInternalContext<ObjectMetadataItemScopeInternalContextProps>();

10
front/src/modules/people/hooks/usePersonTableContextMenuEntries.tsx
View File

@ -11,7 +11,7 @@ import {
} from '@/ui/display/icon';
import { actionBarEntriesState } from '@/ui/navigation/action-bar/states/actionBarEntriesState';
import { contextMenuEntriesState } from '@/ui/navigation/context-menu/states/contextMenuEntriesState';
import { useResetTableRowSelection } from '@/ui/object/record-table/hooks/useResetTableRowSelection';
import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
import { selectedRowIdsSelector } from '@/ui/object/record-table/states/selectors/selectedRowIdsSelector';
import { tableRowIdsState } from '@/ui/object/record-table/states/tableRowIdsState';
import {
@ -30,7 +30,9 @@ export const usePersonTableContextMenuEntries = () => {
const createActivityForPeople = useCreateActivityForPeople();
const setTableRowIds = useSetRecoilState(tableRowIdsState);
const resetRowSelection = useResetTableRowSelection();
const { resetTableRowSelection } = useRecordTable({
recordTableScopeId: 'people',
});
const { data } = useGetFavoritesQuery();
const favorites = data?.findFavorites;
@ -48,7 +50,7 @@ export const usePersonTableContextMenuEntries = () => {
!!selectedPersonId &&
!!favorites?.find((favorite) => favorite.person?.id === selectedPersonId);
resetRowSelection();
resetTableRowSelection();
if (isFavorite) deletePersonFavorite(selectedPersonId);
else insertPersonFavorite(selectedPersonId);
});
@ -62,7 +64,7 @@ export const usePersonTableContextMenuEntries = () => {
.getLoadable(selectedRowIdsSelector)
.getValue();
resetRowSelection();
resetTableRowSelection();
await deleteManyPerson({
variables: {

4
front/src/modules/people/hooks/useSetPeopleRecordTable.ts
View File

@ -1,7 +1,7 @@
import { useLocation } from 'react-router-dom';
import { useRecoilCallback } from 'recoil';
import { useResetTableRowSelection } from '@/ui/object/record-table/hooks/useResetTableRowSelection';
import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
import { isFetchingRecordTableDataState } from '@/ui/object/record-table/states/isFetchingRecordTableDataState';
import { numberOfTableRowsState } from '@/ui/object/record-table/states/numberOfTableRowsState';
import { tableRowIdsState } from '@/ui/object/record-table/states/tableRowIdsState';
@ -18,7 +18,7 @@ import { peopleNameCellFamilyState } from '../states/peopleNamesFamilyState';
import { peoplePhoneFamilyState } from '../states/peoplePhoneFamilyState';
export const useSetPeopleRecordTable = () => {
const resetTableRowSelection = useResetTableRowSelection();
const { resetTableRowSelection } = useRecordTable();
const currentLocation = useLocation().pathname;

38
front/src/modules/people/table/components/PersonTable.tsx
View File

@ -1,5 +1,4 @@
import styled from '@emotion/styled';
import { useSetRecoilState } from 'recoil';
import { peopleAvailableFieldDefinitions } from '@/people/constants/peopleAvailableFieldDefinitions';
import { getPeopleOptimisticEffectDefinition } from '@/people/graphql/optimistic-effect-definitions/getPeopleOptimisticEffectDefinition';
@ -9,15 +8,13 @@ import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
import { RecordTable } from '@/ui/object/record-table/components/RecordTable';
import { RecordTableEffect } from '@/ui/object/record-table/components/RecordTableEffect';
import { TableOptionsDropdownId } from '@/ui/object/record-table/constants/TableOptionsDropdownId';
import { TableContext } from '@/ui/object/record-table/contexts/TableContext';
import { useUpsertRecordTableItem } from '@/ui/object/record-table/hooks/useUpsertRecordTableItem';
import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
import { TableOptionsDropdown } from '@/ui/object/record-table/options/components/TableOptionsDropdown';
import { tableColumnsScopedState } from '@/ui/object/record-table/states/tableColumnsScopedState';
import { tableFiltersScopedState } from '@/ui/object/record-table/states/tableFiltersScopedState';
import { tableSortsScopedState } from '@/ui/object/record-table/states/tableSortsScopedState';
import { RecordTableScope } from '@/ui/object/record-table/scopes/RecordTableScope';
import { ColumnDefinition } from '@/ui/object/record-table/types/ColumnDefinition';
import { ViewBar } from '@/views/components/ViewBar';
import { useViewFields } from '@/views/hooks/internal/useViewFields';
import { useView } from '@/views/hooks/useView';
import { ViewScope } from '@/views/scopes/ViewScope';
import { mapColumnDefinitionsToViewFields } from '@/views/utils/mapColumnDefinitionToViewField';
import { mapViewFieldsToColumnDefinitions } from '@/views/utils/mapViewFieldsToColumnDefinitions';
@ -36,18 +33,17 @@ import PersonTableEffect from './PersonTableEffect';
export const PersonTable = () => {
const viewScopeId = 'person-table-view';
const tableScopeId = 'people';
const setTableColumns = useSetRecoilState(
tableColumnsScopedState(tableScopeId),
);
const setTableFilters = useSetRecoilState(
tableFiltersScopedState(tableScopeId),
);
const setTableSorts = useSetRecoilState(tableSortsScopedState(tableScopeId));
const {
setTableFilters,
setTableSorts,
setTableColumns,
upsertRecordTableItem,
} = useRecordTable({
recordTableScopeId: tableScopeId,
});
const [updateEntityMutation] = useUpdateOnePersonMutation();
const upsertRecordTableItem = useUpsertRecordTableItem();
const { persistViewFields } = useViewFields(viewScopeId);
@ -73,6 +69,8 @@ export const PersonTable = () => {
const { openPersonSpreadsheetImport: onImport } =
useSpreadsheetPersonImport();
const { setEntityCountInCurrentView } = useView({ viewScopeId });
const StyledContainer = styled.div`
display: flex;
flex-direction: column;
@ -98,9 +96,11 @@ export const PersonTable = () => {
}}
>
<StyledContainer>
<TableContext.Provider
value={{
onColumnsChange: handleColumnChange,
<RecordTableScope
recordTableScopeId={tableScopeId}
onColumnsChange={handleColumnChange}
onEntityCountChange={(entityCount) => {
setEntityCountInCurrentView(entityCount);
}}
>
<ViewBar
@ -126,7 +126,7 @@ export const PersonTable = () => {
variables: UpdateOnePersonMutationVariables;
}) => updatePerson(variables)}
/>
</TableContext.Provider>
</RecordTableScope>
</StyledContainer>
</ViewScope>
);

15
front/src/modules/people/table/components/PersonTableEffect.tsx
View File

@ -1,10 +1,7 @@
import { useEffect } from 'react';
import { peopleAvailableFieldDefinitions } from '@/people/constants/peopleAvailableFieldDefinitions';
import { availableTableColumnsScopedState } from '@/ui/object/record-table/states/availableTableColumnsScopedState';
import { TableRecoilScopeContext } from '@/ui/object/record-table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { tableColumnsScopedState } from '@/ui/object/record-table/states/tableColumnsScopedState';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
import { useView } from '@/views/hooks/useView';
import { ViewType } from '@/views/types/ViewType';
import { personTableFilterDefinitions } from '~/pages/people/constants/personTableFilterDefinitions';
@ -19,15 +16,7 @@ const PeopleTableEffect = () => {
setViewObjectId,
} = useView();
const [, setTableColumns] = useRecoilScopedState(
tableColumnsScopedState,
TableRecoilScopeContext,
);
const [, setAvailableTableColumns] = useRecoilScopedState(
availableTableColumnsScopedState,
TableRecoilScopeContext,
);
const { setAvailableTableColumns, setTableColumns } = useRecordTable();
useEffect(() => {
setAvailableSortDefinitions?.(personTableSortDefinitions);

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

@ -1,6 +1,6 @@
import { useRecoilState } from 'recoil';
import { useMoveViewColumns } from '@/ui/object/record-table/hooks/useMoveViewColumns';
import { useMoveViewColumns } from '@/views/hooks/useMoveViewColumns';
import { useUpdatePipelineStageMutation } from '~/generated/graphql';
import { boardColumnsState } from '../states/boardColumnsState';

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

@ -4,8 +4,7 @@ import { useSetRecoilState } from 'recoil';
import { useCompanyTableContextMenuEntries } from '@/companies/hooks/useCompanyTableContextMenuEntries';
import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode';
import { TableRecoilScopeContext } from '@/ui/object/record-table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { RecordTableScope } from '@/ui/object/record-table/scopes/RecordTableScope';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { actionBarOpenState } from '../../states/actionBarIsOpenState';
@ -24,12 +23,16 @@ const meta: Meta<typeof ActionBar> = {
component: FilledActionBar,
decorators: [
(Story) => (
<RecoilScope CustomRecoilScopeContext={TableRecoilScopeContext}>
<RecordTableScope
recordTableScopeId="companies"
onColumnsChange={() => {}}
onEntityCountChange={() => {}}
>
<MemoryRouter>
<CompanyTableMockMode />
<Story />
</MemoryRouter>
</RecoilScope>
</RecordTableScope>
),
ComponentDecorator,
],

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

@ -4,8 +4,7 @@ import { useSetRecoilState } from 'recoil';
import { useCompanyTableContextMenuEntries } from '@/companies/hooks/useCompanyTableContextMenuEntries';
import { CompanyTableMockMode } from '@/companies/table/components/CompanyTableMockMode';
import { TableRecoilScopeContext } from '@/ui/object/record-table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { RecordTableScope } from '@/ui/object/record-table/scopes/RecordTableScope';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { contextMenuIsOpenState } from '../../states/contextMenuIsOpenState';
@ -30,12 +29,16 @@ const meta: Meta<typeof ContextMenu> = {
component: FilledContextMenu,
decorators: [
(Story) => (
<RecoilScope CustomRecoilScopeContext={TableRecoilScopeContext}>
<RecordTableScope
recordTableScopeId="companies"
onColumnsChange={() => {}}
onEntityCountChange={() => {}}
>
<MemoryRouter>
<CompanyTableMockMode></CompanyTableMockMode>
<Story />
</MemoryRouter>
</RecoilScope>
</RecordTableScope>
),
ComponentDecorator,
],

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

@ -5,7 +5,7 @@ import { useSetRecoilState } from 'recoil';
import { Checkbox } from '@/ui/input/components/Checkbox';
import { actionBarOpenState } from '@/ui/navigation/action-bar/states/actionBarIsOpenState';
import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected';
import { useCurrentRowSelected } from '../record-table-row/hooks/useCurrentRowSelected';
const StyledContainer = styled.div`
align-items: center;

15
front/src/modules/ui/object/record-table/components/RecordTable.tsx
View File

@ -10,10 +10,7 @@ import {
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
import { EntityUpdateMutationContext } from '../contexts/EntityUpdateMutationHookContext';
import { useLeaveTableFocus } from '../hooks/useLeaveTableFocus';
import { useMapKeyboardToSoftFocus } from '../hooks/useMapKeyboardToSoftFocus';
import { useResetTableRowSelection } from '../hooks/useResetTableRowSelection';
import { useSetRowSelectedState } from '../hooks/useSetRowSelectedState';
import { useRecordTable } from '../hooks/useRecordTable';
import { TableHotkeyScope } from '../types/TableHotkeyScope';
import { RecordTableBody } from './RecordTableBody';
@ -89,13 +86,15 @@ type RecordTableProps = {
export const RecordTable = ({ updateEntityMutation }: RecordTableProps) => {
const tableBodyRef = useRef<HTMLDivElement>(null);
const setRowSelectedState = useSetRowSelectedState();
const resetTableRowSelection = useResetTableRowSelection();
const {
leaveTableFocus,
setRowSelectedState,
resetTableRowSelection,
useMapKeyboardToSoftFocus,
} = useRecordTable();
useMapKeyboardToSoftFocus();
const leaveTableFocus = useLeaveTableFocus();
useListenClickOutside({
refs: [tableBodyRef],
callback: () => {

4
front/src/modules/ui/object/record-table/components/RecordTableCell.tsx
View File

@ -12,8 +12,8 @@ import { ColumnContext } from '../contexts/ColumnContext';
import { ColumnIndexContext } from '../contexts/ColumnIndexContext';
import { EntityUpdateMutationContext } from '../contexts/EntityUpdateMutationHookContext';
import { RowIdContext } from '../contexts/RowIdContext';
import { useCurrentRowSelected } from '../hooks/useCurrentRowSelected';
import { TableCell } from '../table-cell/components/TableCell';
import { TableCell } from '../record-table-cell/components/RecordTableCell';
import { useCurrentRowSelected } from '../record-table-row/hooks/useCurrentRowSelected';
import { TableHotkeyScope } from '../types/TableHotkeyScope';
export const RecordTableCell = ({ cellIndex }: { cellIndex: number }) => {

26
front/src/modules/ui/object/record-table/components/RecordTableEffect.tsx
View File

@ -1,10 +1,10 @@
import { useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';
import defaults from 'lodash/defaults';
import { useRecoilValue } from 'recoil';
import { useOptimisticEffect } from '@/apollo/optimistic-effect/hooks/useOptimisticEffect';
import { OptimisticEffectDefinition } from '@/apollo/optimistic-effect/types/OptimisticEffectDefinition';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import {
SortOrder,
useGetCompaniesQuery,
@ -13,10 +13,8 @@ import {
import { FilterDefinition } from '../../object-filter-dropdown/types/FilterDefinition';
import { SortDefinition } from '../../object-sort-dropdown/types/SortDefinition';
import { useSetRecordTableData } from '../hooks/useSetRecordTableData';
import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
import { tablefiltersWhereScopedSelector } from '../states/selectors/tablefiltersWhereScopedSelector';
import { tableSortsOrderByScopedSelector } from '../states/selectors/tableSortsOrderByScopedSelector';
import { useRecordTableScopedStates } from '../hooks/internal/useRecordTableScopedStates';
import { useRecordTable } from '../hooks/useRecordTable';
export const RecordTableEffect = ({
useGetRequest,
@ -35,32 +33,28 @@ export const RecordTableEffect = ({
setActionBarEntries?: () => void;
setContextMenuEntries?: () => void;
}) => {
const setRecordTableData = useSetRecordTableData();
const { setRecordTableData } = useRecordTable();
const { tableSortsOrderBySelector, tableFiltersWhereSelector } =
useRecordTableScopedStates();
const { registerOptimisticEffect } = useOptimisticEffect();
const tableSortsOrderBy = useRecoilScopedValue(
tableSortsOrderByScopedSelector,
TableRecoilScopeContext,
);
const tableSortsOrderBy = useRecoilValue(tableSortsOrderBySelector);
const sortsOrderBy = defaults(tableSortsOrderBy, [
{
createdAt: SortOrder.Desc,
},
]);
const tablefiltersWhere = useRecoilScopedValue(
tablefiltersWhereScopedSelector,
TableRecoilScopeContext,
);
const tableFiltersWhere = useRecoilValue(tableFiltersWhereSelector);
useGetRequest({
variables: { orderBy: sortsOrderBy, where: tablefiltersWhere },
variables: { orderBy: sortsOrderBy, where: tableFiltersWhere },
onCompleted: (data: any) => {
const entities = data[getRequestResultKey] ?? [];
setRecordTableData(entities);
registerOptimisticEffect({
variables: { orderBy: sortsOrderBy, where: tablefiltersWhere },
variables: { orderBy: sortsOrderBy, where: tableFiltersWhere },
definition: getRequestOptimisticEffectDefinition,
});
},

37
front/src/modules/ui/object/record-table/components/RecordTableHeader.tsx
View File

@ -1,21 +1,16 @@
import { useCallback, useState } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useRecoilCallback, useRecoilState } from 'recoil';
import { useRecoilCallback, useRecoilState, useRecoilValue } from 'recoil';
import { IconPlus } from '@/ui/display/icon';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
import { useTrackPointer } from '@/ui/utilities/pointer-event/hooks/useTrackPointer';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { useRecordTableScopedStates } from '../hooks/internal/useRecordTableScopedStates';
import { useTableColumns } from '../hooks/useTableColumns';
import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
import { resizeFieldOffsetState } from '../states/resizeFieldOffsetState';
import { hiddenTableColumnsScopedSelector } from '../states/selectors/hiddenTableColumnsScopedSelector';
import { tableColumnsByKeyScopedSelector } from '../states/selectors/tableColumnsByKeyScopedSelector';
import { visibleTableColumnsScopedSelector } from '../states/selectors/visibleTableColumnsScopedSelector';
import { tableColumnsScopedState } from '../states/tableColumnsScopedState';
import { ColumnHeadWithDropdown } from './ColumnHeadWithDropdown';
import { RecordTableHeaderPlusButtonContent } from './RecordTableHeaderPlusButtonContent';
@ -110,22 +105,18 @@ export const RecordTableHeader = () => {
const [resizeFieldOffset, setResizeFieldOffset] = useRecoilState(
resizeFieldOffsetState,
);
const tableColumns = useRecoilScopedValue(
tableColumnsScopedState,
TableRecoilScopeContext,
);
const tableColumnsByKey = useRecoilScopedValue(
tableColumnsByKeyScopedSelector,
TableRecoilScopeContext,
);
const hiddenTableColumns = useRecoilScopedValue(
hiddenTableColumnsScopedSelector,
TableRecoilScopeContext,
);
const visibleTableColumns = useRecoilScopedValue(
visibleTableColumnsScopedSelector,
TableRecoilScopeContext,
);
const {
tableColumnsState,
tableColumnsByKeySelector,
hiddenTableColumnsSelector,
visibleTableColumnsSelector,
} = useRecordTableScopedStates();
const tableColumns = useRecoilValue(tableColumnsState);
const tableColumnsByKey = useRecoilValue(tableColumnsByKeySelector);
const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector);
const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector);
const [initialPointerPositionX, setInitialPointerPositionX] = useState<
number | null

12
front/src/modules/ui/object/record-table/components/RecordTableHeaderPlusButtonContent.tsx
View File

@ -1,24 +1,22 @@
import { useCallback } from 'react';
import { useRecoilValue } from 'recoil';
import { IconPlus } from '@/ui/display/icon';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { FieldMetadata } from '../../field/types/FieldMetadata';
import { useRecordTableScopedStates } from '../hooks/internal/useRecordTableScopedStates';
import { useTableColumns } from '../hooks/useTableColumns';
import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
import { hiddenTableColumnsScopedSelector } from '../states/selectors/hiddenTableColumnsScopedSelector';
import { ColumnDefinition } from '../types/ColumnDefinition';
export const RecordTableHeaderPlusButtonContent = () => {
const { closeDropdown } = useDropdown();
const hiddenTableColumns = useRecoilScopedValue(
hiddenTableColumnsScopedSelector,
TableRecoilScopeContext,
);
const { hiddenTableColumnsSelector } = useRecordTableScopedStates();
const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector);
const { handleColumnVisibilityChange } = useTableColumns();

16
front/src/modules/ui/object/record-table/components/RecordTableRow.tsx
View File

@ -1,12 +1,10 @@
import { forwardRef } from 'react';
import styled from '@emotion/styled';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { useRecoilValue } from 'recoil';
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 { useRecordTableScopedStates } from '../hooks/internal/useRecordTableScopedStates';
import { useCurrentRowSelected } from '../record-table-row/hooks/useCurrentRowSelected';
import { CheckboxCell } from './CheckboxCell';
import { RecordTableCell } from './RecordTableCell';
@ -24,10 +22,10 @@ export const RecordTableRow = forwardRef<
HTMLTableRowElement,
RecordTableRowProps
>(({ rowId }, ref) => {
const visibleTableColumns = useRecoilScopedValue(
visibleTableColumnsScopedSelector,
TableRecoilScopeContext,
);
const { visibleTableColumnsSelector } = useRecordTableScopedStates();
const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector);
const { currentRowSelected } = useCurrentRowSelected();
return (

7
front/src/modules/ui/object/record-table/components/SelectAllCheckbox.tsx
View File

@ -1,8 +1,10 @@
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { Checkbox } from '@/ui/input/components/Checkbox';
import { useSelectAllRows } from '../hooks/useSelectAllRows';
import { useRecordTable } from '../hooks/useRecordTable';
import { allRowsSelectedStatusSelector } from '../states/selectors/allRowsSelectedStatusSelector';
const StyledContainer = styled.div`
align-items: center;
@ -14,7 +16,8 @@ const StyledContainer = styled.div`
`;
export const SelectAllCheckbox = () => {
const { selectAllRows, allRowsSelectedStatus } = useSelectAllRows();
const allRowsSelectedStatus = useRecoilValue(allRowsSelectedStatusSelector);
const { selectAllRows } = useRecordTable();
const checked = allRowsSelectedStatus === 'all';
const indeterminate = allRowsSelectedStatus === 'some';

11
front/src/modules/ui/object/record-table/contexts/TableContext.ts
View File

@ -1,11 +0,0 @@
import { createContext } from 'react';
import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
import { ColumnDefinition } from '../types/ColumnDefinition';
export const TableContext = createContext<{
onColumnsChange?: (
columns: ColumnDefinition<FieldMetadata>[],
) => void | Promise<void>;
}>({});

4
front/src/modules/ui/object/record-table/hooks/useCloseCurrentTableCellInEditMode.ts → front/src/modules/ui/object/record-table/hooks/internal/useCloseCurrentTableCellInEditMode.ts
View File

@ -1,7 +1,7 @@
import { useRecoilCallback } from 'recoil';
import { currentTableCellInEditModePositionState } from '../states/currentTableCellInEditModePositionState';
import { isTableCellInEditModeFamilyState } from '../states/isTableCellInEditModeFamilyState';
import { currentTableCellInEditModePositionState } from '../../states/currentTableCellInEditModePositionState';
import { isTableCellInEditModeFamilyState } from '../../states/isTableCellInEditModeFamilyState';
export const useCloseCurrentTableCellInEditMode = () =>
useRecoilCallback(({ set, snapshot }) => {

6
front/src/modules/ui/object/record-table/hooks/useDisableSoftFocus.ts → front/src/modules/ui/object/record-table/hooks/internal/useDisableSoftFocus.ts
View File

@ -1,8 +1,8 @@
import { useRecoilCallback } from 'recoil';
import { isSoftFocusActiveState } from '../states/isSoftFocusActiveState';
import { isSoftFocusOnTableCellFamilyState } from '../states/isSoftFocusOnTableCellFamilyState';
import { softFocusPositionState } from '../states/softFocusPositionState';
import { isSoftFocusActiveState } from '../../states/isSoftFocusActiveState';
import { isSoftFocusOnTableCellFamilyState } from '../../states/isSoftFocusOnTableCellFamilyState';
import { softFocusPositionState } from '../../states/softFocusPositionState';
export const useDisableSoftFocus = () =>
useRecoilCallback(({ set, snapshot }) => {

4
front/src/modules/ui/object/record-table/hooks/useGetIsSomeCellInEditMode.ts → front/src/modules/ui/object/record-table/hooks/internal/useGetIsSomeCellInEditMode.ts
View File

@ -1,7 +1,7 @@
import { useRecoilCallback } from 'recoil';
import { currentTableCellInEditModePositionState } from '../states/currentTableCellInEditModePositionState';
import { isTableCellInEditModeFamilyState } from '../states/isTableCellInEditModeFamilyState';
import { currentTableCellInEditModePositionState } from '../../states/currentTableCellInEditModePositionState';
import { isTableCellInEditModeFamilyState } from '../../states/isTableCellInEditModeFamilyState';
export const useGetIsSomeCellInEditMode = () => {
return useRecoilCallback(

4
front/src/modules/ui/object/record-table/hooks/useLeaveTableFocus.ts → front/src/modules/ui/object/record-table/hooks/internal/useLeaveTableFocus.ts
View File

@ -2,8 +2,8 @@ import { useRecoilCallback } from 'recoil';
import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
import { isSoftFocusActiveState } from '../states/isSoftFocusActiveState';
import { TableHotkeyScope } from '../types/TableHotkeyScope';
import { isSoftFocusActiveState } from '../../states/isSoftFocusActiveState';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
import { useCloseCurrentTableCellInEditMode } from './useCloseCurrentTableCellInEditMode';
import { useDisableSoftFocus } from './useDisableSoftFocus';

6
front/src/modules/ui/object/record-table/hooks/useMoveEditModeToCellPosition.ts → front/src/modules/ui/object/record-table/hooks/internal/useMoveEditModeToCellPosition.ts
View File

@ -1,8 +1,8 @@
import { useRecoilCallback } from 'recoil';
import { currentTableCellInEditModePositionState } from '../states/currentTableCellInEditModePositionState';
import { isTableCellInEditModeFamilyState } from '../states/isTableCellInEditModeFamilyState';
import { TableCellPosition } from '../types/TableCellPosition';
import { currentTableCellInEditModePositionState } from '../../states/currentTableCellInEditModePositionState';
import { isTableCellInEditModeFamilyState } from '../../states/isTableCellInEditModeFamilyState';
import { TableCellPosition } from '../../types/TableCellPosition';
export const useMoveEditModeToTableCellPosition = () =>
useRecoilCallback(({ set, snapshot }) => {

46
front/src/modules/ui/object/record-table/hooks/internal/useRecordTableScopedStates.ts Normal file
View File

@ -0,0 +1,46 @@
import { RecordTableScopeInternalContext } from '@/ui/object/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
import { getRecordTableScopedStates } from '../../utils/getRecordTableScopedStates';
export const useRecordTableScopedStates = (args?: {
customRecordTableScopeId?: string;
}) => {
const { customRecordTableScopeId } = args ?? {};
const scopeId = useAvailableScopeIdOrThrow(
RecordTableScopeInternalContext,
customRecordTableScopeId,
);
const {
availableTableColumnsState,
tableFiltersState,
tableSortsState,
tableSortsOrderBySelector,
tableFiltersWhereSelector,
tableColumnsState,
tableColumnsByKeySelector,
hiddenTableColumnsSelector,
visibleTableColumnsSelector,
onEntityCountChangeState,
onColumnsChangeState,
} = getRecordTableScopedStates({
recordTableScopeId: scopeId,
});
return {
scopeId,
availableTableColumnsState,
tableFiltersState,
tableSortsState,
tableSortsOrderBySelector,
tableFiltersWhereSelector,
tableColumnsState,
tableColumnsByKeySelector,
hiddenTableColumnsSelector,
visibleTableColumnsSelector,
onEntityCountChangeState,
onColumnsChangeState,
};
};

4
front/src/modules/ui/object/record-table/hooks/useResetTableRowSelection.ts → front/src/modules/ui/object/record-table/hooks/internal/useResetTableRowSelection.ts
View File

@ -1,7 +1,7 @@
import { useRecoilCallback } from 'recoil';
import { isRowSelectedFamilyState } from '../states/isRowSelectedFamilyState';
import { tableRowIdsState } from '../states/tableRowIdsState';
import { isRowSelectedFamilyState } from '../../record-table-row/states/isRowSelectedFamilyState';
import { tableRowIdsState } from '../../states/tableRowIdsState';
export const useResetTableRowSelection = () =>
useRecoilCallback(

11
front/src/modules/ui/object/record-table/hooks/useSelectAllRows.ts → front/src/modules/ui/object/record-table/hooks/internal/useSelectAllRows.ts
View File

@ -1,12 +1,10 @@
import { useRecoilCallback, useRecoilValue } from 'recoil';
import { useRecoilCallback } from 'recoil';
import { isRowSelectedFamilyState } from '../states/isRowSelectedFamilyState';
import { allRowsSelectedStatusSelector } from '../states/selectors/allRowsSelectedStatusSelector';
import { tableRowIdsState } from '../states/tableRowIdsState';
import { isRowSelectedFamilyState } from '../../record-table-row/states/isRowSelectedFamilyState';
import { allRowsSelectedStatusSelector } from '../../states/selectors/allRowsSelectedStatusSelector';
import { tableRowIdsState } from '../../states/tableRowIdsState';
export const useSelectAllRows = () => {
const allRowsSelectedStatus = useRecoilValue(allRowsSelectedStatusSelector);
const selectAllRows = useRecoilCallback(
({ set, snapshot }) =>
() => {
@ -35,7 +33,6 @@ export const useSelectAllRows = () => {
);
return {
allRowsSelectedStatus,
selectAllRows,
};
};

20
front/src/modules/ui/object/record-table/hooks/useSetRecordTableData.ts → front/src/modules/ui/object/record-table/hooks/internal/useSetRecordTableData.ts
View File

@ -1,17 +1,21 @@
import { useRecoilCallback } from 'recoil';
import { entityFieldsFamilyState } from '@/ui/object/field/states/entityFieldsFamilyState';
import { useView } from '@/views/hooks/useView';
import { isFetchingRecordTableDataState } from '../states/isFetchingRecordTableDataState';
import { numberOfTableRowsState } from '../states/numberOfTableRowsState';
import { tableRowIdsState } from '../states/tableRowIdsState';
import { isFetchingRecordTableDataState } from '../../states/isFetchingRecordTableDataState';
import { numberOfTableRowsState } from '../../states/numberOfTableRowsState';
import { tableRowIdsState } from '../../states/tableRowIdsState';
import { useResetTableRowSelection } from './useResetTableRowSelection';
export const useSetRecordTableData = () => {
type useSetRecordTableDataProps = {
onEntityCountChange: (entityCount: number) => void;
};
export const useSetRecordTableData = ({
onEntityCountChange,
}: useSetRecordTableDataProps) => {
const resetTableRowSelection = useResetTableRowSelection();
const { setEntityCountInCurrentView } = useView();
return useRecoilCallback(
({ set, snapshot }) =>
@ -39,9 +43,9 @@ export const useSetRecordTableData = () => {
resetTableRowSelection();
set(numberOfTableRowsState, entityIds.length);
setEntityCountInCurrentView(entityIds.length);
onEntityCountChange(entityIds.length);
set(isFetchingRecordTableDataState, false);
},
[resetTableRowSelection, setEntityCountInCurrentView],
[onEntityCountChange, resetTableRowSelection],
);
};

2
front/src/modules/ui/object/record-table/hooks/useSetRowSelectedState.ts → front/src/modules/ui/object/record-table/hooks/internal/useSetRowSelectedState.ts
View File

@ -1,6 +1,6 @@
import { useRecoilCallback } from 'recoil';
import { isRowSelectedFamilyState } from '../states/isRowSelectedFamilyState';
import { isRowSelectedFamilyState } from '../../record-table-row/states/isRowSelectedFamilyState';
export const useSetRowSelectedState = () =>
useRecoilCallback(({ set }) => (rowId: string, selected: boolean) => {

8
front/src/modules/ui/object/record-table/hooks/useSetSoftFocusPosition.ts → front/src/modules/ui/object/record-table/hooks/internal/useSetSoftFocusPosition.ts
View File

@ -1,9 +1,9 @@
import { useRecoilCallback } from 'recoil';
import { isSoftFocusActiveState } from '../states/isSoftFocusActiveState';
import { isSoftFocusOnTableCellFamilyState } from '../states/isSoftFocusOnTableCellFamilyState';
import { softFocusPositionState } from '../states/softFocusPositionState';
import { TableCellPosition } from '../types/TableCellPosition';
import { isSoftFocusActiveState } from '../../states/isSoftFocusActiveState';
import { isSoftFocusOnTableCellFamilyState } from '../../states/isSoftFocusOnTableCellFamilyState';
import { softFocusPositionState } from '../../states/softFocusPositionState';
import { TableCellPosition } from '../../types/TableCellPosition';
export const useSetSoftFocusPosition = () =>
useRecoilCallback(({ set, snapshot }) => {

0
front/src/modules/ui/object/record-table/hooks/useUpsertRecordTableItem.ts → front/src/modules/ui/object/record-table/hooks/internal/useUpsertRecordTableItem.ts
View File

48
front/src/modules/ui/object/record-table/hooks/useCellInputEventHandlers.ts
View File

@ -1,48 +0,0 @@
import { useCurrentTableCellEditMode } from '../table-cell/hooks/useCurrentTableCellEditMode';
import { useTableCell } from '../table-cell/hooks/useTableCell';
import { useMoveSoftFocus } from './useMoveSoftFocus';
export const useCellInputEventHandlers = <T>({
onSubmit,
onCancel,
}: {
onSubmit?: (newValue: T) => void;
onCancel?: () => void;
}) => {
const { closeTableCell: closeEditableCell } = useTableCell();
const { isCurrentTableCellInEditMode: isCurrentCellInEditMode } =
useCurrentTableCellEditMode();
const { moveRight, moveLeft, moveDown } = useMoveSoftFocus();
return {
handleClickOutside: (event: MouseEvent | TouchEvent, newValue: T) => {
if (isCurrentCellInEditMode) {
event.stopImmediatePropagation();
onSubmit?.(newValue);
closeEditableCell();
}
},
handleEscape: () => {
closeEditableCell();
onCancel?.();
},
handleEnter: (newValue: T) => {
onSubmit?.(newValue);
closeEditableCell();
moveDown();
},
handleTab: (newValue: T) => {
onSubmit?.(newValue);
closeEditableCell();
moveRight();
},
handleShiftTab: (newValue: T) => {
onSubmit?.(newValue);
closeEditableCell();
moveLeft();
},
};
};

9
front/src/modules/ui/object/record-table/hooks/useCurrentEntityId.ts
View File

@ -1,9 +0,0 @@
import { useContext } from 'react';
import { RowIdContext } from '../contexts/RowIdContext';
export const useCurrentRowEntityId = () => {
const currentEntityId = useContext(RowIdContext);
return currentEntityId;
};

62
front/src/modules/ui/object/record-table/hooks/useMapKeyboardToSoftFocus.ts
View File

@ -1,62 +0,0 @@
import { Key } from 'ts-key-enum';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import { TableHotkeyScope } from '../types/TableHotkeyScope';
import { useDisableSoftFocus } from './useDisableSoftFocus';
import { useMoveSoftFocus } from './useMoveSoftFocus';
export const useMapKeyboardToSoftFocus = () => {
const { moveDown, moveLeft, moveRight, moveUp } = useMoveSoftFocus();
const disableSoftFocus = useDisableSoftFocus();
const setHotkeyScope = useSetHotkeyScope();
useScopedHotkeys(
[Key.ArrowUp, `${Key.Shift}+${Key.Enter}`],
() => {
moveUp();
},
TableHotkeyScope.TableSoftFocus,
[moveUp],
);
useScopedHotkeys(
Key.ArrowDown,
() => {
moveDown();
},
TableHotkeyScope.TableSoftFocus,
[moveDown],
);
useScopedHotkeys(
[Key.ArrowLeft, `${Key.Shift}+${Key.Tab}`],
() => {
moveLeft();
},
TableHotkeyScope.TableSoftFocus,
[moveLeft],
);
useScopedHotkeys(
[Key.ArrowRight, Key.Tab],
() => {
moveRight();
},
TableHotkeyScope.TableSoftFocus,
[moveRight],
);
useScopedHotkeys(
[Key.Escape],
() => {
setHotkeyScope(TableHotkeyScope.Table, { goto: true });
disableSoftFocus();
},
TableHotkeyScope.TableSoftFocus,
[disableSoftFocus],
);
};

159
front/src/modules/ui/object/record-table/hooks/useMoveSoftFocus.ts
View File

@ -1,159 +0,0 @@
import { useRecoilCallback } from 'recoil';
import { useRecoilScopeId } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopeId';
import { numberOfTableRowsState } from '../states/numberOfTableRowsState';
import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
import { numberOfTableColumnsScopedSelector } from '../states/selectors/numberOfTableColumnsScopedSelector';
import { softFocusPositionState } from '../states/softFocusPositionState';
import { useSetSoftFocusPosition } from './useSetSoftFocusPosition';
// TODO: stories
export const useMoveSoftFocus = () => {
const tableScopeId = useRecoilScopeId(TableRecoilScopeContext);
const setSoftFocusPosition = useSetSoftFocusPosition();
const moveUp = useRecoilCallback(
({ snapshot }) =>
() => {
const softFocusPosition = snapshot
.getLoadable(softFocusPositionState)
.valueOrThrow();
let newRowNumber = softFocusPosition.row - 1;
if (newRowNumber < 0) {
newRowNumber = 0;
}
setSoftFocusPosition({
...softFocusPosition,
row: newRowNumber,
});
},
[setSoftFocusPosition],
);
const moveDown = useRecoilCallback(
({ snapshot }) =>
() => {
const softFocusPosition = snapshot
.getLoadable(softFocusPositionState)
.valueOrThrow();
const numberOfTableRows = snapshot
.getLoadable(numberOfTableRowsState)
.valueOrThrow();
let newRowNumber = softFocusPosition.row + 1;
if (newRowNumber >= numberOfTableRows) {
newRowNumber = numberOfTableRows - 1;
}
setSoftFocusPosition({
...softFocusPosition,
row: newRowNumber,
});
},
[setSoftFocusPosition],
);
const moveRight = useRecoilCallback(
({ snapshot }) =>
() => {
const softFocusPosition = snapshot
.getLoadable(softFocusPositionState)
.valueOrThrow();
const numberOfTableColumns = snapshot
.getLoadable(numberOfTableColumnsScopedSelector(tableScopeId))
.valueOrThrow();
const numberOfTableRows = snapshot
.getLoadable(numberOfTableRowsState)
.valueOrThrow();
const currentColumnNumber = softFocusPosition.column;
const currentRowNumber = softFocusPosition.row;
const isLastRowAndLastColumn =
currentColumnNumber === numberOfTableColumns - 1 &&
currentRowNumber === numberOfTableRows - 1;
const isLastColumnButNotLastRow =
currentColumnNumber === numberOfTableColumns - 1 &&
currentRowNumber !== numberOfTableRows - 1;
const isNotLastColumn =
currentColumnNumber !== numberOfTableColumns - 1;
if (isLastRowAndLastColumn) {
return;
}
if (isNotLastColumn) {
setSoftFocusPosition({
row: currentRowNumber,
column: currentColumnNumber + 1,
});
} else if (isLastColumnButNotLastRow) {
setSoftFocusPosition({
row: currentRowNumber + 1,
column: 0,
});
}
},
[setSoftFocusPosition, tableScopeId],
);
const moveLeft = useRecoilCallback(
({ snapshot }) =>
() => {
const softFocusPosition = snapshot
.getLoadable(softFocusPositionState)
.valueOrThrow();
const numberOfTableColumns = snapshot
.getLoadable(numberOfTableColumnsScopedSelector(tableScopeId))
.valueOrThrow();
const currentColumnNumber = softFocusPosition.column;
const currentRowNumber = softFocusPosition.row;
const isFirstRowAndFirstColumn =
currentColumnNumber === 0 && currentRowNumber === 0;
const isFirstColumnButNotFirstRow =
currentColumnNumber === 0 && currentRowNumber > 0;
const isNotFirstColumn = currentColumnNumber > 0;
if (isFirstRowAndFirstColumn) {
return;
}
if (isNotFirstColumn) {
setSoftFocusPosition({
row: currentRowNumber,
column: currentColumnNumber - 1,
});
} else if (isFirstColumnButNotFirstRow) {
setSoftFocusPosition({
row: currentRowNumber - 1,
column: numberOfTableColumns - 1,
});
}
},
[setSoftFocusPosition, tableScopeId],
);
return {
moveDown,
moveLeft,
moveRight,
moveUp,
};
};

316
front/src/modules/ui/object/record-table/hooks/useRecordTable.ts Normal file
View File

@ -0,0 +1,316 @@
import { useRecoilCallback, useSetRecoilState } from 'recoil';
import { Key } from 'ts-key-enum';
import { RecordTableScopeInternalContext } from '@/ui/object/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext';
import { onColumnsChangeScopedState } from '@/ui/object/record-table/states/onColumnsChangeScopedState';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId';
import { getScopedState } from '@/ui/utilities/recoil-scope/utils/getScopedState';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
import { FieldMetadata } from '../../field/types/FieldMetadata';
import { numberOfTableRowsState } from '../states/numberOfTableRowsState';
import { onEntityCountChangeScopedState } from '../states/onEntityCountChange';
import { numberOfTableColumnsScopedSelector } from '../states/selectors/numberOfTableColumnsScopedSelector';
import { softFocusPositionState } from '../states/softFocusPositionState';
import { ColumnDefinition } from '../types/ColumnDefinition';
import { TableHotkeyScope } from '../types/TableHotkeyScope';
import { useDisableSoftFocus } from './internal/useDisableSoftFocus';
import { useGetIsSomeCellInEditMode } from './internal/useGetIsSomeCellInEditMode';
import { useLeaveTableFocus } from './internal/useLeaveTableFocus';
import { useRecordTableScopedStates } from './internal/useRecordTableScopedStates';
import { useResetTableRowSelection } from './internal/useResetTableRowSelection';
import { useSelectAllRows } from './internal/useSelectAllRows';
import { useSetRecordTableData } from './internal/useSetRecordTableData';
import { useSetRowSelectedState } from './internal/useSetRowSelectedState';
import { useSetSoftFocusPosition } from './internal/useSetSoftFocusPosition';
import { useUpsertRecordTableItem } from './internal/useUpsertRecordTableItem';
type useRecordTableProps = {
recordTableScopeId?: string;
};
export const useRecordTable = (props?: useRecordTableProps) => {
const scopeId = useAvailableScopeIdOrThrow(
RecordTableScopeInternalContext,
props?.recordTableScopeId,
);
const {
availableTableColumnsState,
tableFiltersState,
tableSortsState,
tableColumnsState,
} = useRecordTableScopedStates({
customRecordTableScopeId: scopeId,
});
const setAvailableTableColumns = useSetRecoilState(
availableTableColumnsState,
);
const setTableFilters = useSetRecoilState(tableFiltersState);
const setTableSorts = useSetRecoilState(tableSortsState);
const setTableColumns = useSetRecoilState(tableColumnsState);
const onColumnsChange = useRecoilCallback(
({ snapshot }) =>
(columns: ColumnDefinition<FieldMetadata>[]) => {
const onColumnsChangeState = getScopedState(
onColumnsChangeScopedState,
scopeId,
);
const onColumnsChange = getSnapshotValue(
snapshot,
onColumnsChangeState,
);
onColumnsChange?.(columns);
},
[scopeId],
);
const onEntityCountChange = useRecoilCallback(
({ snapshot }) =>
(count: number) => {
const onEntityCountChangeState = getScopedState(
onEntityCountChangeScopedState,
scopeId,
);
const onEntityCountChange = getSnapshotValue(
snapshot,
onEntityCountChangeState,
);
onEntityCountChange?.(count);
},
[scopeId],
);
const setRecordTableData = useSetRecordTableData({ onEntityCountChange });
const leaveTableFocus = useLeaveTableFocus();
const getIsSomeCellInEditMode = useGetIsSomeCellInEditMode();
const setRowSelectedState = useSetRowSelectedState();
const resetTableRowSelection = useResetTableRowSelection();
const upsertRecordTableItem = useUpsertRecordTableItem();
const setSoftFocusPosition = useSetSoftFocusPosition();
const moveUp = useRecoilCallback(
({ snapshot }) =>
() => {
const softFocusPosition = snapshot
.getLoadable(softFocusPositionState)
.valueOrThrow();
let newRowNumber = softFocusPosition.row - 1;
if (newRowNumber < 0) {
newRowNumber = 0;
}
setSoftFocusPosition({
...softFocusPosition,
row: newRowNumber,
});
},
[setSoftFocusPosition],
);
const moveDown = useRecoilCallback(
({ snapshot }) =>
() => {
const softFocusPosition = snapshot
.getLoadable(softFocusPositionState)
.valueOrThrow();
const numberOfTableRows = snapshot
.getLoadable(numberOfTableRowsState)
.valueOrThrow();
let newRowNumber = softFocusPosition.row + 1;
if (newRowNumber >= numberOfTableRows) {
newRowNumber = numberOfTableRows - 1;
}
setSoftFocusPosition({
...softFocusPosition,
row: newRowNumber,
});
},
[setSoftFocusPosition],
);
const moveRight = useRecoilCallback(
({ snapshot }) =>
() => {
const softFocusPosition = snapshot
.getLoadable(softFocusPositionState)
.valueOrThrow();
const numberOfTableColumns = snapshot
.getLoadable(numberOfTableColumnsScopedSelector(scopeId))
.valueOrThrow();
const numberOfTableRows = snapshot
.getLoadable(numberOfTableRowsState)
.valueOrThrow();
const currentColumnNumber = softFocusPosition.column;
const currentRowNumber = softFocusPosition.row;
const isLastRowAndLastColumn =
currentColumnNumber === numberOfTableColumns - 1 &&
currentRowNumber === numberOfTableRows - 1;
const isLastColumnButNotLastRow =
currentColumnNumber === numberOfTableColumns - 1 &&
currentRowNumber !== numberOfTableRows - 1;
const isNotLastColumn =
currentColumnNumber !== numberOfTableColumns - 1;
if (isLastRowAndLastColumn) {
return;
}
if (isNotLastColumn) {
setSoftFocusPosition({
row: currentRowNumber,
column: currentColumnNumber + 1,
});
} else if (isLastColumnButNotLastRow) {
setSoftFocusPosition({
row: currentRowNumber + 1,
column: 0,
});
}
},
[scopeId, setSoftFocusPosition],
);
const moveLeft = useRecoilCallback(
({ snapshot }) =>
() => {
const softFocusPosition = snapshot
.getLoadable(softFocusPositionState)
.valueOrThrow();
const numberOfTableColumns = snapshot
.getLoadable(numberOfTableColumnsScopedSelector(scopeId))
.valueOrThrow();
const currentColumnNumber = softFocusPosition.column;
const currentRowNumber = softFocusPosition.row;
const isFirstRowAndFirstColumn =
currentColumnNumber === 0 && currentRowNumber === 0;
const isFirstColumnButNotFirstRow =
currentColumnNumber === 0 && currentRowNumber > 0;
const isNotFirstColumn = currentColumnNumber > 0;
if (isFirstRowAndFirstColumn) {
return;
}
if (isNotFirstColumn) {
setSoftFocusPosition({
row: currentRowNumber,
column: currentColumnNumber - 1,
});
} else if (isFirstColumnButNotFirstRow) {
setSoftFocusPosition({
row: currentRowNumber - 1,
column: numberOfTableColumns - 1,
});
}
},
[scopeId, setSoftFocusPosition],
);
const useMapKeyboardToSoftFocus = () => {
const disableSoftFocus = useDisableSoftFocus();
const setHotkeyScope = useSetHotkeyScope();
useScopedHotkeys(
[Key.ArrowUp, `${Key.Shift}+${Key.Enter}`],
() => {
moveUp();
},
TableHotkeyScope.TableSoftFocus,
[moveUp],
);
useScopedHotkeys(
Key.ArrowDown,
() => {
moveDown();
},
TableHotkeyScope.TableSoftFocus,
[moveDown],
);
useScopedHotkeys(
[Key.ArrowLeft, `${Key.Shift}+${Key.Tab}`],
() => {
moveLeft();
},
TableHotkeyScope.TableSoftFocus,
[moveLeft],
);
useScopedHotkeys(
[Key.ArrowRight, Key.Tab],
() => {
moveRight();
},
TableHotkeyScope.TableSoftFocus,
[moveRight],
);
useScopedHotkeys(
[Key.Escape],
() => {
setHotkeyScope(TableHotkeyScope.Table, { goto: true });
disableSoftFocus();
},
TableHotkeyScope.TableSoftFocus,
[disableSoftFocus],
);
};
const { selectAllRows } = useSelectAllRows();
return {
scopeId,
onColumnsChange,
setAvailableTableColumns,
setTableFilters,
setTableSorts,
setRecordTableData,
setTableColumns,
leaveTableFocus,
getIsSomeCellInEditMode,
setRowSelectedState,
resetTableRowSelection,
upsertRecordTableItem,
moveDown,
moveLeft,
moveRight,
moveUp,
useMapKeyboardToSoftFocus,
selectAllRows,
};
};

41
front/src/modules/ui/object/record-table/hooks/useTableColumns.ts
View File

@ -1,42 +1,35 @@
import { useCallback, useContext } from 'react';
import { useSetRecoilState } from 'recoil';
import { useCallback } from 'react';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
import { useMoveViewColumns } from '@/ui/object/record-table/hooks/useMoveViewColumns';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
import { useMoveViewColumns } from '@/views/hooks/useMoveViewColumns';
import { useView } from '@/views/hooks/useView';
import { TableContext } from '../contexts/TableContext';
import { availableTableColumnsScopedState } from '../states/availableTableColumnsScopedState';
import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
import { savedTableColumnsFamilyState } from '../states/savedTableColumnsFamilyState';
import { visibleTableColumnsScopedSelector } from '../states/selectors/visibleTableColumnsScopedSelector';
import { tableColumnsScopedState } from '../states/tableColumnsScopedState';
import { ColumnDefinition } from '../types/ColumnDefinition';
export const useTableColumns = () => {
const { onColumnsChange } = useContext(TableContext);
import { useRecordTableScopedStates } from './internal/useRecordTableScopedStates';
const [availableTableColumns] = useRecoilScopedState(
availableTableColumnsScopedState,
TableRecoilScopeContext,
);
export const useTableColumns = () => {
const { onColumnsChange, setTableColumns } = useRecordTable();
const {
availableTableColumnsState,
tableColumnsState,
visibleTableColumnsSelector,
} = useRecordTableScopedStates();
const availableTableColumns = useRecoilValue(availableTableColumnsState);
const { currentViewId } = useView();
const setSavedTableColumns = useSetRecoilState(
savedTableColumnsFamilyState(currentViewId),
);
const [tableColumns, setTableColumns] = useRecoilScopedState(
tableColumnsScopedState,
TableRecoilScopeContext,
);
const visibleTableColumns = useRecoilScopedValue(
visibleTableColumnsScopedSelector,
TableRecoilScopeContext,
);
const tableColumns = useRecoilValue(tableColumnsState);
const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector);
const { handleColumnMove } = useMoveViewColumns();
const handleColumnsChange = useCallback(

33
front/src/modules/ui/object/record-table/hooks/useUpsertRecordTableItems.ts
View File

@ -1,33 +0,0 @@
import { useRecoilCallback } from 'recoil';
import { entityFieldsFamilyState } from '@/ui/object/field/states/entityFieldsFamilyState';
export const useUpsertRecordTableItems = () =>
useRecoilCallback(
({ set, snapshot }) =>
<T extends { id: string }>(entities: T[]) => {
// Create a map of new entities for quick lookup.
const newEntityMap = new Map(
entities.map((entity) => [entity.id, entity]),
);
// Filter out entities that are already the same in the state.
const entitiesToUpdate = entities.filter((entity) => {
const currentEntity = snapshot
.getLoadable(entityFieldsFamilyState(entity.id))
.valueMaybe();
return (
!currentEntity ||
JSON.stringify(currentEntity) !==
JSON.stringify(newEntityMap.get(entity.id))
);
});
// Batch set state for the filtered entities.
for (const entity of entitiesToUpdate) {
set(entityFieldsFamilyState(entity.id), entity);
}
},
[],
);

3
front/src/modules/ui/object/record-table/hooks/useUpsertTableRowId.ts
View File

@ -2,6 +2,9 @@ import { useRecoilCallback } from 'recoil';
import { tableRowIdsState } from '../states/tableRowIdsState';
// Used only in company table and people table
// Remove after refactoring
export const useUpsertTableRowId = () =>
useRecoilCallback(
({ set, snapshot }) =>

17
front/src/modules/ui/object/record-table/hooks/useUpsertTableRowIds.ts
View File

@ -1,17 +0,0 @@
import { useRecoilCallback } from 'recoil';
import { tableRowIdsState } from '../states/tableRowIdsState';
export const useUpsertTableRowIds = () =>
useRecoilCallback(
({ set, snapshot }) =>
(rowIds: string[]) => {
const currentRowIds = snapshot
.getLoadable(tableRowIdsState)
.valueOrThrow();
const uniqueRowIds = Array.from(new Set([...rowIds, ...currentRowIds]));
set(tableRowIdsState, uniqueRowIds);
},
[],
);

18
front/src/modules/ui/object/record-table/options/components/TableOptionsDropdownContent.tsx
View File

@ -11,15 +11,12 @@ import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownM
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { ViewFieldsVisibilityDropdownSection } from '@/views/components/ViewFieldsVisibilityDropdownSection';
import { useViewScopedStates } from '@/views/hooks/internal/useViewScopedStates';
import { useView } from '@/views/hooks/useView';
import { useRecordTableScopedStates } from '../../hooks/internal/useRecordTableScopedStates';
import { useTableColumns } from '../../hooks/useTableColumns';
import { TableRecoilScopeContext } from '../../states/recoil-scope-contexts/TableRecoilScopeContext';
import { hiddenTableColumnsScopedSelector } from '../../states/selectors/hiddenTableColumnsScopedSelector';
import { visibleTableColumnsScopedSelector } from '../../states/selectors/visibleTableColumnsScopedSelector';
import { TableOptionsHotkeyScope } from '../../types/TableOptionsHotkeyScope';
type TableOptionsMenu = 'fields';
@ -43,14 +40,11 @@ export const TableOptionsDropdownContent = ({
const viewEditInputRef = useRef<HTMLInputElement>(null);
const visibleTableColumns = useRecoilScopedValue(
visibleTableColumnsScopedSelector,
TableRecoilScopeContext,
);
const hiddenTableColumns = useRecoilScopedValue(
hiddenTableColumnsScopedSelector,
TableRecoilScopeContext,
);
const { hiddenTableColumnsSelector, visibleTableColumnsSelector } =
useRecordTableScopedStates();
const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector);
const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector);
const { handleColumnVisibilityChange, handleColumnReorder } =
useTableColumns();

6
front/src/modules/ui/object/record-table/table-cell/components/TableCell.tsx → front/src/modules/ui/object/record-table/record-table-cell/components/RecordTableCell.tsx
View File

@ -3,10 +3,10 @@ import { FieldInput } from '@/ui/object/field/components/FieldInput';
import { FieldInputEvent } from '@/ui/object/field/types/FieldInputEvent';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { useMoveSoftFocus } from '../../hooks/useMoveSoftFocus';
import { useRecordTable } from '../../hooks/useRecordTable';
import { useTableCell } from '../hooks/useTableCell';
import { TableCellContainer } from './TableCellContainer';
import { TableCellContainer } from './RecordTableCellContainer';
export const TableCell = ({
customHotkeyScope,
@ -15,7 +15,7 @@ export const TableCell = ({
}) => {
const { closeTableCell } = useTableCell();
const { moveLeft, moveRight, moveDown } = useMoveSoftFocus();
const { moveLeft, moveRight, moveDown } = useRecordTable();
const handleEnter: FieldInputEvent = (persistField) => {
persistField();

0
front/src/modules/ui/object/record-table/table-cell/components/TableCellButton.tsx → front/src/modules/ui/object/record-table/record-table-cell/components/RecordTableCellButton.tsx
View File

14
front/src/modules/ui/object/record-table/table-cell/components/TableCellContainer.tsx → front/src/modules/ui/object/record-table/record-table-cell/components/RecordTableCellContainer.tsx
View File

@ -9,18 +9,18 @@ import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { CellHotkeyScopeContext } from '../../contexts/CellHotkeyScopeContext';
import { ColumnIndexContext } from '../../contexts/ColumnIndexContext';
import { useGetIsSomeCellInEditMode } from '../../hooks/useGetIsSomeCellInEditMode';
import { useMoveSoftFocusToCurrentCellOnHover } from '../../hooks/useMoveSoftFocusToCurrentCellOnHover';
import { useRecordTable } from '../../hooks/useRecordTable';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
import { useCurrentTableCellEditMode } from '../hooks/useCurrentTableCellEditMode';
import { useIsSoftFocusOnCurrentTableCell } from '../hooks/useIsSoftFocusOnCurrentTableCell';
import { useMoveSoftFocusToCurrentCellOnHover } from '../hooks/useMoveSoftFocusToCurrentCellOnHover';
import { useSetSoftFocusOnCurrentTableCell } from '../hooks/useSetSoftFocusOnCurrentTableCell';
import { useTableCell } from '../hooks/useTableCell';
import { TableCellButton } from './TableCellButton';
import { TableCellDisplayMode } from './TableCellDisplayMode';
import { TableCellEditMode } from './TableCellEditMode';
import { TableCellSoftFocusMode } from './TableCellSoftFocusMode';
import { TableCellButton } from './RecordTableCellButton';
import { TableCellDisplayMode } from './RecordTableCellDisplayMode';
import { TableCellEditMode } from './RecordTableCellEditMode';
import { TableCellSoftFocusMode } from './RecordTableCellSoftFocusMode';
const StyledCellBaseContainer = styled.div`
align-items: center;
@ -57,7 +57,7 @@ export const TableCellContainer = ({
}: TableCellContainerProps) => {
const { isCurrentTableCellInEditMode } = useCurrentTableCellEditMode();
const getIsSomeCellInEditMode = useGetIsSomeCellInEditMode();
const { getIsSomeCellInEditMode } = useRecordTable();
const [isHovered, setIsHovered] = useState(false);

0
front/src/modules/ui/object/record-table/table-cell/components/TableCellDisplayContainer.tsx → front/src/modules/ui/object/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx
View File

2
front/src/modules/ui/object/record-table/table-cell/components/TableCellDisplayMode.tsx → front/src/modules/ui/object/record-table/record-table-cell/components/RecordTableCellDisplayMode.tsx
View File

@ -3,7 +3,7 @@ import { useIsFieldInputOnly } from '@/ui/object/field/hooks/useIsFieldInputOnly
import { useSetSoftFocusOnCurrentTableCell } from '../hooks/useSetSoftFocusOnCurrentTableCell';
import { useTableCell } from '../hooks/useTableCell';
import { TableCellDisplayContainer } from './TableCellDisplayContainer';
import { TableCellDisplayContainer } from './RecordTableCellDisplayContainer';
export const TableCellDisplayMode = ({
children,

0
front/src/modules/ui/object/record-table/table-cell/components/TableCellEditButton.tsx → front/src/modules/ui/object/record-table/record-table-cell/components/RecordTableCellEditButton.tsx
View File

0
front/src/modules/ui/object/record-table/table-cell/components/TableCellEditMode.tsx → front/src/modules/ui/object/record-table/record-table-cell/components/RecordTableCellEditMode.tsx
View File

2
front/src/modules/ui/object/record-table/table-cell/components/TableCellSoftFocusMode.tsx → front/src/modules/ui/object/record-table/record-table-cell/components/RecordTableCellSoftFocusMode.tsx
View File

@ -9,7 +9,7 @@ import { isNonTextWritingKey } from '@/ui/utilities/hotkey/utils/isNonTextWritin
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
import { useTableCell } from '../hooks/useTableCell';
import { TableCellDisplayContainer } from './TableCellDisplayContainer';
import { TableCellDisplayContainer } from './RecordTableCellDisplayContainer';
type TableCellSoftFocusModeProps = PropsWithChildren<unknown>;

0
front/src/modules/ui/object/record-table/table-cell/hooks/useCurrentCellPosition.ts → front/src/modules/ui/object/record-table/record-table-cell/hooks/useCurrentCellPosition.ts
View File

2
front/src/modules/ui/object/record-table/table-cell/hooks/useCurrentTableCellEditMode.ts → front/src/modules/ui/object/record-table/record-table-cell/hooks/useCurrentTableCellEditMode.ts
View File

@ -1,7 +1,7 @@
import { useCallback } from 'react';
import { useRecoilState } from 'recoil';
import { useMoveEditModeToTableCellPosition } from '../../hooks/useMoveEditModeToCellPosition';
import { useMoveEditModeToTableCellPosition } from '../../hooks/internal/useMoveEditModeToCellPosition';
import { isTableCellInEditModeFamilyState } from '../../states/isTableCellInEditModeFamilyState';
import { useCurrentTableCellPosition } from './useCurrentCellPosition';

0
front/src/modules/ui/object/record-table/table-cell/hooks/useIsSoftFocusOnCurrentTableCell.ts → front/src/modules/ui/object/record-table/record-table-cell/hooks/useIsSoftFocusOnCurrentTableCell.ts
View File

9
front/src/modules/ui/object/record-table/hooks/useMoveSoftFocusToCurrentCellOnHover.ts → front/src/modules/ui/object/record-table/record-table-cell/hooks/useMoveSoftFocusToCurrentCellOnHover.ts
View File

@ -2,10 +2,11 @@ import { useRecoilCallback } from 'recoil';
import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
import { currentTableCellInEditModePositionState } from '../states/currentTableCellInEditModePositionState';
import { isTableCellInEditModeFamilyState } from '../states/isTableCellInEditModeFamilyState';
import { useSetSoftFocusOnCurrentTableCell } from '../table-cell/hooks/useSetSoftFocusOnCurrentTableCell';
import { TableHotkeyScope } from '../types/TableHotkeyScope';
import { currentTableCellInEditModePositionState } from '../../states/currentTableCellInEditModePositionState';
import { isTableCellInEditModeFamilyState } from '../../states/isTableCellInEditModeFamilyState';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
import { useSetSoftFocusOnCurrentTableCell } from './useSetSoftFocusOnCurrentTableCell';
export const useMoveSoftFocusToCurrentCellOnHover = () => {
const setSoftFocusOnCurrentTableCell = useSetSoftFocusOnCurrentTableCell();

2
front/src/modules/ui/object/record-table/table-cell/hooks/useSetSoftFocusOnCurrentTableCell.ts → front/src/modules/ui/object/record-table/record-table-cell/hooks/useSetSoftFocusOnCurrentTableCell.ts
View File

@ -2,7 +2,7 @@ import { useRecoilCallback } from 'recoil';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import { useSetSoftFocusPosition } from '../../hooks/useSetSoftFocusPosition';
import { useSetSoftFocusPosition } from '../../hooks/internal/useSetSoftFocusPosition';
import { isSoftFocusActiveState } from '../../states/isSoftFocusActiveState';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';

2
front/src/modules/ui/object/record-table/table-cell/hooks/useTableCell.ts → front/src/modules/ui/object/record-table/record-table-cell/hooks/useTableCell.ts
View File

@ -12,7 +12,7 @@ import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { CellHotkeyScopeContext } from '../../contexts/CellHotkeyScopeContext';
import { ColumnIndexContext } from '../../contexts/ColumnIndexContext';
import { useCloseCurrentTableCellInEditMode } from '../../hooks/useCloseCurrentTableCellInEditMode';
import { useCloseCurrentTableCellInEditMode } from '../../hooks/internal/useCloseCurrentTableCellInEditMode';
import { TableHotkeyScope } from '../../types/TableHotkeyScope';
import { useCurrentTableCellEditMode } from './useCurrentTableCellEditMode';

0
front/src/modules/ui/object/record-table/table-cell/states/isCreateModeScopedState.ts → front/src/modules/ui/object/record-table/record-table-cell/states/isCreateModeScopedState.ts
View File

2
front/src/modules/ui/object/record-table/hooks/useCurrentRowSelected.ts → front/src/modules/ui/object/record-table/record-table-row/hooks/useCurrentRowSelected.ts
View File

@ -1,7 +1,7 @@
import { useContext } from 'react';
import { useRecoilCallback, useRecoilState } from 'recoil';
import { RowIdContext } from '../contexts/RowIdContext';
import { RowIdContext } from '../../contexts/RowIdContext';
import { isRowSelectedFamilyState } from '../states/isRowSelectedFamilyState';
export const useCurrentRowSelected = () => {

0
front/src/modules/ui/object/record-table/states/isRowSelectedFamilyState.ts → front/src/modules/ui/object/record-table/record-table-row/states/isRowSelectedFamilyState.ts
View File

37
front/src/modules/ui/object/record-table/scopes/RecordTableScope.tsx Normal file
View File

@ -0,0 +1,37 @@
import { ReactNode } from 'react';
import { FieldMetadata } from '../../field/types/FieldMetadata';
import { ColumnDefinition } from '../types/ColumnDefinition';
import { RecordTableScopeInternalContext } from './scope-internal-context/RecordTableScopeInternalContext';
import { RecordTableScopeInitEffect } from './RecordTableScopeInitEffect';
type RecordTableScopeProps = {
children: ReactNode;
recordTableScopeId: string;
onColumnsChange: (columns: ColumnDefinition<FieldMetadata>[]) => void;
onEntityCountChange: (entityCount: number) => void;
};
export const RecordTableScope = ({
children,
recordTableScopeId,
onColumnsChange,
onEntityCountChange,
}: RecordTableScopeProps) => {
return (
<RecordTableScopeInternalContext.Provider
value={{
scopeId: recordTableScopeId,
onColumnsChange,
onEntityCountChange,
}}
>
<RecordTableScopeInitEffect
onColumnsChange={onColumnsChange}
onEntityCountChange={onEntityCountChange}
/>
{children}
</RecordTableScopeInternalContext.Provider>
);
};

34
front/src/modules/ui/object/record-table/scopes/RecordTableScopeInitEffect.tsx Normal file
View File

@ -0,0 +1,34 @@
import { useEffect } from 'react';
import { useSetRecoilState } from 'recoil';
import { FieldMetadata } from '../../field/types/FieldMetadata';
import { useRecordTableScopedStates } from '../hooks/internal/useRecordTableScopedStates';
import { ColumnDefinition } from '../types/ColumnDefinition';
type RecordTableScopeInitEffectProps = {
onColumnsChange: (columns: ColumnDefinition<FieldMetadata>[]) => void;
onEntityCountChange?: (count: number) => void | Promise<void>;
};
export const RecordTableScopeInitEffect = ({
onColumnsChange,
onEntityCountChange,
}: RecordTableScopeInitEffectProps) => {
const { onColumnsChangeState, onEntityCountChangeState } =
useRecordTableScopedStates();
const setOnEntityCountChange = useSetRecoilState(onEntityCountChangeState);
const setOnColumnsChange = useSetRecoilState(onColumnsChangeState);
useEffect(() => {
setOnEntityCountChange(() => onEntityCountChange);
setOnColumnsChange(() => onColumnsChange);
}, [
onColumnsChange,
onEntityCountChange,
setOnColumnsChange,
setOnEntityCountChange,
]);
return <></>;
};

13
front/src/modules/ui/object/record-table/scopes/scope-internal-context/RecordTableScopeInternalContext.ts Normal file
View File

@ -0,0 +1,13 @@
import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
import { ScopedStateKey } from '@/ui/utilities/recoil-scope/scopes-internal/types/ScopedStateKey';
import { createScopeInternalContext } from '@/ui/utilities/recoil-scope/scopes-internal/utils/createScopeInternalContext';
import { ColumnDefinition } from '../../types/ColumnDefinition';
type RecordTableScopeInternalContextProps = ScopedStateKey & {
onColumnsChange: (columns: ColumnDefinition<FieldMetadata>[]) => void;
onEntityCountChange: (entityCount: number) => void;
};
export const RecordTableScopeInternalContext =
createScopeInternalContext<RecordTableScopeInternalContextProps>();

10
front/src/modules/ui/object/record-table/states/availableTableColumnsScopedState.ts
View File

@ -1,13 +1,11 @@
import { atomFamily } from 'recoil';
import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
import { ColumnDefinition } from '../types/ColumnDefinition';
export const availableTableColumnsScopedState = atomFamily<
ColumnDefinition<FieldMetadata>[],
string
export const availableTableColumnsScopedState = createScopedState<
ColumnDefinition<FieldMetadata>[]
>({
key: 'availableTableColumnsScopedState',
default: [],
defaultValue: [],
});

11
front/src/modules/ui/object/record-table/states/onColumnsChangeScopedState.ts Normal file
View File

@ -0,0 +1,11 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
import { FieldMetadata } from '../../field/types/FieldMetadata';
import { ColumnDefinition } from '../types/ColumnDefinition';
export const onColumnsChangeScopedState = createScopedState<
((columns: ColumnDefinition<FieldMetadata>[]) => void) | undefined
>({
key: 'onColumnsChangeScopedState',
defaultValue: undefined,
});

8
front/src/modules/ui/object/record-table/states/onEntityCountChange.ts Normal file
View File

@ -0,0 +1,8 @@
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
export const onEntityCountChangeScopedState = createScopedState<
((entityCount: number) => void) | undefined
>({
key: 'onEntityCountChangeScopedState',
defaultValue: undefined,
});

3
front/src/modules/ui/object/record-table/states/recoil-scope-contexts/TableRecoilScopeContext.ts
View File

@ -1,3 +0,0 @@
import { createContext } from 'react';
export const TableRecoilScopeContext = createContext<string | null>(null);

4
front/src/modules/ui/object/record-table/states/selectors/hiddenTableColumnsScopedSelector.ts
View File

@ -8,10 +8,10 @@ export const hiddenTableColumnsScopedSelector = selectorFamily({
get:
(scopeId: string) =>
({ get }) => {
const columns = get(tableColumnsScopedState(scopeId));
const columns = get(tableColumnsScopedState({ scopeId }));
const columnKeys = columns.map(({ fieldId }) => fieldId);
const otherAvailableColumns = get(
availableTableColumnsScopedState(scopeId),
availableTableColumnsScopedState({ scopeId }),
).filter(({ fieldId }) => !columnKeys.includes(fieldId));
return [

2
front/src/modules/ui/object/record-table/states/selectors/numberOfTableColumnsScopedSelector.ts
View File

@ -7,5 +7,5 @@ export const numberOfTableColumnsScopedSelector = selectorFamily({
get:
(scopeId: string) =>
({ get }) =>
get(tableColumnsScopedState(scopeId)).length,
get(tableColumnsScopedState({ scopeId })).length,
});

2
front/src/modules/ui/object/record-table/states/selectors/selectedRowIdsSelector.ts
View File

@ -1,6 +1,6 @@
import { selector } from 'recoil';
import { isRowSelectedFamilyState } from '../isRowSelectedFamilyState';
import { isRowSelectedFamilyState } from '../../record-table-row/states/isRowSelectedFamilyState';
import { tableRowIdsState } from '../tableRowIdsState';
export const selectedRowIdsSelector = selector<string[]>({

2
front/src/modules/ui/object/record-table/states/selectors/tableColumnsByKeyScopedSelector.ts
View File

@ -10,7 +10,7 @@ export const tableColumnsByKeyScopedSelector = selectorFamily({
get:
(scopeId: string) =>
({ get }) =>
get(tableColumnsScopedState(scopeId)).reduce<
get(tableColumnsScopedState({ scopeId })).reduce<
Record<string, ColumnDefinition<FieldMetadata>>
>((result, column) => ({ ...result, [column.fieldId]: column }), {}),
});

4
front/src/modules/ui/object/record-table/states/selectors/tableSortsOrderByScopedSelector.ts
View File

@ -10,7 +10,9 @@ export const tableSortsOrderByScopedSelector = selectorFamily({
get:
(scopeId: string) =>
({ get }) => {
const orderBy = reduceSortsToOrderBy(get(tableSortsScopedState(scopeId)));
const orderBy = reduceSortsToOrderBy(
get(tableSortsScopedState({ scopeId })),
);
return orderBy.length ? orderBy : [{ createdAt: SortOrder.Desc }];
},
});

6
front/src/modules/ui/object/record-table/states/selectors/tablefiltersWhereScopedSelector.ts
View File

@ -3,11 +3,13 @@ import { selectorFamily } from 'recoil';
import { turnFilterIntoWhereClause } from '../../../object-filter-dropdown/utils/turnFilterIntoWhereClause';
import { tableFiltersScopedState } from '../tableFiltersScopedState';
export const tablefiltersWhereScopedSelector = selectorFamily({
export const tableFiltersWhereScopedSelector = selectorFamily({
key: 'tablefiltersWhereScopedSelector',
get:
(scopeId: string) =>
({ get }) => ({
AND: get(tableFiltersScopedState(scopeId)).map(turnFilterIntoWhereClause),
AND: get(tableFiltersScopedState({ scopeId })).map(
turnFilterIntoWhereClause,
),
}),
});

4
front/src/modules/ui/object/record-table/states/selectors/visibleTableColumnsScopedSelector.ts
View File

@ -8,9 +8,9 @@ export const visibleTableColumnsScopedSelector = selectorFamily({
get:
(scopeId: string) =>
({ get }) => {
const columns = get(tableColumnsScopedState(scopeId));
const columns = get(tableColumnsScopedState({ scopeId }));
const availableColumnKeys = get(
availableTableColumnsScopedState(scopeId),
availableTableColumnsScopedState({ scopeId }),
).map(({ fieldId }) => fieldId);
return [...columns]

10
front/src/modules/ui/object/record-table/states/tableColumnsScopedState.ts
View File

@ -1,13 +1,11 @@
import { atomFamily } from 'recoil';
import { FieldMetadata } from '@/ui/object/field/types/FieldMetadata';
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
import { ColumnDefinition } from '../types/ColumnDefinition';
export const tableColumnsScopedState = atomFamily<
ColumnDefinition<FieldMetadata>[],
string
export const tableColumnsScopedState = createScopedState<
ColumnDefinition<FieldMetadata>[]
>({
key: 'tableColumnsScopedState',
default: [],
defaultValue: [],
});

6
front/src/modules/ui/object/record-table/states/tableFiltersScopedState.ts
View File

@ -1,8 +1,8 @@
import { atomFamily } from 'recoil';
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
import { Filter } from '../../object-filter-dropdown/types/Filter';
export const tableFiltersScopedState = atomFamily<Filter[], string>({
export const tableFiltersScopedState = createScopedState<Filter[]>({
key: 'tableFiltersScopedState',
default: [],
defaultValue: [],
});

6
front/src/modules/ui/object/record-table/states/tableSortsScopedState.ts
View File

@ -1,8 +1,8 @@
import { atomFamily } from 'recoil';
import { createScopedState } from '@/ui/utilities/recoil-scope/utils/createScopedState';
import { Sort } from '../../object-sort-dropdown/types/Sort';
export const tableSortsScopedState = atomFamily<Sort[], string>({
export const tableSortsScopedState = createScopedState<Sort[]>({
key: 'tableSortsScopedState',
default: [],
defaultValue: [],
});

79
front/src/modules/ui/object/record-table/utils/getRecordTableScopedStates.ts Normal file
View File

@ -0,0 +1,79 @@
import { getScopedState } from '@/ui/utilities/recoil-scope/utils/getScopedState';
import { availableTableColumnsScopedState } from '../states/availableTableColumnsScopedState';
import { onColumnsChangeScopedState } from '../states/onColumnsChangeScopedState';
import { hiddenTableColumnsScopedSelector } from '../states/selectors/hiddenTableColumnsScopedSelector';
import { tableColumnsByKeyScopedSelector } from '../states/selectors/tableColumnsByKeyScopedSelector';
import { tableFiltersWhereScopedSelector } from '../states/selectors/tablefiltersWhereScopedSelector';
import { tableSortsOrderByScopedSelector } from '../states/selectors/tableSortsOrderByScopedSelector';
import { visibleTableColumnsScopedSelector } from '../states/selectors/visibleTableColumnsScopedSelector';
import { tableColumnsScopedState } from '../states/tableColumnsScopedState';
import { tableFiltersScopedState } from '../states/tableFiltersScopedState';
import { tableSortsScopedState } from '../states/tableSortsScopedState';
import { onEntityCountChangeScopedState } from './../states/onEntityCountChange';
export const getRecordTableScopedStates = ({
recordTableScopeId,
}: {
recordTableScopeId: string;
}) => {
const availableTableColumnsState = getScopedState(
availableTableColumnsScopedState,
recordTableScopeId,
);
const tableFiltersState = getScopedState(
tableFiltersScopedState,
recordTableScopeId,
);
const tableSortsState = getScopedState(
tableSortsScopedState,
recordTableScopeId,
);
const tableSortsOrderBySelector =
tableSortsOrderByScopedSelector(recordTableScopeId);
const tableFiltersWhereSelector =
tableFiltersWhereScopedSelector(recordTableScopeId);
const tableColumnsState = getScopedState(
tableColumnsScopedState,
recordTableScopeId,
);
const tableColumnsByKeySelector =
tableColumnsByKeyScopedSelector(recordTableScopeId);
const hiddenTableColumnsSelector =
hiddenTableColumnsScopedSelector(recordTableScopeId);
const visibleTableColumnsSelector =
visibleTableColumnsScopedSelector(recordTableScopeId);
const onColumnsChangeState = getScopedState(
onColumnsChangeScopedState,
recordTableScopeId,
);
const onEntityCountChangeState = getScopedState(
onEntityCountChangeScopedState,
recordTableScopeId,
);
return {
availableTableColumnsState,
tableFiltersState,
tableSortsState,
tableSortsOrderBySelector,
tableFiltersWhereSelector,
tableColumnsState,
tableColumnsByKeySelector,
hiddenTableColumnsSelector,
visibleTableColumnsSelector,
onColumnsChangeState,
onEntityCountChangeState,
};
};

4
front/src/modules/views/hooks/internal/useViewFilters.ts
View File

@ -21,7 +21,9 @@ export const useViewFilters = (viewScopeId: string) => {
});
const apolloClient = useApolloClient();
const { currentViewFiltersState } = useViewScopedStates();
const { currentViewFiltersState } = useViewScopedStates({
customViewScopeId: viewScopeId,
});
const persistViewFilters = useRecoilCallback(
({ snapshot, set }) =>

4
front/src/modules/views/hooks/internal/useViewSorts.ts
View File

@ -21,7 +21,9 @@ export const useViewSorts = (viewScopeId: string) => {
});
const apolloClient = useApolloClient();
const { currentViewSortsState } = useViewScopedStates();
const { currentViewSortsState } = useViewScopedStates({
customViewScopeId: viewScopeId,
});
const persistViewSorts = useRecoilCallback(
({ snapshot, set }) =>

0
front/src/modules/ui/object/record-table/hooks/useMoveViewColumns.ts → front/src/modules/views/hooks/useMoveViewColumns.ts
View File

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

@ -14,10 +14,8 @@ import { PageHeader } from '@/ui/layout/page/PageHeader';
import { PageHotkeysEffect } from '@/ui/layout/page/PageHotkeysEffect';
import { RecordTableActionBar } from '@/ui/object/record-table/action-bar/components/RecordTableActionBar';
import { RecordTableContextMenu } from '@/ui/object/record-table/context-menu/components/RecordTableContextMenu';
import { useUpsertRecordTableItem } from '@/ui/object/record-table/hooks/useUpsertRecordTableItem';
import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
import { useUpsertTableRowId } from '@/ui/object/record-table/hooks/useUpsertTableRowId';
import { TableRecoilScopeContext } from '@/ui/object/record-table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { useInsertOneCompanyMutation } from '~/generated/graphql';
const StyledTableContainer = styled.div`
@ -27,7 +25,9 @@ const StyledTableContainer = styled.div`
export const Companies = () => {
const [insertCompany] = useInsertOneCompanyMutation();
const upsertRecordTableItem = useUpsertRecordTableItem();
const { upsertRecordTableItem } = useRecordTable({
recordTableScopeId: 'companies',
});
const upsertTableRowIds = useUpsertTableRowId();
const { triggerOptimisticEffects } = useOptimisticEffect();
@ -61,16 +61,11 @@ export const Companies = () => {
<PageAddButton onClick={handleAddButtonClick} />
</PageHeader>
<PageBody>
<RecoilScope
scopeId="companies"
CustomRecoilScopeContext={TableRecoilScopeContext}
>
<StyledTableContainer>
<CompanyTable />
</StyledTableContainer>
<RecordTableActionBar />
<RecordTableContextMenu />
</RecoilScope>
<StyledTableContainer>
<CompanyTable />
</StyledTableContainer>
<RecordTableActionBar />
<RecordTableContextMenu />
</PageBody>
</PageContainer>
</SpreadsheetImportProvider>

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

@ -5,8 +5,6 @@ import { IconBuildingSkyscraper } from '@/ui/display/icon';
import { PageBody } from '@/ui/layout/page/PageBody';
import { PageContainer } from '@/ui/layout/page/PageContainer';
import { PageHeader } from '@/ui/layout/page/PageHeader';
import { TableRecoilScopeContext } from '@/ui/object/record-table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
const StyledTableContainer = styled.div`
display: flex;
@ -18,11 +16,9 @@ export const CompaniesMockMode = () => {
<PageContainer>
<PageHeader title="Companies" Icon={IconBuildingSkyscraper} />
<PageBody>
<RecoilScope CustomRecoilScopeContext={TableRecoilScopeContext}>
<StyledTableContainer>
<CompanyTableMockMode />
</StyledTableContainer>
</RecoilScope>
<StyledTableContainer>
<CompanyTableMockMode />
</StyledTableContainer>
</PageBody>
</PageContainer>
);

23
front/src/pages/people/People.tsx
View File

@ -12,10 +12,8 @@ import { PageHeader } from '@/ui/layout/page/PageHeader';
import { PageHotkeysEffect } from '@/ui/layout/page/PageHotkeysEffect';
import { RecordTableActionBar } from '@/ui/object/record-table/action-bar/components/RecordTableActionBar';
import { RecordTableContextMenu } from '@/ui/object/record-table/context-menu/components/RecordTableContextMenu';
import { useUpsertRecordTableItem } from '@/ui/object/record-table/hooks/useUpsertRecordTableItem';
import { useRecordTable } from '@/ui/object/record-table/hooks/useRecordTable';
import { useUpsertTableRowId } from '@/ui/object/record-table/hooks/useUpsertTableRowId';
import { TableRecoilScopeContext } from '@/ui/object/record-table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
import { useInsertOnePersonMutation } from '~/generated/graphql';
const StyledTableContainer = styled.div`
@ -25,7 +23,9 @@ const StyledTableContainer = styled.div`
export const People = () => {
const [insertOnePerson] = useInsertOnePersonMutation();
const upsertRecordTableItem = useUpsertRecordTableItem();
const { upsertRecordTableItem } = useRecordTable({
recordTableScopeId: 'people',
});
const upsertTableRowIds = useUpsertTableRowId();
const { triggerOptimisticEffects } = useOptimisticEffect();
@ -57,16 +57,11 @@ export const People = () => {
<PageAddButton onClick={handleAddButtonClick} />
</PageHeader>
<PageBody>
<RecoilScope
scopeId="people"
CustomRecoilScopeContext={TableRecoilScopeContext}
>
<StyledTableContainer>
<PersonTable />
</StyledTableContainer>
<RecordTableActionBar />
<RecordTableContextMenu />
</RecoilScope>
<StyledTableContainer>
<PersonTable />
</StyledTableContainer>
<RecordTableActionBar />
<RecordTableContextMenu />
</PageBody>
</PageContainer>
</SpreadsheetImportProvider>