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

Fix kanban view picker total count (#10898)

Browse Source 
Fixes https://github.com/twentyhq/twenty/issues/9790

Before


https://github.com/user-attachments/assets/332ec338-ce87-4d4d-ac47-a4e76dceb5b0



After


https://github.com/user-attachments/assets/93a03842-386a-4e75-a709-85a91bbc7679

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Weiko
2025-03-14 17:27:25 +01:00
committed by GitHub
parent 3168958f8a
commit d34ec4da2d
9 changed files with 52 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/twenty-front/src/modules/object-record/hooks/useAggregateRecords.ts
View File

@ -15,7 +15,7 @@ export type AggregateRecordsData = {
};
};
export const useAggregateRecords = ({
export const useAggregateRecords = <T extends AggregateRecordsData>({
objectNameSingular,
filter,
recordGqlFieldsAggregate,
@ -63,7 +63,7 @@ export const useAggregateRecords = ({
return {
objectMetadataItem,
data: formattedData,
data: formattedData as T,
loading,
error,
};

11
packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexTableContainerEffect.tsx
View File

@ -5,7 +5,6 @@ import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadata
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
import { useHandleToggleColumnFilter } from '@/object-record/record-index/hooks/useHandleToggleColumnFilter';
import { useHandleToggleColumnSort } from '@/object-record/record-index/hooks/useHandleToggleColumnSort';
import { useSetRecordIndexEntityCount } from '@/object-record/record-index/hooks/useSetRecordIndexEntityCount';
import { useRecordTable } from '@/object-record/record-table/hooks/useRecordTable';
import { viewFieldAggregateOperationState } from '@/object-record/record-table/record-table-footer/states/viewFieldAggregateOperationState';
import { convertAggregateOperationToExtendedAggregateOperation } from '@/object-record/utils/convertAggregateOperationToExtendedAggregateOperation';
@ -21,7 +20,6 @@ export const RecordIndexTableContainerEffect = () => {
const {
setAvailableTableColumns,
setOnEntityCountChange,
setOnToggleColumnFilter,
setOnToggleColumnSort,
} = useRecordTable({
@ -35,8 +33,6 @@ export const RecordIndexTableContainerEffect = () => {
const { columnDefinitions } =
useColumnDefinitionsFromFieldMetadata(objectMetadataItem);
const { setRecordIndexEntityCount } = useSetRecordIndexEntityCount(viewBarId);
useEffect(() => {
setAvailableTableColumns(columnDefinitions);
}, [columnDefinitions, setAvailableTableColumns]);
@ -66,13 +62,6 @@ export const RecordIndexTableContainerEffect = () => {
);
}, [setOnToggleColumnSort, handleToggleColumnSort]);
useEffect(() => {
setOnEntityCountChange(
() => (entityCount: number, currentRecordGroupId?: string) =>
setRecordIndexEntityCount(entityCount, currentRecordGroupId),
);
}, [setRecordIndexEntityCount, setOnEntityCountChange]);
const setViewFieldAggregateOperation = useRecoilCallback(
({ set, snapshot }) =>
(viewField: ViewField) => {

9
packages/twenty-front/src/modules/object-record/record-index/hooks/useLoadRecordIndexBoardColumn.ts
View File

@ -11,7 +11,6 @@ import { currentRecordFiltersComponentState } from '@/object-record/record-filte
import { computeRecordGqlOperationFilter } from '@/object-record/record-filter/utils/computeViewRecordGqlOperationFilter';
import { recordGroupDefinitionFamilyState } from '@/object-record/record-group/states/recordGroupDefinitionFamilyState';
import { useRecordBoardRecordGqlFields } from '@/object-record/record-index/hooks/useRecordBoardRecordGqlFields';
import { useSetRecordIndexEntityCount } from '@/object-record/record-index/hooks/useSetRecordIndexEntityCount';
import { currentRecordSortsComponentState } from '@/object-record/record-sort/states/currentRecordSortsComponentState';
import { useUpsertRecordsInStore } from '@/object-record/record-store/hooks/useUpsertRecordsInStore';
@ -88,7 +87,6 @@ export const useLoadRecordIndexBoardColumn = ({
fetchMoreRecords,
queryStateIdentifier,
hasNextPage,
totalCount,
} = useFindManyRecords({
objectNameSingular,
filter,
@ -97,13 +95,6 @@ export const useLoadRecordIndexBoardColumn = ({
limit: 10,
});
const { setRecordIndexEntityCount } =
useSetRecordIndexEntityCount(recordBoardId);
useEffect(() => {
setRecordIndexEntityCount(totalCount ?? 0, columnId);
}, [setRecordIndexEntityCount, totalCount, columnId]);
useEffect(() => {
setRecordIdsForColumn(columnId, records);
}, [records, setRecordIdsForColumn, columnId]);

38
packages/twenty-front/src/modules/object-record/record-index/hooks/useSetRecordIndexEntityCount.ts
View File

@ -1,38 +0,0 @@
import { recordIndexEntityCountByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexEntityCountByGroupComponentFamilyState';
import { recordIndexEntityCountNoGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexEntityCountNoGroupComponentFamilyState';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { useRecoilCallback } from 'recoil';
import { isDefined } from 'twenty-shared';
export const useSetRecordIndexEntityCount = (viewBarComponentId?: string) => {
const recordIndexEntityCountNoGroupFamilyState =
useRecoilComponentCallbackStateV2(
recordIndexEntityCountNoGroupComponentFamilyState,
viewBarComponentId,
);
const recordIndexEntityCountByGroupFamilyState =
useRecoilComponentCallbackStateV2(
recordIndexEntityCountByGroupComponentFamilyState,
viewBarComponentId,
);
const setRecordIndexEntityCount = useRecoilCallback(
({ set }) =>
(count: number, recordGroupId?: string) => {
if (isDefined(recordGroupId)) {
set(recordIndexEntityCountByGroupFamilyState(recordGroupId), count);
} else {
set(recordIndexEntityCountNoGroupFamilyState, count);
}
},
[
recordIndexEntityCountByGroupFamilyState,
recordIndexEntityCountNoGroupFamilyState,
],
);
return {
setRecordIndexEntityCount,
};
};

9
packages/twenty-front/src/modules/object-record/record-index/states/recordIndexEntityCountNoGroupComponentFamilyState.ts
View File

@ -1,9 +0,0 @@
import { createComponentStateV2 } from '@/ui/utilities/state/component-state/utils/createComponentStateV2';
import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
export const recordIndexEntityCountNoGroupComponentFamilyState =
createComponentStateV2<number | undefined>({
key: 'recordIndexEntityCountNoGroupComponentFamilyState',
defaultValue: undefined,
componentInstanceContext: ViewComponentInstanceContext,
});

39
packages/twenty-front/src/modules/object-record/record-index/states/selectors/recordIndexEntityCountComponentSelector.ts
View File

@ -1,39 +0,0 @@
import { recordGroupIdsComponentState } from '@/object-record/record-group/states/recordGroupIdsComponentState';
import { recordIndexEntityCountByGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexEntityCountByGroupComponentFamilyState';
import { recordIndexEntityCountNoGroupComponentFamilyState } from '@/object-record/record-index/states/recordIndexEntityCountNoGroupComponentFamilyState';
import { createComponentSelectorV2 } from '@/ui/utilities/state/component-state/utils/createComponentSelectorV2';
import { ViewComponentInstanceContext } from '@/views/states/contexts/ViewComponentInstanceContext';
export const recordIndexEntityCountComponentSelector =
createComponentSelectorV2<number | undefined>({
key: 'recordIndexEntityCountComponentSelector',
get:
({ instanceId }) =>
({ get }) => {
const recordGroupIds = get(
recordGroupIdsComponentState.atomFamily({
instanceId,
}),
);
if (recordGroupIds.length === 0) {
return get(
recordIndexEntityCountNoGroupComponentFamilyState.atomFamily({
instanceId,
}),
);
}
return recordGroupIds.reduce<number>((acc, recordGroupId) => {
const count = get(
recordIndexEntityCountByGroupComponentFamilyState.atomFamily({
instanceId,
familyKey: recordGroupId,
}),
);
return acc + (count ?? 0);
}, 0);
},
componentInstanceContext: ViewComponentInstanceContext,
});