mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: Set field type icon as the default icon for new fields (#7352) (#7579)

Browse Source 
Closes #7352

**Summary**

Moved the `defaultIconsByFieldType` mapping from the
`SettingsObjectNewFieldConfigure` component to a separate constants
file. This change improves code organization and maintainability without
changing functionality.

**Changes Made**

- **Created a new constants file:** Added `FieldTypeIcons.ts`, located
in `src/pages/settings/data-model/constants/`, to store the mapping of
`FieldMetadataType` to default icons.
    
```
    // FieldTypeIcons.ts
    
    import { FieldMetadataType } from '~/generated-metadata/graphql';
    
    export const defaultIconsByFieldType: Record<FieldMetadataType, string> = {
      [FieldMetadataType.Address]: 'IconLocation',
      [FieldMetadataType.Boolean]: 'IconCheckbox',
      [FieldMetadataType.Currency]: 'IconCurrency',
      [FieldMetadataType.Date]: 'IconCalendar',
      [FieldMetadataType.DateTime]: 'IconClock',
      [FieldMetadataType.Email]: 'IconMail',
      [FieldMetadataType.FullName]: 'IconUser',
      [FieldMetadataType.Link]: 'IconLink',
      [FieldMetadataType.MultiSelect]: 'IconList',
      [FieldMetadataType.Number]: 'IconNumber',
      [FieldMetadataType.Phone]: 'IconPhone',
      [FieldMetadataType.Rating]: 'IconStar',
      [FieldMetadataType.RawJson]: 'IconCode',
      [FieldMetadataType.Relation]: 'IconRelationOneToMany',
      [FieldMetadataType.Select]: 'IconSelect',
      [FieldMetadataType.Text]: 'IconTypography',
      [FieldMetadataType.Uuid]: 'IconKey',
      [FieldMetadataType.Array]: 'IconCodeDots',
      [FieldMetadataType.Emails]: 'IconMail',
      [FieldMetadataType.Links]: 'IconLink',
      [FieldMetadataType.Phones]: 'IconPhone',
      [FieldMetadataType.Actor]: 'IconUsers',
      [FieldMetadataType.Numeric]: 'IconUsers',
      [FieldMetadataType.Position]: 'IconUsers',
      [FieldMetadataType.RichText]: 'IconUsers',
      [FieldMetadataType.TsVector]: 'IconUsers',
      // Add other field types as needed
    };
```
    
- **Updated the import in the component:** In the file
`SettingsObjectNewFieldConfigure.tsx`, imported the mapping from the new
constants file.
    
    
    ```// SettingsObjectNewFieldConfigure.tsx
    
import { defaultIconsByFieldType } from
'~/pages/settings/data-model/constants/FieldTypeIcons';
    
- **Adjusted form configuration:** Modified `defaultValues` in `useForm`
and `useEffect` to use the imported mapping.
    
```
    `const formConfig = useForm<SettingsDataModelNewFieldFormValues>({
      mode: 'onTouched',
      resolver: zodResolver(
        settingsFieldFormSchema(
          activeObjectMetadataItem?.fields.map((value) => value.name),
        ),
      ),
      defaultValues: {
        type: fieldType,
        icon: defaultIconsByFieldType[fieldType] || 'IconUsers',
        label: '',
        description: '',
      },
    });
    
    useEffect(() => {
      formConfig.setValue('icon', defaultIconsByFieldType[fieldType] || 'IconUsers');
    }, [fieldType, formConfig]);`

---------

Co-authored-by: Your Name <you@example.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
dostavic
2024-10-11 15:55:33 +02:00
committed by GitHub
parent ac380f183f
commit 4cc95d4794
2 changed files with 43 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
packages/twenty-front/src/pages/settings/data-model/constants/DefaultIconsByFieldType.ts Normal file
View File

@ -0,0 +1,27 @@
import { FieldMetadataType } from '~/generated-metadata/graphql';
export const DEFAULT_ICONS_BY_FIELD_TYPE: Record<FieldMetadataType, string> = {
[FieldMetadataType.Address]: 'IconMap',
[FieldMetadataType.Boolean]: 'IconToggleLeft',
[FieldMetadataType.Currency]: 'IconMoneybag',
[FieldMetadataType.Date]: 'IconCalendarEvent',
[FieldMetadataType.DateTime]: 'IconCalendarClock',
[FieldMetadataType.FullName]: 'IconUserCircle',
[FieldMetadataType.MultiSelect]: 'IconTags',
[FieldMetadataType.Number]: 'IconNumber9',
[FieldMetadataType.Rating]: 'IconStar',
[FieldMetadataType.RawJson]: 'IconBraces',
[FieldMetadataType.Relation]: 'IconRelationOneToMany',
[FieldMetadataType.Select]: 'IconTag',
[FieldMetadataType.Text]: 'IconTypography',
[FieldMetadataType.Uuid]: 'IconId',
[FieldMetadataType.Array]: 'IconBracketsContain',
[FieldMetadataType.Emails]: 'IconMail',
[FieldMetadataType.Links]: 'IconWorld',
[FieldMetadataType.Phones]: 'IconPhone',
[FieldMetadataType.Actor]: 'IconUsers',
[FieldMetadataType.Numeric]: 'IconUsers',
[FieldMetadataType.Position]: 'IconUsers',
[FieldMetadataType.RichText]: 'IconUsers',
[FieldMetadataType.TsVector]: 'IconUsers',
};