admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
fixing #7375

---------

Co-authored-by: guillim <guillaume@twenty.com>
This commit is contained in:
Guillim
2024-11-14 14:23:25 +01:00
committed by GitHub
parent 090f612c4b
commit 15b8b9b158
18 changed files with 166 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

@ -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} />;
};

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

@ -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);
};

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

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

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

@ -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 =

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

@ -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 });
}

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

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

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

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

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

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

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

@ -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>
);
};

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

@ -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

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

@ -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>
);

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

@ -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);

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

@ -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>) {
if ('decimals' in settings) {
const { decimals } = settings;
private async validateNumberSettings(settings: any) {
try {
const settingsInstance = plainToInstance(SettingsValidation, settings);
if (
decimals !== undefined &&
(decimals < 0 || !Number.isInteger(decimals))
) {
throw new FieldMetadataException(
`Decimals value "${decimals}" must be a positive integer`,
FieldMetadataExceptionCode.INVALID_FIELD_INPUT,
);
}
await validateOrReject(settingsInstance);
} catch (errors) {
const errorMessages = errors
.map((error: any) => Object.values(error.constraints))
.flat()
.join(', ');
throw new FieldMetadataException(
`Value for settings is invalid: ${errorMessages}`,
FieldMetadataExceptionCode.INVALID_FIELD_INPUT,
);
}
}
}

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

@ -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 },
});

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

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

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

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