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

feat: add short number formatting option to number field (#12613)

Browse Source 
resolve #11927
Add a new 'Short Number' option that disables decimals and resets the
value to 0 when selected.


https://github.com/user-attachments/assets/d3524115-e3ec-4a07-9dbf-e19d03cf65dd



https://github.com/user-attachments/assets/2f2b46d1-06d9-4a92-8f37-0291d46accab

---------

Co-authored-by: prastoin <paul@twenty.com>
This commit is contained in:
Naifer
2025-06-16 10:48:18 +01:00
committed by GitHub
parent 929586e4a9
commit a44ba2065d
8 changed files with 67 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberForm.tsx
View File

@ -6,11 +6,11 @@ import { numberFieldDefaultValueSchema } from '@/object-record/record-field/vali
import { Separator } from '@/settings/components/Separator';
import { SettingsOptionCardContentCounter } from '@/settings/components/SettingsOptions/SettingsOptionCardContentCounter';
import { SettingsOptionCardContentSelect } from '@/settings/components/SettingsOptions/SettingsOptionCardContentSelect';
import { NUMBER_DATA_MODEL_SELECT_OPTIONS } from '@/settings/data-model/fields/forms/number/constants/NumberDataModelSelectOptions';
import { Select } from '@/ui/input/components/Select';
import { useLingui } from '@lingui/react/macro';
import { IconDecimal, IconEye } from 'twenty-ui/display';
import { DEFAULT_DECIMAL_VALUE } from '~/utils/format/number';
import { NUMBER_DATA_MODEL_SELECT_OPTIONS } from '@/settings/data-model/fields/forms/number/constants/NumberDataModelSelectOptions';
export const settingsDataModelFieldNumberFormSchema = z.object({
settings: numberFieldDefaultValueSchema,
@ -60,7 +60,13 @@ export const SettingsDataModelFieldNumberForm = ({
dropdownId="number-type"
dropdownWidth={120}
value={type}
onChange={(value) => onChange({ type: value, decimals: count })}
onChange={(value) =>
onChange({
type: value,
decimals:
value === 'shortNumber' ? DEFAULT_DECIMAL_VALUE : count,
})
}
disabled={disabled}
needIconCheck={false}
options={NUMBER_DATA_MODEL_SELECT_OPTIONS.map((option) => ({
@ -70,16 +76,18 @@ export const SettingsDataModelFieldNumberForm = ({
/>
</SettingsOptionCardContentSelect>
<Separator />
<SettingsOptionCardContentCounter
Icon={IconDecimal}
title={t`Number of decimals`}
description={`E.g. ${(type === 'percentage' ? 99 : 1000).toFixed(count)}${type === 'percentage' ? '%' : ''} for ${count} decimal${count > 1 ? 's' : ''}`}
value={count}
onChange={(value) => onChange({ type: type, decimals: value })}
disabled={disabled}
minValue={0}
maxValue={100} // needs to be changed
/>
{type !== 'shortNumber' && (
<SettingsOptionCardContentCounter
Icon={IconDecimal}
title={t`Number of decimals`}
description={`E.g. ${(type === 'percentage' ? 99 : 1000).toFixed(count)}${type === 'percentage' ? '%' : ''} for ${count} decimal${count > 1 ? 's' : ''}`}
value={count}
onChange={(value) => onChange({ type: type, decimals: value })}
disabled={disabled}
minValue={0}
maxValue={100} // needs to be changed
/>
)}
</>
);
}}

25
packages/twenty-front/src/modules/settings/data-model/fields/forms/number/constants/NumberDataModelSelectOptions.ts
View File

@ -1,15 +1,36 @@
import { FieldNumberVariant } from '@/object-record/record-field/types/FieldMetadata';
import { MessageDescriptor } from '@lingui/core';
import { msg } from '@lingui/core/macro';
import { IconNumber9, IconPercentage } from 'twenty-ui/display';
import { ForwardRefExoticComponent, RefAttributes } from 'react';
import {
IconComponent,
IconComponentProps,
IconLetterK,
IconNumber9,
IconPercentage,
} from 'twenty-ui/display';
type NumberDataModelSelectOptions = {
Icon: ForwardRefExoticComponent<
IconComponentProps & RefAttributes<IconComponent>
>;
label: MessageDescriptor;
value: FieldNumberVariant;
};
export const NUMBER_DATA_MODEL_SELECT_OPTIONS = [
{
Icon: IconNumber9,
label: msg`Number`,
value: 'number',
},
{
Icon: IconLetterK,
label: msg`Short`,
value: 'shortNumber',
},
{
Icon: IconPercentage,
label: msg`Percentage`,
value: 'percentage',
},
];
] as const satisfies Array<NumberDataModelSelectOptions>;