Reactive form preview

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

@@ -6,11 +6,15 @@ export const NumberFieldDisplay = () => {
   const { fieldValue, fieldDefinition } = useNumberFieldDisplay();
   const decimals = fieldDefinition.metadata.settings?.decimals;
   const type = fieldDefinition.metadata.settings?.type;
-  const value =
-    type === 'percentage' && fieldValue
-      ? `${formatNumber(Number(fieldValue) * 100, decimals)}%`
-      : fieldValue
-        ? formatNumber(Number(fieldValue), decimals)
-        : null;
+
+  if (!fieldValue) return <NumberDisplay value={null} />;
+
+  const numericValue = Number(fieldValue);
+  if (Number.isNaN(numericValue)) return <NumberDisplay value={null} />;
+
+  const value = type === 'percentage'
+    ? `${formatNumber(numericValue * 100, decimals)}%`
+    : formatNumber(numericValue, decimals);
+
   return <NumberDisplay value={value} decimals={decimals} />;
 };

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

@@ -1,8 +1,12 @@
 import styled from '@emotion/styled';
+import { useFormContext } from 'react-hook-form';
 
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { SettingsDataModelPreviewFormCard } from '@/settings/data-model/components/SettingsDataModelPreviewFormCard';
-import { SettingsDataModelFieldNumberForm } from '@/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberForm';
+import {
+  SettingsDataModelFieldNumberForm,
+  SettingsDataModelFieldNumberFormValues,
+} from '@/settings/data-model/fields/forms/number/components/SettingsDataModelFieldNumberForm';
 import {
   SettingsDataModelFieldPreviewCard,
   SettingsDataModelFieldPreviewCardProps,
@@ -12,7 +16,7 @@ type SettingsDataModelFieldNumberSettingsFormCardProps = {
   disabled?: boolean;
   fieldMetadataItem: Pick<
     FieldMetadataItem,
-    'icon' | 'label' | 'type' | 'defaultValue'
+    'icon' | 'label' | 'type' | 'defaultValue' | 'settings'
   >;
 } & Pick<SettingsDataModelFieldPreviewCardProps, 'objectMetadataItem'>;
 
@@ -26,11 +30,18 @@ export const SettingsDataModelFieldNumberSettingsFormCard = ({
   fieldMetadataItem,
   objectMetadataItem,
 }: SettingsDataModelFieldNumberSettingsFormCardProps) => {
+  const { watch } = useFormContext<SettingsDataModelFieldNumberFormValues>();
+
+  const settings = watch('settings');
+
   return (
     <SettingsDataModelPreviewFormCard
       preview={
         <StyledFieldPreviewCard
-          fieldMetadataItem={fieldMetadataItem}
+          fieldMetadataItem={{
+            ...fieldMetadataItem,
+            settings: settings ?? fieldMetadataItem.settings ?? { decimals: 0 },
+          }}
           objectMetadataItem={objectMetadataItem}
         />
       }

packages/twenty-front/src/modules/settings/data-model/fields/preview/utils/getFieldPreviewValue.ts

@@ -1,35 +1,27 @@
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
-import { isFieldValueEmpty } from '@/object-record/record-field/utils/isFieldValueEmpty';
-import { generateDefaultFieldValue } from '@/object-record/utils/generateDefaultFieldValue';
+import { SettingsFieldType } from '@/settings/data-model/types/SettingsFieldType';
 import { getSettingsFieldTypeConfig } from '@/settings/data-model/utils/getSettingsFieldTypeConfig';
-import { isFieldTypeSupportedInSettings } from '@/settings/data-model/utils/isFieldTypeSupportedInSettings';
-import { isDefined } from '~/utils/isDefined';
+import { FieldMetadataType } from '~/generated-metadata/graphql';
+
+const DEFAULT_NUMBER_PREVIEW_VALUE = 2000;
 
 export const getFieldPreviewValue = ({
   fieldMetadataItem,
 }: {
-  fieldMetadataItem: Pick<FieldMetadataItem, 'type' | 'defaultValue'>;
+  fieldMetadataItem: Pick<
+    FieldMetadataItem,
+    'type' | 'defaultValue'
+  >;
 }) => {
-  if (!isFieldTypeSupportedInSettings(fieldMetadataItem.type)) return null;
-
-  if (
-    !isFieldValueEmpty({
-      fieldDefinition: { type: fieldMetadataItem.type },
-      fieldValue: fieldMetadataItem.defaultValue,
-    })
-  ) {
-    return generateDefaultFieldValue(fieldMetadataItem);
+  if (fieldMetadataItem.defaultValue !== undefined && fieldMetadataItem.defaultValue !== null) {
+    return fieldMetadataItem.defaultValue;
   }
 
-  const fieldTypeConfig = getSettingsFieldTypeConfig(fieldMetadataItem.type);
-
-  if (
-    isDefined(fieldTypeConfig) &&
-    'exampleValue' in fieldTypeConfig &&
-    isDefined(fieldTypeConfig.exampleValue)
-  ) {
-    return fieldTypeConfig.exampleValue;
+  const fieldTypeConfig = getSettingsFieldTypeConfig(fieldMetadataItem.type as SettingsFieldType);
+
+  if (fieldMetadataItem.type === FieldMetadataType.Number) {
+    return fieldTypeConfig.exampleValue || DEFAULT_NUMBER_PREVIEW_VALUE;
   }
 
-  return null;
+  return fieldTypeConfig.exampleValue ?? null;
 };