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

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>
2025-06-16 10:48:18 +01:00
parent 929586e4a9
commit a44ba2065d
8 changed files with 67 additions and 26 deletions
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/NumberFieldDisplay.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/NumberFieldDisplay.tsx
@ -1,6 +1,7 @@
 import { useNumberFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useNumberFieldDisplay';
 import { NumberDisplay } from '@/ui/field/display/components/NumberDisplay';
 import { isDefined } from 'twenty-shared/utils';
+import { formatAmount } from '~/utils/format/formatAmount';
 import { formatNumber } from '~/utils/format/number';

 export const NumberFieldDisplay = () => {
@ -13,7 +14,9 @@ export const NumberFieldDisplay = () => {
  const value =
    type === 'percentage'
      ? `${formatNumber(Number(fieldValue) * 100, decimals)}%`
-      : formatNumber(Number(fieldValue), decimals);
+      : type === 'shortNumber'
+        ? formatAmount(Number(fieldValue))
+        : formatNumber(Number(fieldValue), decimals);

  return <NumberDisplay value={value} decimals={decimals} />;
 };
--- a/packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts
+++ b/packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts
@ -56,7 +56,12 @@ export type FieldDateMetadata = BaseFieldMetadata & {
  settings?: FieldDateMetadataSettings;
 };

-export type FieldNumberVariant = 'number' | 'percentage';
+export const FIELD_NUMBER_VARIANT = [
+  'number',
+  'percentage',
+  'shortNumber',
+] as const;
+export type FieldNumberVariant = (typeof FIELD_NUMBER_VARIANT)[number];

 export type FieldNumberMetadata = BaseFieldMetadata & {
  placeHolder: string;
--- a/packages/twenty-front/src/modules/object-record/record-field/validation-schemas/numberFieldDefaultValueSchema.ts
+++ b/packages/twenty-front/src/modules/object-record/record-field/validation-schemas/numberFieldDefaultValueSchema.ts
@ -1,6 +1,7 @@
+import { FIELD_NUMBER_VARIANT } from '@/object-record/record-field/types/FieldMetadata';
 import { z } from 'zod';

 export const numberFieldDefaultValueSchema = z.object({
  decimals: z.number().nullable(),
-  type: z.enum(['percentage', 'number']).nullable(),
+  type: z.enum(FIELD_NUMBER_VARIANT).nullable(),
 });
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberForm.tsx
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberForm.tsx
@ -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
+              />
+            )}
          </>
        );
      }}
--- a/packages/twenty-front/src/modules/settings/data-model/fields/forms/number/constants/NumberDataModelSelectOptions.ts
+++ b/packages/twenty-front/src/modules/settings/data-model/fields/forms/number/constants/NumberDataModelSelectOptions.ts
@ -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>;
--- a/packages/twenty-server/src/engine/metadata-modules/field-metadata/field-metadata-validation.service.ts
+++ b/packages/twenty-server/src/engine/metadata-modules/field-metadata/field-metadata-validation.service.ts
@ -25,6 +25,7 @@ import {
 enum ValueType {
  PERCENTAGE = 'percentage',
  NUMBER = 'number',
+  SHORT_NUMBER = 'shortNumber',
 }

 class NumberSettingsValidation {
@ -35,7 +36,7 @@ class NumberSettingsValidation {

  @IsOptional()
  @IsEnum(ValueType)
-  type?: 'percentage' | 'number';
+  type?: 'percentage' | 'number' | 'shortNumber';
 }

 class TextSettingsValidation {
--- a/packages/twenty-ui/src/display/icon/components/TablerIcons.ts
+++ b/packages/twenty-ui/src/display/icon/components/TablerIcons.ts
@ -4,18 +4,18 @@ export {
  IconAlertCircle,
  IconAlertTriangle,
  IconApi,
-  IconApps,
  IconAppWindow,
+  IconApps,
  IconArchive,
  IconArchiveOff,
  IconArrowBackUp,
  IconArrowDown,
  IconArrowLeft,
  IconArrowRight,
-  IconArrowsDiagonal,
-  IconArrowsVertical,
  IconArrowUp,
  IconArrowUpRight,
+  IconArrowsDiagonal,
+  IconArrowsVertical,
  IconAt,
  IconBaselineDensitySmall,
  IconBell,
@ -47,8 +47,8 @@ export {
  IconChevronDown,
  IconChevronLeft,
  IconChevronRight,
-  IconChevronsRight,
  IconChevronUp,
+  IconChevronsRight,
  IconCircleDot,
  IconCircleOff,
  IconCirclePlus,
@ -186,6 +186,7 @@ export {
  IconLayoutSidebarRight,
  IconLayoutSidebarRightCollapse,
  IconLayoutSidebarRightExpand,
+  IconLetterK,
  IconLibraryPlus,
  IconLifebuoy,
  IconLink,
--- a/packages/twenty-ui/src/display/index.ts
+++ b/packages/twenty-ui/src/display/index.ts
@ -65,18 +65,18 @@ export {
  IconAlertCircle,
  IconAlertTriangle,
  IconApi,
-  IconApps,
  IconAppWindow,
+  IconApps,
  IconArchive,
  IconArchiveOff,
  IconArrowBackUp,
  IconArrowDown,
  IconArrowLeft,
  IconArrowRight,
-  IconArrowsDiagonal,
-  IconArrowsVertical,
  IconArrowUp,
  IconArrowUpRight,
+  IconArrowsDiagonal,
+  IconArrowsVertical,
  IconAt,
  IconBaselineDensitySmall,
  IconBell,
@ -108,8 +108,8 @@ export {
  IconChevronDown,
  IconChevronLeft,
  IconChevronRight,
-  IconChevronsRight,
  IconChevronUp,
+  IconChevronsRight,
  IconCircleDot,
  IconCircleOff,
  IconCirclePlus,
@ -247,6 +247,7 @@ export {
  IconLayoutSidebarRight,
  IconLayoutSidebarRightCollapse,
  IconLayoutSidebarRightExpand,
+  IconLetterK,
  IconLibraryPlus,
  IconLifebuoy,
  IconLink,