Files
twenty_crm/front/src/modules/views/hooks/useTableViews.ts
Thaïs 7af306792b feat: add Table and TableSection components (#1849)
* refactor: rename ui/table to ui/data-table

* feat: add Table and TableSection components

Closes #1806
2023-10-04 17:46:14 +02:00

78 lines
2.4 KiB
TypeScript

import { useSearchParams } from 'react-router-dom';
import { TableRecoilScopeContext } from '@/ui/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { tableColumnsScopedState } from '@/ui/data-table/states/tableColumnsScopedState';
import { ColumnDefinition } from '@/ui/data-table/types/ColumnDefinition';
import { FieldMetadata } from '@/ui/field/types/FieldMetadata';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { filtersScopedState } from '@/ui/view-bar/states/filtersScopedState';
import { sortsScopedState } from '@/ui/view-bar/states/sortsScopedState';
import { ViewType } from '~/generated/graphql';
import { useTableViewFields } from './useTableViewFields';
import { useViewFilters } from './useViewFilters';
import { useViews } from './useViews';
import { useViewSorts } from './useViewSorts';
export const useTableViews = ({
objectId,
columnDefinitions,
}: {
objectId: 'company' | 'person';
columnDefinitions: ColumnDefinition<FieldMetadata>[];
}) => {
const tableColumns = useRecoilScopedValue(
tableColumnsScopedState,
TableRecoilScopeContext,
);
const filters = useRecoilScopedValue(
filtersScopedState,
TableRecoilScopeContext,
);
const sorts = useRecoilScopedValue(sortsScopedState, TableRecoilScopeContext);
const [_, setSearchParams] = useSearchParams();
const handleViewCreate = async (viewId: string) => {
await createViewFields(tableColumns, viewId);
await createViewFilters(filters, viewId);
await createViewSorts(sorts, viewId);
setSearchParams({ view: viewId });
};
const { createView, deleteView, isFetchingViews, updateView } = useViews({
objectId,
onViewCreate: handleViewCreate,
type: ViewType.Table,
RecoilScopeContext: TableRecoilScopeContext,
});
const { createViewFields, persistColumns } = useTableViewFields({
objectId,
columnDefinitions,
skipFetch: isFetchingViews,
});
const { createViewFilters, persistFilters } = useViewFilters({
RecoilScopeContext: TableRecoilScopeContext,
skipFetch: isFetchingViews,
});
const { createViewSorts, persistSorts } = useViewSorts({
RecoilScopeContext: TableRecoilScopeContext,
skipFetch: isFetchingViews,
});
const submitCurrentView = async () => {
await persistFilters();
await persistSorts();
};
return {
createView,
deleteView,
persistColumns,
submitCurrentView,
updateView,
};
};