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

Add count and percent aggregations to kanban headers (#9348)

Browse Source 
Closes https://github.com/twentyhq/private-issues/issues/226


https://github.com/user-attachments/assets/cee78080-6dda-4102-9595-d32971cf9104
This commit is contained in:
Marie
2025-01-06 17:57:32 +01:00
committed by GitHub
parent b22a598d7d
commit a9b95bcf03
30 changed files with 503 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/twenty-front/src/modules/dropdown/hooks/useCurrentContentId.ts
View File

@ -3,15 +3,23 @@ import { useCallback, useState } from 'react';
export const useCurrentContentId = <T>() => {
const [currentContentId, setCurrentContentId] = useState<T | null>(null);
const handleContentChange = useCallback((key: T) => {
setCurrentContentId(key);
}, []);
const [previousContentId, setPreviousContentId] = useState<T | null>(null);
const handleContentChange = useCallback(
(key: T) => {
setPreviousContentId(currentContentId);
setCurrentContentId(key);
},
[currentContentId],
);
const handleResetContent = useCallback(() => {
setPreviousContentId(null);
setCurrentContentId(null);
}, []);
return {
previousContentId,
currentContentId,
handleContentChange,
handleResetContent,

6
packages/twenty-front/src/modules/object-record/hooks/__tests__/useAggregateRecordsQuery.test.tsx
View File

@ -5,14 +5,10 @@ import { useAggregateRecordsQuery } from '@/object-record/hooks/useAggregateReco
import { AGGREGATE_OPERATIONS } from '@/object-record/record-table/constants/AggregateOperations';
import { generateAggregateQuery } from '@/object-record/utils/generateAggregateQuery';
import { renderHook } from '@testing-library/react';
import { getColumnNameForAggregateOperation } from 'twenty-shared';
import { FieldMetadataType } from '~/generated/graphql';
jest.mock('@/object-metadata/hooks/useObjectMetadataItem');
jest.mock('@/object-record/utils/generateAggregateQuery');
jest.mock('twenty-shared', () => ({
getColumnNameForAggregateOperation: jest.fn(),
}));
const mockObjectMetadataItem: ObjectMetadataItem = {
nameSingular: 'company',
@ -69,7 +65,6 @@ describe('useAggregateRecordsQuery', () => {
});
it('should handle simple count operation', () => {
(getColumnNameForAggregateOperation as jest.Mock).mockReturnValue('name');
const { result } = renderHook(() =>
useAggregateRecordsQuery({
objectNameSingular: 'company',
@ -91,7 +86,6 @@ describe('useAggregateRecordsQuery', () => {
});
it('should handle field aggregation', () => {
(getColumnNameForAggregateOperation as jest.Mock).mockReturnValue('amount');
const { result } = renderHook(() =>
useAggregateRecordsQuery({
objectNameSingular: 'company',

9
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdown.tsx
View File

@ -23,8 +23,12 @@ export const RecordBoardColumnHeaderAggregateDropdown = ({
aggregateLabel,
dropdownId,
}: RecordBoardColumnHeaderAggregateDropdownProps) => {
const { currentContentId, handleContentChange, handleResetContent } =
useCurrentContentId<RecordBoardColumnHeaderAggregateContentId>();
const {
currentContentId,
handleContentChange,
handleResetContent,
previousContentId,
} = useCurrentContentId<RecordBoardColumnHeaderAggregateContentId>();
return (
<RecordBoardColumnHeaderAggregateDropdownComponentInstanceContext.Provider
@ -51,6 +55,7 @@ export const RecordBoardColumnHeaderAggregateDropdown = ({
currentContentId,
onContentChange: handleContentChange,
resetContent: handleResetContent,
previousContentId,
objectMetadataItem: objectMetadataItem,
dropdownId: dropdownId,
}}

50
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownContent.tsx
View File

@ -2,16 +2,58 @@ import { useDropdown } from '@/dropdown/hooks/useDropdown';
import { RecordBoardColumnHeaderAggregateDropdownContext } from '@/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownContext';
import { RecordBoardColumnHeaderAggregateDropdownFieldsContent } from '@/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownFieldsContent';
import { RecordBoardColumnHeaderAggregateDropdownMenuContent } from '@/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownMenuContent';
import { RecordBoardColumnHeaderAggregateDropdownMoreOptionsContent } from '@/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownMoreOptionsContent';
import { RecordBoardColumnHeaderAggregateDropdownOptionsContent } from '@/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownOptionsContent';
import { COUNT_AGGREGATE_OPERATION_OPTIONS } from '@/object-record/record-table/record-table-footer/constants/countAggregateOperationOptions';
import { NON_STANDARD_AGGREGATE_OPERATION_OPTIONS } from '@/object-record/record-table/record-table-footer/constants/nonStandardAggregateOperationsOptions';
import { PERCENT_AGGREGATE_OPERATION_OPTIONS } from '@/object-record/record-table/record-table-footer/constants/percentAggregateOperationOption';
import { AvailableFieldsForAggregateOperation } from '@/object-record/types/AvailableFieldsForAggregateOperation';
import { getAvailableFieldsIdsForAggregationFromObjectFields } from '@/object-record/utils/getAvailableFieldsIdsForAggregationFromObjectFields';
export const AggregateDropdownContent = () => {
const { currentContentId } = useDropdown({
const { currentContentId, objectMetadataItem } = useDropdown({
context: RecordBoardColumnHeaderAggregateDropdownContext,
});
switch (currentContentId) {
case 'moreAggregateOperationOptions':
return <RecordBoardColumnHeaderAggregateDropdownMoreOptionsContent />;
case 'countAggregateOperationsOptions': {
const availableAggregations: AvailableFieldsForAggregateOperation =
getAvailableFieldsIdsForAggregationFromObjectFields(
objectMetadataItem.fields,
COUNT_AGGREGATE_OPERATION_OPTIONS,
);
return (
<RecordBoardColumnHeaderAggregateDropdownOptionsContent
availableAggregations={availableAggregations}
title="Count"
/>
);
}
case 'percentAggregateOperationsOptions': {
const availableAggregations: AvailableFieldsForAggregateOperation =
getAvailableFieldsIdsForAggregationFromObjectFields(
objectMetadataItem.fields,
PERCENT_AGGREGATE_OPERATION_OPTIONS,
);
return (
<RecordBoardColumnHeaderAggregateDropdownOptionsContent
availableAggregations={availableAggregations}
title="Percent"
/>
);
}
case 'moreAggregateOperationOptions': {
const availableAggregations: AvailableFieldsForAggregateOperation =
getAvailableFieldsIdsForAggregationFromObjectFields(
objectMetadataItem.fields,
NON_STANDARD_AGGREGATE_OPERATION_OPTIONS,
);
return (
<RecordBoardColumnHeaderAggregateDropdownOptionsContent
availableAggregations={availableAggregations}
title="More options"
/>
);
}
case 'aggregateFields':
return <RecordBoardColumnHeaderAggregateDropdownFieldsContent />;
default:

1
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownContext.tsx
View File

@ -7,6 +7,7 @@ export type RecordBoardColumnHeaderAggregateDropdownContextValue = {
currentContentId: RecordBoardColumnHeaderAggregateContentId | null;
onContentChange: (key: RecordBoardColumnHeaderAggregateContentId) => void;
resetContent: () => void;
previousContentId: RecordBoardColumnHeaderAggregateContentId | null;
dropdownId: string;
};

14
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownFieldsContent.tsx
View File

@ -19,7 +19,13 @@ import {
import { isDefined } from '~/utils/isDefined';
export const RecordBoardColumnHeaderAggregateDropdownFieldsContent = () => {
const { closeDropdown, objectMetadataItem, onContentChange } = useDropdown({
const {
closeDropdown,
objectMetadataItem,
onContentChange,
resetContent,
previousContentId,
} = useDropdown({
context: RecordBoardColumnHeaderAggregateDropdownContext,
});
@ -45,7 +51,11 @@ export const RecordBoardColumnHeaderAggregateDropdownFieldsContent = () => {
<>
<DropdownMenuHeader
StartIcon={IconChevronLeft}
onClick={() => onContentChange('moreAggregateOperationOptions')}
onClick={() =>
previousContentId
? onContentChange(previousContentId)
: resetContent()
}
>
{getAggregateOperationLabel(aggregateOperation)}
</DropdownMenuHeader>

37
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownMenuContent.tsx
View File

@ -1,5 +1,5 @@
import { Key } from 'ts-key-enum';
import { IconCheck, MenuItem } from 'twenty-ui';
import { MenuItem } from 'twenty-ui';
import { useDropdown } from '@/dropdown/hooks/useDropdown';
import {
@ -7,15 +7,9 @@ import {
RecordBoardColumnHeaderAggregateDropdownContextValue,
} from '@/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownContext';
import { getAggregateOperationLabel } from '@/object-record/record-board/record-board-column/utils/getAggregateOperationLabel';
import { recordIndexKanbanAggregateOperationState } from '@/object-record/record-index/states/recordIndexKanbanAggregateOperationState';
import { AGGREGATE_OPERATIONS } from '@/object-record/record-table/constants/AggregateOperations';
import { TableOptionsHotkeyScope } from '@/object-record/record-table/types/TableOptionsHotkeyScope';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useUpdateViewAggregate } from '@/views/hooks/useUpdateViewAggregate';
import { useRecoilValue } from 'recoil';
import { isDefined } from '~/utils/isDefined';
export const RecordBoardColumnHeaderAggregateDropdownMenuContent = () => {
const { onContentChange, closeDropdown } =
@ -31,31 +25,22 @@ export const RecordBoardColumnHeaderAggregateDropdownMenuContent = () => {
TableOptionsHotkeyScope.Dropdown,
);
const { updateViewAggregate } = useUpdateViewAggregate();
const recordIndexKanbanAggregateOperation = useRecoilValue(
recordIndexKanbanAggregateOperationState,
);
return (
<>
<DropdownMenuItemsContainer>
<MenuItem
onClick={() => {
updateViewAggregate({
kanbanAggregateOperationFieldMetadataId: null,
kanbanAggregateOperation: AGGREGATE_OPERATIONS.count,
});
closeDropdown();
onContentChange('countAggregateOperationsOptions');
}}
text={getAggregateOperationLabel(AGGREGATE_OPERATIONS.count)}
RightIcon={
!isDefined(recordIndexKanbanAggregateOperation?.operation) ||
recordIndexKanbanAggregateOperation?.operation ===
AGGREGATE_OPERATIONS.count
? IconCheck
: undefined
}
text={'Count'}
hasSubMenu
/>
<MenuItem
onClick={() => {
onContentChange('percentAggregateOperationsOptions');
}}
text={'Percent'}
hasSubMenu
/>
<MenuItem
onClick={() => {

89
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownMoreOptionsContent.tsx
View File

@ -1,89 +0,0 @@
import { useDropdown } from '@/dropdown/hooks/useDropdown';
import {
RecordBoardColumnHeaderAggregateDropdownContext,
RecordBoardColumnHeaderAggregateDropdownContextValue,
} from '@/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownContext';
import { RecordBoardColumnHeaderAggregateDropdownMenuItem } from '@/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownMenuItem';
import { aggregateOperationComponentState } from '@/object-record/record-board/record-board-column/states/aggregateOperationComponentState';
import { availableFieldIdsForAggregateOperationComponentState } from '@/object-record/record-board/record-board-column/states/availableFieldIdsForAggregateOperationComponentState';
import { getAggregateOperationLabel } from '@/object-record/record-board/record-board-column/utils/getAggregateOperationLabel';
import { AGGREGATE_OPERATIONS } from '@/object-record/record-table/constants/AggregateOperations';
import { TableOptionsHotkeyScope } from '@/object-record/record-table/types/TableOptionsHotkeyScope';
import { AvailableFieldsForAggregateOperation } from '@/object-record/types/AvailableFieldsForAggregateOperation';
import { getAvailableFieldsIdsForAggregationFromObjectFields } from '@/object-record/utils/getAvailableFieldsIdsForAggregationFromObjectFields';
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import isEmpty from 'lodash.isempty';
import { useMemo } from 'react';
import { Key } from 'ts-key-enum';
import { IconChevronLeft } from 'twenty-ui';
export const RecordBoardColumnHeaderAggregateDropdownMoreOptionsContent =
() => {
const { objectMetadataItem, onContentChange, closeDropdown, resetContent } =
useDropdown<RecordBoardColumnHeaderAggregateDropdownContextValue>({
context: RecordBoardColumnHeaderAggregateDropdownContext,
});
useScopedHotkeys(
[Key.Escape],
() => {
closeDropdown();
},
TableOptionsHotkeyScope.Dropdown,
);
const availableAggregations: AvailableFieldsForAggregateOperation = useMemo(
() =>
getAvailableFieldsIdsForAggregationFromObjectFields(
objectMetadataItem.fields,
),
[objectMetadataItem.fields],
);
const setAggregateOperation = useSetRecoilComponentStateV2(
aggregateOperationComponentState,
);
const setAvailableFieldsForAggregateOperation =
useSetRecoilComponentStateV2(
availableFieldIdsForAggregateOperationComponentState,
);
return (
<>
<DropdownMenuHeader StartIcon={IconChevronLeft} onClick={resetContent}>
More options
</DropdownMenuHeader>
<DropdownMenuItemsContainer>
{Object.entries(availableAggregations)
.filter(([, fields]) => !isEmpty(fields))
.map(
([
availableAggregationOperation,
availableAggregationFieldsIdsForOperation,
]) => (
<RecordBoardColumnHeaderAggregateDropdownMenuItem
key={`aggregate-dropdown-menu-content-${availableAggregationOperation}`}
onContentChange={() => {
setAggregateOperation(
availableAggregationOperation as AGGREGATE_OPERATIONS,
);
setAvailableFieldsForAggregateOperation(
availableAggregationFieldsIdsForOperation,
);
onContentChange('aggregateFields');
}}
text={getAggregateOperationLabel(
availableAggregationOperation as AGGREGATE_OPERATIONS,
)}
hasSubMenu
/>
),
)}
</DropdownMenuItemsContainer>
</>
);
};

103
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownOptionsContent.tsx Normal file
View File

@ -0,0 +1,103 @@
import { useDropdown } from '@/dropdown/hooks/useDropdown';
import {
RecordBoardColumnHeaderAggregateDropdownContext,
RecordBoardColumnHeaderAggregateDropdownContextValue,
} from '@/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownContext';
import { RecordBoardColumnHeaderAggregateDropdownMenuItem } from '@/object-record/record-board/record-board-column/components/RecordBoardColumnHeaderAggregateDropdownMenuItem';
import { aggregateOperationComponentState } from '@/object-record/record-board/record-board-column/states/aggregateOperationComponentState';
import { availableFieldIdsForAggregateOperationComponentState } from '@/object-record/record-board/record-board-column/states/availableFieldIdsForAggregateOperationComponentState';
import { getAggregateOperationLabel } from '@/object-record/record-board/record-board-column/utils/getAggregateOperationLabel';
import { AGGREGATE_OPERATIONS } from '@/object-record/record-table/constants/AggregateOperations';
import { TableOptionsHotkeyScope } from '@/object-record/record-table/types/TableOptionsHotkeyScope';
import { AvailableFieldsForAggregateOperation } from '@/object-record/types/AvailableFieldsForAggregateOperation';
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import { useUpdateViewAggregate } from '@/views/hooks/useUpdateViewAggregate';
import isEmpty from 'lodash.isempty';
import { Key } from 'ts-key-enum';
import { IconChevronLeft } from 'twenty-ui';
export const RecordBoardColumnHeaderAggregateDropdownOptionsContent = ({
availableAggregations,
title,
}: {
availableAggregations: AvailableFieldsForAggregateOperation;
title: string;
}) => {
const { onContentChange, closeDropdown, resetContent } =
useDropdown<RecordBoardColumnHeaderAggregateDropdownContextValue>({
context: RecordBoardColumnHeaderAggregateDropdownContext,
});
useScopedHotkeys(
[Key.Escape],
() => {
closeDropdown();
},
TableOptionsHotkeyScope.Dropdown,
);
const setAggregateOperation = useSetRecoilComponentStateV2(
aggregateOperationComponentState,
);
const setAvailableFieldsForAggregateOperation = useSetRecoilComponentStateV2(
availableFieldIdsForAggregateOperationComponentState,
);
const { updateViewAggregate } = useUpdateViewAggregate();
return (
<>
<DropdownMenuHeader StartIcon={IconChevronLeft} onClick={resetContent}>
{title}
</DropdownMenuHeader>
<DropdownMenuItemsContainer>
{Object.entries(availableAggregations)
.filter(([, fields]) => !isEmpty(fields))
.map(
([
availableAggregationOperation,
availableAggregationFieldsIdsForOperation,
]) => (
<RecordBoardColumnHeaderAggregateDropdownMenuItem
key={`aggregate-dropdown-menu-content-${availableAggregationOperation}`}
onContentChange={() => {
if (
availableAggregationOperation !== AGGREGATE_OPERATIONS.count
) {
setAggregateOperation(
availableAggregationOperation as AGGREGATE_OPERATIONS,
);
setAvailableFieldsForAggregateOperation(
availableAggregationFieldsIdsForOperation,
);
onContentChange('aggregateFields');
} else {
updateViewAggregate({
kanbanAggregateOperationFieldMetadataId:
availableAggregationFieldsIdsForOperation[0],
kanbanAggregateOperation:
availableAggregationOperation as AGGREGATE_OPERATIONS,
});
closeDropdown();
}
}}
text={getAggregateOperationLabel(
availableAggregationOperation as AGGREGATE_OPERATIONS,
)}
hasSubMenu={
availableAggregationOperation === AGGREGATE_OPERATIONS.count
? false
: true
}
/>
),
)}
</DropdownMenuItemsContainer>
</>
);
};

3
packages/twenty-front/src/modules/object-record/record-board/record-board-column/utils/__tests__/computeAggregateValueAndLabel.test.ts
View File

@ -14,6 +14,7 @@ describe('computeAggregateValueAndLabel', () => {
{
id: MOCK_FIELD_ID,
name: 'amount',
label: 'amount',
type: FieldMetadataType.Currency,
} as FieldMetadataItem,
],
@ -60,6 +61,7 @@ describe('computeAggregateValueAndLabel', () => {
{
id: MOCK_FIELD_ID,
name: 'percentage',
label: 'percentage',
type: FieldMetadataType.Number,
settings: {
type: 'percentage',
@ -96,6 +98,7 @@ describe('computeAggregateValueAndLabel', () => {
{
id: MOCK_FIELD_ID,
name: 'decimals',
label: 'decimals',
type: FieldMetadataType.Number,
settings: {
decimals: 2,

2
packages/twenty-front/src/modules/object-record/record-board/record-board-column/utils/computeAggregateValueAndLabel.ts
View File

@ -78,7 +78,7 @@ export const computeAggregateValueAndLabel = ({
const labelWithFieldName =
aggregateOperation === AGGREGATE_OPERATIONS.count
? `${getAggregateOperationLabel(AGGREGATE_OPERATIONS.count)}`
: `${getAggregateOperationLabel(aggregateOperation)} of ${field.name}`;
: `${getAggregateOperationLabel(aggregateOperation)} of ${field.label}`;
return {
value,

1
packages/twenty-front/src/modules/object-record/record-board/types/RecordBoardColumnHeaderAggregateContentId.ts
View File

@ -2,4 +2,5 @@ export type RecordBoardColumnHeaderAggregateContentId =
| 'aggregateOperations'
| 'aggregateFields'
| 'countAggregateOperationsOptions'
| 'percentAggregateOperationsOptions'
| 'moreAggregateOperationOptions';

2
packages/twenty-front/src/modules/object-record/record-table/constants/FieldsAvailableByAggregateOperation.ts → packages/twenty-front/src/modules/object-record/record-table/constants/FieldTypesAvailableForNonStandardAggregateOperation.ts
View File

@ -1,7 +1,7 @@
import { AGGREGATE_OPERATIONS } from '@/object-record/record-table/constants/AggregateOperations';
import { FieldMetadataType } from '~/generated-metadata/graphql';
export const FIELDS_AVAILABLE_BY_AGGREGATE_OPERATION = {
export const FIELD_TYPES_AVAILABLE_FOR_NON_STANDARD_AGGREGATE_OPERATION = {
[AGGREGATE_OPERATIONS.min]: [
FieldMetadataType.Number,
FieldMetadataType.Currency,

8
packages/twenty-front/src/modules/object-record/record-table/record-table-footer/constants/nonStandardAggregateOperationsOptions.tsx Normal file
View File

@ -0,0 +1,8 @@
import { AGGREGATE_OPERATIONS } from '@/object-record/record-table/constants/AggregateOperations';
export const NON_STANDARD_AGGREGATE_OPERATION_OPTIONS = [
AGGREGATE_OPERATIONS.min,
AGGREGATE_OPERATIONS.max,
AGGREGATE_OPERATIONS.avg,
AGGREGATE_OPERATIONS.sum,
];

4
packages/twenty-front/src/modules/object-record/record-table/record-table-footer/utils/getAvailableAggregateOperationsForFieldMetadataType.ts
View File

@ -1,5 +1,5 @@
import { AGGREGATE_OPERATIONS } from '@/object-record/record-table/constants/AggregateOperations';
import { FIELDS_AVAILABLE_BY_AGGREGATE_OPERATION } from '@/object-record/record-table/constants/FieldsAvailableByAggregateOperation';
import { FIELD_TYPES_AVAILABLE_FOR_NON_STANDARD_AGGREGATE_OPERATION } from '@/object-record/record-table/constants/FieldTypesAvailableForNonStandardAggregateOperation';
import { AggregateOperationsOmittingStandardOperations } from '@/object-record/types/AggregateOperationsOmittingStandardOperations';
import { isFieldTypeValidForAggregateOperation } from '@/object-record/utils/isFieldTypeValidForAggregateOperation';
import { FieldMetadataType } from '~/generated/graphql';
@ -27,7 +27,7 @@ export const getAvailableAggregateOperationsForFieldMetadataType = ({
return Array.from(availableAggregateOperations);
}
Object.keys(FIELDS_AVAILABLE_BY_AGGREGATE_OPERATION)
Object.keys(FIELD_TYPES_AVAILABLE_FOR_NON_STANDARD_AGGREGATE_OPERATION)
.filter((operation) =>
isFieldTypeValidForAggregateOperation(
fieldMetadataType,

4
packages/twenty-front/src/modules/object-record/types/AvailableFieldsForAggregateOperation.ts
View File

@ -1,5 +1,5 @@
import { AggregateOperationsOmittingStandardOperations } from '@/object-record/types/AggregateOperationsOmittingStandardOperations';
import { AGGREGATE_OPERATIONS } from '@/object-record/record-table/constants/AggregateOperations';
export type AvailableFieldsForAggregateOperation = {
[T in AggregateOperationsOmittingStandardOperations]?: string[];
[T in AGGREGATE_OPERATIONS]?: string[];
};

171
packages/twenty-front/src/modules/object-record/utils/__tests__/getAvailableFieldsIdsForAggregationFromObjectFields.test.ts
View File

@ -1,7 +1,8 @@
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { AGGREGATE_OPERATIONS } from '@/object-record/record-table/constants/AggregateOperations';
import { STANDARD_AGGREGATE_OPERATION_OPTIONS } from '@/object-record/record-table/record-table-footer/constants/standardAggregateOperationOptions';
import { AggregateOperationsOmittingStandardOperations } from '@/object-record/types/AggregateOperationsOmittingStandardOperations';
import { COUNT_AGGREGATE_OPERATION_OPTIONS } from '@/object-record/record-table/record-table-footer/constants/countAggregateOperationOptions';
import { NON_STANDARD_AGGREGATE_OPERATION_OPTIONS } from '@/object-record/record-table/record-table-footer/constants/nonStandardAggregateOperationsOptions';
import { PERCENT_AGGREGATE_OPERATION_OPTIONS } from '@/object-record/record-table/record-table-footer/constants/percentAggregateOperationOption';
import { getAvailableFieldsIdsForAggregationFromObjectFields } from '@/object-record/utils/getAvailableFieldsIdsForAggregationFromObjectFields';
import { FieldMetadataType } from '~/generated/graphql';
@ -9,59 +10,135 @@ const AMOUNT_FIELD_ID = '7d2d7b5e-7b3e-4b4a-8b0a-7b3e4b4a8b0a';
const PRICE_FIELD_ID = '9d2d7b5e-7b3e-4b4a-8b0a-7b3e4b4a8b0b';
const NAME_FIELD_ID = '5d2d7b5e-7b3e-4b4a-8b0a-7b3e4b4a8b0c';
describe('getAvailableFieldsIdsForAggregationFromObjectFields', () => {
const mockFields = [
{ id: AMOUNT_FIELD_ID, type: FieldMetadataType.Number, name: 'amount' },
{ id: PRICE_FIELD_ID, type: FieldMetadataType.Currency, name: 'price' },
{ id: NAME_FIELD_ID, type: FieldMetadataType.Text, name: 'name' },
];
const FIELDS_MOCKS = [
{ id: AMOUNT_FIELD_ID, type: FieldMetadataType.Number, name: 'amount' },
{ id: PRICE_FIELD_ID, type: FieldMetadataType.Currency, name: 'price' },
{ id: NAME_FIELD_ID, type: FieldMetadataType.Text, name: 'name' },
];
it('should correctly map fields to available aggregate operations', () => {
jest.mock(
'@/object-record/utils/getAvailableAggregationsFromObjectFields',
() => ({
getAvailableAggregationsFromObjectFields: jest.fn().mockReturnValue({
amount: {
[AGGREGATE_OPERATIONS.sum]: 'sumAmount',
[AGGREGATE_OPERATIONS.avg]: 'avgAmount',
[AGGREGATE_OPERATIONS.min]: 'minAmount',
[AGGREGATE_OPERATIONS.max]: 'maxAmount',
[AGGREGATE_OPERATIONS.count]: 'totalCount',
[AGGREGATE_OPERATIONS.countUniqueValues]: 'countUniqueValuesAmount',
[AGGREGATE_OPERATIONS.countEmpty]: 'countEmptyAmount',
[AGGREGATE_OPERATIONS.countNotEmpty]: 'countNotEmptyAmount',
[AGGREGATE_OPERATIONS.percentageEmpty]: 'percentageEmptyAmount',
[AGGREGATE_OPERATIONS.percentageNotEmpty]: 'percentageNotEmptyAmount',
},
price: {
[AGGREGATE_OPERATIONS.sum]: 'sumPriceAmountMicros',
[AGGREGATE_OPERATIONS.avg]: 'avgPriceAmountMicros',
[AGGREGATE_OPERATIONS.min]: 'minPriceAmountMicros',
[AGGREGATE_OPERATIONS.max]: 'maxPriceAmountMicros',
[AGGREGATE_OPERATIONS.count]: 'totalCount',
[AGGREGATE_OPERATIONS.countUniqueValues]:
'countUniqueValuesPriceAmountMicros',
[AGGREGATE_OPERATIONS.countEmpty]: 'countEmptyPriceAmountMicros',
[AGGREGATE_OPERATIONS.countNotEmpty]: 'countNotEmptyPriceAmountMicros',
[AGGREGATE_OPERATIONS.percentageEmpty]:
'percentageEmptyPriceAmountMicros',
[AGGREGATE_OPERATIONS.percentageNotEmpty]:
'percentageNotEmptyPriceAmountMicros',
},
name: {
[AGGREGATE_OPERATIONS.count]: 'totalCount',
[AGGREGATE_OPERATIONS.countUniqueValues]: 'countUniqueValuesName',
[AGGREGATE_OPERATIONS.countEmpty]: 'countEmptyName',
[AGGREGATE_OPERATIONS.countNotEmpty]: 'countNotEmptyName',
[AGGREGATE_OPERATIONS.percentageEmpty]: 'percentageEmptyName',
[AGGREGATE_OPERATIONS.percentageNotEmpty]: 'percentageNotEmptyName',
},
}),
}),
);
describe('getAvailableFieldsIdsForAggregationFromObjectFields', () => {
it('should handle empty fields array', () => {
const result = getAvailableFieldsIdsForAggregationFromObjectFields(
mockFields as FieldMetadataItem[],
[],
COUNT_AGGREGATE_OPERATION_OPTIONS,
);
expect(result[AGGREGATE_OPERATIONS.sum]).toEqual([
AMOUNT_FIELD_ID,
PRICE_FIELD_ID,
]);
expect(result[AGGREGATE_OPERATIONS.avg]).toEqual([
AMOUNT_FIELD_ID,
PRICE_FIELD_ID,
]);
expect(result[AGGREGATE_OPERATIONS.min]).toEqual([
AMOUNT_FIELD_ID,
PRICE_FIELD_ID,
]);
expect(result[AGGREGATE_OPERATIONS.max]).toEqual([
AMOUNT_FIELD_ID,
PRICE_FIELD_ID,
]);
});
it('should exclude non-numeric fields', () => {
const result = getAvailableFieldsIdsForAggregationFromObjectFields([
{ id: NAME_FIELD_ID, type: FieldMetadataType.Text } as FieldMetadataItem,
]);
Object.values(AGGREGATE_OPERATIONS).forEach((operation) => {
if (!STANDARD_AGGREGATE_OPERATION_OPTIONS.includes(operation)) {
expect(
result[operation as AggregateOperationsOmittingStandardOperations],
).toEqual([]);
}
COUNT_AGGREGATE_OPERATION_OPTIONS.forEach((operation) => {
expect(result[operation]).toEqual([]);
});
});
it('should handle empty fields array', () => {
const result = getAvailableFieldsIdsForAggregationFromObjectFields([]);
describe('with count aggregate operations', () => {
it('should include all fields', () => {
const result = getAvailableFieldsIdsForAggregationFromObjectFields(
FIELDS_MOCKS as FieldMetadataItem[],
COUNT_AGGREGATE_OPERATION_OPTIONS,
);
Object.values(AGGREGATE_OPERATIONS).forEach((operation) => {
if (!STANDARD_AGGREGATE_OPERATION_OPTIONS.includes(operation)) {
expect(
result[operation as AggregateOperationsOmittingStandardOperations],
).toEqual([]);
}
COUNT_AGGREGATE_OPERATION_OPTIONS.forEach((operation) => {
expect(result[operation]).toEqual([
AMOUNT_FIELD_ID,
PRICE_FIELD_ID,
NAME_FIELD_ID,
]);
});
PERCENT_AGGREGATE_OPERATION_OPTIONS.forEach((operation) => {
expect(result[operation]).toBeUndefined();
});
NON_STANDARD_AGGREGATE_OPERATION_OPTIONS.forEach((operation) => {
expect(result[operation]).toBeUndefined();
});
});
});
describe('with percentage aggregate operations', () => {
it('should include all fields', () => {
const result = getAvailableFieldsIdsForAggregationFromObjectFields(
FIELDS_MOCKS as FieldMetadataItem[],
PERCENT_AGGREGATE_OPERATION_OPTIONS,
);
PERCENT_AGGREGATE_OPERATION_OPTIONS.forEach((operation) => {
expect(result[operation]).toEqual([
AMOUNT_FIELD_ID,
PRICE_FIELD_ID,
NAME_FIELD_ID,
]);
});
COUNT_AGGREGATE_OPERATION_OPTIONS.forEach((operation) => {
expect(result[operation]).toBeUndefined();
});
NON_STANDARD_AGGREGATE_OPERATION_OPTIONS.forEach((operation) => {
expect(result[operation]).toBeUndefined();
});
});
});
describe('with non standard aggregate operations', () => {
it('should exclude non-numeric fields', () => {
const result = getAvailableFieldsIdsForAggregationFromObjectFields(
FIELDS_MOCKS as FieldMetadataItem[],
NON_STANDARD_AGGREGATE_OPERATION_OPTIONS,
);
COUNT_AGGREGATE_OPERATION_OPTIONS.forEach((operation) => {
expect(result[operation]).toBeUndefined();
});
PERCENT_AGGREGATE_OPERATION_OPTIONS.forEach((operation) => {
expect(result[operation]).toBeUndefined();
});
NON_STANDARD_AGGREGATE_OPERATION_OPTIONS.forEach((operation) => {
expect(result[operation]).toEqual([AMOUNT_FIELD_ID, PRICE_FIELD_ID]);
});
});
});
});

44
packages/twenty-front/src/modules/object-record/utils/__tests__/initializeAvailableFieldsForAggregateOperationMap.test.ts
View File

@ -1,26 +1,58 @@
import { AGGREGATE_OPERATIONS } from '@/object-record/record-table/constants/AggregateOperations';
import { FIELDS_AVAILABLE_BY_AGGREGATE_OPERATION } from '@/object-record/record-table/constants/FieldsAvailableByAggregateOperation';
import { FIELD_TYPES_AVAILABLE_FOR_NON_STANDARD_AGGREGATE_OPERATION } from '@/object-record/record-table/constants/FieldTypesAvailableForNonStandardAggregateOperation';
import { COUNT_AGGREGATE_OPERATION_OPTIONS } from '@/object-record/record-table/record-table-footer/constants/countAggregateOperationOptions';
import { PERCENT_AGGREGATE_OPERATION_OPTIONS } from '@/object-record/record-table/record-table-footer/constants/percentAggregateOperationOption';
import { AggregateOperationsOmittingStandardOperations } from '@/object-record/types/AggregateOperationsOmittingStandardOperations';
import { initializeAvailableFieldsForAggregateOperationMap } from '@/object-record/utils/initializeAvailableFieldsForAggregateOperationMap';
describe('initializeAvailableFieldsForAggregateOperationMap', () => {
it('should initialize empty arrays for each aggregate operation', () => {
const result = initializeAvailableFieldsForAggregateOperationMap();
it('should initialize empty arrays for each non standard aggregate operation', () => {
const result = initializeAvailableFieldsForAggregateOperationMap(
Object.keys(
FIELD_TYPES_AVAILABLE_FOR_NON_STANDARD_AGGREGATE_OPERATION,
) as AGGREGATE_OPERATIONS[],
);
expect(Object.keys(result)).toEqual(
Object.keys(FIELDS_AVAILABLE_BY_AGGREGATE_OPERATION),
Object.keys(FIELD_TYPES_AVAILABLE_FOR_NON_STANDARD_AGGREGATE_OPERATION),
);
Object.values(result).forEach((array) => {
expect(array).toEqual([]);
});
});
it('should not include count operation', () => {
const result = initializeAvailableFieldsForAggregateOperationMap();
it('should not include count operation when called with non standard aggregate operations', () => {
const result = initializeAvailableFieldsForAggregateOperationMap(
Object.keys(
FIELD_TYPES_AVAILABLE_FOR_NON_STANDARD_AGGREGATE_OPERATION,
) as AGGREGATE_OPERATIONS[],
);
expect(
result[
AGGREGATE_OPERATIONS.count as AggregateOperationsOmittingStandardOperations
],
).toBeUndefined();
});
it('should include count operation when called with count aggregate operations', () => {
const result = initializeAvailableFieldsForAggregateOperationMap(
COUNT_AGGREGATE_OPERATION_OPTIONS,
);
expect(result[AGGREGATE_OPERATIONS.count]).toEqual([]);
expect(result[AGGREGATE_OPERATIONS.countEmpty]).toEqual([]);
expect(result[AGGREGATE_OPERATIONS.countNotEmpty]).toEqual([]);
expect(result[AGGREGATE_OPERATIONS.countUniqueValues]).toEqual([]);
expect(result[AGGREGATE_OPERATIONS.min]).toBeUndefined();
expect(result[AGGREGATE_OPERATIONS.percentageEmpty]).toBeUndefined();
});
it('should include percent operation when called with count aggregate operations', () => {
const result = initializeAvailableFieldsForAggregateOperationMap(
PERCENT_AGGREGATE_OPERATION_OPTIONS,
);
expect(result[AGGREGATE_OPERATIONS.percentageEmpty]).toEqual([]);
expect(result[AGGREGATE_OPERATIONS.percentageNotEmpty]).toEqual([]);
expect(result[AGGREGATE_OPERATIONS.count]).toBeUndefined();
expect(result[AGGREGATE_OPERATIONS.min]).toBeUndefined();
});
});

28
packages/twenty-front/src/modules/object-record/utils/getAvailableAggregationsFromObjectFields.ts
View File

@ -1,6 +1,5 @@
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { AGGREGATE_OPERATIONS } from '@/object-record/record-table/constants/AggregateOperations';
import { getColumnNameForAggregateOperation } from 'twenty-shared';
import { FieldMetadataType } from '~/generated-metadata/graphql';
import { capitalize } from '~/utils/string/capitalize';
@ -16,6 +15,10 @@ export const getAvailableAggregationsFromObjectFields = (
fields: FieldMetadataItem[],
): Aggregations => {
return fields.reduce<Record<string, NameForAggregation>>((acc, field) => {
if (field.isSystem === true) {
return acc;
}
if (field.type === FieldMetadataType.Relation) {
acc[field.name] = {
[AGGREGATE_OPERATIONS.count]: 'totalCount',
@ -23,28 +26,15 @@ export const getAvailableAggregationsFromObjectFields = (
return acc;
}
const columnName = getColumnNameForAggregateOperation(
field.name,
field.type,
);
acc[field.name] = {
[AGGREGATE_OPERATIONS.countUniqueValues]: `countUniqueValues${capitalize(columnName)}`,
[AGGREGATE_OPERATIONS.countEmpty]: `countEmpty${capitalize(columnName)}`,
[AGGREGATE_OPERATIONS.countNotEmpty]: `countNotEmpty${capitalize(columnName)}`,
[AGGREGATE_OPERATIONS.percentageEmpty]: `percentageEmpty${capitalize(columnName)}`,
[AGGREGATE_OPERATIONS.percentageNotEmpty]: `percentageNotEmpty${capitalize(columnName)}`,
[AGGREGATE_OPERATIONS.countUniqueValues]: `countUniqueValues${capitalize(field.name)}`,
[AGGREGATE_OPERATIONS.countEmpty]: `countEmpty${capitalize(field.name)}`,
[AGGREGATE_OPERATIONS.countNotEmpty]: `countNotEmpty${capitalize(field.name)}`,
[AGGREGATE_OPERATIONS.percentageEmpty]: `percentageEmpty${capitalize(field.name)}`,
[AGGREGATE_OPERATIONS.percentageNotEmpty]: `percentageNotEmpty${capitalize(field.name)}`,
[AGGREGATE_OPERATIONS.count]: 'totalCount',
};
if (field.type === FieldMetadataType.DateTime) {
acc[field.name] = {
...acc[field.name],
[AGGREGATE_OPERATIONS.min]: `min${capitalize(field.name)}`,
[AGGREGATE_OPERATIONS.max]: `max${capitalize(field.name)}`,
};
}
if (field.type === FieldMetadataType.Number) {
acc[field.name] = {
...acc[field.name],

32
packages/twenty-front/src/modules/object-record/utils/getAvailableFieldsIdsForAggregationFromObjectFields.ts
View File

@ -1,32 +1,30 @@
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { FIELDS_AVAILABLE_BY_AGGREGATE_OPERATION } from '@/object-record/record-table/constants/FieldsAvailableByAggregateOperation';
import { AggregateOperationsOmittingStandardOperations } from '@/object-record/types/AggregateOperationsOmittingStandardOperations';
import { AGGREGATE_OPERATIONS } from '@/object-record/record-table/constants/AggregateOperations';
import { AvailableFieldsForAggregateOperation } from '@/object-record/types/AvailableFieldsForAggregateOperation';
import { getAvailableAggregationsFromObjectFields } from '@/object-record/utils/getAvailableAggregationsFromObjectFields';
import { initializeAvailableFieldsForAggregateOperationMap } from '@/object-record/utils/initializeAvailableFieldsForAggregateOperationMap';
import { isFieldTypeValidForAggregateOperation } from '@/object-record/utils/isFieldTypeValidForAggregateOperation';
import { isDefined } from '~/utils/isDefined';
export const getAvailableFieldsIdsForAggregationFromObjectFields = (
fields: FieldMetadataItem[],
targetAggregateOperations: AGGREGATE_OPERATIONS[],
): AvailableFieldsForAggregateOperation => {
const aggregationMap = initializeAvailableFieldsForAggregateOperationMap();
const aggregationMap = initializeAvailableFieldsForAggregateOperationMap(
targetAggregateOperations,
);
const allAggregations = getAvailableAggregationsFromObjectFields(fields);
return fields.reduce((acc, field) => {
Object.keys(FIELDS_AVAILABLE_BY_AGGREGATE_OPERATION).forEach(
(aggregateOperation) => {
const typedAggregateOperation =
aggregateOperation as AggregateOperationsOmittingStandardOperations;
if (isDefined(allAggregations[field.name])) {
Object.keys(allAggregations[field.name]).forEach((aggregation) => {
const typedAggregateOperation = aggregation as AGGREGATE_OPERATIONS;
if (
isFieldTypeValidForAggregateOperation(
field.type,
typedAggregateOperation,
)
) {
if (targetAggregateOperations.includes(typedAggregateOperation)) {
acc[typedAggregateOperation]?.push(field.id);
}
},
);
});
}
return acc;
}, aggregationMap);
};

23
packages/twenty-front/src/modules/object-record/utils/initializeAvailableFieldsForAggregateOperationMap.ts
View File

@ -1,13 +1,14 @@
import { FIELDS_AVAILABLE_BY_AGGREGATE_OPERATION } from '@/object-record/record-table/constants/FieldsAvailableByAggregateOperation';
import { AGGREGATE_OPERATIONS } from '@/object-record/record-table/constants/AggregateOperations';
import { AvailableFieldsForAggregateOperation } from '@/object-record/types/AvailableFieldsForAggregateOperation';
export const initializeAvailableFieldsForAggregateOperationMap =
(): AvailableFieldsForAggregateOperation => {
return Object.keys(FIELDS_AVAILABLE_BY_AGGREGATE_OPERATION).reduce(
(acc, operation) => ({
...acc,
[operation]: [],
}),
{},
);
};
export const initializeAvailableFieldsForAggregateOperationMap = (
aggregateOperations: AGGREGATE_OPERATIONS[],
): AvailableFieldsForAggregateOperation => {
return aggregateOperations.reduce(
(acc, operation) => ({
...acc,
[operation]: [],
}),
{},
);
};

8
packages/twenty-front/src/modules/object-record/utils/isFieldTypeValidForAggregateOperation.ts
View File

@ -1,4 +1,4 @@
import { FIELDS_AVAILABLE_BY_AGGREGATE_OPERATION } from '@/object-record/record-table/constants/FieldsAvailableByAggregateOperation';
import { FIELD_TYPES_AVAILABLE_FOR_NON_STANDARD_AGGREGATE_OPERATION } from '@/object-record/record-table/constants/FieldTypesAvailableForNonStandardAggregateOperation';
import { AggregateOperationsOmittingStandardOperations } from '@/object-record/types/AggregateOperationsOmittingStandardOperations';
import { FieldMetadataType } from '~/generated-metadata/graphql';
@ -6,7 +6,7 @@ export const isFieldTypeValidForAggregateOperation = (
fieldType: FieldMetadataType,
aggregateOperation: AggregateOperationsOmittingStandardOperations,
): boolean => {
return FIELDS_AVAILABLE_BY_AGGREGATE_OPERATION[aggregateOperation].includes(
fieldType,
);
return FIELD_TYPES_AVAILABLE_FOR_NON_STANDARD_AGGREGATE_OPERATION[
aggregateOperation
].includes(fieldType);
};