Feature : Adding percentage option to Input Number (#8481)

fixing #7375

---------

Co-authored-by: guillim <guillaume@twenty.com>

packages/twenty-front/src/modules/object-metadata/utils/formatFieldMetadataItemAsFieldDefinition.ts

@@ -54,6 +54,5 @@ export const formatFieldMetadataItemAsFieldDefinition = ({
       metadata: fieldDefintionMetadata,
       type: field.type,
     }),
-    settings: field.settings,
   };
 };

packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx

@@ -361,7 +361,6 @@ export const RecordBoardCard = ({
                           metadata: fieldDefinition.metadata,
                           type: fieldDefinition.type,
                         }),
-                        settings: fieldDefinition.settings,
                       },
                       useUpdateRecord: useUpdateOneRecordHook,
                       hotkeyScope: InlineCellHotkeyScope.InlineCell,

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/NumberFieldDisplay.tsx

@@ -1,12 +1,16 @@
 import { useNumberFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useNumberFieldDisplay';
 import { NumberDisplay } from '@/ui/field/display/components/NumberDisplay';
+import { formatNumber } from '~/utils/format/number';
 
 export const NumberFieldDisplay = () => {
   const { fieldValue, fieldDefinition } = useNumberFieldDisplay();
-  return (
+  const decimals = fieldDefinition.metadata.settings?.decimals;
-    <NumberDisplay
+  const type = fieldDefinition.metadata.settings?.type;
-      value={fieldValue}
+  const value =
-      decimals={fieldDefinition.settings?.decimals}
+    type === 'percentage' && fieldValue
-    />
+      ? `${formatNumber(Number(fieldValue) * 100, decimals)}%`
-  );
+      : fieldValue
+        ? formatNumber(Number(fieldValue), decimals)
+        : null;
+  return <NumberDisplay value={value} decimals={decimals} />;
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useNumberField.ts

@@ -11,6 +11,7 @@ import {
   castAsNumberOrNull,
 } from '~/utils/cast-as-number-or-null';
 
+import { isNull } from '@sniptt/guards';
 import { FieldContext } from '../../contexts/FieldContext';
 import { usePersistField } from '../../hooks/usePersistField';
 import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata';
@@ -33,12 +34,23 @@ export const useNumberField = () => {
   const persistField = usePersistField();
 
   const persistNumberField = (newValue: string) => {
+    if (fieldDefinition?.metadata?.settings?.type === 'percentage') {
+      newValue = newValue.replaceAll('%', '');
+      if (!canBeCastAsNumberOrNull(newValue)) {
+        return;
+      }
+      const castedValue = castAsNumberOrNull(newValue);
+      if (!isNull(castedValue)) {
+        persistField(castedValue / 100);
+        return;
+      }
+      persistField(null);
+      return;
+    }
     if (!canBeCastAsNumberOrNull(newValue)) {
       return;
     }
-
     const castedValue = castAsNumberOrNull(newValue);
-
     persistField(castedValue);
   };
 

packages/twenty-front/src/modules/object-record/record-field/types/FieldDefinition.ts

@@ -16,7 +16,4 @@ export type FieldDefinition<T extends FieldMetadata> = {
   infoTooltipContent?: string;
   defaultValue?: any;
   editButtonIcon?: IconComponent;
-  settings?: {
-    decimals?: number;
-  };
 };

packages/twenty-front/src/modules/object-record/record-field/types/FieldMetadata.ts

@@ -10,17 +10,20 @@ import { CurrencyCode } from './CurrencyCode';
 export type FieldUuidMetadata = {
   objectMetadataNameSingular?: string;
   fieldName: string;
+  settings?: Record<string, never>;
 };
 
 export type FieldBooleanMetadata = {
   objectMetadataNameSingular?: string;
   fieldName: string;
+  settings?: Record<string, never>;
 };
 
 export type FieldTextMetadata = {
   objectMetadataNameSingular?: string;
   placeHolder: string;
   fieldName: string;
+  settings?: Record<string, never>;
 };
 
 export type FieldDateTimeMetadata = {
@@ -46,17 +49,23 @@ export type FieldNumberMetadata = {
   fieldName: string;
   placeHolder: string;
   isPositive?: boolean;
+  settings?: {
+    decimals?: number;
+    type?: 'percentage' | 'number';
+  };
 };
 
 export type FieldLinkMetadata = {
   objectMetadataNameSingular?: string;
   placeHolder: string;
   fieldName: string;
+  settings?: Record<string, never>;
 };
 
 export type FieldLinksMetadata = {
   objectMetadataNameSingular?: string;
   fieldName: string;
+  settings?: Record<string, never>;
 };
 
 export type FieldCurrencyMetadata = {
@@ -64,56 +73,66 @@ export type FieldCurrencyMetadata = {
   fieldName: string;
   placeHolder: string;
   isPositive?: boolean;
+  settings?: Record<string, never>;
 };
 
 export type FieldFullNameMetadata = {
   objectMetadataNameSingular?: string;
   placeHolder: string;
   fieldName: string;
+  settings?: Record<string, never>;
 };
 
 export type FieldEmailMetadata = {
   objectMetadataNameSingular?: string;
   placeHolder: string;
   fieldName: string;
+  settings?: Record<string, never>;
 };
 
 export type FieldEmailsMetadata = {
   objectMetadataNameSingular?: string;
   fieldName: string;
+  settings?: Record<string, never>;
 };
 
 export type FieldPhoneMetadata = {
   objectMetadataNameSingular?: string;
   placeHolder: string;
   fieldName: string;
+  settings?: Record<string, never>;
 };
 
 export type FieldRatingMetadata = {
   objectMetadataNameSingular?: string;
   fieldName: string;
+  settings?: Record<string, never>;
 };
 
 export type FieldAddressMetadata = {
   objectMetadataNameSingular?: string;
   placeHolder: string;
   fieldName: string;
+  settings?: Record<string, never>;
 };
 
 export type FieldRawJsonMetadata = {
   objectMetadataNameSingular?: string;
   fieldName: string;
   placeHolder: string;
+  settings?: Record<string, never>;
 };
 
 export type FieldRichTextMetadata = {
   objectMetadataNameSingular?: string;
   fieldName: string;
+  settings?: Record<string, never>;
 };
 
 export type FieldPositionMetadata = {
   objectMetadataNameSingular?: string;
   fieldName: string;
+  settings?: Record<string, never>;
 };
 
 export type FieldRelationMetadata = {
@@ -125,6 +144,7 @@ export type FieldRelationMetadata = {
   relationType?: RelationDefinitionType;
   targetFieldMetadataName?: string;
   useEditButton?: boolean;
+  settings?: Record<string, never>;
 };
 
 export type FieldSelectMetadata = {
@@ -132,33 +152,39 @@ export type FieldSelectMetadata = {
   fieldName: string;
   options: { label: string; color: ThemeColor; value: string }[];
   isNullable: boolean;
+  settings?: Record<string, never>;
 };
 
 export type FieldMultiSelectMetadata = {
   objectMetadataNameSingular?: string;
   fieldName: string;
   options: { label: string; color: ThemeColor; value: string }[];
+  settings?: Record<string, never>;
 };
 
 export type FieldActorMetadata = {
   objectMetadataNameSingular?: string;
   fieldName: string;
+  settings?: Record<string, never>;
 };
 
 export type FieldArrayMetadata = {
   objectMetadataNameSingular?: string;
   fieldName: string;
   values: { label: string; value: string }[];
+  settings?: Record<string, never>;
 };
 
 export type FieldPhonesMetadata = {
   objectMetadataNameSingular?: string;
   fieldName: string;
+  settings?: Record<string, never>;
 };
 
 export type FieldTsVectorMetadata = {
   objectMetadataNameSingular?: string;
   fieldName: string;
+  settings?: Record<string, never>;
 };
 
 export type FieldMetadata =

packages/twenty-front/src/modules/object-record/record-field/utils/computeDraftValueFromFieldValue.ts

@@ -3,6 +3,8 @@ import { FieldInputDraftValue } from '@/object-record/record-field/types/FieldIn
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { isFieldCurrency } from '@/object-record/record-field/types/guards/isFieldCurrency';
 import { isFieldCurrencyValue } from '@/object-record/record-field/types/guards/isFieldCurrencyValue';
+import { isFieldNumber } from '@/object-record/record-field/types/guards/isFieldNumber';
+import { isFieldNumberValue } from '@/object-record/record-field/types/guards/isFieldNumberValue';
 import { isFieldRawJson } from '@/object-record/record-field/types/guards/isFieldRawJson';
 import { isFieldRawJsonValue } from '@/object-record/record-field/types/guards/isFieldRawJsonValue';
 import { isFieldRelation } from '@/object-record/record-field/types/guards/isFieldRelation';
@@ -12,7 +14,7 @@ import { isDefined } from '~/utils/isDefined';
 import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
 
 type computeDraftValueFromFieldValueParams<FieldValue> = {
-  fieldDefinition: Pick<FieldDefinition<FieldMetadata>, 'type'>;
+  fieldDefinition: Pick<FieldDefinition<FieldMetadata>, 'type' | 'metadata'>;
   fieldValue: FieldValue;
 };
 
@@ -40,6 +42,18 @@ export const computeDraftValueFromFieldValue = <FieldValue>({
     } as unknown as FieldInputDraftValue<FieldValue>;
   }
 
+  if (
+    isFieldNumber(fieldDefinition) &&
+    isFieldNumberValue(fieldValue) &&
+    fieldDefinition.metadata.settings?.type === 'percentage'
+  ) {
+    return (isUndefinedOrNull(fieldValue)
+      ? ''
+      : (
+          fieldValue * 100
+        ).toString()) as unknown as FieldInputDraftValue<FieldValue>;
+  }
+
   if (isFieldRelation(fieldDefinition)) {
     return computeEmptyDraftValue<FieldValue>({ fieldDefinition });
   }

packages/twenty-front/src/modules/object-record/record-field/validation-schemas/numberFieldDefaultValueSchema.ts

@@ -2,4 +2,5 @@ import { z } from 'zod';
 
 export const numberFieldDefaultValueSchema = z.object({
   decimals: z.number().nullable(),
+  type: z.enum(['percentage', 'number']).nullable(),
 });

packages/twenty-front/src/modules/object-record/record-index/options/hooks/__tests__/useRecordData.test.tsx

@@ -304,9 +304,6 @@ describe('useRecordData', () => {
                 },
               },
               position: expect.any(Number),
-              settings: {
-                displayAsRelativeDate: true,
-              },
               showLabel: undefined,
               size: 100,
               type: 'DATE_TIME',

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

@@ -4,7 +4,9 @@ import { z } from 'zod';
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { numberFieldDefaultValueSchema } from '@/object-record/record-field/validation-schemas/numberFieldDefaultValueSchema';
 import { SettingsDataModelFieldNumberDecimalsInput } from '@/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberDecimalInput';
-import { CardContent } from 'twenty-ui';
+import { Select } from '@/ui/input/components/Select';
+import styled from '@emotion/styled';
+import { CardContent, IconNumber9, IconPercentage } from 'twenty-ui';
 import { DEFAULT_DECIMAL_VALUE } from '~/utils/format/number';
 
 export const settingsDataModelFieldNumberFormSchema = z.object({
@@ -15,6 +17,13 @@ export type SettingsDataModelFieldNumberFormValues = z.infer<
   typeof settingsDataModelFieldNumberFormSchema
 >;
 
+const StyledFormCardTitle = styled.div`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin-bottom: ${({ theme }) => theme.spacing(1)};
+`;
+
 type SettingsDataModelFieldNumberFormProps = {
   disabled?: boolean;
   fieldMetadataItem: Pick<
@@ -36,17 +45,43 @@ export const SettingsDataModelFieldNumberForm = ({
         defaultValue={{
           decimals:
             fieldMetadataItem?.settings?.decimals ?? DEFAULT_DECIMAL_VALUE,
+          type: fieldMetadataItem?.settings?.type || 'number',
         }}
         control={control}
         render={({ field: { onChange, value } }) => {
           const count = value?.decimals ?? 0;
+          const type = value?.type ?? 'number';
 
           return (
-            <SettingsDataModelFieldNumberDecimalsInput
+            <>
-              value={count}
+              <StyledFormCardTitle>Type</StyledFormCardTitle>
-              onChange={(value) => onChange({ decimals: value })}
+              <Select
-              disabled={disabled}
+                disabled={disabled}
-            ></SettingsDataModelFieldNumberDecimalsInput>
+                dropdownId="selectNumberTypes"
+                options={[
+                  {
+                    label: 'Number',
+                    value: 'number',
+                    Icon: IconNumber9,
+                  },
+                  {
+                    label: 'Percentage',
+                    value: 'percentage',
+                    Icon: IconPercentage,
+                  },
+                ]}
+                value={type}
+                onChange={(value) => onChange({ type: value, decimals: count })}
+                withSearchInput={false}
+                dropdownWidthAuto={true}
+              />
+              <br />
+              <SettingsDataModelFieldNumberDecimalsInput
+                value={count}
+                onChange={(value) => onChange({ type: type, decimals: value })}
+                disabled={disabled}
+              />
+            </>
           );
         }}
       />

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx

@@ -11,6 +11,7 @@ type SettingsObjectFieldDataTypeProps = {
   to?: string;
   Icon?: IconComponent;
   label?: string;
+  labelDetail?: string;
   value: SettingsFieldType;
 };
 
@@ -50,11 +51,15 @@ const StyledLabelContainer = styled.div`
   white-space: nowrap;
 `;
 
+const StyledSpan = styled.span`
+  color: ${({ theme }) => theme.font.color.extraLight};
+`;
 export const SettingsObjectFieldDataType = ({
   to,
   value,
   Icon: IconFromProps,
   label: labelFromProps,
+  labelDetail,
 }: SettingsObjectFieldDataTypeProps) => {
   const theme = useTheme();
 
@@ -70,7 +75,9 @@ export const SettingsObjectFieldDataType = ({
   return (
     <StyledDataType as={to ? Link : 'div'} to={to} value={value}>
       <StyledIcon size={theme.icon.size.sm} />
-      <StyledLabelContainer>{label}</StyledLabelContainer>
+      <StyledLabelContainer>
+        {label} <StyledSpan>{labelDetail && `· ${labelDetail}`}</StyledSpan>
+      </StyledLabelContainer>
     </StyledDataType>
   );
 };

packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx

@@ -90,7 +90,6 @@ export const SettingsObjectFieldItemTableRow = ({
       () => getRelationMetadata({ fieldMetadataItem }),
       [fieldMetadataItem, getRelationMetadata],
     ) ?? {};
-
   const fieldType = fieldMetadataItem.type;
   const isFieldTypeSupported = isFieldTypeSupportedInSettings(fieldType);
 
@@ -234,6 +233,9 @@ export const SettingsObjectFieldItemTableRow = ({
               ? relationObjectMetadataItem?.labelSingular
               : relationObjectMetadataItem?.labelPlural
           }
+          labelDetail={
+            fieldMetadataItem.settings?.type === 'percentage' ? '%' : undefined
+          }
           to={
             relationObjectMetadataItem?.namePlural &&
             !relationObjectMetadataItem.isSystem

packages/twenty-front/src/modules/ui/field/display/components/NumberDisplay.tsx

@@ -1,5 +1,3 @@
-import { formatNumber } from '~/utils/format/number';
-
 import { EllipsisDisplay } from './EllipsisDisplay';
 
 type NumberDisplayProps = {
@@ -7,8 +5,6 @@ type NumberDisplayProps = {
   decimals?: number;
 };
 
-export const NumberDisplay = ({ value, decimals }: NumberDisplayProps) => (
+export const NumberDisplay = ({ value }: NumberDisplayProps) => (
-  <EllipsisDisplay>
+  <EllipsisDisplay>{value}</EllipsisDisplay>
-    {value && formatNumber(Number(value), decimals)}
-  </EllipsisDisplay>
 );

packages/twenty-front/src/modules/views/utils/mapViewFieldsToColumnDefinitions.ts

@@ -50,7 +50,7 @@ export const mapViewFieldsToColumnDefinitions = ({
         isSortable: correspondingColumnDefinition.isSortable,
         isFilterable: correspondingColumnDefinition.isFilterable,
         defaultValue: correspondingColumnDefinition.defaultValue,
-        settings: correspondingColumnDefinition.settings,
+        settings: correspondingColumnDefinition.metadata.settings,
       } as ColumnDefinition<FieldMetadata>;
     })
     .filter(isDefined);

packages/twenty-server/src/engine/metadata-modules/field-metadata/field-metadata-validation.service.ts

@@ -1,5 +1,14 @@
 import { Injectable } from '@nestjs/common';
 
+import { plainToInstance } from 'class-transformer';
+import {
+  IsEnum,
+  IsInt,
+  IsOptional,
+  Min,
+  validateOrReject,
+} from 'class-validator';
+
 import { FieldMetadataSettings } from 'src/engine/metadata-modules/field-metadata/interfaces/field-metadata-settings.interface';
 
 import { FieldMetadataType } from 'src/engine/metadata-modules/field-metadata/field-metadata.entity';
@@ -8,13 +17,29 @@ import {
   FieldMetadataExceptionCode,
 } from 'src/engine/metadata-modules/field-metadata/field-metadata.exception';
 
+enum ValueType {
+  PERCENTAGE = 'percentage',
+  NUMBER = 'number',
+}
+
+class SettingsValidation {
+  @IsOptional()
+  @IsInt()
+  @Min(0)
+  decimals?: number;
+
+  @IsOptional()
+  @IsEnum(ValueType)
+  type?: 'percentage' | 'number';
+}
+
 @Injectable()
 export class FieldMetadataValidationService<
   T extends FieldMetadataType | 'default' = 'default',
 > {
   constructor() {}
 
-  validateSettingsOrThrow({
+  async validateSettingsOrThrow({
     fieldType,
     settings,
   }: {
@@ -23,26 +48,28 @@ export class FieldMetadataValidationService<
   }) {
     switch (fieldType) {
       case FieldMetadataType.NUMBER:
-        this.validateNumberSettings(settings);
+        await this.validateNumberSettings(settings);
         break;
       default:
         break;
     }
   }
 
-  private validateNumberSettings(settings: FieldMetadataSettings<T>) {
+  private async validateNumberSettings(settings: any) {
-    if ('decimals' in settings) {
+    try {
-      const { decimals } = settings;
+      const settingsInstance = plainToInstance(SettingsValidation, settings);
 
-      if (
+      await validateOrReject(settingsInstance);
-        decimals !== undefined &&
+    } catch (errors) {
-        (decimals < 0 || !Number.isInteger(decimals))
+      const errorMessages = errors
-      ) {
+        .map((error: any) => Object.values(error.constraints))
-        throw new FieldMetadataException(
+        .flat()
-          `Decimals value "${decimals}" must be a positive integer`,
+        .join(', ');
-          FieldMetadataExceptionCode.INVALID_FIELD_INPUT,
+
-        );
+      throw new FieldMetadataException(
-      }
+        `Value for settings is invalid: ${errorMessages}`,
+        FieldMetadataExceptionCode.INVALID_FIELD_INPUT,
+      );
     }
   }
 }

packages/twenty-server/src/engine/metadata-modules/field-metadata/field-metadata.service.ts

@@ -410,7 +410,7 @@ export class FieldMetadataService extends TypeOrmQueryService<FieldMetadataEntit
       // We're running field update under a transaction, so we can rollback if migration fails
       await fieldMetadataRepository.update(id, fieldMetadataForUpdate);
 
-      const updatedFieldMetadata = await fieldMetadataRepository.findOne({
+      const [updatedFieldMetadata] = await fieldMetadataRepository.find({
         where: { id },
       });
 

packages/twenty-server/src/engine/metadata-modules/field-metadata/interfaces/field-metadata-settings.interface.ts

@@ -13,6 +13,7 @@ type FieldMetadataDefaultSettings = {
 type FieldMetadataNumberSettings = {
   dataType: NumberDataType;
   decimals?: number;
+  type?: string;
 };
 
 type FieldMetadataDateSettings = {

packages/twenty-ui/src/display/icon/components/TablerIcons.ts

@@ -176,9 +176,11 @@ export {
   IconMouse2,
   IconNorthStar,
   IconNotes,
+  IconNumber9,
   IconNumbers,
   IconPaperclip,
   IconPencil,
+  IconPercentage,
   IconPhone,
   IconPhoto,
   IconPhotoUp,