feat: add Money field type in settings (#2405)

Closes #2346

front/src/modules/settings/data-model/components/SettingsObjectFieldPreview.tsx

@@ -4,12 +4,14 @@ import styled from '@emotion/styled';
 import { useRecoilState } from 'recoil';
 
 import { useFindManyObjects } from '@/metadata/hooks/useFindManyObjects';
+import { parseFieldType } from '@/metadata/utils/parseFieldType';
 import { Tag } from '@/ui/display/tag/components/Tag';
 import { useLazyLoadIcon } from '@/ui/input/hooks/useLazyLoadIcon';
 import { FieldDisplay } from '@/ui/object/field/components/FieldDisplay';
 import { FieldContext } from '@/ui/object/field/contexts/FieldContext';
 import { BooleanFieldInput } from '@/ui/object/field/meta-types/input/components/BooleanFieldInput';
 import { entityFieldsFamilySelector } from '@/ui/object/field/states/selectors/entityFieldsFamilySelector';
+import { FieldMetadataType } from '~/generated/graphql';
 import { assertNotNull } from '~/utils/assert';
 
 import { dataTypes } from '../constants/dataTypes';
@@ -137,7 +139,7 @@ export const SettingsObjectFieldPreview = ({
           value={{
             entityId: objects[0]?.id ?? objectNamePlural,
             fieldDefinition: {
-              type: fieldType,
+              type: parseFieldType(fieldType as FieldMetadataType),
               Icon: FieldIcon,
               fieldId: '',
               label: fieldLabel,

front/src/modules/settings/data-model/components/SettingsObjectFieldTypeSelectSection.tsx

@@ -64,7 +64,7 @@ export const SettingsObjectFieldTypeSelectSection = ({
         }),
       )}
     />
-    {['BOOLEAN', 'NUMBER', 'TEXT'].includes(fieldType) && (
+    {['BOOLEAN', 'MONEY', 'NUMBER', 'TEXT'].includes(fieldType) && (
       <StyledSettingsObjectFieldTypeCard
         preview={
           <SettingsObjectFieldPreview

front/src/modules/settings/data-model/components/__stories__/SettingsObjectFieldPreview.stories.tsx

@@ -24,14 +24,6 @@ type Story = StoryObj<typeof SettingsObjectFieldPreview>;
 
 export const Text: Story = {};
 
-export const Number: Story = {
-  args: {
-    fieldIconKey: 'IconUsers',
-    fieldLabel: 'Employees',
-    fieldType: 'NUMBER',
-  },
-};
-
 export const Boolean: Story = {
   args: {
     fieldIconKey: 'IconHeadphones',
@@ -40,6 +32,22 @@ export const Boolean: Story = {
   },
 };
 
+export const Currency: Story = {
+  args: {
+    fieldIconKey: 'IconCurrencyDollar',
+    fieldLabel: 'Amount',
+    fieldType: 'MONEY',
+  },
+};
+
+export const Number: Story = {
+  args: {
+    fieldIconKey: 'IconUsers',
+    fieldLabel: 'Employees',
+    fieldType: 'NUMBER',
+  },
+};
+
 export const CustomObject: Story = {
   args: {
     isObjectCustom: true,

front/src/modules/settings/data-model/constants/dataTypes.ts

@@ -1,11 +1,13 @@
 import {
   IconCheck,
+  IconCoins,
   IconLink,
   IconNumbers,
   IconPlug,
   IconTextSize,
 } from '@/ui/display/icon';
 import { IconComponent } from '@/ui/display/icon/types/IconComponent';
+import { Currency } from '~/generated-metadata/graphql';
 
 import { MetadataFieldDataType } from '../types/ObjectFieldDataType';
 
@@ -13,7 +15,14 @@ export const dataTypes: Record<
   MetadataFieldDataType,
   { label: string; Icon: IconComponent; defaultValue?: unknown }
 > = {
+  BOOLEAN: { label: 'True/False', Icon: IconCheck, defaultValue: true },
+  MONEY: {
+    label: 'Currency',
+    Icon: IconCoins,
+    defaultValue: { amount: 2000, currency: Currency.Usd },
+  },
   NUMBER: { label: 'Number', Icon: IconNumbers, defaultValue: 2000 },
+  RELATION: { label: 'Relation', Icon: IconPlug },
   TEXT: {
     label: 'Text',
     Icon: IconTextSize,
@@ -21,6 +30,4 @@ export const dataTypes: Record<
       'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum magna enim, dapibus non enim in, lacinia faucibus nunc. Sed interdum ante sed felis facilisis, eget ultricies neque molestie. Mauris auctor, justo eu volutpat cursus, libero erat tempus nulla, non sodales lorem lacus a est.',
   },
   URL: { label: 'Link', Icon: IconLink },
-  BOOLEAN: { label: 'True/False', Icon: IconCheck, defaultValue: true },
-  RELATION: { label: 'Relation', Icon: IconPlug },
 };

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

@@ -7,6 +7,7 @@ import { TableCell } from '@/ui/layout/table/components/TableCell';
 import { TableRow } from '@/ui/layout/table/components/TableRow';
 import { Field } from '~/generated-metadata/graphql';
 
+import { dataTypes } from '../../constants/dataTypes';
 import { MetadataFieldDataType } from '../../types/ObjectFieldDataType';
 
 import { SettingsObjectFieldDataType } from './SettingsObjectFieldDataType';
@@ -30,6 +31,9 @@ const StyledIconTableCell = styled(TableCell)`
   padding-right: ${({ theme }) => theme.spacing(1)};
 `;
 
+// TODO: remove "relation" type for now, add it back when the backend is ready.
+const { RELATION: _, ...dataTypesWithoutRelation } = dataTypes;
+
 export const SettingsObjectFieldItemTableRow = ({
   ActionIcon,
   fieldItem,
@@ -38,15 +42,12 @@ export const SettingsObjectFieldItemTableRow = ({
   const { Icon } = useLazyLoadIcon(fieldItem.icon ?? '');
 
   // TODO: parse with zod and merge types with FieldType (create a subset of FieldType for example)
-  const fieldDataTypeIsSupported = [
-    'TEXT',
-    'NUMBER',
-    'BOOLEAN',
-    'URL',
-  ].includes(fieldItem.type);
+  const fieldDataTypeIsSupported = Object.keys(
+    dataTypesWithoutRelation,
+  ).includes(fieldItem.type);
 
   if (!fieldDataTypeIsSupported) {
-    return <></>;
+    return null;
   }
 
   return (

front/src/modules/settings/data-model/types/ObjectFieldDataType.ts

@@ -1,5 +1,6 @@
 export type MetadataFieldDataType =
   | 'BOOLEAN'
+  | 'MONEY'
   | 'NUMBER'
   | 'RELATION'
   | 'TEXT'