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

fixing #7375

---------

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

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}
+              />
+            </>
           );
         }}
       />

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