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

fixing #7375 --------- Co-authored-by: guillim <guillaume@twenty.com>
2024-11-14 14:23:25 +01:00
parent 090f612c4b
commit 15b8b9b158
18 changed files with 166 additions and 47 deletions
--- a/packages/twenty-front/src/modules/object-metadata/utils/formatFieldMetadataItemAsFieldDefinition.ts
+++ b/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,
  };
 };
--- a/packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCard.tsx
+++ b/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,
--- 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,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 (
-    <NumberDisplay
-      value={fieldValue}
-      decimals={fieldDefinition.settings?.decimals}
-    />
-  );
+  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;
+  return <NumberDisplay value={value} decimals={decimals} />;
 };
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useNumberField.ts
+++ b/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);
  };

--- a/packages/twenty-front/src/modules/object-record/record-field/types/FieldDefinition.ts
+++ b/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;
-  };
 };
--- 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
@ -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 =
--- a/packages/twenty-front/src/modules/object-record/record-field/utils/computeDraftValueFromFieldValue.ts
+++ b/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 });
  }
--- 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
@ -2,4 +2,5 @@ import { z } from 'zod';

 export const numberFieldDefaultValueSchema = z.object({
  decimals: z.number().nullable(),
+  type: z.enum(['percentage', 'number']).nullable(),
 });
--- a/packages/twenty-front/src/modules/object-record/record-index/options/hooks/tests/useRecordData.test.tsx
+++ b/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',
--- 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
@ -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}
-              onChange={(value) => onChange({ decimals: value })}
-              disabled={disabled}
-            ></SettingsDataModelFieldNumberDecimalsInput>
+            <>
+              <StyledFormCardTitle>Type</StyledFormCardTitle>
+              <Select
+                disabled={disabled}
+                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}
+              />
+            </>
          );
        }}
      />
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx
+++ b/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>
  );
 };
--- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
+++ b/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
--- a/packages/twenty-front/src/modules/ui/field/display/components/NumberDisplay.tsx
+++ b/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) => (
-  <EllipsisDisplay>
-    {value && formatNumber(Number(value), decimals)}
-  </EllipsisDisplay>
+export const NumberDisplay = ({ value }: NumberDisplayProps) => (
+  <EllipsisDisplay>{value}</EllipsisDisplay>
 );
--- a/packages/twenty-front/src/modules/views/utils/mapViewFieldsToColumnDefinitions.ts
+++ b/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);