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

Fix filters and sorts on views (#2258)

Browse Source
This commit is contained in:
Charles Bochet
2023-10-27 11:48:38 +02:00
committed by GitHub
parent 1728045be4
commit d02dd69613
11 changed files with 90 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
front/src/modules/companies/components/HooksCompanyBoardEffect.tsx
View File

@ -28,8 +28,7 @@ export const HooksCompanyBoardEffect = () => {
setCurrentViewId,
} = useView();
const { currentViewFilters, currentViewSortsOrderBy } =
useViewInternalStates();
const { currentViewFilters } = useViewInternalStates();
useEffect(() => {
setAvailableFilters(opportunitiesBoardOptions.filters);
@ -72,7 +71,6 @@ export const HooksCompanyBoardEffect = () => {
useGetPipelineProgressQuery({
variables: {
where: whereFilters,
orderBy: currentViewSortsOrderBy,
},
onCompleted: (data) => {
const pipelineProgresses = data?.findManyPipelineProgress || [];

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

@ -4,6 +4,8 @@ import { companiesAvailableFieldDefinitions } from '@/companies/constants/compan
import { availableTableColumnsScopedState } from '@/ui/data/data-table/states/availableTableColumnsScopedState';
import { TableRecoilScopeContext } from '@/ui/data/data-table/states/recoil-scope-contexts/TableRecoilScopeContext';
import { tableColumnsScopedState } from '@/ui/data/data-table/states/tableColumnsScopedState';
import { tableFiltersScopedState } from '@/ui/data/data-table/states/tableFiltersScopedState';
import { tableSortsScopedState } from '@/ui/data/data-table/states/tableSortsScopedState';
import { useRecoilScopedState } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedState';
import { useView } from '@/views/hooks/useView';
import { useViewInternalStates } from '@/views/hooks/useViewInternalStates';
@ -19,13 +21,24 @@ const CompanyTableEffect = () => {
setViewType,
setViewObjectId,
} = useView();
const { currentViewFields } = useViewInternalStates();
const { currentViewFields, currentViewSorts, currentViewFilters } =
useViewInternalStates();
const [, setTableColumns] = useRecoilScopedState(
tableColumnsScopedState,
TableRecoilScopeContext,
);
const [, setTableSorts] = useRecoilScopedState(
tableSortsScopedState,
TableRecoilScopeContext,
);
const [, setTableFilters] = useRecoilScopedState(
tableFiltersScopedState,
TableRecoilScopeContext,
);
const [, setAvailableTableColumns] = useRecoilScopedState(
availableTableColumnsScopedState,
TableRecoilScopeContext,
@ -54,6 +67,24 @@ const CompanyTableEffect = () => {
}
}, [currentViewFields, setTableColumns]);
useEffect(() => {
if (currentViewSorts) {
setTableSorts(currentViewSorts);
}
}, [currentViewFields, currentViewSorts, setTableColumns, setTableSorts]);
useEffect(() => {
if (currentViewFilters) {
setTableFilters(currentViewFilters);
}
}, [
currentViewFields,
currentViewFilters,
setTableColumns,
setTableFilters,
setTableSorts,
]);
return <></>;
};

19
front/src/modules/ui/data/data-table/components/DataTableEffect.tsx
View File

@ -7,17 +7,17 @@ import { OptimisticEffectDefinition } from '@/apollo/optimistic-effect/types/Opt
import { FilterDefinition } from '@/ui/data/filter/types/FilterDefinition';
import { useRecoilScopedValue } from '@/ui/utilities/recoil-scope/hooks/useRecoilScopedValue';
import { useView } from '@/views/hooks/useView';
import { useViewInternalStates } from '@/views/hooks/useViewInternalStates';
import {
SortOrder,
useGetCompaniesQuery,
useGetPeopleQuery,
} from '~/generated/graphql';
import { filtersWhereScopedSelector } from '../../filter/states/selectors/filtersWhereScopedSelector';
import { SortDefinition } from '../../sort/types/SortDefinition';
import { useSetDataTableData } from '../hooks/useSetDataTableData';
import { TableRecoilScopeContext } from '../states/recoil-scope-contexts/TableRecoilScopeContext';
import { tablefiltersWhereScopedSelector } from '../states/selectors/tablefiltersWhereScopedSelector';
import { tableSortsOrderByScopedSelector } from '../states/selectors/tableSortsOrderByScopedSelector';
export const DataTableEffect = ({
useGetRequest,
@ -41,27 +41,30 @@ export const DataTableEffect = ({
const setDataTableData = useSetDataTableData();
const { registerOptimisticEffect } = useOptimisticEffect();
const { setCurrentViewId } = useView();
const { currentViewSortsOrderBy } = useViewInternalStates();
const sortsOrderBy = defaults(currentViewSortsOrderBy, [
const tableSortsOrderBy = useRecoilScopedValue(
tableSortsOrderByScopedSelector,
TableRecoilScopeContext,
);
const sortsOrderBy = defaults(tableSortsOrderBy, [
{
createdAt: SortOrder.Desc,
},
]);
const filtersWhere = useRecoilScopedValue(
filtersWhereScopedSelector,
const tablefiltersWhere = useRecoilScopedValue(
tablefiltersWhereScopedSelector,
TableRecoilScopeContext,
);
useGetRequest({
variables: { orderBy: sortsOrderBy, where: filtersWhere },
variables: { orderBy: sortsOrderBy, where: tablefiltersWhere },
onCompleted: (data: any) => {
const entities = data[getRequestResultKey] ?? [];
setDataTableData(entities, filterDefinitionArray, sortDefinitionArray);
registerOptimisticEffect({
variables: { orderBy: sortsOrderBy, where: filtersWhere },
variables: { orderBy: sortsOrderBy, where: tablefiltersWhere },
definition: getRequestOptimisticEffectDefinition,
});
},

16
front/src/modules/ui/data/data-table/states/selectors/tableSortsOrderByScopedSelector.ts Normal file
View File

@ -0,0 +1,16 @@
import { selectorFamily } from 'recoil';
import { reduceSortsToOrderBy } from '@/ui/data/sort/utils/helpers';
import { SortOrder } from '~/generated/graphql';
import { tableSortsScopedState } from '../tableSortsScopedState';
export const tableSortsOrderByScopedSelector = selectorFamily({
key: 'tableSortsOrderByScopedSelector',
get:
(scopeId: string) =>
({ get }) => {
const orderBy = reduceSortsToOrderBy(get(tableSortsScopedState(scopeId)));
return orderBy.length ? orderBy : [{ createdAt: SortOrder.Desc }];
},
});

13
front/src/modules/ui/data/data-table/states/selectors/tablefiltersWhereScopedSelector.ts Normal file
View File

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

8
front/src/modules/ui/data/data-table/states/tableFiltersScopedState.ts Normal file
View File

@ -0,0 +1,8 @@
import { atomFamily } from 'recoil';
import { Filter } from '../../filter/types/Filter';
export const tableFiltersScopedState = atomFamily<Filter[], string>({
key: 'tableFiltersScopedState',
default: [],
});

8
front/src/modules/ui/data/data-table/states/tableSortsScopedState.ts Normal file
View File

@ -0,0 +1,8 @@
import { atomFamily } from 'recoil';
import { Sort } from '../../sort/types/Sort';
export const tableSortsScopedState = atomFamily<Sort[], string>({
key: 'tableSortsScopedState',
default: [],
});

15
front/src/modules/ui/data/filter/states/selectors/filtersWhereScopedSelector.ts
View File

@ -1,15 +0,0 @@
import { selectorFamily } from 'recoil';
import { turnFilterIntoWhereClause } from '../../utils/turnFilterIntoWhereClause';
import { selectedFiltersScopedState } from '../selectedFiltersScopedState';
export const filtersWhereScopedSelector = selectorFamily({
key: 'filtersWhereScopedSelector',
get:
(scopeId: string) =>
({ get }) => ({
AND: get(selectedFiltersScopedState({ scopeId })).map(
turnFilterIntoWhereClause,
),
}),
});

3
front/src/modules/views/hooks/internal/useViewFields.ts
View File

@ -4,6 +4,7 @@ import { useRecoilCallback } from 'recoil';
import { ColumnDefinition } from '@/ui/data/data-table/types/ColumnDefinition';
import { FieldMetadata } from '@/ui/data/field/types/FieldMetadata';
import { GET_VIEW_FIELDS } from '@/views/graphql/queries/getViewFields';
import { GET_VIEWS } from '@/views/graphql/queries/getViews';
import { currentViewIdScopedState } from '@/views/states/currentViewIdScopedState';
import { savedViewFieldByKeyScopedFamilySelector } from '@/views/states/selectors/savedViewFieldByKeyScopedFamilySelector';
@ -13,8 +14,6 @@ import {
useUpdateViewFieldMutation,
} from '~/generated/graphql';
import { GET_VIEW_FIELDS } from '../../graphql/queries/getViewFields';
export const toViewFieldInput = (
objectId: string,
fieldDefinition: ColumnDefinition<FieldMetadata>,

9
front/src/modules/views/hooks/useViewInternalStates.ts
View File

@ -23,7 +23,6 @@ import { savedViewSortsScopedFamilyState } from '../states/savedViewSortsScopedF
import { canPersistViewFiltersScopedFamilySelector } from '../states/selectors/canPersistViewFiltersScopedFamilySelector';
import { canPersistViewSortsScopedFamilySelector } from '../states/selectors/canPersistViewSortsScopedFamilySelector';
import { currentViewScopedSelector } from '../states/selectors/currentViewScopedSelector';
import { currentViewSortsOrderByScopedFamilySelector } from '../states/selectors/currentViewSortsOrderByScopedFamilySelector';
import { savedViewFieldByKeyScopedFamilySelector } from '../states/selectors/savedViewFieldByKeyScopedFamilySelector';
import { savedViewFiltersByKeyScopedFamilySelector } from '../states/selectors/savedViewFiltersByKeyScopedFamilySelector';
import { savedViewSortsByKeyScopedFamilySelector } from '../states/selectors/savedViewSortsByKeyScopedFamilySelector';
@ -108,13 +107,6 @@ export const useViewInternalStates = (
}),
);
const currentViewSortsOrderBy = useRecoilValue(
currentViewSortsOrderByScopedFamilySelector({
viewScopeId: scopeId,
viewId: familyItemId,
}),
);
// ViewFilters
const [currentViewFilters, setCurrentViewFilters] =
useRecoilScopedFamilyState(
@ -215,7 +207,6 @@ export const useViewInternalStates = (
savedViewSortsByKey,
setSavedViewSorts,
canPersistSorts,
currentViewSortsOrderBy,
availableFilters,
setAvailableFilters,

26
front/src/modules/views/states/selectors/currentViewSortsOrderByScopedFamilySelector.ts
View File

@ -1,26 +0,0 @@
import { selectorFamily } from 'recoil';
import { reduceSortsToOrderBy } from '@/ui/data/sort/utils/helpers';
import { SortOrder } from '~/generated/graphql';
import { currentViewSortsScopedFamilyState } from '../currentViewSortsScopedFamilyState';
export const currentViewSortsOrderByScopedFamilySelector = selectorFamily({
key: 'currentViewSortsOrderByScopedFamilySelector',
get:
({ viewScopeId, viewId }: { viewScopeId: string; viewId?: string }) =>
({ get }) => {
if (!viewId) {
return;
}
const orderBy = reduceSortsToOrderBy(
get(
currentViewSortsScopedFamilyState({
scopeId: viewScopeId,
familyKey: viewId,
}),
),
);
return orderBy.length ? orderBy : [{ createdAt: SortOrder.Desc }];
},
});